Nintendo

CSS custom properties (measured, --ncom-* namespace)

The live site uses the custom properties of Nintendo.com’s shared design system ncom; a complete definition set is visible on the Switch 2 page.

/* === Brand === */
--ncom-color-red:        #e60012;  /* signature red — CTAs and emphasis */
--ncom-color-deep-red:   #cf0001;  /* pressed state */

/* === Neutral === */
--ncom-color-white:      #fff;
--ncom-color-black:      #000;
--ncom-color-gray:       #c8c8c8;
--ncom-color-gray-100:   #f8f7f6;  /* lightest background */
--ncom-color-gray-300:   #e6e6e6;  /* mid grey */
--ncom-color-gray-500:   #d9d9d9;  /* slightly darker grey */
--ncom-color-blue-gray:  #e6e6e6;  /* cool-leaning grey (same value as gray-300) */

/* === Text === */
--ncom-color-heading:    #1b1b1b;  /* headings */
--ncom-color-txt:        #3c3c3c;  /* body */
--ncom-color-txt-sub:    #8c8c8c;  /* captions and meta */

/* === Accent === */
--ncom-color-gold:       #9d7c00;  /* premium accent */
--ncom-color-light-blue: #00a5e6;  /* functional accent */
--ncom-color-yellow:     #fff000;  /* alerts and highlights */
--ncom-color-chat:       #f58c14;  /* chat orange */
--ncom-color-share:      #08b3bf;  /* share teal */
--ncom-color-card:       #808088;  /* card hairline */

Primary (brand colours)

