version: alpha name: Dell 1996 Inspired description: An inspired interpretation of Dell.com's 1996 design language — a catalog-era enterprise web design built around a literal black page frame, vivid flat color-block "ribbon cards" tinted in sage, salmon, periwinkle, sky, peach and lime, chunky Helvetica-Black display titles, Times Roman body copy, and an entire visual vocabulary of pre-Photoshop hand-cut GIF stickers (NEW! bursts, award seals, beveled product photos).

colors: primary: "#e91d2a" on-primary: "#ffffff" canvas: "#ffffff" surface: "#ffffff" ink: "#000000" frame-ink: "#000000" yellow-sticker: "#fcc20f" purple-stripe: "#6a26a4" link: "#0000ee"

Ribbon-card tint family (one per product line)

tint-olive: "#8e8a25" tint-sage: "#b3bd95" tint-salmon: "#d77a7a" tint-peach: "#e6915d" tint-lime: "#c0d4a7" tint-sky: "#9ab6c8" tint-steel: "#a5b8c0" tint-periwinkle: "#8c9ae0"

typography: display: fontFamily: Arial Black fontSize: 36px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0 heading-1: fontFamily: Arial Black fontSize: 24px fontWeight: 900 lineHeight: 1.05 letterSpacing: 0 heading-2: fontFamily: Helvetica fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0 heading-3: fontFamily: Helvetica fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0 body: fontFamily: Times New Roman fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body-sm: fontFamily: Times New Roman fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 caption: fontFamily: Times New Roman fontSize: 11px fontWeight: 400 lineHeight: 1.35 letterSpacing: 0 button: fontFamily: Helvetica fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0 link: fontFamily: Times New Roman fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 ui-label: fontFamily: Helvetica fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0

rounded: none: 0px full: 9999px

spacing: xxs: 2px xs: 4px s: 6px sm: 8px m: 10px md: 12px lg: 16px xl: 20px xxl: 24px section-sm: 32px section: 40px section-lg: 48px

components:

─── Brand-native components ───

page-frame: backgroundColor: "{colors.frame-ink}" textColor: "{colors.canvas}" rounded: "{rounded.none}" padding: 8px

top-banner: backgroundColor: "{colors.frame-ink}" textColor: "{colors.canvas}" typography: "{typography.heading-2}" rounded: "{rounded.none}" padding: 12px 16px

section-eyebrow-olive: backgroundColor: "{colors.tint-olive}" textColor: "{colors.ink}" typography: "{typography.display}" rounded: "{rounded.none}" padding: 24px 16px

section-eyebrow-salmon: backgroundColor: "{colors.tint-salmon}" textColor: "{colors.ink}" typography: "{typography.display}" rounded: "{rounded.none}" padding: 24px 16px

ribbon-card-title: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.heading-3}" rounded: "{rounded.none}" padding: 6px 12px

ribbon-card-body-sage: backgroundColor: "{colors.tint-sage}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

ribbon-card-body-salmon: backgroundColor: "{colors.tint-salmon}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

ribbon-card-body-peach: backgroundColor: "{colors.tint-peach}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

ribbon-card-body-lime: backgroundColor: "{colors.tint-lime}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

ribbon-card-body-sky: backgroundColor: "{colors.tint-sky}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

ribbon-card-body-steel: backgroundColor: "{colors.tint-steel}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

ribbon-card-body-periwinkle: backgroundColor: "{colors.tint-periwinkle}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 12px 16px

cta-block-red: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 16px

phone-callout: backgroundColor: "{colors.frame-ink}" textColor: "{colors.primary}" typography: "{typography.heading-2}" rounded: "{rounded.none}" padding: 4px 8px

buy-a-dell-sticker: backgroundColor: "{colors.yellow-sticker}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 4px 8px

new-burst-sticker: backgroundColor: "{colors.yellow-sticker}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 4px 8px

cert-seal: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button}" rounded: "{rounded.full}" size: 64px

icon-label-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.ui-label}" rounded: "{rounded.none}" padding: 8px

text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 4px 6px

button-primary: backgroundColor: "{colors.frame-ink}" textColor: "{colors.on-primary}" borderColor: "{colors.frame-ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 6px 16px

button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 6px 16px

button-text-link: backgroundColor: "{colors.canvas}" textColor: "{colors.link}" typography: "{typography.link}" rounded: "{rounded.none}"

footer-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" typography: "{typography.body-sm}" padding: 16px

