version: alpha name: Nintendo.com (2001) Analysis description: An analysis of Nintendo.com's 2001 design language — a brushed-periwinkle "console chrome" interface where every panel is a beveled metal plate, navigation glows amber over a halftone-dotted carbon bar, and bold outlined display type sits on circuit-board hero fields. A Y2K hardware aesthetic that treats the web page like the faceplate of a game system.

colors: primary: "#e60012" # Nintendo Red — racetrack logo, alert signal: "#f68d1f" # Signal Orange — forward cues, submit, "Play It On" amber: "#ecab37" # Amber — utility buttons, info-box tabs, badges nav-gold: "#e48600" # Nav Gold — top-nav menu links canvas: "#7a8aba" # Periwinkle metallic — primary interface body canvas-soft: "#9fbee7" # Pale Sky — secondary-nav strip, light inset panels sky: "#9fbee7" # Pale Sky alias lavender: "#acace7" # Pale Lavender — home hero field ice: "#c0d5e6" # Pale Ice — news hero field periwinkle: "#8ba1d4" # Light Periwinkle — raised mid panels chrome-indigo: "#3d4f97" # Chrome Indigo — beveled borders, tab edges muted-indigo: "#60619c" # Muted Indigo — inactive tabs, secondary chrome platinum: "#dedede" # Platinum Gray — list-row / inset content surface surface: "#ffffff" # White — content cards, list-row highlight carbon: "#21242e" # Carbon Navy — nav bar, dark buttons, footer, ink hairline: "#5a5f8c" # blended bevel divider ink: "#21242e" # primary text on light ink-soft: "#3d4f97" # secondary text / chrome labels on-primary: "#ffffff" # text on dark/red/orange chrome systems-teal: "#206479" # Systems hero circuit-board cyan games-red: "#a7282b" # Games F-1 racing hero error: "#e60012" # validation / destructive (shares brand red)

typography: nav-link: fontFamily: Arial fontSize: 13px fontWeight: 700 lineHeight: 1 letterSpacing: 0.5px ui-label: fontFamily: Arial fontSize: 11px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.5px display: fontFamily: Arial Black fontSize: 44px fontWeight: 900 lineHeight: 1 letterSpacing: 0 hero-tagline: fontFamily: Arial fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 body: fontFamily: Arial fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 link: fontFamily: Arial fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 micro: fontFamily: Arial fontSize: 10px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0

rounded: none: 0px xs: 2px sm: 4px md: 6px lg: 10px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 48px