• Brand Red (#e60012): the signature red. CTA buttons, primary actions, emphasis.
• Deep Red (#cf0001): the follow-up colour for press and active states.

Text roles

• Heading (#1b1b1b): large headings — a black slightly softened from pure black.
• Text Primary (#3c3c3c): body copy, a grey-leaning black.
• Text Sub (#8c8c8c): captions, dates, metadata.

Background roles

• Page Bg (#ffffff): page background.
• Surface 100 (#f8f7f6): lightest beige surface — cards, section breaks.
• Surface 300 (#e6e6e6): mid grey — search box backgrounds and the like.
• Footer Bg (#f2f2f2): the footer, measured on the live site but never exposed as a custom property.

3.1 Japanese typefaces

Nintendo runs an unusually careful multi-layer stack: YakuHanJPs (a punctuation-only face) + Hiragino Kaku Gothic ProN + ncomJp.

• YakuHanJPs (punctuation only): an open-source face that draws full-width Japanese punctuation — 、。「」（） — at half width. It removes the awkward gaps that appear when Japanese and Latin text sit side by side.
• Hiragino Kaku Gothic ProN: the macOS and iOS standard Japanese gothic, and the main body face.
• ヒラギノ角ゴ ProN W3: the same face spelled in Japanese, carried as a fallback.
• ncomJp: a family name Nintendo defines itself, most likely a web font.
• Mincho: not used anywhere.

3.2 Latin typefaces

• Roboto (Google Fonts): the default sans for numerals and Latin text. Some places — the year-month heading on news pages at 38px — specify Roboto alone.
• Arial: observed as the browser default on a few form elements and buttons.

3.3 font-family declarations

The live custom properties:

/* main Japanese stack (ja) */
--ncom-ff-ja: "YakuHanJPs", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, "ncomJp", sans-serif;

/* Noto-based stack (noto) */
--ncom-ff-noto: "Noto Sans JP", "Roboto", Arial, "ncomJp", sans-serif;

/* Latin only (numerals, English) */
--ncom-ff-roboto: "Roboto", sans-serif;

The computed style on the real body inserts Roboto between the first two:

font-family: "YakuHanJPs", "Roboto", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, "ncomJp", sans-serif;

How the fallback is reasoned:

• YakuHanJPs first (it only affects punctuation) → Roboto (Latin) → Hiragino (Japanese). Three stages, each handled by a different face: punctuation, Latin, Japanese.
• This tidies the space around punctuation in mixed Japanese-Latin copy, and keeps Latin text unified under Roboto.
• Wherever only Latin characters can appear — the year-month heading on news pages, for example — the site specifies Roboto alone to cut font-loading cost.

3.4 Type scale and weights

3.5 Line height and tracking

• Body line-height 2.0 (32px / 16px) — well above the 1.6–1.8 industry average. Readability first, decisively.
• Heading line-height 1.8 (54 / 30, 28.8 / 16) — looser than the Japanese heading standard.
• News titles 1.6 (22.4 / 14) — to save space in a listing.
• letter-spacing: normal by default; headings take a small positive track of 0.03em–0.06em (0.9px on a 30px heading); a few nav items (“Game software”) are pulled to -0.7px, hand-tuned to the content.

Guidelines:

• Set body copy at × 2.0 — the generosity is the brand.
• Give headings a touch of positive tracking (around 0.03em) for legibility.
• Normal is enough most of the time. Do not reach for letter-spacing aggressively.

3.6 Line-breaking rules

/* No special declarations observed. Browser defaults plus YakuHanJPs punctuation widths do the work. */
word-break: normal;
overflow-wrap: normal;
line-break: auto;

Putting YakuHanJPs first makes 、。「」 render at half width, so both the line breaks and the rhythm of Japanese copy come out natural.

3.7 OpenType features

/* No explicit font-feature-settings (normal). */
/* Instead there is a custom token for leading-trim. */
--ncom-leading-trim: calc((1em - 1lh) / 2);

• palt is never enabled. Half-width punctuation is the font’s job here, not the CSS one.
• leading-trim (CSS half-leading removal) is defined as a first-class token, which is the unusual part: heading padding above and below is computed against 1lh automatically.

3.8 Vertical writing

Not used.

Buttons

Link Button (ncom-c-link-btn)

• Font size: 16px
• Font weight: 400
• Line height: 24px (×1.5)
• A wide, link-shaped button. White and transparent variants exist.

Pager Button (nc3-a-buttonPager)

• Background: #e60012 (brand red)
• Color: #e60012 — the text is red too; this is the active-state treatment
• Font family: Arial (system default)
• Font size: 13.3333px (browser default)
• Border radius: 0px

Search Box Button

• Background: #e6e6e6 (gray-300)
• Color: #b4b4b4
• Font size: 16px / 700
• Border radius: 2px

Header Nav Item (mega-drop trigger)

• Background: transparent
• Color: #3c3c3c
• Font size: 14px / 700
• Line height: 72px — matched to the header height

Links

• Default link: a standard underlined link. Brand red is not spent on ordinary links.
• Hover: opacity, underline or colour — the choice varies by location, there is no single rule.

Cards

The live site is card-driven throughout:

• News card: 14px title at 22.4px line-height (×1.6), a 16px date, and a 38px year-month in Roboto.
• Game card: image-first thumbnail, then title, then price.

There is no single generic card component. Each page carries its own dedicated class (switch2-classics-soft-heading-txt and so on).

Inputs

• The search box is flat: background #e6e6e6, border-radius 2px.
• Labels and placeholders run from #b4b4b4 to #8c8c8c.

Mega drop menu

Header items such as “Hardware & goods” and “Game software” open an enormous mega-drop on hover.

• Header height: 72px
• The mega-drop expands to full width as an overlay.

Header

• Height: 72px — identical to the nav line-height
• Background: white (transparent through to white)
• Contents: logo, primary nav, search, account, store
• Sticky: stays fixed while scrolling

Spacing scale

No explicit spacing tokens were found in the sampled range — spacing is defined per component.

Breakpoints

Touch targets

• Minimum 44 × 44px, per WCAG.
• Primary navigation in the header is 72px tall on desktop.

Type scaling

• On mobile the 30px heading drops to 22–24px and the 38px news year-month to roughly 28px.
• Body text stays at 16px, with line-height held between 1.8 and 2.0.