─── Examples (illustrative, kit-mirror) — injected by derive-examples-block.mjs ───

─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ───

ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with the base white surface." backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.frame-ink}" rounded: "{rounded.none}" padding: "{spacing.lg}" 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.none}" padding: "{spacing.lg}" 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.none}" padding: "{spacing.lg}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.surface}" rounded: "{rounded.none}" padding: "{spacing.lg}" item-divider: "{colors.frame-ink}" 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.none}" 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.surface}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.s} {spacing.md}" rowBorder: "{colors.frame-ink}" 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.none}" padding: "{spacing.lg}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.surface}" rounded: "{rounded.none}" padding: "{spacing.lg}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.surface}" rounded: "{rounded.none}" padding: "{spacing.xl}" captionTypography: "{typography.body}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.surface}" rounded: "{rounded.none}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}"

概览

Dell 1996 年 12 月的主页是一块保存完好的目录时代企业网页设计化石 —— 那是 Fortune 100 品牌决定认真投入 Web 的时刻，但还在 CSS 被广泛采用的两年前、"设计系统"成为任何人用语的三年后。页面上的每一个视觉选择都是该约束的下游结果：通过 HTML 表格做布局、通过浏览器内置字体栈（Arial Black / Helvetica / Times Roman）做字体、通过 8 位安全色扁平填充做颜色、通过手工切割的 GIF "贴纸"做装饰（NEW! 爆炸贴、PC Magazine Readers' Choice 圆形奖章、斜角的"BUY a DELL"黄色标签）。页面被框住 —— 字面上用一个 1 单元格宽的黑色 HTML 表格框住 —— 在这个框内，每个产品线获得一张"缎带卡"：白色标题栏带一条锋利的黑色下划线、一个八种目录色之一的染色色块（鼠尾草绿、鲑鱼粉、桃色、青柠、天蓝、钢蓝、长春花、橄榄），以及一张斜角的产品照片嵌入卡片的右边缘。

品牌声调通过两个锚点传递：主页左侧的鲜艳 Dell 红 CTA 面板（{colors.primary} 填充上的奶黄 Times Roman 文字，置于黑框内）和一个尖叫的红色电话号码 —— 1-800-213-DELL —— 钉在每个页面的右上角，因为在 1996 年网站是一本以电话订购结尾的宣传册。页脚是一行四个手绘图标标签（FIND / HOME / ONLINE STORE / SERVICE & SUPPORT），由一条细的绿色水平线连接，上方是经典的 Mosaic 蓝下划线 "Copyright" 链接，再往上是 Times Roman 的法律小字。

关键特征：

• 字面的页面框：每个页面都坐在 {colors.frame-ink}（黑）外边框内，约 8px 厚 —— 设计将浏览器窗口当作印刷画框
• 每个产品家族用专用目录色（{colors.tint-sage} Latitude、{colors.tint-salmon} OptiPlex GX、{colors.tint-periwinkle} PowerEdge、{colors.tint-sky} Dellware 等）扁平色块"缎带卡"染色 —— 无渐变、无阴影、无透明度
• 粗展示字 {typography.display}（Arial Black 36 / 900）用于章节标题块；{typography.heading-2}（Helvetica Bold 16）用于产品行标题；其他一切用 {typography.body} Times Roman 14
• 手工切割的 GIF "贴纸"叠加在布局上：右上角的黄色 "BUY a DELL" 标签、新产品行上的斜角 "NEW!" 爆炸贴、圆形红色 PC Magazine Readers' Choice 奖章
• {colors.primary}（Dell 红）仅用于两处：主页 CTA 面板和右上角电话号码 —— 从不作装饰用
• 页脚图标导航配经典蓝（{colors.link} #0000ee）下划线 —— 标志性的 Netscape 3.x 链接色

配色

品牌与点缀

• Dell 红（{colors.primary} — #e91d2a）：品牌标志性红色。留给主页 CTA 面板（"At Dell.com, we'll help you find the right system…"）、右上角电话号码和 PC Magazine Readers' Choice 奖章环。从不用作卡片底色。
• Dell 黄（{colors.yellow-sticker} — #fcc20f）：贴纸黄 —— 顶部的 "BUY a DELL" 标签，以及新产品行上叠加的斜角 "NEW!" 爆炸贴。
• Dell 紫（{colors.purple-stripe} — #6a26a4）：小写 ".com" / "DELL" 字标文字背后的点缀条纹 —— 仅在 "BUY a DELL" 贴纸外壳内出现。

