④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,260 @@
|
||||
# Design System Inspired by xAI
|
||||
|
||||
> Category: AI & LLM
|
||||
> Elon Musk's AI lab. Stark monochrome, futuristic minimalism.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
xAI's website is a masterclass in dark-first, monospace-driven brutalist minimalism -- a design system that feels like it was built by engineers who understand that restraint is the ultimate form of sophistication. The entire experience is anchored to an almost-black background (`#1f2228`) with pure white text (`#ffffff`), creating a high-contrast, terminal-inspired aesthetic that signals deep technical credibility. There are no gradients, no decorative illustrations, no color accents competing for attention. This is a site that communicates through absence.
|
||||
|
||||
The typographic system is split between two carefully chosen typefaces. `GeistMono` (Vercel's monospace font) handles display-level headlines at an extraordinary 320px with weight 300, and also serves as the button typeface in uppercase with tracked-out letter-spacing (1.4px). `universalSans` handles all body and secondary heading text with a clean, geometric sans-serif voice. The monospace-as-display-font choice is the defining aesthetic decision -- it positions xAI not as a consumer product but as infrastructure, as something built by people who live in terminals.
|
||||
|
||||
The spacing system operates on an 8px base grid with values concentrated at the small end (4px, 8px, 24px, 48px), reflecting a dense, information-focused layout philosophy. Border radius is minimal -- the site barely rounds anything, maintaining sharp, architectural edges. There are no decorative shadows, no gradients, no layered elevation. Depth is communicated purely through contrast and whitespace.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Pure dark theme: `#1f2228` background with `#ffffff` text -- no gray middle ground
|
||||
- GeistMono at extreme display sizes (320px, weight 300) -- monospace as luxury
|
||||
- Uppercase monospace buttons with 1.4px letter-spacing -- technical, commanding
|
||||
- universalSans for body text at 16px/1.5 and headings at 30px/1.2 -- clean contrast
|
||||
- Zero decorative elements: no shadows, no gradients, no colored accents
|
||||
- 8px spacing grid with a sparse, deliberate scale
|
||||
- Heroicons SVG icon system -- minimal, functional
|
||||
- Tailwind CSS with arbitrary values -- utility-first engineering approach
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Pure White** (`#ffffff`): The singular text color, link color, and all foreground elements. In xAI's system, white is not a background -- it is the voice.
|
||||
- **Dark Background** (`#1f2228`): The canvas. A warm near-black with a subtle blue undertone (not pure black, not neutral gray). This specific hue prevents the harsh eye strain of `#000000` while maintaining deep darkness.
|
||||
|
||||
### Interactive
|
||||
- **White Default** (`#ffffff`): Link and interactive element color in default state.
|
||||
- **White Muted** (`rgba(255, 255, 255, 0.5)`): Hover state for links -- a deliberate dimming rather than brightening, which is unusual and distinctive.
|
||||
- **White Subtle** (`rgba(255, 255, 255, 0.2)`): Borders, dividers, and subtle surface treatments.
|
||||
- **Ring Blue** (`rgb(59, 130, 246) / 0.5`): Tailwind's default focus ring color (`--tw-ring-color`), used for keyboard accessibility focus states.
|
||||
|
||||
### Surface & Borders
|
||||
- **Surface Elevated** (`rgba(255, 255, 255, 0.05)`): Subtle card backgrounds and hover surfaces -- barely visible lift.
|
||||
- **Surface Hover** (`rgba(255, 255, 255, 0.08)`): Slightly more visible hover state for interactive containers.
|
||||
- **Border Default** (`rgba(255, 255, 255, 0.1)`): Standard border for cards, dividers, and containers.
|
||||
- **Border Strong** (`rgba(255, 255, 255, 0.2)`): Emphasized borders for active states and button outlines.
|
||||
|
||||
### Functional
|
||||
- **Text Primary** (`#ffffff`): All headings, body text, labels.
|
||||
- **Text Secondary** (`rgba(255, 255, 255, 0.7)`): Descriptions, captions, supporting text.
|
||||
- **Text Tertiary** (`rgba(255, 255, 255, 0.5)`): Muted labels, placeholder text, timestamps.
|
||||
- **Text Quaternary** (`rgba(255, 255, 255, 0.3)`): Disabled text, very subtle annotations.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display / Buttons**: `GeistMono`, with fallback: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
|
||||
- **Body / Headings**: `universalSans`, with fallback: `universalSans Fallback`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Transform | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-----------|-------|
|
||||
| Display Hero | GeistMono | 320px (20rem) | 300 | 1.50 | normal | none | Extreme scale, monospace luxury |
|
||||
| Section Heading | universalSans | 30px (1.88rem) | 400 | 1.20 (tight) | normal | none | Clean sans-serif contrast |
|
||||
| Body | universalSans | 16px (1rem) | 400 | 1.50 | normal | none | Standard reading text |
|
||||
| Button | GeistMono | 14px (0.88rem) | 400 | 1.43 | 1.4px | uppercase | Tracked monospace, commanding |
|
||||
| Label / Caption | universalSans | 14px (0.88rem) | 400 | 1.50 | normal | none | Supporting text |
|
||||
| Small / Meta | universalSans | 12px (0.75rem) | 400 | 1.50 | normal | none | Timestamps, footnotes |
|
||||
|
||||
### Principles
|
||||
- **Monospace as display**: GeistMono at 320px is not a gimmick -- it is the brand statement. The fixed-width characters at extreme scale create a rhythmic, architectural quality that no proportional font can achieve.
|
||||
- **Light weight at scale**: Weight 300 for the 320px headline prevents the monospace from feeling heavy or brutish at extreme sizes. It reads as precise, not overwhelming.
|
||||
- **Uppercase buttons**: All button text is uppercase GeistMono with 1.4px letter-spacing. This creates a distinctly technical, almost command-line aesthetic for interactive elements.
|
||||
- **Sans-serif for reading**: universalSans at 16px/1.5 provides excellent readability for body content, creating a clean contrast against the monospace display elements.
|
||||
- **Two-font clarity**: The system uses exactly two typefaces with clear roles -- monospace for impact and interaction, sans-serif for information and reading. No overlap, no ambiguity.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (White on Dark)**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#1f2228`
|
||||
- Padding: 12px 24px
|
||||
- Radius: 0px (sharp corners)
|
||||
- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px
|
||||
- Hover: `rgba(255, 255, 255, 0.9)` background
|
||||
- Use: Primary CTA ("TRY GROK", "GET STARTED")
|
||||
|
||||
**Ghost / Outlined**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Padding: 12px 24px
|
||||
- Radius: 0px
|
||||
- Border: `1px solid rgba(255, 255, 255, 0.2)`
|
||||
- Font: GeistMono 14px weight 400, uppercase, letter-spacing 1.4px
|
||||
- Hover: `rgba(255, 255, 255, 0.05)` background
|
||||
- Use: Secondary actions ("LEARN MORE", "VIEW API")
|
||||
|
||||
**Text Link**
|
||||
- Background: none
|
||||
- Text: `#ffffff`
|
||||
- Font: universalSans 16px weight 400
|
||||
- Hover: `rgba(255, 255, 255, 0.5)` -- dims on hover
|
||||
- Use: Inline links, navigation items
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `rgba(255, 255, 255, 0.03)` or transparent
|
||||
- Border: `1px solid rgba(255, 255, 255, 0.1)`
|
||||
- Radius: 0px (sharp) or 4px (subtle)
|
||||
- Shadow: none -- xAI does not use box shadows
|
||||
- Hover: border shifts to `rgba(255, 255, 255, 0.2)`
|
||||
|
||||
### Navigation
|
||||
- Dark background matching page (`#1f2228`)
|
||||
- Brand logotype: white text, left-aligned
|
||||
- Links: universalSans 14px weight 400, `#ffffff` text
|
||||
- Hover: `rgba(255, 255, 255, 0.5)` text color
|
||||
- CTA: white primary button, right-aligned
|
||||
- Mobile: hamburger toggle
|
||||
|
||||
### Badges / Tags
|
||||
**Monospace Tag**
|
||||
- Background: transparent
|
||||
- Text: `#ffffff`
|
||||
- Padding: 4px 8px
|
||||
- Border: `1px solid rgba(255, 255, 255, 0.2)`
|
||||
- Radius: 0px
|
||||
- Font: GeistMono 12px uppercase, letter-spacing 1px
|
||||
|
||||
### Inputs & Forms
|
||||
- Background: transparent or `rgba(255, 255, 255, 0.05)`
|
||||
- Border: `1px solid rgba(255, 255, 255, 0.2)`
|
||||
- Radius: 0px
|
||||
- Focus: ring with `rgb(59, 130, 246) / 0.5`
|
||||
- Text: `#ffffff`
|
||||
- Placeholder: `rgba(255, 255, 255, 0.3)`
|
||||
- Label: `rgba(255, 255, 255, 0.7)`, universalSans 14px
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 4px, 8px, 24px, 48px
|
||||
- The scale is deliberately sparse -- xAI avoids granular spacing distinctions, preferring large jumps that create clear visual hierarchy through whitespace alone
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1200px
|
||||
- Hero: full-viewport height with massive centered monospace headline
|
||||
- Feature sections: simple vertical stacking with generous section padding (48px-96px)
|
||||
- Two-column layouts for feature descriptions at desktop
|
||||
- Full-width dark sections maintain the single dark background throughout
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Extreme generosity**: xAI uses vast amounts of whitespace. The 320px headline with 48px+ surrounding padding creates a sense of emptiness that is itself a design statement -- the content is so important it needs room to breathe.
|
||||
- **Vertical rhythm over horizontal density**: Content stacks vertically with large gaps between sections rather than packing horizontally. This creates a scroll-driven experience that feels deliberate and cinematic.
|
||||
- **No visual noise**: The absence of decorative elements, borders between sections, and color variety means whitespace is the primary structural tool.
|
||||
|
||||
### Breakpoints
|
||||
- 2000px, 1536px, 1280px, 1024px, 1000px, 768px, 640px
|
||||
- Tailwind responsive modifiers drive breakpoint behavior
|
||||
|
||||
### Border Radius Scale
|
||||
- Sharp (0px): Primary treatment for buttons, cards, inputs -- the default
|
||||
- Subtle (4px): Occasional softening on secondary containers
|
||||
- The near-zero radius philosophy is core to the brand's brutalist identity
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow, no border | Page background, body content |
|
||||
| Surface (Level 1) | `rgba(255,255,255,0.03)` background | Subtle card surfaces |
|
||||
| Bordered (Level 2) | `1px solid rgba(255,255,255,0.1)` border | Cards, containers, dividers |
|
||||
| Active (Level 3) | `1px solid rgba(255,255,255,0.2)` border | Hover states, active elements |
|
||||
| Focus (Accessibility) | `ring` with `rgb(59,130,246)/0.5` | Keyboard focus indicator |
|
||||
|
||||
**Elevation Philosophy**: xAI rejects the conventional shadow-based elevation system entirely. There are no box-shadows anywhere on the site. Instead, depth is communicated through three mechanisms: (1) opacity-based borders that brighten on interaction, creating a sense of elements "activating" rather than lifting; (2) extremely subtle background opacity shifts (`0.03` to `0.08`) that create barely-perceptible surface differentiation; and (3) the massive scale contrast between the 320px display type and 16px body text, which creates typographic depth. This is elevation through contrast and opacity, not through simulated light and shadow.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use `#1f2228` as the universal background -- never pure black `#000000`
|
||||
- Use GeistMono for all display headlines and button text -- monospace IS the brand
|
||||
- Apply uppercase + 1.4px letter-spacing to all button labels
|
||||
- Use weight 300 for the massive display headline (320px)
|
||||
- Keep borders at `rgba(255, 255, 255, 0.1)` -- barely visible, not absent
|
||||
- Dim interactive elements on hover to `rgba(255, 255, 255, 0.5)` -- the reverse of convention
|
||||
- Maintain sharp corners (0px radius) as the default -- brutalist precision
|
||||
- Use universalSans for all body and reading text at 16px/1.5
|
||||
|
||||
### Don't
|
||||
- Don't use box-shadows -- xAI has zero shadow elevation
|
||||
- Don't introduce color accents beyond white and the dark background -- the monochromatic palette is sacred
|
||||
- Don't use large border-radius (8px+, pill shapes) -- the sharp edge is intentional
|
||||
- Don't use bold weights (600-700) for headlines -- weight 300-400 only
|
||||
- Don't brighten elements on hover -- xAI dims to `0.5` opacity instead
|
||||
- Don't add decorative gradients, illustrations, or color blocks
|
||||
- Don't use proportional fonts for buttons -- GeistMono uppercase is mandatory
|
||||
- Don't use colored status indicators unless absolutely necessary -- keep everything in the white/dark spectrum
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, hero headline scales dramatically down |
|
||||
| Small Tablet | 640-768px | Slight increase in padding |
|
||||
| Tablet | 768-1024px | Two-column layouts begin, heading sizes increase |
|
||||
| Desktop | 1024-1280px | Full layout, generous whitespace |
|
||||
| Large | 1280-1536px | Wider containers, more breathing room |
|
||||
| Extra Large | 1536-2000px | Maximum content width, centered |
|
||||
| Ultra | >2000px | Content stays centered, extreme margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use 12px 24px padding for comfortable touch
|
||||
- Navigation links spaced with 24px gaps
|
||||
- Minimum tap target: 44px height
|
||||
- Mobile: full-width buttons for easy thumb reach
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 320px monospace headline scales down dramatically (to ~48px-64px on mobile)
|
||||
- Navigation: horizontal links collapse to hamburger menu
|
||||
- Feature sections: two-column to single-column stacking
|
||||
- Section padding: 96px -> 48px -> 24px across breakpoints
|
||||
- Massive display type is the first thing to resize -- it must remain impactful but not overflow
|
||||
|
||||
### Image Behavior
|
||||
- Minimal imagery -- the site relies on typography and whitespace
|
||||
- Any product screenshots maintain sharp corners
|
||||
- Full-width media scales proportionally with viewport
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: Dark (`#1f2228`)
|
||||
- Text Primary: White (`#ffffff`)
|
||||
- Text Secondary: White 70% (`rgba(255, 255, 255, 0.7)`)
|
||||
- Text Muted: White 50% (`rgba(255, 255, 255, 0.5)`)
|
||||
- Text Disabled: White 30% (`rgba(255, 255, 255, 0.3)`)
|
||||
- Border Default: White 10% (`rgba(255, 255, 255, 0.1)`)
|
||||
- Border Strong: White 20% (`rgba(255, 255, 255, 0.2)`)
|
||||
- Surface Subtle: White 3% (`rgba(255, 255, 255, 0.03)`)
|
||||
- Surface Hover: White 8% (`rgba(255, 255, 255, 0.08)`)
|
||||
- Focus Ring: Blue (`rgb(59, 130, 246)` at 50% opacity)
|
||||
- Button Primary BG: White (`#ffffff`), text Dark (`#1f2228`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on #1f2228 background. Headline in GeistMono at 72px weight 300, color #ffffff, centered. Subtitle in universalSans 18px weight 400, rgba(255,255,255,0.7), max-width 600px centered. Two buttons: primary (white bg, #1f2228 text, 0px radius, GeistMono 14px uppercase, 1.4px letter-spacing, 12px 24px padding) and ghost (transparent bg, 1px solid rgba(255,255,255,0.2), white text, same font treatment)."
|
||||
- "Design a card: transparent or rgba(255,255,255,0.03) background, 1px solid rgba(255,255,255,0.1) border, 0px radius, 24px padding. No shadow. Title in universalSans 22px weight 400, #ffffff. Body in universalSans 16px weight 400, rgba(255,255,255,0.7), line-height 1.5. Hover: border changes to rgba(255,255,255,0.2)."
|
||||
- "Build navigation: #1f2228 background, full-width. Brand text left (GeistMono 14px uppercase). Links in universalSans 14px #ffffff with hover to rgba(255,255,255,0.5). White primary button right-aligned (GeistMono 14px uppercase, 1.4px letter-spacing)."
|
||||
- "Create a form: dark background #1f2228. Label in universalSans 14px rgba(255,255,255,0.7). Input with transparent bg, 1px solid rgba(255,255,255,0.2) border, 0px radius, white text 16px universalSans. Focus: blue ring rgb(59,130,246)/0.5. Placeholder: rgba(255,255,255,0.3)."
|
||||
- "Design a monospace tag/badge: transparent bg, 1px solid rgba(255,255,255,0.2), 0px radius, GeistMono 12px uppercase, 1px letter-spacing, white text, 4px 8px padding."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always start with `#1f2228` background -- never use pure black or gray backgrounds
|
||||
2. GeistMono for display and buttons, universalSans for everything else -- never mix these roles
|
||||
3. All buttons must be GeistMono uppercase with 1.4px letter-spacing -- this is non-negotiable
|
||||
4. No shadows, ever -- depth comes from border opacity and background opacity only
|
||||
5. Borders are always white with low opacity (0.1 default, 0.2 for emphasis)
|
||||
6. Hover behavior dims to 0.5 opacity rather than brightening -- the reverse of most systems
|
||||
7. Sharp corners (0px) by default -- only use 4px for specific secondary containers
|
||||
8. Body text at 16px universalSans with 1.5 line-height for comfortable reading
|
||||
9. Generous section padding (48px-96px) -- let content breathe in the darkness
|
||||
10. The monochromatic white-on-dark palette is absolute -- resist adding color unless critical for function
|
||||
@@ -0,0 +1,32 @@
|
||||
# xAI Usage
|
||||
|
||||
Design System 2.0 package guide for OpenDesign agents and reviewers.
|
||||
|
||||
## Read Order
|
||||
|
||||
1. Read this file first to understand the package contract.
|
||||
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
|
||||
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
|
||||
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
|
||||
5. Inspect `preview/` pages when a visual sanity check is useful.
|
||||
|
||||
## Design Highlights
|
||||
|
||||
- Pure dark theme: `#1f2228` background with `#ffffff` text -- no gray middle ground
|
||||
- GeistMono at extreme display sizes (320px, weight 300) -- monospace as luxury
|
||||
- Uppercase monospace buttons with 1.4px letter-spacing -- technical, commanding
|
||||
- Zero decorative elements: no shadows, no gradients, no colored accents
|
||||
|
||||
## Do
|
||||
|
||||
- Preserve the schema token names exactly so cross-brand switching stays reliable.
|
||||
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
|
||||
- Reuse component groups from `components.manifest.json` before inventing new controls.
|
||||
- Treat `source/` files as audit evidence for the bundled fixture backfill.
|
||||
|
||||
## Avoid
|
||||
|
||||
- Avoid raw hex values outside the copied `:root` token block.
|
||||
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
|
||||
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
|
||||
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
|
||||
@@ -0,0 +1,460 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>x-ai — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/x-ai. Every visible value
|
||||
comes from tokens.css. xAI's signature moves: #1f2228 warm near-black
|
||||
canvas, pure-white text on opacity-based foreground tiers, GeistMono
|
||||
as the display + button face, uppercase tracked-out CTAs, zero
|
||||
shadows, near-zero radii, blue-only focus ring."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #1f2228;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
|
||||
--accent: #ffffff;
|
||||
--accent-on: #1f2228;
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--tracking-display: normal;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
--radius-sm: 0px;
|
||||
--radius-md: 0px;
|
||||
--radius-lg: 4px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: none;
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg-2);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
margin: 0;
|
||||
color: var(--fg);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 300;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
/* The 320px hero treatment from DESIGN.md §3 is a one-off, not a
|
||||
token tier. We render the hero headline at clamp(--text-4xl,
|
||||
16vw, 320px) so it scales down from the cinematic 320px on
|
||||
ultrawide canvases to ~48–64px on phones (DESIGN.md §8 collapsing
|
||||
strategy: "320px monospace headline scales down dramatically"). */
|
||||
h1.hero-display {
|
||||
font-size: clamp(var(--text-4xl), 16vw, 320px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
h2 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 400;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--fg-2);
|
||||
max-width: 60ch;
|
||||
}
|
||||
.body-muted { color: var(--fg-2); }
|
||||
.body-sm { font-size: var(--text-sm); color: var(--fg-2); }
|
||||
.meta { font-size: var(--text-xs); color: var(--meta); }
|
||||
/* Uppercase monospace eyebrow — the brand's signature label voice.
|
||||
The 1.4px tracking matches the button treatment from DESIGN.md
|
||||
§3, expressed in em so it scales proportionally with size. */
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.stack-2 > * + * { margin-block-start: var(--space-2); }
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────────────
|
||||
DESIGN.md §4: GeistMono 14px, uppercase, 1.4px letter-spacing,
|
||||
12px 24px padding, 0px radius. Hover DIMS rather than brightens
|
||||
— the convention is reversed (DESIGN.md §7 "Don't brighten
|
||||
elements on hover — xAI dims to 0.5 opacity instead"). */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-6);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.4px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-primary:active { background: var(--accent-active); }
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.btn-ghost:hover {
|
||||
background: var(--surface);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ─── Monospace tag / badge ─────────────────────────────────────
|
||||
DESIGN.md §4 "Monospace Tag": GeistMono 12px uppercase, 1px
|
||||
letter-spacing, 4px 8px padding, sharp corners. */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: transparent;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
color: var(--fg);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────────────
|
||||
DESIGN.md §4: surface 0.03 background, 1px solid 0.1 border,
|
||||
0px radius, NO shadow. Hover lifts the border alpha to 0.2
|
||||
— depth through edge brightness, not shadow simulation. */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
box-shadow: var(--elev-flat);
|
||||
transition: background-color var(--motion-base) var(--ease-standard),
|
||||
border-color var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover {
|
||||
background: var(--surface-warm);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.card .card-title {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 400;
|
||||
color: var(--fg);
|
||||
margin: 0;
|
||||
}
|
||||
.card .card-body {
|
||||
font-size: var(--text-base);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────────────
|
||||
DESIGN.md §4 "Inputs & Forms": transparent / 0.05 bg, 0.2
|
||||
border, 0px radius, white 16px universalSans text, 0.3
|
||||
placeholder. Focus uses the blue ring (the lone chromatic
|
||||
move in the system). */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 400;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.field input,
|
||||
.field textarea {
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field textarea { resize: vertical; min-height: 96px; }
|
||||
.field input::placeholder,
|
||||
.field textarea::placeholder { color: var(--meta); }
|
||||
.field input:focus,
|
||||
.field textarea:focus {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
/* ─── Layout ────────────────────────────────────────────────── */
|
||||
.hero {
|
||||
text-align: center;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
justify-content: center;
|
||||
margin-block-start: var(--space-8);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-block-end: var(--space-8);
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-6);
|
||||
margin-block-start: var(--space-12);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.feature-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--meta);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.feature-meta .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--fg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) { .form-grid { grid-template-columns: 1fr; } }
|
||||
form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 480px; }
|
||||
form .actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- HERO -->
|
||||
<section data-od-id="hero" class="hero">
|
||||
<div class="tag-row">
|
||||
<span class="tag">Grok 3</span>
|
||||
<span class="tag">API</span>
|
||||
<span class="tag">Frontier</span>
|
||||
</div>
|
||||
<h1 class="hero-display">xAI</h1>
|
||||
<p class="lead" style="margin: var(--space-6) auto 0; color: var(--fg-2)">
|
||||
Understand the universe. We are a frontier AI lab building the
|
||||
tools to accelerate human scientific discovery — and the
|
||||
monospace-on-warm-black voice that says so without decoration.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">Try Grok</a>
|
||||
<a href="./DESIGN.md" class="btn btn-ghost">View API</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3" style="text-align: center">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 32ch; margin-inline: auto">
|
||||
Restraint as sophistication.
|
||||
</h2>
|
||||
<p class="lead" style="margin-inline: auto; color: var(--muted)">
|
||||
Three cards. Sharp corners, opacity-based borders, zero
|
||||
shadows. Depth through contrast — never simulated light.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card stack-4">
|
||||
<div class="feature-meta"><span class="dot"></span><span>01 / Voice</span></div>
|
||||
<h3 class="card-title">Monospace as luxury</h3>
|
||||
<p class="card-body">
|
||||
GeistMono at display sizes positions xAI as infrastructure,
|
||||
not product. Fixed-width characters at scale create a
|
||||
rhythmic, architectural quality no proportional font can
|
||||
match. universalSans handles the reading.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-4">
|
||||
<div class="feature-meta"><span class="dot"></span><span>02 / Canvas</span></div>
|
||||
<h3 class="card-title">#1f2228, never #000</h3>
|
||||
<p class="card-body">
|
||||
The warm near-black with a subtle blue undertone prevents
|
||||
the harsh eye strain of pure black while maintaining deep
|
||||
darkness. The canvas is the foundation — every surface
|
||||
renders against it directly.
|
||||
</p>
|
||||
</article>
|
||||
<article class="card stack-4">
|
||||
<div class="feature-meta"><span class="dot"></span><span>03 / Depth</span></div>
|
||||
<h3 class="card-title">Zero shadows</h3>
|
||||
<p class="card-body">
|
||||
Elevation through opacity-based borders that brighten on
|
||||
interaction, subtle background tints (0.03 → 0.08), and
|
||||
the massive typographic scale contrast. No simulated
|
||||
light. No drop shadows. Ever.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM -->
|
||||
<section data-od-id="form">
|
||||
<div class="form-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Inputs on the dark canvas.</h2>
|
||||
<p class="lead">
|
||||
Transparent ground, hairline borders at 20% white. Focus
|
||||
halos the field with Tailwind's default ring blue — the
|
||||
single chromatic exception in an otherwise monochromatic
|
||||
system. Placeholders dim to 30% white. Labels to 70%.
|
||||
</p>
|
||||
<p class="meta">All values from tokens.css — no raw hex.</p>
|
||||
</div>
|
||||
<form onsubmit="event.preventDefault()">
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input id="email" type="email" placeholder="[email protected]" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="org">Organization</label>
|
||||
<input id="org" type="text" placeholder="Frontier AI Lab" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="msg">Use case</label>
|
||||
<textarea id="msg" placeholder="Describe the workload — training, inference, evaluation, or something we have not built yet."></textarea>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn btn-primary">Request access</button>
|
||||
<button type="button" class="btn btn-ghost">Read the docs</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,447 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "x-ai",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "x-ai — reference components",
|
||||
"description": "Reference fixture for design-systems/x-ai. Every visible value comes from tokens.css. xAI's signature moves: #1f2228 warm near-black canvas, pure-white text on opacity-based foreground tiers, GeistMono as the display + button face, uppercase tracked-out CTAs, zero shadows, near-zero radii, blue-only focus ring.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 51,
|
||||
"classCount": 23,
|
||||
"elementCount": 21
|
||||
},
|
||||
"tokens": {
|
||||
"declared": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"referenced": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--ease-standard",
|
||||
"--elev-flat",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--border-soft",
|
||||
"--danger",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--font-mono",
|
||||
"--radius-lg",
|
||||
"--space-5",
|
||||
"--success",
|
||||
"--text-3xl",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".card .card-body",
|
||||
".card .card-title",
|
||||
".card:hover",
|
||||
".container",
|
||||
".eyebrow",
|
||||
".feature-meta",
|
||||
".feature-meta .dot",
|
||||
".features-grid",
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field label",
|
||||
".field textarea",
|
||||
".field textarea::placeholder",
|
||||
".field textarea:focus",
|
||||
".form-grid",
|
||||
".hero",
|
||||
".hero-actions",
|
||||
".lead",
|
||||
".meta",
|
||||
".stack-2 > * + *",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
".tag",
|
||||
".tag-row",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"body",
|
||||
"form",
|
||||
"form .actions",
|
||||
"h1",
|
||||
"h1.hero-display",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"actions",
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"card",
|
||||
"card-body",
|
||||
"card-title",
|
||||
"container",
|
||||
"dot",
|
||||
"eyebrow",
|
||||
"feature-meta",
|
||||
"features-grid",
|
||||
"field",
|
||||
"form-grid",
|
||||
"hero",
|
||||
"hero-actions",
|
||||
"hero-display",
|
||||
"lead",
|
||||
"meta",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"tag",
|
||||
"tag-row"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"body",
|
||||
"button",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"head",
|
||||
"html",
|
||||
"input",
|
||||
"label",
|
||||
"main",
|
||||
"meta",
|
||||
"p",
|
||||
"section",
|
||||
"span",
|
||||
"style",
|
||||
"textarea",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent-hover",
|
||||
"--fg",
|
||||
"--focus-ring"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field label",
|
||||
".field textarea",
|
||||
".field textarea::placeholder",
|
||||
".field textarea:focus"
|
||||
],
|
||||
"classes": [
|
||||
"field",
|
||||
"form-grid"
|
||||
],
|
||||
"elements": [
|
||||
"form",
|
||||
"input",
|
||||
"label",
|
||||
"textarea"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--text-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card",
|
||||
".card .card-body",
|
||||
".card .card-title",
|
||||
".card:hover"
|
||||
],
|
||||
"classes": [
|
||||
"card",
|
||||
"card-body",
|
||||
"card-title"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--fg-2",
|
||||
"--surface-warm",
|
||||
"--text-base"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".tag",
|
||||
".tag-row"
|
||||
],
|
||||
"classes": [
|
||||
"tag",
|
||||
"tag-row"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--fg",
|
||||
"--font-display",
|
||||
"--radius-sm",
|
||||
"--space-1",
|
||||
"--space-2",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "icons",
|
||||
"label": "Icon slots",
|
||||
"present": false,
|
||||
"selectors": [],
|
||||
"classes": [],
|
||||
"elements": [],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".eyebrow",
|
||||
".lead",
|
||||
"h1",
|
||||
"h1.hero-display",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"eyebrow",
|
||||
"lead"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--leading-tight",
|
||||
"--muted",
|
||||
"--text-4xl",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".stack-2 > * + *",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"form-grid",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-3",
|
||||
"--space-6"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 6,
|
||||
"pixelValues": 17,
|
||||
"hardcodedFontFamilies": 10
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,701 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"format": "od-design-tokens/v1",
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"source": {
|
||||
"tokensCss": "tokens.css",
|
||||
"tokenContractReport": "source/token-contract.report.json"
|
||||
},
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#1f2228",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "rgba(255, 255, 255, 0.03)",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "rgba(255, 255, 255, 0.05)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:122"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:129"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "rgba(255, 255, 255, 0.7)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:130"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "rgba(255, 255, 255, 0.5)",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:131"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "rgba(255, 255, 255, 0.3)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:132"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "rgba(255, 255, 255, 0.1)",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:139"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "rgba(255, 255, 255, 0.05)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:140"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:149"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#1f2228",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:150"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "rgba(255, 255, 255, 0.9)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:151"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "rgba(255, 255, 255, 0.8)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:152"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#16a34a",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:161"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:162"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#dc2626",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:163"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"GeistMono\", ui-monospace, \"SF Mono\", \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:171"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"universalSans\", \"universalSans Fallback\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:172"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"GeistMono\", ui-monospace, \"SF Mono\", \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
|
||||
"type": "fontFamily",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:173"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:181"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:182"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:183"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:184"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:185"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "30px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "40px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "64px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:188"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:196"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.2",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:197"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "normal",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:198"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:206"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:209"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:210"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:211"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:212"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:213"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "96px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:220"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "64px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:221"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:222"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "0px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:230"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "0px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:231"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:232"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:233"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:242"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:243"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "none",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:244"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:251"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:256"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:257"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"type": "cubicBezier",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:258"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:264"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:265"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:266"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:267"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "x-ai",
|
||||
"name": "xAI",
|
||||
"category": "AI & LLM",
|
||||
"description": "Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
|
||||
"source": {
|
||||
"type": "bundled",
|
||||
"origin": "OpenDesign curated bundled fixture"
|
||||
},
|
||||
"files": {
|
||||
"design": "DESIGN.md",
|
||||
"tokens": "tokens.css",
|
||||
"designTokens": "design-tokens.json",
|
||||
"tailwind": "tailwind-v4.css",
|
||||
"components": "components.html"
|
||||
},
|
||||
"usage": "USAGE.md",
|
||||
"componentsManifest": "components.manifest.json",
|
||||
"importMode": "normalized",
|
||||
"craft": {
|
||||
"applies": [],
|
||||
"suggested": [
|
||||
"color",
|
||||
"accessibility-baseline"
|
||||
],
|
||||
"exemptions": []
|
||||
},
|
||||
"preview": {
|
||||
"dir": "preview",
|
||||
"pages": [
|
||||
{
|
||||
"path": "preview/colors.html",
|
||||
"role": "colors",
|
||||
"title": "Colors"
|
||||
},
|
||||
{
|
||||
"path": "preview/typography.html",
|
||||
"role": "typography",
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "preview/spacing.html",
|
||||
"role": "spacing",
|
||||
"title": "Spacing"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceFiles": {
|
||||
"evidence": "source/evidence.md",
|
||||
"tokens": "source/tokens.source.json",
|
||||
"report": "source/token-contract.report.json"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI colors</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
|
||||
.color { height: 88px; background: var(--value); }
|
||||
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
|
||||
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Color roles</h1>
|
||||
|
||||
<section class="grid">
|
||||
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
|
||||
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
|
||||
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
|
||||
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
|
||||
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
|
||||
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
|
||||
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
|
||||
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
|
||||
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI spacing</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
|
||||
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
|
||||
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
|
||||
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Spacing and radius</h1>
|
||||
|
||||
<section class="stack">
|
||||
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
|
||||
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
|
||||
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
|
||||
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
|
||||
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
|
||||
</section>
|
||||
<section class="radii">
|
||||
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
|
||||
<article style="border-radius: var(--radius-md)">--radius-md</article>
|
||||
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
|
||||
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI typography</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
|
||||
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
|
||||
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
|
||||
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Typography</h1>
|
||||
|
||||
<section class="type-stack">
|
||||
<p class="eyebrow">AI & LLM</p>
|
||||
<h2>Display sample for xAI</h2>
|
||||
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
|
||||
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
# xAI Source Evidence
|
||||
|
||||
## Source Scope
|
||||
|
||||
This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
|
||||
It does not claim a fresh crawl of the original upstream brand repository or website.
|
||||
|
||||
## Included Fixture Files
|
||||
|
||||
- design-systems/x-ai/DESIGN.md
|
||||
- design-systems/x-ai/tokens.css
|
||||
- design-systems/x-ai/components.html
|
||||
|
||||
## Token Contract
|
||||
|
||||
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
|
||||
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
|
||||
@@ -0,0 +1,641 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#1f2228",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "rgba(255, 255, 255, 0.03)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(255, 255, 255, 0.05)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:122"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:129"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(255, 255, 255, 0.7)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:130"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "rgba(255, 255, 255, 0.5)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:131"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(255, 255, 255, 0.3)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:132"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "rgba(255, 255, 255, 0.1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:139"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "rgba(255, 255, 255, 0.05)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:140"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:149"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#1f2228",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:150"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "rgba(255, 255, 255, 0.9)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:151"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "rgba(255, 255, 255, 0.8)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:152"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#16a34a",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:161"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#eab308",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:162"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#dc2626",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:163"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"GeistMono\", ui-monospace, \"SF Mono\", \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:171"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"universalSans\", \"universalSans Fallback\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:172"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "\"GeistMono\", ui-monospace, \"SF Mono\", \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:173"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:181"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"layer": "A1-structure",
|
||||
"value": "14px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:182"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:183"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"layer": "A1-structure",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:184"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:185"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "30px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "40px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "64px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:188"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:196"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:197"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "normal",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:198"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:206"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"layer": "A2",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:209"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"layer": "A2",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:210"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"layer": "A2",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:211"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"layer": "A2",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:212"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"layer": "A2",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:213"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "96px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:220"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "64px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:221"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:222"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "0px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:230"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "0px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:231"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:232"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"layer": "A2",
|
||||
"value": "9999px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:233"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"layer": "A2",
|
||||
"value": "none",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:242"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:243"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "none",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:244"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:251"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"layer": "A2",
|
||||
"value": "150ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:256"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"layer": "A2",
|
||||
"value": "200ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:257"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"layer": "A2",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:258"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1200px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:264"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:265"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:266"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:267"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "x-ai",
|
||||
"files": [
|
||||
"DESIGN.md",
|
||||
"tokens.css",
|
||||
"components.html"
|
||||
],
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#1f2228",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:120"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "rgba(255, 255, 255, 0.03)",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:121"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "rgba(255, 255, 255, 0.05)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:122"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#ffffff",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:129"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "rgba(255, 255, 255, 0.7)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:130"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "rgba(255, 255, 255, 0.5)",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:131"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "rgba(255, 255, 255, 0.3)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:132"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "rgba(255, 255, 255, 0.1)",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:139"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "rgba(255, 255, 255, 0.05)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:140"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#ffffff",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:149"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#1f2228",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:150"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "rgba(255, 255, 255, 0.9)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:151"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "rgba(255, 255, 255, 0.8)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:152"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#16a34a",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:161"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:162"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#dc2626",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:163"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"GeistMono\", ui-monospace, \"SF Mono\", \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:171"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"universalSans\", \"universalSans Fallback\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:172"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"GeistMono\", ui-monospace, \"SF Mono\", \"Roboto Mono\", Menlo, Monaco, \"Liberation Mono\", \"DejaVu Sans Mono\", \"Courier New\", monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:173"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:181"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:182"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:183"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:184"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:185"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "30px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:186"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "40px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:187"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "64px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:188"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:196"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.2",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:197"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "normal",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:198"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:206"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:207"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:208"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:209"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:210"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:211"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:212"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:213"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "96px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:220"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "64px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:221"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:222"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "0px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:230"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "0px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:231"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:232"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:233"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:242"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:243"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:244"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:251"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:256"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:257"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:258"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:264"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:265"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:266"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:267"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Deck module</p>
|
||||
<h1>xAI Executive deck</h1>
|
||||
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Pitch deck</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="xAI" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Email module</p>
|
||||
<h1>xAI Email module</h1>
|
||||
<p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Email</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="xAI" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Form module</p>
|
||||
<h1>xAI Capture form</h1>
|
||||
<p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Form page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="xAI" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Landing module</p>
|
||||
<h1>xAI Launch narrative</h1>
|
||||
<p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Landing page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="xAI" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Newsletter module</p>
|
||||
<h1>xAI Editorial issue</h1>
|
||||
<p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Newsletter</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="xAI" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Poster module</p>
|
||||
<h1>xAI Campaign poster</h1>
|
||||
<p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Poster</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="xAI" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<p class="eyebrow">AI & LLM</p>
|
||||
<h1>xAI system assets</h1>
|
||||
<p class="lead">Generated preview modules for bundled official presets.</p>
|
||||
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
|
||||
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
|
||||
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
|
||||
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
|
||||
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
|
||||
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
|
||||
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
|
||||
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">AI & LLM system</p>
|
||||
<h1>xAI component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xAI - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #ffffff;
|
||||
--accent-active: rgba(255, 255, 255, 0.8);
|
||||
--accent-hover: rgba(255, 255, 255, 0.9);
|
||||
--accent-on: #1f2228;
|
||||
--bg: #1f2228;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--border-soft: rgba(255, 255, 255, 0.05);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #ffffff;
|
||||
--fg-2: rgba(255, 255, 255, 0.7);
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: rgba(255, 255, 255, 0.3);
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: rgba(255, 255, 255, 0.5);
|
||||
--radius-lg: 4px;
|
||||
--radius-md: 0px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 0px;
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-phone: 48px;
|
||||
--section-y-tablet: 64px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: rgba(255, 255, 255, 0.03);
|
||||
--surface-warm: rgba(255, 255, 255, 0.05);
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 40px;
|
||||
--text-4xl: 64px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: normal;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #1f2228;
|
||||
--od-surface: rgba(255, 255, 255, 0.03);
|
||||
--od-text: #ffffff;
|
||||
--od-muted: rgba(255, 255, 255, 0.5);
|
||||
--od-border: rgba(255, 255, 255, 0.1);
|
||||
--od-accent: #ffffff;
|
||||
--od-radius: 0px;
|
||||
--od-font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--od-font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">AI & LLM system</p>
|
||||
<h1>xAI component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for xAI, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"colorPrimary": "#ffffff",
|
||||
"colorPrimaryBg": "rgba(255, 255, 255, 0.05)",
|
||||
"colorPrimaryHover": "rgba(255, 255, 255, 0.9)",
|
||||
"colorPrimaryActive": "rgba(255, 255, 255, 0.8)",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 0
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
@theme {
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-warm: var(--surface-warm);
|
||||
--color-fg: var(--fg);
|
||||
--color-fg-2: var(--fg-2);
|
||||
--color-muted: var(--muted);
|
||||
--color-meta: var(--meta);
|
||||
--color-border: var(--border);
|
||||
--color-border-soft: var(--border-soft);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-on: var(--accent-on);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-active: var(--accent-active);
|
||||
--color-success: var(--success);
|
||||
--color-warn: var(--warn);
|
||||
--color-danger: var(--danger);
|
||||
--font-display: var(--font-display);
|
||||
--font-body: var(--font-body);
|
||||
--font-sans: var(--font-body);
|
||||
--font-mono: var(--font-mono);
|
||||
--text-xs: var(--text-xs);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-base: var(--text-base);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--leading-body: var(--leading-body);
|
||||
--leading-tight: var(--leading-tight);
|
||||
--tracking-display: var(--tracking-display);
|
||||
--spacing-1: var(--space-1);
|
||||
--spacing-2: var(--space-2);
|
||||
--spacing-3: var(--space-3);
|
||||
--spacing-4: var(--space-4);
|
||||
--spacing-5: var(--space-5);
|
||||
--spacing-6: var(--space-6);
|
||||
--spacing-8: var(--space-8);
|
||||
--spacing-12: var(--space-12);
|
||||
--spacing-section-desktop: var(--section-y-desktop);
|
||||
--spacing-section-tablet: var(--section-y-tablet);
|
||||
--spacing-section-phone: var(--section-y-phone);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
--radius-pill: var(--radius-pill);
|
||||
--shadow-flat: var(--elev-flat);
|
||||
--shadow-ring: var(--elev-ring);
|
||||
--shadow-raised: var(--elev-raised);
|
||||
--shadow-focus-ring: var(--focus-ring);
|
||||
--duration-fast: var(--motion-fast);
|
||||
--duration-base: var(--motion-base);
|
||||
--ease-standard: var(--ease-standard);
|
||||
--container-max: var(--container-max);
|
||||
--spacing-container-desktop: var(--container-gutter-desktop);
|
||||
--spacing-container-tablet: var(--container-gutter-tablet);
|
||||
--spacing-container-phone: var(--container-gutter-phone);
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/x-ai/tokens.css
|
||||
*
|
||||
* Structured token bindings for "x-ai" — the dark-first, monospace-driven
|
||||
* brutalist minimalism of Elon Musk's AI lab. A design system that
|
||||
* communicates through absence: pure white on warm near-black, GeistMono
|
||||
* as the display voice, zero shadows, zero gradients, zero accent color.
|
||||
* Restraint as sophistication.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. Dark-first canvas at #1f2228 (warm near-black with a subtle blue
|
||||
* undertone, NEVER pure #000000) carries pure-white text as "the
|
||||
* voice", with hierarchy expressed through opacity (100 / 70 / 50 / 30)
|
||||
* rather than hue. There is no gray middle ground.
|
||||
* 2. GeistMono runs at display sizes (up to a hero-only 320px at weight
|
||||
* 300) and as the uppercase, letter-spaced button face. universalSans
|
||||
* handles body and section headings. The monospace-as-display choice
|
||||
* is the brand: terminal aesthetic as luxury.
|
||||
* 3. Zero box-shadows, zero gradients, near-zero radii (0px default,
|
||||
* 4px occasional softening). Depth comes from opacity-based borders
|
||||
* and surface tints, not from simulated light. The single chromatic
|
||||
* exception is the keyboard focus ring (Tailwind's default blue).
|
||||
*
|
||||
* Brand-specific schema decisions (each bends a schema convention to
|
||||
* match xAI's voice rather than the cross-brand default):
|
||||
*
|
||||
* 1. `--bg` is `#1f2228`, NOT `#000000`. DESIGN.md §2 names this hue
|
||||
* explicitly: "This specific hue prevents the harsh eye strain of
|
||||
* `#000000` while maintaining deep darkness." Pure black is
|
||||
* forbidden by the brand.
|
||||
*
|
||||
* 2. `--accent` is `#ffffff`, not a chromatic color. xAI has no
|
||||
* accent palette — white IS the chromatic move. Primary CTAs render
|
||||
* with `var(--accent)` as background and `var(--accent-on)` as
|
||||
* foreground, producing the signature white-on-dark button. The
|
||||
* "≤2 accent uses per screen" lint still holds; the primary CTA and
|
||||
* the focus indicator are the only places white reverses against
|
||||
* the canvas.
|
||||
*
|
||||
* 3. `--font-display` is a GeistMono stack. Monospace AS the display
|
||||
* face is the defining aesthetic decision (DESIGN.md §3) — it
|
||||
* positions xAI not as a consumer product but as infrastructure,
|
||||
* as something built by people who live in terminals. `--font-mono`
|
||||
* aliases the same stack because GeistMono IS the monospace face
|
||||
* used for code, kbd, and tabular metrics.
|
||||
*
|
||||
* 4. The four-level foreground ramp is opacity-based (rgba 1.0 / 0.7
|
||||
* / 0.5 / 0.3), NOT a grayscale hex ramp. DESIGN.md §2 documents
|
||||
* the system literally as "white at α". Binding `--fg-2`, `--muted`,
|
||||
* and `--meta` as `rgba(255,255,255,α)` preserves the "white over
|
||||
* canvas" voice and keeps the tiers chromatically locked to the
|
||||
* single foreground color.
|
||||
*
|
||||
* 5. `--border` is `rgba(255, 255, 255, 0.1)` — DESIGN.md §2's default
|
||||
* "Border Default" alpha, NOT a solid hex. `--border-soft` drops to
|
||||
* 0.05 for inner-row separators. The 0.2 "Border Strong" tier from
|
||||
* DESIGN.md lives inline per-component (hover/active state edges).
|
||||
*
|
||||
* 6. Radii are aggressively small: 0 / 0 / 4 / 9999. DESIGN.md §5:
|
||||
* "The near-zero radius philosophy is core to the brand's brutalist
|
||||
* identity." Buttons, inputs, and cards all default to 0px;
|
||||
* `--radius-lg` softens to 4px for the rare secondary container
|
||||
* (DESIGN.md's "Subtle (4px) occasional"). `--radius-pill` stays at
|
||||
* 9999px because the schema slot requires a pill value, even though
|
||||
* xAI rarely renders one.
|
||||
*
|
||||
* 7. `--elev-raised` is literally `none`. DESIGN.md §6: "xAI rejects
|
||||
* the conventional shadow-based elevation system entirely. There
|
||||
* are no box-shadows anywhere on the site." Depth is communicated
|
||||
* through three other mechanisms documented in the same section:
|
||||
* opacity-based borders that brighten on interaction, subtle
|
||||
* background-opacity shifts (0.03 → 0.08), and the massive
|
||||
* typographic scale contrast. `--elev-ring` is kept as a hairline
|
||||
* border-as-shadow so components that target the elevation token
|
||||
* still get a visible edge.
|
||||
*
|
||||
* 8. `--focus-ring` is the ONLY chromatic exception to the otherwise
|
||||
* strictly monochromatic palette. DESIGN.md §2 names Tailwind's
|
||||
* default `--tw-ring-color` (`rgb(59, 130, 246) / 0.5`) as the
|
||||
* keyboard focus indicator. We reproduce it as a 3px halo
|
||||
* (Tailwind's `ring-2` shape) — the blue is intentional and
|
||||
* non-negotiable for a11y, even though the rest of the system is
|
||||
* achromatic.
|
||||
*
|
||||
* 9. The type scale tops out at 64px (`--text-4xl`), NOT the 320px
|
||||
* hero display DESIGN.md §3 names. 320px is a hero-only treatment,
|
||||
* not a token tier — components.html overrides `font-size` inline
|
||||
* for that one cinematic moment. Reserving `--text-4xl` at 64px
|
||||
* keeps the slot useful as the H1-equivalent ceiling for cards,
|
||||
* sections, and modals across the system. (See vercel/tokens.css
|
||||
* §6 for the same reasoning: tokens encode reusable tiers, not
|
||||
* one-off hero crops.)
|
||||
*
|
||||
* 10. `--tracking-display` stays `normal`. GeistMono at display scale
|
||||
* does NOT compress letter-spacing — the monospace grid is part of
|
||||
* the aesthetic and tightening would collapse it. The uppercase
|
||||
* button tracking (`1.4px`, DESIGN.md §4) is an interaction-specific
|
||||
* value that lives inline on `.btn` since it applies only to
|
||||
* command-line-styled labels, not display headlines.
|
||||
*
|
||||
* Source contracts:
|
||||
* - Standard token names: design-systems/_schema/tokens.schema.ts
|
||||
* - A2 fallback parity: design-systems/_schema/defaults.css
|
||||
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
|
||||
*
|
||||
* Keep this file additive: never invent token names not also documented
|
||||
* in DESIGN.md or the shared schema. The GeistMono and universalSans
|
||||
* faces are referenced by name only — artifacts that render acceptably
|
||||
* fall back to the OS monospace and sans-serif stacks listed inside the
|
||||
* font-family declarations.
|
||||
* ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ─────────────────────────────────────────────────────
|
||||
* #1f2228 is the singular canvas — warm near-black with a subtle
|
||||
* blue undertone. `--surface` is the barely-visible 0.03 white tint
|
||||
* that cards sit on; `--surface-warm` rises to 0.05 for hover and
|
||||
* elevated rows. DESIGN.md §6's elevation ramp uses both values
|
||||
* verbatim as "Surface (Level 1)" and "Surface Hover". */
|
||||
--bg: #1f2228; /* warm near-black canvas — NEVER #000 */
|
||||
--surface: rgba(255, 255, 255, 0.03); /* subtle card surface */
|
||||
--surface-warm: rgba(255, 255, 255, 0.05); /* hover / elevated tier */
|
||||
|
||||
/* ─── Foreground ──────────────────────────────────────────────────
|
||||
* Four-level opacity ramp per DESIGN.md §2. Pure white is "the
|
||||
* voice"; subsequent tiers express hierarchy by dimming rather
|
||||
* than by hue. Binding as rgba (not hex) keeps the ramp locked
|
||||
* chromatically to the single foreground color. */
|
||||
--fg: #ffffff; /* primary — headings, links, body */
|
||||
--fg-2: rgba(255, 255, 255, 0.7); /* secondary — descriptions */
|
||||
--muted: rgba(255, 255, 255, 0.5); /* tertiary — captions, timestamps */
|
||||
--meta: rgba(255, 255, 255, 0.3); /* quaternary — disabled, annotations */
|
||||
|
||||
/* ─── Border ──────────────────────────────────────────────────────
|
||||
* Opacity-based borders — barely visible, never absent. 0.1 is the
|
||||
* default card / divider edge; 0.05 is the inner-row separator
|
||||
* that should not visually compete. The 0.2 "strong" tier from
|
||||
* DESIGN.md §2 lives inline per-component (hover/active states). */
|
||||
--border: rgba(255, 255, 255, 0.1); /* default card / divider */
|
||||
--border-soft: rgba(255, 255, 255, 0.05); /* inner row separator */
|
||||
|
||||
/* ─── Accent ──────────────────────────────────────────────────────
|
||||
* White IS the accent. There is no chromatic color in xAI's
|
||||
* monochromatic palette — primary CTAs are white-on-dark.
|
||||
* `--accent-hover` dims to 0.9 alpha per DESIGN.md §4 (primary
|
||||
* button hover); `--accent-active` drops a further step. The
|
||||
* convention is REVERSED from most systems: hover dims, it does
|
||||
* not brighten. */
|
||||
--accent: #ffffff; /* the voice as bg */
|
||||
--accent-on: #1f2228; /* canvas as fg on accent */
|
||||
--accent-hover: rgba(255, 255, 255, 0.9); /* slight dimming on hover (DESIGN.md §4) */
|
||||
--accent-active: rgba(255, 255, 255, 0.8); /* deeper dim on press */
|
||||
|
||||
/* ─── Semantic ────────────────────────────────────────────────────
|
||||
* DESIGN.md §7 actively discourages colored status indicators
|
||||
* ("Don't use colored status indicators unless absolutely
|
||||
* necessary — keep everything in the white/dark spectrum"). We
|
||||
* inherit schema defaults so the slots remain useful for the rare
|
||||
* cases where status truly must render chromatically — but
|
||||
* components should prefer monochrome cues (opacity, weight). */
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography — fonts ──────────────────────────────────────────
|
||||
* GeistMono is the brand's defining typographic decision: a
|
||||
* monospace face used at display sizes. universalSans handles
|
||||
* body and section headings. `--font-mono` aliases the display
|
||||
* stack because GeistMono IS the monospace face — there is no
|
||||
* separate code typeface. */
|
||||
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §3 hierarchy table.
|
||||
* The 320px display hero is intentionally NOT a token tier;
|
||||
* components.html overrides `font-size` inline for that one
|
||||
* cinematic treatment. `--text-4xl` instead caps at 64px, the
|
||||
* realistic ceiling for marketing H1s across cards/sections.
|
||||
* `--text-2xl` (30px) matches DESIGN.md's "Section Heading" tier. */
|
||||
--text-xs: 12px; /* small / meta — timestamps, footnotes */
|
||||
--text-sm: 14px; /* button label / caption */
|
||||
--text-base: 16px; /* body — universalSans 1.5 */
|
||||
--text-lg: 20px; /* body large / introductions */
|
||||
--text-xl: 24px; /* card title */
|
||||
--text-2xl: 30px; /* section heading — DESIGN.md §3 */
|
||||
--text-3xl: 40px; /* H1 */
|
||||
--text-4xl: 64px; /* display ceiling (320px hero is inline-only) */
|
||||
|
||||
/* Leading + tracking.
|
||||
* `--leading-body: 1.5` is universalSans body (DESIGN.md §3).
|
||||
* `--leading-tight: 1.2` matches the 30px section heading.
|
||||
* `--tracking-display: normal` because GeistMono at scale does
|
||||
* NOT compress letter-spacing — the monospace grid is the
|
||||
* aesthetic and tightening would collapse it. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--tracking-display: normal;
|
||||
|
||||
/* ─── Spacing ─────────────────────────────────────────────────────
|
||||
* DESIGN.md §5 documents a deliberately sparse scale concentrated
|
||||
* at the small end: 4 / 8 / 24 / 48. We bind the full schema slot
|
||||
* range — components reach for 1/2/6/12 most often; the
|
||||
* intermediate tiers are preserved for edge cases where a
|
||||
* narrower step is structurally required. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — DESIGN.md §5: "generous section padding 48px–
|
||||
* 96px". 96 desktop / 64 tablet / 48 phone preserves the
|
||||
* cinematic emptiness that is itself a design statement; the
|
||||
* absence of decoration means whitespace is the primary structural
|
||||
* tool. */
|
||||
--section-y-desktop: 96px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 48px;
|
||||
|
||||
/* ─── Radius ──────────────────────────────────────────────────────
|
||||
* Brutalist precision. DESIGN.md §5: "Sharp (0px) primary
|
||||
* treatment for buttons, cards, inputs — the default. Subtle (4px)
|
||||
* occasional softening on secondary containers." `--radius-pill`
|
||||
* stays at 9999px because the schema slot requires a pill value,
|
||||
* even though xAI rarely renders one. */
|
||||
--radius-sm: 0px; /* buttons, inputs — sharp */
|
||||
--radius-md: 0px; /* cards — sharp */
|
||||
--radius-lg: 4px; /* occasional secondary softening */
|
||||
--radius-pill: 9999px; /* schema-required slot */
|
||||
|
||||
/* ─── Elevation ───────────────────────────────────────────────────
|
||||
* Shadow-free system per DESIGN.md §6: "xAI rejects the
|
||||
* conventional shadow-based elevation system entirely. There are
|
||||
* no box-shadows anywhere on the site." `--elev-raised` is
|
||||
* literally `none`; depth comes from opacity-based borders and
|
||||
* background tints. `--elev-ring` preserves the hairline edge for
|
||||
* components that read the elevation token. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: none;
|
||||
|
||||
/* ─── Focus ───────────────────────────────────────────────────────
|
||||
* The single chromatic exception. Tailwind's default
|
||||
* `--tw-ring-color` (DESIGN.md §2 "Ring Blue") at 50% opacity, as
|
||||
* a 3px halo matching the `ring-2` shape xAI uses for keyboard
|
||||
* accessibility focus states. Non-negotiable for a11y. */
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
|
||||
/* ─── Motion ──────────────────────────────────────────────────────
|
||||
* Schema defaults. xAI does not choreograph — transitions are
|
||||
* short, purposeful, utilitarian. No long-form entrances. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ──────────────────────────────────────────────────────
|
||||
* DESIGN.md §5: "Max content width: approximately 1200px." Gutters
|
||||
* narrow on mobile so the dense-but-deliberate vertical rhythm
|
||||
* keeps reading even when the dark canvas reaches the edge. */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
Reference in new issue
Block a user