components: nav-bar: backgroundColor: "{colors.carbon}" textColor: "{colors.nav-gold}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "{spacing.sm}" height: 28px subnav-strip: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.ui-label}" rounded: "{rounded.none}" padding: "{spacing.xs}" logo-pill: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.display}" rounded: "{rounded.full}" padding: "{spacing.xs}" button-primary: backgroundColor: "{colors.amber}" textColor: "{colors.carbon}" typography: "{typography.ui-label}" rounded: "{rounded.xs}" padding: "{spacing.md}" button-primary-pressed: backgroundColor: "{colors.nav-gold}" textColor: "{colors.carbon}" typography: "{typography.ui-label}" rounded: "{rounded.xs}" padding: "{spacing.md}" button-submit: backgroundColor: "{colors.signal}" textColor: "{colors.on-primary}" typography: "{typography.ui-label}" rounded: "{rounded.xs}" padding: "{spacing.lg}" button-secondary: backgroundColor: "{colors.carbon}" textColor: "{colors.on-primary}" typography: "{typography.ui-label}" rounded: "{rounded.none}" padding: "{spacing.md}" button-icon-arrow: backgroundColor: "{colors.signal}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" size: 22px button-arrow-chip: backgroundColor: "{colors.signal}" textColor: "{colors.on-primary}" rounded: "{rounded.xs}" padding: "{spacing.xs}" size: 18px search-field: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: "{spacing.xs}" height: 20px text-input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: "{spacing.xs}" height: 20px select-dropdown: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: "{spacing.xs}" height: 24px field-label: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.link}" rounded: "{rounded.none}" padding: "{spacing.xxs}" form-panel: backgroundColor: "{colors.platinum}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: "{spacing.lg}" dotted-divider: backgroundColor: "{colors.muted-indigo}" textColor: "{colors.muted-indigo}" rounded: "{rounded.none}" height: 1px hero-panel: backgroundColor: "{colors.lavender}" textColor: "{colors.surface}" typography: "{typography.display}" rounded: "{rounded.md}" padding: "{spacing.lg}" section-label-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.ui-label}" rounded: "{rounded.none}" padding: "{spacing.sm}" news-row: backgroundColor: "{colors.platinum}" textColor: "{colors.ink-soft}" typography: "{typography.link}" rounded: "{rounded.sm}" padding: "{spacing.sm}" featured-tile: backgroundColor: "{colors.carbon}" textColor: "{colors.on-primary}" typography: "{typography.micro}" rounded: "{rounded.sm}" padding: "{spacing.xxs}" poll-panel: backgroundColor: "{colors.periwinkle}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: "{spacing.md}" radio-option: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.full}" size: 12px info-box: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: "{spacing.md}" promo-card: backgroundColor: "{colors.lavender}" textColor: "{colors.ink}" typography: "{typography.display}" rounded: "{rounded.sm}" padding: "{spacing.md}" system-tile: backgroundColor: "{colors.periwinkle}" textColor: "{colors.ink}" typography: "{typography.ui-label}" rounded: "{rounded.sm}" padding: "{spacing.sm}" link-row-card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: "{spacing.sm}" calendar-widget: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.micro}" rounded: "{rounded.sm}" padding: "{spacing.sm}" left-rail-tab: backgroundColor: "{colors.carbon}" textColor: "{colors.canvas-soft}" typography: "{typography.ui-label}" rounded: "{rounded.none}" padding: "{spacing.xs}" footer-bar: backgroundColor: "{colors.carbon}" textColor: "{colors.canvas-soft}" typography: "{typography.micro}" rounded: "{rounded.none}" padding: "{spacing.lg}" esrb-badge: backgroundColor: "{colors.amber}" textColor: "{colors.carbon}" typography: "{typography.micro}" rounded: "{rounded.xs}" padding: "{spacing.xxs}" esrb-rating-square: backgroundColor: "{colors.surface}" textColor: "{colors.carbon}" typography: "{typography.ui-label}" rounded: "{rounded.xs}" size: 20px mascot-bubble: backgroundColor: "{colors.surface}" textColor: "{colors.carbon}" typography: "{typography.micro}" rounded: "{rounded.lg}" padding: "{spacing.sm}"

─── Examples (illustrative) — kit-mirror demonstration surfaces ───

ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.lg}" padding: "{spacing.md}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: "{spacing.md}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.md}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.md}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.sm} {spacing.md}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.ui-label}" bodyTypography: "{typography.body}" cellPadding: "{spacing.xs} {spacing.sm}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.md}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" padding: "{spacing.md}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.lg}" padding: "{spacing.xl}" captionTypography: "{typography.body}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.surface}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" typography: "{typography.body}"

概述

2001 年的 Nintendo.com 是把网页渲染成主机硬件的设计语言。在那个年代，大多数网站要么走颓废纹理风，要么走企业渐变风，而这个界面完全由拉丝浅紫蓝金属板构建——每一个区域都是一块独立的斜面面板，顶部有一条更亮的高光线，下方则是 {colors.chrome-indigo} 的阴影线，仿佛是用 Game Boy 同款的注塑塑料一体成型。整张页面读起来像一块完整的机器面板：{colors.canvas} 浅紫蓝框架托起一组组凹陷模块，而最大面板的角被物理性地切斜（以 45° 切掉），而非圆角，从而强化了那种"工业制成品"的质感。