表面

• 框墨（{colors.frame-ink} — #000000）：纯黑。页面框、顶部横幅背景、按钮填充，以及所有 1px 缎带卡细线。
• 画布（{colors.canvas} — #ffffff）：框内的真白。页面表面、缎带卡标题栏填充、图标标签导航底色。

文字

• 主墨（{colors.ink} — #000000）：正文、标题、访问前的链接文字。纯黑；1996 年没有暖近黑柔化。
• 链接（{colors.link} — #0000ee）：经典 Mosaic / Netscape 3.x 默认链接蓝。下划线行内锚（"Copyright"、"(Terms of Use)"、行内 "from Dell's award-winning service and support teams"）。

缎带卡染色家族

八种目录色，每种对应一个产品线 —— 这是页面的色彩个性：

• 橄榄（{colors.tint-olive} — #8e8a25）："DIMENSION DESKTOPS" 眉板块
• 鼠尾草（{colors.tint-sage} — #b3bd95）：Latitude Notebooks 缎带身
• 鲑鱼（{colors.tint-salmon} — #d77a7a）："OPTIPLEX DESKTOP SYSTEMS" 眉板 + GX Series 身
• 桃（{colors.tint-peach} — #e6915d）：Dimension 卡身 + OptiPlex Gs 身
• 青柠（{colors.tint-lime} — #c0d4a7）：OptiPlex G Series 身
• 天蓝（{colors.tint-sky} — #9ab6c8）：Dellware 缎带身
• 钢蓝（{colors.tint-steel} — #a5b8c0）：Dimension XPS Pro 缎带身
• 长春花（{colors.tint-periwinkle} — #8c9ae0）：PowerEdge 缎带身

染色饱和但不鲜艳 —— 位于真正中性色度以下，是 GIF 时代 web-safe 调色板量化的特征。

字体

字体族

三个系统栈家族，无 webfont（webfont 当时还不存在）：

• Arial Black（降级：Helvetica、system-ui sans）—— 仅展示标题。粗模板化的章节眉板（"DIMENSION DESKTOPS"、"OPTIPLEX DESKTOP SYSTEMS"）是 Arial Black 900，全大写、字距正常。
• Helvetica（降级：Arial、system-ui sans）—— 产品行标题、按钮标签、顶部横幅的 "BUILD YOUR OWN COMPUTER. ONLINE." 标题。始终粗体（700），始终全大写。
• Times New Roman（降级：Times、serif）—— 正文。每个段落、每个说明、每个行内锚都用默认渲染的 Times Roman。衬线立即标定时代 —— 现代网页正文几乎从不用衬线。

层级

原则

• 无衬线用于 UI、衬线用于正文 —— 与现代约定相反，是 90 年代中期的死标志。
• 展示字重极端（900 / Black）且从不更轻。"Dimension" / "OptiPlex" 眉板依赖字体自带的最高字重。
• 无字距调整 —— 1996 年的像素字体不奖励它。一切按浏览器默认字距设置。
• 展示行高紧（1.0），正文行高常规（1.4）—— 印刷杂志目录布局的遗风。

字体替代说明

三个家族在 1996 年出货的每个消费 OS 上都是系统默认字体（Windows 95：Arial / Times New Roman；Mac OS 7.5+：Helvetica / Times）。品牌没有替代策略，因为不需要替代 —— 字体始终存在。现代复刻可以保持这个完全相同的字体栈（Arial Black / Helvetica / Times New Roman）以确保原真。

布局

间距系统

• 基础单位：4px（中间有 2 / 6 / 10）。1996 年的页面布局由 HTML 表格单元格内边距（cellpadding="4" / cellspacing="0"）驱动，而非设计的等级。
• Token：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.s} 6px · {spacing.sm} 8px · {spacing.m} 10px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 20px · {spacing.xxl} 24px · {spacing.section-sm} 32px · {spacing.section} 40px · {spacing.section-lg} 48px。
• 卡片内边距：缎带卡身上 {spacing.md} 12px 垂直 / {spacing.lg} 16px 水平。
• 章节垂直节奏：产品缎带栈间 {spacing.section} 40px；眉板色块和其首个缎带卡间 {spacing.section-sm} 32px。

网格与容器

• 固定宽表格布局，固定在约 760px 宽 —— 1996 年针对 800×600 显示器（含小滚动条间距）的实际标准。
• 两列外结构：左栏（约 28%）承载主页图标链接栅格 + CTA 红色面板；右列（约 72%）承载产品缎带栈。
• 现代意义上没有网格系统 —— 每个章节都是自己的 <table> 声明，带硬编码列宽。

留白哲学

按现代标准很紧。目录密度胜过编辑呼吸 —— 黑框内的每个像素都在起作用（插图、色块、标题、正文）。补偿性的减压发生在每个缎带卡内部：白色标题栏 + 染色色块 + 产品照片凹口制造内部呼吸空间，而不扩大整页。

响应式策略

断点

触控目标

1996 年没有触控概念 —— 原始设计假设仅鼠标。现代复刻需要把图标标签导航目标宽度扩到 44 × 44px 最小（手机端），1996 年的图标约 24 × 24 加 8px 标签，远低于现代标准。

折叠策略

• 在 ≤ 768px，主页左栏图标链接栅格（Online Store / Service / Why Dell? / Government / Worldwide / Order Status / Company Info / U.S. Careers）从 2 × 4 栅格折为单列堆叠
• 缎带卡右缘产品照片凹口在手机上变为顶部对齐的全宽图像
• 顶部横幅的标语（"BUILD YOUR OWN COMPUTER. ONLINE."）缩一级；电话号码在 BUY-a-DELL 贴纸下方换行
• 页脚图标标签导航保持 4 列所有宽度 —— 图标足够小能撑住

图片行为

产品照片是手工施加斜角阴影的位图 GIF —— 它们以固定像素宽度创作（通常 80–120px 宽）。右缘凹口效果通过表格单元格负间距实现。现代复刻应保持斜角阴影效果（这是标志性的）但用 SVG drop-shadow 或 CSS filter: drop-shadow(2px 2px 0 #000) 在高 DPI 下重新清晰创建。

层次与深度

1996 年的设计中没有软阴影 —— 每个深度线索要么是硬 1px 边框，要么是 GIF 内手绘的斜角。需要保持时代真实感的现代复刻必须忍住添加 Material 风格层次或氛围投影的冲动。

装饰性深度

斜角和框承担整个深度词汇：

• 页面框是最强的深度线索 —— 它告诉观看者"这是一个被包含的文档，不是连续的画布"。
• 贴纸上的斜角（BUY a DELL、NEW!、PC Magazine Readers' Choice）把它们推离页面表面，仿佛用图钉钉上。
• 产品照片自带手绘斜角 + 投影，已烘焙到 GIF 自身中。

形状

圆角等级

1996 年的设计实际上有两种圆角模式：方形（一切）和圆形（装饰奖章贴纸）。没有 4 / 8 / 12px 微妙圆角档 —— 那个词汇属于后 Bootstrap 时代。

摄影几何

产品照片是矩形 GIF，自带内部斜角"显示器"框 —— 它们以原生像素尺寸存在，从不缩放。宽高比集中在 4:3（该时代标准 CRT 形状）。这个网站不存在头像 —— 员工摄影留给未在这些截图中捕获的 "About Dell" 页面。

组件

未文档化任何悬停态。 根据全局无悬停策略，下面每个组件仅文档化默认态。

框与横幅

page-frame —— 整个视口周围的字面黑色边框。

• 底色 {colors.frame-ink}，内边距 {spacing.sm} 8px 在每边，无圆角。
• 页面位于此框内部。将其视为不可协商的容器外壳；在手机上可接受折叠（约 4px），但完全删除会失去品牌。

top-banner —— 跨越顶部的纯黑条带，带白色 "BUILD YOUR OWN COMPUTER. ONLINE." 标题 + 子标语，右侧钉着黄色 "BUY a DELL" 贴纸，以及红色 "1-800-213-DELL" 电话号码。

• 底色 {colors.frame-ink}，文字 {colors.canvas}，字体 {typography.heading-2}，内边距 12px 垂直 / 16px 水平，无圆角。

章节眉板块

section-eyebrow-olive —— 大型染色色块，承载粗模板化的章节标题（"DIMENSION DESKTOPS"）。用于 Dimension 产品页顶部。

• 底色 {colors.tint-olive}，文字 {colors.ink}，字体 {typography.display}（Arial Black 36 / 900），内边距 24 × 16，无圆角。

section-eyebrow-salmon —— 同一外壳配 OptiPlex 线的鲑鱼粉填充（"OPTIPLEX DESKTOP SYSTEMS"）。

• 底色 {colors.tint-salmon}，其他与橄榄变体相同。

缎带卡

品牌的标志组件。每个产品行"卡片"是三块堆叠：

1. ribbon-card-title —— 白色水平标题栏，产品型号名为 Helvetica Bold 全大写（如 "OPTIPLEX GX PRO"、"DIMENSION XPS"、"POWEREDGE SERVERS"）。1px 底边框 {colors.frame-ink}。
   • 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.heading-3}，内边距 6 × 12，无圆角。