整个系统运行在紧凑的三声部对比之上。结构声部是冷调的浅紫蓝至靛蓝金属（{colors.canvas}、{colors.periwinkle}、{colors.chrome-indigo}）。权威声部是 {colors.carbon} 炭黑深蓝——顶部导航栏、右侧操作按钮列以及页脚，这些近黑色平板上印着隐约的半色调点阵纹理，让人联想到扬声器面罩。活力声部是温暖色调，仅服务于一个目的：告诉你往哪里走。{colors.nav-gold} 点亮主菜单字，{colors.amber} 填充工具芯片和徽标，{colors.signal} 橙色标记每一个"前进"提示——圆形箭头按钮、每个标题旁的雪佛龙芯片、Submit 按钮。系统里的暖色永远意味着行动；冷色框架从不承载暖色。

氛围由首屏字段承担——它们以满幅的产品摄影覆盖在纹理化的背景上，打破了浅紫蓝的平静：Systems 上的电路板青色、Games 上的赛车红色动感模糊、Home 上的柔和薰衣草晕染，每一层上方都叠加着粗壮的 {typography.display} 标题字样，使用白色加粗描边与硬投影，这正是游戏盒封面文字的视觉签名。一个像素耳的 Mario 从页头探进来，带着"Welcome to Nintendo.com!"的对话气泡，将整台机器锚定在品牌俏皮的角色声音上。

核心特征：

• 每个 UI 区域都是 {colors.canvas} 浅紫蓝上的斜面金属板，顶部边缘高光，下方有 {colors.chrome-indigo} 阴影线——页面是组装出来的，不是排版出来的。
• 最大模块采用切角（斜切）面板几何；多数框架是锐利的（{rounded.none}），圆角仅留给 logo 药丸、单选圆点以及圆形箭头徽标（{rounded.full}）。
• 一个炭黑指令层（{colors.carbon}）带有半色调点阵纹理，承担顶部导航、右侧操作按钮列以及页脚。
• 暖色被严格保留为方向性信号：{colors.nav-gold} 用于菜单字，{colors.amber} 用于工具/徽标，{colors.signal} 用于每一个前进/Submit 提示。
• 摄影首屏字段按页面切换强调色调（首页 {colors.lavender} → Systems {colors.systems-teal} → Games {colors.games-red}），下方为带描边的 {typography.display} 盒装艺术标题。
• 紧密的模块化网格——页头、双导航条、首屏，再加一个三分之二的内容列（堆叠的列表/特性面板）紧邻三分之一右侧操作栏——以最小留白堆满信息。
• 角色驱动：Mario 吉祥物对话气泡页头与 ESRB 徽标将品牌个性与监管信任标记嵌入框架两端。

配色

这套调色板是一种冷调金属机壳配以克制的暖色信号。可以把它读成三层：浅紫蓝框架是所有东西的基底，炭黑指令平板，以及稳定态界面中唯一的饱和暖色指路点缀。

品牌与点缀

• Nintendo Red（{colors.primary} — #e60012）：跑道形 logo 字样以及品牌的锚定色调。仅作为纯粹的 brand identity 使用，并兼任校验/警示色。除了 logo 底板之外，从不作为表面填充。
• Signal Orange（{colors.signal} — #f68d1f）：代表"向前走"的颜色。填充每一个圆形箭头按钮、每个标题旁的雪佛龙芯片、Submit 按钮、以及 "Play It On" 平台徽标。任何引导你前进的元素都是橙色。
• Amber（{colors.amber} — #ecab37）：工具类能量色。填充 Code Bank / Game Finder / Go 芯片、信息框标题标签、抽奖星标以及 ESRB Privacy-Certified 徽标。它比 Signal Orange 更偏金黄，保留给工具与标记，而非前进动作。
• Nav Gold（{colors.nav-gold} — #e48600）：更深一层的橙金，仅用于在炭黑导航条上发光的主菜单词（Games、Systems、News、Nsider、Downloads）。

表面