2. ribbon-card-body-<tint> —— 八种染色之一的色块身，承载 {typography.body}（Times Roman 14）中的简短营销口号。内边距 12 × 16。产品照片凹入右缘，带透明 GIF 切口。
3. 照片凹口 —— GIF 位于行最右约 25%，略微悬挂于色块上下，像钉在软木板上的卡片。

每种染色变体是其独立的组件条目。选择匹配产品家族的那个：

• ribbon-card-body-sage —— {colors.tint-sage} 填充，用于 Latitude Notebooks 行
• ribbon-card-body-salmon —— {colors.tint-salmon} 填充，用于 OptiPlex GX Series 行
• ribbon-card-body-peach —— {colors.tint-peach} 填充，用于 Dimension 行和 OptiPlex Gs
• ribbon-card-body-lime —— {colors.tint-lime} 填充，用于 OptiPlex G Series 行
• ribbon-card-body-sky —— {colors.tint-sky} 填充，用于 Dellware 行
• ribbon-card-body-steel —— {colors.tint-steel} 填充，用于 Dimension XPS Pro 行
• ribbon-card-body-periwinkle —— {colors.tint-periwinkle} 填充，用于 PowerEdge Server 行

全部七种共享相同外壳：1px solid {colors.frame-ink} 边框，{spacing.md} × {spacing.lg}（12 × 16）内边距，{rounded.none}（锋利角），内部 {typography.body} Times Roman 14。仅填充色按产品家族改变。

行动号召

cta-block-red —— 主页的鲜艳 Dell 红面板（"At Dell.com, we'll help you find the right system, configure it, price it, and order it…"）。

• 底色 {colors.primary}，文字 {colors.on-primary}（白），1px solid frame-ink 边框，字体 {typography.body}（Times Roman 14），内边距 16px，无圆角。
• 每页最多一个。品牌最激进的注意力抓取 —— 除了顶级销售信息外绝不使用。

phone-callout —— 右上角电话号码（"1-800-213-DELL"）以红色渲染在黑色横幅上。

• 底色 {colors.frame-ink}，文字 {colors.primary}，字体 {typography.heading-2} Helvetica Bold 16，内边距 4 × 8，无圆角。钉在每页顶部横幅右侧。

贴纸（GIF 风格叠加）

buy-a-dell-sticker —— 黄色矩形贴纸，"BUY a DELL" 以 Helvetica Bold 渲染，"a" 设置在小紫色条纹上，"DELL" 字标为黑色。钉在每页右上角。

• 底色 {colors.yellow-sticker}，文字 {colors.ink}，1px 黑色边框，字体 {typography.button}，内边距 4 × 8，无圆角。

new-burst-sticker —— 斜角黄色爆炸贴，黑色 Helvetica Bold "NEW!"，叠加在新品缎带卡的右侧。轻微旋转（约 15°）带来"用胶带贴上"的感觉。

• 底色 {colors.yellow-sticker}，文字 {colors.ink}，字体 {typography.button}，内边距 4 × 8，无圆角（旋转单独施加）。

cert-seal —— 圆形红色奖章：中心读 "PC MAGAZINE"，环绕 "SERVICE · RELIABILITY · READERS' CHOICE"，内部白色场地和红色边框环。位于产品页右栏。

• 底色 {colors.primary}，文字 {colors.canvas}，字体 {typography.button}，圆角 {rounded.full}，64px 尺寸。

导航

icon-label-nav —— 页面底部导航行：四个手绘图标（眼镜-FIND / 房子-HOME / 黄色贴纸-ONLINE STORE / 扳手-SERVICE & SUPPORT），由细绿水平线连接，每个下方有大写 Helvetica 标签。

• 底色 {colors.canvas}，文字 {colors.ink}，字体 {typography.ui-label}，每个图标标签对周围 8px 内边距，无圆角。
• 连接的绿线是 GIF 图像的一部分，不是 CSS 边框。

输入与按钮

text-input —— 带边框的 HTML 输入。白色填充，1px solid 黑色边框，内部 Times Roman 14。

• 底色 {colors.canvas}，文字 {colors.ink}，1px solid frame-ink，字体 {typography.body}，内边距 4 × 6，无圆角。
• 用于搜索和 "Configure & Buy" 表单（这些截图中不可见但与该时代 HTML 3.2 表单控件一致）。

button-primary —— 黑色填充按钮，白色 Helvetica Bold 大写标签。

• 底色 {colors.frame-ink}，文字 {colors.on-primary}，1px solid frame-ink，字体 {typography.button}，内边距 6 × 16，无圆角。

button-secondary —— 白色填充描边按钮。同一外壳反色。

• 底色 {colors.canvas}，文字 {colors.ink}，1px solid frame-ink，字体 {typography.button}，内边距 6 × 16，无圆角。

button-text-link —— 经典 Mosaic 蓝的裸下划线锚。

• 文字 {colors.link} #0000ee，字体 {typography.link} Times Roman 14，默认下划线。无内边距，无圆角。

页脚

footer-band —— 每页底部：图标标签导航行、经典蓝 Copyright 链接、"(Terms of Use)" 括号、浏览器兼容性小字，以及 Microsoft BackOffice / Internet Explorer logo 横幅。

• 底色 {colors.canvas}，文字 {colors.ink}，1px 顶边框 frame-ink，字体 {typography.body-sm}，内边距 16px。

示例（示意性）

自动派生的 kit-mirror 演示表面（scripts/derive-examples-block.mjs）。每个 ex-* 条目引用品牌原生基元，以便下游消费者（/preview-design、/generate-kit）一致地重新皮肤相同的 10 个表面。TO_FILL 标记表示缺失的基元 —— 在 LLM 判断过程中解决。

ex-pricing-tier —— 默认价格档卡片。重用 feature-card 外壳配基础白表面。

• 属性：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 外壳。表头使用 mono-caps 眉板字体；正文使用 body-sm。

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

ex-auth-form-card —— 登录/注册卡。重用 feature-card 外壳，内部有 text-input 基元。

• 属性：backgroundColor、rounded、padding

ex-modal-card —— 模态对话框表面 —— 同一外壳作为 feature-card 配浮起阴影。

• 属性：backgroundColor、rounded、padding

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

• 属性：backgroundColor、rounded、padding、captionTypography

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

• 属性：backgroundColor、rounded、padding、typography

推荐与避免

推荐

• 在每页保持字面的 {components.page-frame} 黑色边框 —— 这是品牌单一最可识别的容器外壳。
• 把 {colors.primary}（Dell 红）留给 {components.cta-block-red} 面板和 {components.phone-callout}。其他一切使用都稀释紧迫感信号。
• 把八种缎带卡染色（{colors.tint-olive} / sage / salmon / peach / lime / sky / steel / periwinkle）作为家族使用 —— 每个产品线选一个，并在该线的营销表面中保持。
• 每个展示标题用 {typography.display}（Arial Black 36 / 900）设置。品牌的字体登记依赖极端字重对照扁平色。
• 正文保持 {typography.body} Times Roman 14 —— 用现代无衬线替代会完全失去目录感。
• 每个 CTA / 按钮用 {rounded.none}（0px）渲染。现代软圆角按钮背叛这个时代。
• 在贴纸和产品照片上使用手绘斜角 / 硬边 GIF 阴影。绝不替代为软 CSS 阴影。

避免

• 不要在八种目录染色 + Dell 红 + Dell 黄 + 经典链接蓝之外引入其他色彩点缀。调色板是封闭设计的。
• 不要柔化任何角。{rounded.none} 是通用修饰符；只有奖章用 {rounded.full}。
• 不要用 Arial / Helvetica / Inter / webfont 替代 Times Roman 正文 —— 衬线正文是这个时代的标志。
• 不要添加软投影或氛围渐变。品牌有硬边框和扁平填充；其他一切读起来是时代错乱。
• 不要用 border-radius 或 clip-path 裁剪或"折入"产品照片。凹入缎带卡右缘是框法 —— 照片本身保持硬矩形。
• 不要在同一页配对两个 {components.cta-block-red} 面板。红色填充意在成为单一注意力极点。
• 不要从顶部横幅剥离 {components.phone-callout}。1996 年网站存在的目的是驱动电话订单；电话号码就是导航。