• Periwinkle Metallic（{colors.canvas} — #7a8aba）：主界面主体——所有模块凹陷其中的拉丝金属框架。
• Light Periwinkle（{colors.periwinkle} — #8ba1d4）：抬升的中部面板（投票面板、系统卡片），比 canvas 亮一级以表达高度。
• Pale Sky（{colors.sky} / {colors.canvas-soft} — #9fbee7）：次级导航条与浅色凹陷面板的填充。
• Pale Lavender（{colors.lavender} — #acace7）：首页首屏字段以及侧边促销卡片。
• Pale Ice（{colors.ice} — #c0d5e6）：News 首屏面板字段。
• Chrome Indigo（{colors.chrome-indigo} — #3d4f97）：每块面板下方的斜面边框/阴影线，以及导航标签的导引斜边。
• Muted Indigo（{colors.muted-indigo} — #60619c）：未激活标签与凹陷框架。
• Platinum Gray（{colors.platinum} — #dedede）：列表行与凹陷内容的表面——新闻标题与存档行坐落在这层冷调铂金灰上。
• White（{colors.surface} — #ffffff）：内容卡片、表单字段、logo 药丸以及列表行高亮。

文字

• Carbon Navy（{colors.ink} — #21242e）：浅色框架上的主要文字，以及深色指令层（导航条、侧栏按钮、页脚）的填充。
• Chrome Indigo（{colors.ink-soft} — #3d4f97）：次级文字与小写字母框架标签。
• White（{colors.on-primary} — #ffffff）：在炭黑、红色与橙色框架上的文字。

语义色

• Error / Alert（{colors.error} — #e60012）：校验与破坏性状态复用品牌红。
• Systems Teal（{colors.systems-teal} — #206479）：页面强调色调——Systems 首屏的电路板青色字段。
• Games Red（{colors.games-red} — #a7282b）：页面强调色调——Games 首屏的赛车动感模糊字段。

字体排版

字体家族

那个年代网页安全的现实是清一色的 Arial / Helvetica——没有任何 web 字体。系统不从字体选择中获取性格，而是从处理方式：所有框架标签紧密的全大写字距，以及一种粗体描边带阴影的展示样式，用于模仿主机盒装艺术的标志字。正文是朴素的小号 Arial；链接使用同字族的粗体，颜色 {colors.ink-soft}。

小号标签（左侧竖排标签、页脚小字）渲染时带有该时期小号位图 Arial 的柔和像素感——为了忠实地复刻，可将 Arial 与一款像素字体配对，如 Silkscreen 或 VT323，使用 10–11px 标签尺寸。

层级

设计原则

• 全大写 + 字距是框架的声音。 每个结构标签——导航词、面板标题（"Official News"、"Featured Sites"、"Player's Poll"）、按钮文字——都是 Arial Bold 全大写，附加半像素字距。它读起来就像手柄上的丝印图例。
• 展示字体永远带描边，绝不平面化。 首屏字样始终带有粗壮的对比色描边和硬偏移阴影，以便从摄影字段上跳出来——这是盒装艺术的传统。
• 正文保持小而安静。 12px 的描述性文字绝不与框架竞争；层级完全由标签和摄影承担。

字体替换说明

Arial 在所有系统上均可自由获取，无需替代。要复刻该时期小标签的位图渲染效果，可在 10–11px 叠加一款像素字体（Silkscreen、VT323 或更粗犷的 Press Start 2P），并关闭抗锯齿。展示字样是定制标志字；最接近的开源替代是 Archivo Black（斜体化）或 Arial Black 配合 CSS text-stroke 描边与 text-shadow 偏移。

布局

间距系统

• 基础单位：8px（{spacing.sm}）——列表行与网格单元之间的列间距节奏。
• Token：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.section} 48px
• 面板带有 12px 内部内边距（{spacing.md}）；较大的内容模块使用 16px（{spacing.lg}）。模块之间间距 16–24px。布局刻意紧凑——留白是结构性的接缝，而非奢侈品。

网格与容器

• 固定宽度画布约 780–830px（桌面时代的固定表格布局，居中）。没有流式缩放——界面被尺寸化为一个应用窗口。
• 页头行：Mario 吉祥物 + 对话气泡（左）与搜索模块（右）悬浮在框架之上。
• 双导航条：炭黑主导航条（logo + 5 个区块词 + Code Bank / Game Finder 工具芯片）叠在浅紫蓝次级条（Parents、Customer Service、Corporate、Global、Privacy、Store、Contact）之上。
• 正文：全宽首屏面板，然后是两列分割——约三分之二内容列堆叠面板（Official News 列表、Featured Sites 2×2 网格等），旁边是约三分之一右侧操作栏（Login / Subscribe / Newsletter / Help 按钮、信息框、侧边促销卡片）。
• 左侧栏：一列细长的竖排标签（Top Ten、Top Rentals、Player's Choice、ESRB Ratings），裁切在框架边缘。

留白哲学

空白是工程化的接缝，不是呼吸空间。模块之间彼此紧贴，由细长的 {colors.chrome-indigo} 斜面线和几像素的 canvas 分隔，使眼睛将其读为一组组的金属板。密度是有意为之——让页面感觉像一面装满的控制面板，每样东西都一键可达。

响应式策略

断点

这是一套前响应式的固定画布设计。它是为单一桌面窗口尺寸编写的，不会重排。一个忠实的现代再实现应在桌面上保留固定框架隐喻，并在约 720px 以下将右侧操作栏堆叠到内容列之下，双导航条折叠为一条带菜单展开的炭黑条。

触控目标

在原始版本中不是考虑因素（鼠标时代）；按钮与芯片高度 18–28px。现代移植必须将 {components.button-primary}、{components.button-icon-arrow} 与 {components.radio-option} 的命中区域扩大至最小 44×44px。

折叠策略

在现代窄视口下：双导航条 → 单一炭黑条 + 菜单展开；两栏正文 → 单列堆叠，右侧栏移至内容下方；左侧竖排标签条 → 横向滚动芯片行或移除；固定首屏 → 流式满幅首屏，保留带描边的字样。

图像行为

首屏字段是裁切至面板斜面矩形内的满幅摄影板块；Featured-site 与游戏缩略图是约 95×60px 的固定像素缩略图，排成紧密网格。没有懒加载（那个年代还没有）。产品渲染图坐落在纹理背景上，而非透明抠图。

层次与深度

本系统的深度是物理斜面模拟，而非柔光阴影。没有模糊 drop-shadow 词汇；相反，每一块面板都被赋予"凸起的注塑塑料"的错觉。

装饰性深度

深度也由纹理与摄影承载：炭黑平板上的半色调点阵读起来像凹陷的扬声器面罩；首屏字段使用动感模糊、电路板图案以及自带投影的产品渲染来营造真正的画面深度；外壳 chrome 的切角让人联想到机加工面板的边缘。左侧竖排标签条看起来是"藏在"主 chrome 后面的——这是一个小但有效的分层提示。

形状

圆角尺度

系统的标志是锐利中点缀圆角。chrome 是硬边的，并且常常是斜切的（角以 45° 切掉而非弯曲）——这就是"机加工面板"的观感。圆角仅在标志物理控件的位置出现：完全药丸形的 logo、圆形单选按钮、圆形 Signal-Orange 箭头徽标。现代复刻应抵制把所有角都柔化的冲动；硬质面板与少量药丸元素之间的张力就是整套设计的精髓。

摄影几何

首屏摄影以约 4:1（横幅）和 16:9 比例填充斜面矩形，在面板内满幅。特色网站与游戏缩略图是接近 4:3 的固定缩略图（约 95×60px），四周带 1–2px {colors.chrome-indigo} 描边与 {rounded.sm} 圆角。吉祥物是透明的剪贴画，与页头叠加，打破矩形网格以呈现个性。

组件

未记录 hover 状态。下方每个规范涵盖默认与（提取出的）按下/激活态。变体作为独立的 components: 条目存在。

导航

nav-bar —— 顶部主导航

• {colors.carbon} 平板，带隐约的半色调点阵纹理，约 28px 高，左侧承载 {components.logo-pill}，中间是 5 个 {colors.nav-gold} 区块词（{typography.nav-link} 全大写），右侧是琥珀色 Code Bank / Game Finder 工具芯片。锐角（{rounded.none}），{spacing.sm} 内边距。

subnav-strip —— 次级导航

• 紧贴导航条下方的 {colors.canvas-soft} pale-sky 条带，承载工具链接（Parents、Customer Service、Corporate、Global、Privacy、Store、Contact），使用 {typography.ui-label} {colors.ink}，由细线分隔。锐角，{spacing.xs} 内边距。

left-rail-tab —— 竖排区块标签

• 一条细长的 {colors.carbon} 标签带（Top Ten、Top Rentals、Player's Choice、ESRB Ratings），标签文字 {typography.ui-label} {colors.canvas-soft} 竖向旋转，裁切在左侧 chrome 边缘。锐角，{spacing.xs} 内边距。

品牌与页头

logo-pill —— Nintendo 跑道 logo

• {colors.primary} 红色的字样设于白色 {rounded.full} 跑道药丸内，带描边。位于导航条左侧。{spacing.xs} 内边距。

mascot-bubble —— Mario 欢迎对话气泡

• 白色 {rounded.lg} 圆角矩形带尾巴的对话气泡，承载 "Welcome to Nintendo.com!" {typography.micro} {colors.carbon}，配 Mario 剪贴画。{spacing.sm} 内边距。

按钮

button-primary —— 琥珀色工具 / Go 芯片

• {colors.amber} 填充，{colors.carbon} 文字 {typography.ui-label}，{rounded.xs} 圆角，{spacing.md} 内边距，带斜面顶部高光。日常工具按钮（Code Bank、Game Finder、Go）。
• 按下态位于 button-primary-pressed——填充加深为 {colors.nav-gold}。

button-submit —— 前进 / Submit

• {colors.signal} 橙色填充，{colors.on-primary} 白色文字 {typography.ui-label}，{rounded.xs}，{spacing.lg} 内边距。"提交"动作（投票 Submit、存档页上的 Go）。

button-secondary —— 右侧操作栏按钮

• {colors.carbon} 近黑色平板，{colors.on-primary} 白色文字 {typography.ui-label}，锐角 {rounded.none}，{spacing.md} 内边距，带一个小的前置图标。用于右侧栏的 Login / Subscribe / Newsletter / Help。

button-icon-arrow —— 圆形前进箭头

• 22px {colors.signal} 橙色 {rounded.full} 圆盘，配白色雪佛龙——首屏面板与区块链接上的主"前进"元素。

button-arrow-chip —— 标题雪佛龙芯片

• 18px {colors.signal} 橙色 {rounded.xs} 芯片，配白色前进雪佛龙，位于每个 {components.news-row} 右侧以进入文章。

输入与表单

search-field —— 页头搜索输入

• 白色 {colors.surface} 字段，{colors.ink} 文字 {typography.body}，{rounded.xs} 圆角，1px {colors.hairline} 边框，约 20px 高，配一个 "All" 类别下拉与一个琥珀色 Go 芯片。

text-input —— 通用文本字段

• 与 search-field 同底盘：白色填充，{colors.ink} 文字，{rounded.xs}，{colors.hairline} 1px 边框，{spacing.xs} 内边距。用于 Login 表单（Username / Password / E-mail）、新闻存档关键字以及日期字段。

select-dropdown —— 原生下拉（"Click to choose"）

• 白色 {colors.surface} 字段，{colors.ink} 文字 {typography.body}，{rounded.xs} 圆角，1px {colors.carbon} 硬边框（比输入框更锐），右侧闭合一个斜面的原生下拉雪佛龙按钮。约 24px 高，{spacing.xs} 内边距。用于 Register 表单的 Month / Year 选择器。

field-label —— 行内表单标签

• 粗体 {colors.ink} 标签 {typography.link}（Arial Bold 12px）位于其输入框左侧（Username、Password、E-mail、Month、Year）。{rounded.none}，{spacing.xxs} 内边距。

radio-option —— 投票单选按钮

• 12px 白色 {rounded.full} 单选圆点，带 {colors.hairline} 描边，配 {typography.body} 选项文字。用于 Player's Poll。

form-panel —— 表单容器（Login / Register）

• {colors.platinum} 浅灰 {rounded.md} 面板，承载表单，顶部封以 {components.section-label-bar} 标题（≡ LOG IN / ≡ REGISTER）。{spacing.lg} 内部。Login 页面将两个并排放置。

dotted-divider —— 虚线细线

• 1px 虚线 {colors.muted-indigo} 分隔规则，用于表单子节之间（"Note:" 一行、"Forgot Your Password?"）。反复出现的 Y2K chrome 细节——虚线而非实线。

卡片与面板

hero-panel —— 摄影首屏板块

• {rounded.md} 斜面矩形，填充满幅产品摄影，下方为页面着色的字段（{colors.lavender} / {colors.systems-teal} / {colors.games-red}），顶部为带描边的 {typography.display} 字样与一个 {components.button-icon-arrow} 行动号召。{spacing.lg} 内部。

section-label-bar —— 面板标题

• {colors.canvas} 标题条，配小型网格/列表字形与大写 {typography.ui-label} 标题（"Official News"、"Featured Sites"、"Player's Poll"）。锐角，{spacing.sm} 内边距。封顶每一个内容模块。

news-row —— 标题列表行

• {colors.platinum} {rounded.sm} 行，带小型类别图标、{typography.link} 标题 {colors.ink-soft}，以及尾部的 {components.button-arrow-chip}。{spacing.sm} 内边距。堆叠进 Official News / Other Headlines 列表。

featured-tile —— 特色网站缩略图

• {colors.carbon} 边框的 {rounded.sm} 缩略图（约 95×60px），承载屏幕截图缩略图与 {typography.micro} URL 说明（如 www.pokemon.com）。紧凑的 {spacing.xxs} 内边距，排成 2×2 网格。

poll-panel —— Player's Poll 模块

• {colors.periwinkle} 抬升的 {rounded.md} 面板，提出一个问题，列出 {components.radio-option} 选项，最后是一个 {components.button-submit}。{spacing.md} 内部。

info-box —— "What Is" 说明卡

• 白色 {colors.surface} {rounded.sm} 卡片，带琥珀色标题标签（如 "What Is — Game Finder"）与 {typography.body} 说明文案。{spacing.md} 内边距。位于右侧栏。

promo-card —— 侧边产品促销

• {colors.lavender} {rounded.sm} 卡片，承载带描边的产品字样（如 Game Boy Advance）配小型产品渲染图，位于右侧栏。{spacing.md} 内边距。

system-tile —— 硬件网格卡片（Systems 页）

• {colors.periwinkle} {rounded.sm} 卡片，承载电路板背景上的主机渲染图与带描边的系统名（Nintendo 64、Super Nintendo、Game Boy）。{spacing.sm} 内边距，排成 2×3 网格。

link-row-card —— 工具链接卡（Systems 页）

• 白色 {rounded.sm} 卡片，带琥珀色标签（Technical Help、Store Locator、Online Store）、角色图标与一行 {typography.body} 描述。{spacing.sm} 内边距。

calendar-widget —— 月历（News 页）

• 白色 {rounded.sm} 网格月历，使用 {typography.micro}，带 {colors.carbon} 说明标题（如 "June 01"）、高亮事件日期与月份下拉。{spacing.sm} 内边距。

徽标与页脚

esrb-badge —— ESRB Privacy-Certified 标记

• 小型 {colors.amber} {rounded.xs} 徽标，文字 "ESRB — Privacy Certified" {typography.micro} {colors.carbon}，钉在页脚。

esrb-rating-square —— 游戏内容评级方块

• 20px 白色 {rounded.xs} 方块，盖印内容评级字母（E、T）使用 {typography.ui-label} {colors.carbon}，置于每个游戏卡片上。

footer-bar —— 页脚

• {colors.carbon} 切角平板，承载 "©1997–2001 Nintendo…" 版权 {typography.micro} {colors.canvas-soft}、ESRB 徽标与隐私链接。锐角，{spacing.lg} 内边距。

示例（示意）

套件镜像演示表面。每个 ex-* 条目引用品牌原生原语，以便下游消费者（/preview-design、/generate-kit）以一致的方式重新着色相同的 10 个表面。

ex-pricing-tier —— 默认 Pricing 层级卡片。复用 feature-card chrome，使用品牌 canvas-soft 表面。

• 属性：backgroundColor、textColor、borderColor、rounded、padding

ex-pricing-tier-featured —— 特色/高亮层级——极性翻转表面（浅色模式下深色填充 + 浅色文字；深色模式下浅色填充 + 深色文字）。

• 属性：backgroundColor、textColor、rounded、padding

ex-product-selector —— What's Included 摘要卡——改造为 SaaS / B2B 行业（并非字面意义上的产品画廊）。

• 属性：backgroundColor、rounded、padding

ex-cart-drawer —— 订阅摘要——改造为 SaaS / B2B（每个附加项作为一行项目，而非字面意义上的购物车）。

• 属性：backgroundColor、rounded、padding、item-divider

ex-app-shell-row —— App Shell 示例内的侧边栏导航行。激活态使用品牌主色作为指示。

• 属性：backgroundColor、activeIndicator、rounded、padding

ex-data-table-cell —— 默认数据表 th + td chrome。表头使用 mono-caps eyebrow 字体；正文使用 body-sm。

• 属性：headerBackground、headerTypography、bodyTypography、cellPadding、rowBorder

ex-auth-form-card —— 登录/注册卡片。复用 feature-card chrome，内含 text-input 原语。

• 属性：backgroundColor、rounded、padding

ex-modal-card —— 模态对话框表面——与 feature-card 相同的 chrome，带抬升阴影。

• 属性：backgroundColor、rounded、padding

ex-empty-state-card —— 空状态插画框。

• 属性：backgroundColor、rounded、padding、captionTypography

ex-toast —— Toast 通知表面——feature-card 形态 + 中等阴影。

• 属性：backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 将每个区域构建为斜面金属板：{colors.canvas} 主体 + 更亮的顶部边 + 下方的 {colors.chrome-indigo} 阴影线。"组装机器"的观感依赖于此。
• 将暖色严格保留给指路——{colors.nav-gold} 用于导航词，{colors.amber} 用于工具/徽标，{colors.signal} 用于前进/Submit。冷色框架从不承载动作色。
• 结构标签保持全大写 Arial Bold 加 0.5px 字距（{typography.ui-label}）——这是整个系统的丝印图例声音。
• 首屏字样渲染为带描边 + 投影的 {typography.display}，覆盖在按页面着色的满幅摄影字段上。
• 使用带半色调纹理的 {colors.carbon} 作为指令层（导航、右侧栏、页脚），将"系统控件"与"内容"区分开。
• 让面板紧贴在一起，只留细长的斜面接缝；密度是有意为之的纹理。
• 默认角为锐利/斜切（{rounded.none}）；圆角只给 logo 药丸、单选圆点与圆形箭头徽标。

避免

• 不要把所有角都柔化——把硬质 chrome 变成统一的圆角卡片系统会抹掉"机加工面板"的辨识度。
• 不要引入柔和模糊的 drop-shadow 层次语言；这里的深度是硬质斜面与画面摄影，而不是 Material elevation。
• 不要让 {colors.signal} 与 {colors.amber} 蔓延到装饰性用途——暖色必须始终意味着"在这里操作"。
• 不要在页面首屏色调（{colors.systems-teal}、{colors.games-red}）之外添加点缀色；稳定态 chrome 严格只使用冷调浅紫蓝 + 炭黑。
• 不要把正文或留白扩展成通透的现代布局；紧凑的、固定画布的密度才是品牌。
• 不要把双层导航结构（炭黑主词叠在浅色次级条上）扁平化为一条——分层指令层级是设计签名。
• 不要把首屏或系统字样渲染成纯平面文字；没有描边 + 阴影就丢失了盒装艺术的引用。