④段整套同步（六节 ＋ 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 MiniMax
|
||||
|
||||
> Category: AI & LLM
|
||||
> AI model provider. Bold dark interface with neon accents.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
MiniMax's website is a clean, product-showcase platform for a Chinese AI technology company that bridges consumer-friendly appeal with technical credibility. The design language is predominantly white-space-driven with a light, airy feel — pure white backgrounds (`#ffffff`) dominate, letting colorful product cards and AI model illustrations serve as the visual anchors. The overall aesthetic sits at the intersection of Apple's product marketing clarity and a playful, rounded design language that makes AI technology feel approachable.
|
||||
|
||||
The typography system is notably multi-font: DM Sans serves as the primary UI workhorse, Outfit handles display headings with geometric elegance, Poppins appears for mid-tier headings, and Roboto handles data-heavy contexts. This variety reflects a brand in rapid growth — each font serves a distinct communicative purpose rather than competing for attention. The hero heading at 80px weight 500 in both DM Sans and Outfit with a tight 1.10 line-height creates a bold but not aggressive opening statement.
|
||||
|
||||
What makes MiniMax distinctive is its pill-button geometry (9999px radius) for navigation and primary actions, combined with softer 8px–24px radiused cards for product showcases. The product cards themselves are richly colorful — vibrant gradients in pink, purple, orange, and blue — creating a "gallery of AI capabilities" feel. Against the white canvas, these colorful cards pop like app icons on a phone home screen, making each AI model/product feel like a self-contained creative tool.
|
||||
|
||||
**Key Characteristics:**
|
||||
- White-dominant layout with colorful product card accents
|
||||
- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)
|
||||
- Pill buttons (9999px radius) for primary navigation and CTAs
|
||||
- Generous rounded cards (20px–24px radius) for product showcases
|
||||
- Brand blue spectrum: from `#1456f0` (brand-6) through `#3b82f6` (primary-500) to `#60a5fa` (light)
|
||||
- Brand pink (`#ea5ec1`) as secondary accent
|
||||
- Near-black text (`#222222`, `#18181b`) on white backgrounds
|
||||
- Purple-tinted shadows (`rgba(44, 30, 116, 0.16)`) creating subtle brand-colored depth
|
||||
- Dark footer section (`#181e25`) with product/company links
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Brand Primary
|
||||
- **Brand Blue** (`#1456f0`): `--brand-6`, primary brand identity color
|
||||
- **Sky Blue** (`#3daeff`): `--col-brand00`, lighter brand variant for accents
|
||||
- **Brand Pink** (`#ea5ec1`): `--col-brand02`, secondary brand accent
|
||||
|
||||
### Blue Scale (Primary)
|
||||
- **Primary 200** (`#bfdbfe`): `--color-primary-200`, light blue backgrounds
|
||||
- **Primary Light** (`#60a5fa`): `--color-primary-light`, active states, highlights
|
||||
- **Primary 500** (`#3b82f6`): `--color-primary-500`, standard blue actions
|
||||
- **Primary 600** (`#2563eb`): `--color-primary-600`, hover states
|
||||
- **Primary 700** (`#1d4ed8`): `--color-primary-700`, pressed/active states
|
||||
- **Brand Deep** (`#17437d`): `--brand-3`, deep blue for emphasis
|
||||
|
||||
### Text Colors
|
||||
- **Near Black** (`#222222`): `--col-text00`, primary text
|
||||
- **Dark** (`#18181b`): Button text, headings
|
||||
- **Charcoal** (`#181e25`): Dark surface text, footer background
|
||||
- **Dark Gray** (`#45515e`): `--col-text04`, secondary text
|
||||
- **Mid Gray** (`#8e8e93`): Tertiary text, muted labels
|
||||
- **Light Gray** (`#5f5f5f`): `--brand-2`, helper text
|
||||
|
||||
### Surface & Background
|
||||
- **Pure White** (`#ffffff`): `--col-bg13`, primary background
|
||||
- **Light Gray** (`#f0f0f0`): Secondary button backgrounds
|
||||
- **Glass White** (`hsla(0, 0%, 100%, 0.4)`): `--fill-bg-white`, frosted glass overlay
|
||||
- **Border Light** (`#f2f3f5`): Subtle section dividers
|
||||
- **Border Gray** (`#e5e7eb`): Component borders
|
||||
|
||||
### Semantic
|
||||
- **Success Background** (`#e8ffea`): `--success-bg`, positive state backgrounds
|
||||
|
||||
### Shadows
|
||||
- **Standard** (`rgba(0, 0, 0, 0.08) 0px 4px 6px`): Default card shadow
|
||||
- **Soft Glow** (`rgba(0, 0, 0, 0.08) 0px 0px 22.576px`): Ambient soft shadow
|
||||
- **Brand Purple** (`rgba(44, 30, 116, 0.16) 0px 0px 15px`): Brand-tinted glow
|
||||
- **Brand Purple Offset** (`rgba(44, 30, 116, 0.11) 6.5px 2px 17.5px`): Directional brand glow
|
||||
- **Card Elevation** (`rgba(36, 36, 36, 0.08) 0px 12px 16px -4px`): Lifted card shadow
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Families
|
||||
- **Primary UI**: `DM Sans`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
- **Display**: `Outfit`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
- **Mid-tier**: `Poppins`
|
||||
- **Data/Technical**: `Roboto`, with fallbacks: `Helvetica Neue, Helvetica, Arial`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Notes |
|
||||
|------|------|------|--------|-------------|-------|
|
||||
| Display Hero | DM Sans / Outfit | 80px (5.00rem) | 500 | 1.10 (tight) | Hero headlines |
|
||||
| Section Heading | Outfit | 31px (1.94rem) | 600 | 1.50 | Feature section titles |
|
||||
| Section Heading Alt | Roboto / DM Sans | 32px (2.00rem) | 600 | 0.88 (tight) | Compact headers |
|
||||
| Card Title | Outfit | 28px (1.75rem) | 500–600 | 1.71 (relaxed) | Product card headings |
|
||||
| Sub-heading | Poppins | 24px (1.50rem) | 500 | 1.50 | Mid-tier headings |
|
||||
| Feature Label | Poppins | 18px (1.13rem) | 500 | 1.50 | Feature names |
|
||||
| Body Large | DM Sans | 20px (1.25rem) | 500 | 1.50 | Emphasized body |
|
||||
| Body | DM Sans | 16px (1.00rem) | 400–500 | 1.50 | Standard body text |
|
||||
| Body Bold | DM Sans | 16px (1.00rem) | 700 | 1.50 | Strong emphasis |
|
||||
| Nav/Link | DM Sans | 14px (0.88rem) | 400–500 | 1.50 | Navigation, links |
|
||||
| Button Small | DM Sans | 13px (0.81rem) | 600 | 1.50 | Compact buttons |
|
||||
| Caption | DM Sans / Poppins | 13px (0.81rem) | 400 | 1.70 (relaxed) | Metadata |
|
||||
| Small Label | DM Sans | 12px (0.75rem) | 500–600 | 1.25–1.50 | Tags, badges |
|
||||
| Micro | DM Sans / Outfit | 10px (0.63rem) | 400–500 | 1.50–1.80 | Tiny annotations |
|
||||
|
||||
### Principles
|
||||
- **Multi-font purpose**: DM Sans = UI workhorse (body, nav, buttons); Outfit = geometric display (headings, product names); Poppins = friendly mid-tier (sub-headings, features); Roboto = technical/data contexts.
|
||||
- **Universal 1.50 line-height**: The overwhelming majority of text uses 1.50 line-height, creating a consistent reading rhythm regardless of font or size. Exceptions: display (1.10 tight) and some captions (1.70 relaxed).
|
||||
- **Weight 500 as default emphasis**: Most headings use 500 (medium) rather than bold, creating a modern, approachable tone. 600 for section titles, 700 reserved for strong emphasis.
|
||||
- **Compact hierarchy**: The size scale jumps from 80px display straight to 28–32px section, then 16–20px body — a deliberate compression that keeps the visual hierarchy feeling efficient.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Pill Primary Dark**
|
||||
- Background: `#181e25`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 11px 20px
|
||||
- Radius: 8px
|
||||
- Use: Primary CTA ("Get Started", "Learn More")
|
||||
|
||||
**Pill Nav**
|
||||
- Background: `rgba(0, 0, 0, 0.05)` (subtle tint)
|
||||
- Text: `#18181b`
|
||||
- Radius: 9999px (full pill)
|
||||
- Use: Navigation tabs, filter toggles
|
||||
|
||||
**Pill White**
|
||||
- Background: `#ffffff`
|
||||
- Text: `rgba(24, 30, 37, 0.8)`
|
||||
- Radius: 9999px
|
||||
- Opacity: 0.5 (default state)
|
||||
- Use: Secondary nav, inactive tabs
|
||||
|
||||
**Secondary Light**
|
||||
- Background: `#f0f0f0`
|
||||
- Text: `#333333`
|
||||
- Padding: 11px 20px
|
||||
- Radius: 8px
|
||||
- Use: Secondary actions
|
||||
|
||||
### Product Cards
|
||||
- Background: Vibrant gradients (pink/purple/orange/blue)
|
||||
- Radius: 20px–24px (generous rounding)
|
||||
- Shadow: `rgba(44, 30, 116, 0.16) 0px 0px 15px` (brand purple glow)
|
||||
- Content: Product name, model version, descriptive text
|
||||
- Each card has its own color palette matching the product identity
|
||||
|
||||
### AI Product Cards (Matrix)
|
||||
- Background: white with subtle shadow
|
||||
- Radius: 13px–16px
|
||||
- Shadow: `rgba(0, 0, 0, 0.08) 0px 4px 6px`
|
||||
- Icon/illustration centered above product name
|
||||
- Product name in DM Sans 14–16px weight 500
|
||||
|
||||
### Links
|
||||
- **Primary**: `#18181b` or `#181e25`, underline on dark text
|
||||
- **Secondary**: `#8e8e93`, muted for less emphasis
|
||||
- **On Dark**: `rgba(255, 255, 255, 0.8)` for footer and dark sections
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white background
|
||||
- MiniMax logo left-aligned (red accent in logo)
|
||||
- DM Sans 14px weight 500 for nav items
|
||||
- Pill-shaped active indicators (9999px radius)
|
||||
- "Login" text link, minimal right-side actions
|
||||
- Sticky header behavior
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 14px, 16px, 24px, 32px, 40px, 50px, 64px, 80px
|
||||
|
||||
### Grid & Container
|
||||
- Max content width centered on page
|
||||
- Product card grids: horizontal scroll or 3–4 column layout
|
||||
- Full-width white sections with contained content
|
||||
- Dark footer at full-width
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, stacked cards |
|
||||
| Tablet | 768–1024px | 2-column grids |
|
||||
| Desktop | >1024px | Full layout, horizontal card scrolls |
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Gallery spacing**: Products are presented like gallery items with generous white space between cards, letting each AI model breathe as its own showcase.
|
||||
- **Section rhythm**: Large vertical gaps (64px–80px) between major sections create distinct "chapters" of content.
|
||||
- **Card breathing**: Product cards use internal padding of 16px–24px with ample whitespace around text.
|
||||
|
||||
### Border Radius Scale
|
||||
- Minimal (4px): Small tags, micro badges
|
||||
- Standard (8px): Buttons, small cards
|
||||
- Comfortable (11px–13px): Medium cards, panels
|
||||
- Generous (16px–20px): Large product cards
|
||||
- Large (22px–24px): Hero product cards, major containers
|
||||
- Pill (30px–32px): Badge pills, rounded panels
|
||||
- Full (9999px): Buttons, nav tabs
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | White background, text blocks |
|
||||
| Subtle (Level 1) | `rgba(0, 0, 0, 0.08) 0px 4px 6px` | Standard cards, containers |
|
||||
| Ambient (Level 2) | `rgba(0, 0, 0, 0.08) 0px 0px 22.576px` | Soft glow around elements |
|
||||
| Brand Glow (Level 3) | `rgba(44, 30, 116, 0.16) 0px 0px 15px` | Featured product cards |
|
||||
| Elevated (Level 4) | `rgba(36, 36, 36, 0.08) 0px 12px 16px -4px` | Lifted cards, hover states |
|
||||
|
||||
**Shadow Philosophy**: MiniMax uses a distinctive purple-tinted shadow (`rgba(44, 30, 116, ...)`) for featured elements, creating a subtle brand-color glow that connects the shadow system to the blue brand identity. Standard shadows use neutral black but at low opacity (0.08), keeping everything feeling light and airy. The directional shadow variant (6.5px offset) adds dimensional interest to hero product cards.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use white as the dominant background — let product cards provide the color
|
||||
- Apply pill radius (9999px) for navigation tabs and toggle buttons
|
||||
- Use generous border radius (20px–24px) for product showcase cards
|
||||
- Employ the purple-tinted shadow for featured/hero product cards
|
||||
- Keep body text at DM Sans weight 400–500 — heavier weights for buttons only
|
||||
- Use Outfit for display headings, DM Sans for everything functional
|
||||
- Maintain the universal 1.50 line-height across body text
|
||||
- Let colorful product illustrations/gradients serve as the primary visual interest
|
||||
|
||||
### Don't
|
||||
- Don't add colored backgrounds to main content sections — white is structural
|
||||
- Don't use sharp corners (0–4px radius) on product cards — the rounded aesthetic is core
|
||||
- Don't apply the brand pink (`#ea5ec1`) to text or buttons — it's for logo and decorative accents only
|
||||
- Don't mix more than one display font per section (Outfit OR Poppins, not both)
|
||||
- Don't use weight 700 for headings — 500–600 is the range, 700 is reserved for strong emphasis in body text
|
||||
- Don't darken shadows beyond 0.16 opacity — the light, airy feel requires restraint
|
||||
- Don't use Roboto for headings — it's the data/technical context font only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <768px | Single column, stacked product cards, hamburger nav |
|
||||
| Tablet | 768–1024px | 2-column product grids, condensed spacing |
|
||||
| Desktop | >1024px | Full horizontal card layouts, expanded spacing |
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 80px → responsive scaling to ~40px on mobile
|
||||
- Product card grid: horizontal scroll → 2-column → single column stacked
|
||||
- Navigation: horizontal → hamburger menu
|
||||
- Footer: multi-column → stacked sections
|
||||
- Spacing: 64–80px gaps → 32–40px on mobile
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Background: `#ffffff` (primary), `#181e25` (dark/footer)
|
||||
- Text: `#222222` (primary), `#45515e` (secondary), `#8e8e93` (muted)
|
||||
- Brand Blue: `#1456f0` (brand), `#3b82f6` (primary-500), `#2563eb` (hover)
|
||||
- Brand Pink: `#ea5ec1` (accent only)
|
||||
- Borders: `#e5e7eb`, `#f2f3f5`
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on white background. Headline at 80px Outfit weight 500, line-height 1.10, near-black (#222222) text. Sub-text at 16px DM Sans weight 400, line-height 1.50, #45515e. Dark CTA button (#181e25, 8px radius, 11px 20px padding, white text)."
|
||||
- "Design a product card grid: white cards with 20px border-radius, shadow rgba(44,30,116,0.16) 0px 0px 15px. Product name at 28px Outfit weight 600. Internal gradient background for the product illustration area."
|
||||
- "Build navigation bar: white background, DM Sans 14px weight 500 for links, #18181b text. Pill-shaped active tab (9999px radius, rgba(0,0,0,0.05) background). MiniMax logo left-aligned."
|
||||
- "Create an AI product matrix: 4-column grid of cards with 13px radius, subtle shadow rgba(0,0,0,0.08) 0px 4px 6px. Centered icon above product name in DM Sans 16px weight 500."
|
||||
- "Design footer on dark (#181e25) background. Product links in DM Sans 14px, rgba(255,255,255,0.8). Multi-column layout."
|
||||
|
||||
### Iteration Guide
|
||||
1. Start with white — color comes from product cards and illustrations only
|
||||
2. Pill buttons (9999px) for nav/tabs, standard radius (8px) for CTA buttons
|
||||
3. Purple-tinted shadows for featured cards, neutral shadows for everything else
|
||||
4. DM Sans handles 70% of text — Outfit is display-only, Poppins is mid-tier only
|
||||
5. Keep weights moderate (500–600 for headings) — the brand tone is confident but approachable
|
||||
6. Large radius cards (20–24px) for products, smaller radius (8–13px) for UI elements
|
||||
@@ -0,0 +1,32 @@
|
||||
# MiniMax 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
|
||||
|
||||
- White-dominant layout with colorful product card accents
|
||||
- Multi-font system: DM Sans (UI), Outfit (display), Poppins (mid-tier), Roboto (data)
|
||||
- Pill buttons (9999px radius) for primary navigation and CTAs
|
||||
- Generous rounded cards (20px–24px radius) for product showcases
|
||||
|
||||
## 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,590 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>MiniMax — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/minimax. Every visible
|
||||
value comes from tokens.css. MiniMax / Hailuo (海螺) signature
|
||||
moves: white-dominant gallery, Outfit display + DM Sans body
|
||||
with CJK fallbacks, pill nav, brand-blue accent, near-black CTA
|
||||
per the MiniMax button system, purple-tinted glow on the
|
||||
featured product card."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--muted: #45515e;
|
||||
--meta: #8e8e93;
|
||||
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
|
||||
--accent: #1456f0;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-active: #1d4ed8;
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
--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: 80px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 40px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 13px;
|
||||
--radius-lg: 20px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
|
||||
--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: 16px;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────── */
|
||||
.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-soft); }
|
||||
@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); }
|
||||
/* Outfit display — weight 500 (not 700) per DESIGN.md §3. */
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 500;
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: var(--leading-body);
|
||||
}
|
||||
p { margin: 0; }
|
||||
.lead {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--muted);
|
||||
line-height: var(--leading-body);
|
||||
font-weight: 400;
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* Smaller hero on tablet/phone — DESIGN.md §8 collapses 80px → 40px. */
|
||||
@media (max-width: 1023px) { h1 { font-size: 56px; } }
|
||||
@media (max-width: 639px) { h1 { font-size: 40px; } }
|
||||
|
||||
/* ─── Nav ───────────────────────────────────────────────── */
|
||||
.topnav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: var(--space-5);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.topnav-brand {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-lg);
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.topnav-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.topnav-tabs a {
|
||||
padding: 8px 14px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-pill);
|
||||
transition: color var(--motion-fast) var(--ease-standard),
|
||||
background-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.topnav-tabs a:hover { color: var(--fg); }
|
||||
.topnav-tabs a[aria-current="page"] {
|
||||
background: var(--bg);
|
||||
color: var(--fg-2);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
.topnav-right { display: flex; align-items: center; gap: var(--space-3); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────── */
|
||||
/* MiniMax primary CTA: near-black pill-radius (8px) bg, white text,
|
||||
11px 20px padding per DESIGN.md §4 "Pill Primary Dark". */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 11px 20px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
transition: background-color var(--motion-fast) var(--ease-standard),
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn-primary {
|
||||
background: var(--fg-2);
|
||||
color: var(--bg);
|
||||
}
|
||||
.btn-primary:hover { background: #2a323b; }
|
||||
.btn-primary:active { background: #0f1419; }
|
||||
.btn-secondary {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.btn-secondary:hover { background: #e3e3e6; }
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--fg-2);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-ghost:hover { background: var(--surface); }
|
||||
|
||||
/* ─── Chips ─────────────────────────────────────────────── */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
background: var(--surface-warm);
|
||||
color: var(--muted);
|
||||
}
|
||||
.chip-accent {
|
||||
background: color-mix(in oklab, var(--accent), transparent 90%);
|
||||
color: var(--accent);
|
||||
}
|
||||
.chip-success {
|
||||
background: color-mix(in oklab, var(--success), transparent 88%);
|
||||
color: var(--success);
|
||||
}
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
transition: box-shadow var(--motion-base) var(--ease-standard),
|
||||
transform var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover {
|
||||
box-shadow: var(--elev-raised);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-product {
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-8);
|
||||
background: var(--bg);
|
||||
/* MiniMax purple-tinted brand glow — DESIGN.md §6 Level 3.
|
||||
Single-use here; not promoted to a token. */
|
||||
box-shadow: rgba(44, 30, 116, 0.16) 0px 0px 15px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-height: 240px;
|
||||
}
|
||||
.card-product-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--meta);
|
||||
}
|
||||
.card-product-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: var(--fg-2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 500;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.field input, .field textarea {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 12px 14px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
outline: none;
|
||||
transition: border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field input:focus, .field textarea:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field-help { font-size: var(--text-xs); color: var(--muted); }
|
||||
|
||||
/* ─── Section layouts ───────────────────────────────────── */
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.3fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: end;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-6);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-5);
|
||||
margin-block-start: var(--space-8);
|
||||
}
|
||||
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
max-width: 460px;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-2);
|
||||
}
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
kbd {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
background: var(--surface-warm);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1px 6px;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="container">
|
||||
<nav class="topnav" aria-label="Primary">
|
||||
<a class="topnav-brand" href="./DESIGN.md">MiniMax</a>
|
||||
<div class="topnav-tabs" role="tablist">
|
||||
<a href="#" role="tab" aria-current="page">Products</a>
|
||||
<a href="#" role="tab">Hailuo</a>
|
||||
<a href="#" role="tab">Conch</a>
|
||||
<a href="#" role="tab">Developers</a>
|
||||
</div>
|
||||
<div class="topnav-right">
|
||||
<a href="#" class="body-sm" style="color: var(--fg-2); text-decoration: none; font-weight: 500;">Log in</a>
|
||||
<a href="#" class="btn btn-primary">Get started</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<!-- HERO — Outfit display, near-black CTA, brand-glow product card. -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · minimax</p>
|
||||
<h1>Generative AI, made for everyone.</h1>
|
||||
<p class="lead" style="max-width: 52ch;">
|
||||
From <strong style="color: var(--fg-2); font-weight: 600;">Hailuo</strong>
|
||||
video to <strong style="color: var(--fg-2); font-weight: 600;">Conch</strong> text,
|
||||
MiniMax ships consumer-friendly models that creators in
|
||||
Shanghai, São Paulo, and San Francisco can pick up in a
|
||||
single click — 一个画面，一段对话，一支视频。
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
Try Hailuo
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M5 12h14M13 6l6 6-6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-ghost">Read the spec</a>
|
||||
</div>
|
||||
<p class="body-sm body-muted" style="margin-block-start: var(--space-3);">
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> to search the catalogue.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<aside class="card-product" aria-label="Featured product">
|
||||
<div class="row-between" style="margin-block-end: var(--space-6);">
|
||||
<span class="card-product-tag">
|
||||
<span class="dot" style="color: var(--accent);"></span>
|
||||
Featured · v2.5
|
||||
</span>
|
||||
<span class="chip chip-accent">New</span>
|
||||
</div>
|
||||
<h2 class="card-product-title">Hailuo · 海螺 Video</h2>
|
||||
<p class="body-muted" style="margin-block-start: var(--space-2); font-size: var(--text-sm); max-width: 36ch;">
|
||||
Cinema-grade clips from a single prompt. 6 seconds, 1080p,
|
||||
ready to share — every render begins on a clean white canvas.
|
||||
</p>
|
||||
<div class="row-between" style="margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border-soft);">
|
||||
<span class="body-sm body-muted">Avg. render</span>
|
||||
<span class="body-sm" style="font-weight: 600; color: var(--fg-2);">42s</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FEATURES — 3-card matrix, 13px radius, neutral shadow. -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What this fixture exercises</p>
|
||||
<h2 style="max-width: 28ch;">
|
||||
Restraint in chrome. Color in the products.
|
||||
</h2>
|
||||
<p class="lead" style="max-width: 56ch;">
|
||||
Every component below uses <code>var(--*)</code> only — the
|
||||
only place a raw color enters is the purple-tinted brand glow
|
||||
on the featured card above, justified explicitly by DESIGN.md §6.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card">
|
||||
<span class="chip chip-accent" style="align-self: flex-start;">Type</span>
|
||||
<h3>Two display voices</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Outfit drives display headings at weight 500 — geometric,
|
||||
never aggressive. DM Sans handles ~70% of UI text. Both
|
||||
stacks ship with PingFang SC / Noto Sans SC fallbacks so
|
||||
<code>海螺 Video</code> aligns with English on the same baseline.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">Inspect typography →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="chip chip-success" style="align-self: flex-start;">
|
||||
<span class="dot"></span>
|
||||
Accent
|
||||
</span>
|
||||
<h3>Brand blue, used sparingly</h3>
|
||||
<p class="body-muted body-sm">
|
||||
<code>--accent: #1456f0</code> appears at most twice per
|
||||
screen — eyebrow + chip here, focus ring on the form below.
|
||||
Brand pink stays out of the token system entirely (logo-only
|
||||
per DESIGN.md §7).
|
||||
</p>
|
||||
<a href="./DESIGN.md" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">Read the rule →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="chip" style="align-self: flex-start;">Rhythm</span>
|
||||
<h3>Universal 1.5 leading</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Display hero compresses to 1.10; everything else — body,
|
||||
headings, captions — rides on a single 1.50 line-height.
|
||||
That uniformity is the MiniMax signature, holding equally
|
||||
for Latin and CJK runs.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm" style="color: var(--accent); text-decoration: none; font-weight: 500;">Inspect tokens →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FORM — accent-focused input, dark CTA, secondary action. -->
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Form components</p>
|
||||
<h2>Start a render in one prompt.</h2>
|
||||
<p class="lead" style="max-width: 46ch;">
|
||||
8px radius on inputs and buttons. Focus pulls in
|
||||
<code>#1456f0</code> as the border and a 3px translucent ring —
|
||||
the only place the brand blue earns its keep in a form.
|
||||
</p>
|
||||
<ul style="margin: 0; padding-inline-start: var(--space-5); color: var(--muted); font-size: var(--text-sm);" class="stack-3">
|
||||
<li>Single source of truth: <code>--focus-ring</code>.</li>
|
||||
<li>Submit reuses <code>.btn-primary</code> — no new variant.</li>
|
||||
<li>Placeholder uses <code>--meta</code> (tertiary tier).</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form class="form" onsubmit="event.preventDefault();" aria-label="Render prompt">
|
||||
<div class="field">
|
||||
<label for="prompt">Prompt</label>
|
||||
<textarea
|
||||
id="prompt"
|
||||
rows="3"
|
||||
placeholder="A neon koi gliding through a Shanghai night market…"
|
||||
></textarea>
|
||||
<p class="field-help">English or 中文 — Hailuo accepts either.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Notify me at</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="[email protected]"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Start render
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary">
|
||||
Save draft
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,521 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "minimax",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "MiniMax — reference components",
|
||||
"description": "Reference fixture for design-systems/minimax. Every visible value comes from tokens.css. MiniMax / Hailuo (海螺) signature moves: white-dominant gallery, Outfit display + DM Sans body with CJK fallbacks, pill nav, brand-blue accent, near-black CTA per the MiniMax button system, purple-tinted glow on the featured product card.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 62,
|
||||
"classCount": 33,
|
||||
"elementCount": 31
|
||||
},
|
||||
"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",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--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-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xs",
|
||||
"--tracking-display"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--danger",
|
||||
"--elev-flat",
|
||||
"--elev-ring",
|
||||
"--text-3xl",
|
||||
"--text-xl",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".card-product",
|
||||
".card-product-tag",
|
||||
".card-product-title",
|
||||
".card:hover",
|
||||
".chip",
|
||||
".chip-accent",
|
||||
".chip-success",
|
||||
".container",
|
||||
".dot",
|
||||
".eyebrow",
|
||||
".features-grid",
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus",
|
||||
".field label",
|
||||
".field textarea",
|
||||
".field textarea:focus",
|
||||
".field-help",
|
||||
".form",
|
||||
".form-actions",
|
||||
".form-row",
|
||||
".hero-actions",
|
||||
".hero-grid",
|
||||
".icon",
|
||||
".lead",
|
||||
".row-between",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
".topnav",
|
||||
".topnav-brand",
|
||||
".topnav-right",
|
||||
".topnav-tabs",
|
||||
".topnav-tabs a",
|
||||
".topnav-tabs a:hover",
|
||||
".topnav-tabs a[aria-current=\"page\"]",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"body",
|
||||
"code",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"kbd",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"btn-secondary",
|
||||
"card",
|
||||
"card-product",
|
||||
"card-product-tag",
|
||||
"card-product-title",
|
||||
"chip",
|
||||
"chip-accent",
|
||||
"chip-success",
|
||||
"container",
|
||||
"dot",
|
||||
"eyebrow",
|
||||
"features-grid",
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-actions",
|
||||
"form-row",
|
||||
"hero-actions",
|
||||
"hero-grid",
|
||||
"icon",
|
||||
"lead",
|
||||
"row-between",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"topnav",
|
||||
"topnav-brand",
|
||||
"topnav-right",
|
||||
"topnav-tabs"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"body",
|
||||
"button",
|
||||
"code",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"head",
|
||||
"header",
|
||||
"html",
|
||||
"input",
|
||||
"kbd",
|
||||
"label",
|
||||
"li",
|
||||
"main",
|
||||
"meta",
|
||||
"nav",
|
||||
"p",
|
||||
"path",
|
||||
"section",
|
||||
"span",
|
||||
"strong",
|
||||
"style",
|
||||
"svg",
|
||||
"textarea",
|
||||
"title",
|
||||
"ul"
|
||||
],
|
||||
"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-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"btn-secondary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--surface-warm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"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:focus",
|
||||
".field-help"
|
||||
],
|
||||
"classes": [
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-actions",
|
||||
"form-row"
|
||||
],
|
||||
"elements": [
|
||||
"form",
|
||||
"input",
|
||||
"label",
|
||||
"textarea"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg-2",
|
||||
"--meta",
|
||||
"--muted",
|
||||
"--text-sm",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card",
|
||||
".card-product",
|
||||
".card-product-tag",
|
||||
".card-product-title",
|
||||
".card:hover"
|
||||
],
|
||||
"classes": [
|
||||
"card",
|
||||
"card-product",
|
||||
"card-product-tag",
|
||||
"card-product-title"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--bg",
|
||||
"--border-soft",
|
||||
"--ease-standard",
|
||||
"--fg-2",
|
||||
"--font-display",
|
||||
"--motion-base",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--space-3",
|
||||
"--space-6",
|
||||
"--space-8"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".chip",
|
||||
".chip-accent",
|
||||
".chip-success"
|
||||
],
|
||||
"classes": [
|
||||
"chip",
|
||||
"chip-accent",
|
||||
"chip-success"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--muted",
|
||||
"--radius-pill",
|
||||
"--space-2",
|
||||
"--success",
|
||||
"--surface-warm",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".topnav-tabs a",
|
||||
".topnav-tabs a:hover",
|
||||
".topnav-tabs a[aria-current=\"page\"]"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
"kbd"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"kbd"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--font-mono",
|
||||
"--muted",
|
||||
"--radius-sm",
|
||||
"--surface",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "icons",
|
||||
"label": "Icon slots",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".icon"
|
||||
],
|
||||
"classes": [
|
||||
"icon"
|
||||
],
|
||||
"elements": [
|
||||
"svg"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".eyebrow",
|
||||
".lead",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"eyebrow",
|
||||
"lead"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--fg",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--muted",
|
||||
"--text-2xl",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".row-between",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"hero-grid",
|
||||
"row-between",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"header",
|
||||
"main",
|
||||
"nav",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-4"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 7,
|
||||
"pixelValues": 39,
|
||||
"hardcodedFontFamilies": 11
|
||||
}
|
||||
}
|
||||
@@ -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": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:44"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#fafafa",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:45"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#f0f0f0",
|
||||
"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:46"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#222222",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:49"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#18181b",
|
||||
"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:50"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#45515e",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:51"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#8e8e93",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:52"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#e5e7eb",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:55"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#f2f3f5",
|
||||
"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:56"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#1456f0",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:59"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:60"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#2563eb",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:61"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "#1d4ed8",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:62"
|
||||
],
|
||||
"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:65"
|
||||
],
|
||||
"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:66"
|
||||
],
|
||||
"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:67"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"Outfit\", \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif",
|
||||
"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:74"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", 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:75"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, 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:76"
|
||||
],
|
||||
"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:81"
|
||||
],
|
||||
"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:82"
|
||||
],
|
||||
"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:83"
|
||||
],
|
||||
"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:84"
|
||||
],
|
||||
"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:85"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "32px",
|
||||
"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:86"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "48px",
|
||||
"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:87"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "80px",
|
||||
"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:88"
|
||||
],
|
||||
"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:94"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.1",
|
||||
"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:95"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.01em",
|
||||
"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:96"
|
||||
],
|
||||
"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:102"
|
||||
],
|
||||
"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:103"
|
||||
],
|
||||
"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:104"
|
||||
],
|
||||
"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:105"
|
||||
],
|
||||
"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:106"
|
||||
],
|
||||
"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:107"
|
||||
],
|
||||
"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:108"
|
||||
],
|
||||
"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:109"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"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:114"
|
||||
],
|
||||
"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:115"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "40px",
|
||||
"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:116"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "13px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:122"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"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:124"
|
||||
],
|
||||
"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:131"
|
||||
],
|
||||
"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:132"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 4px 6px rgba(0, 0, 0, 0.08)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:133"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"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:139"
|
||||
],
|
||||
"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:140"
|
||||
],
|
||||
"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:141"
|
||||
],
|
||||
"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:144"
|
||||
],
|
||||
"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:145"
|
||||
],
|
||||
"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:146"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"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:147"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "minimax",
|
||||
"name": "MiniMax",
|
||||
"category": "AI & LLM",
|
||||
"description": "Bundled OpenDesign package for MiniMax, 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>MiniMax 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>MiniMax 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>MiniMax 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 MiniMax</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 @@
|
||||
# MiniMax 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/minimax/DESIGN.md
|
||||
- design-systems/minimax/tokens.css
|
||||
- design-systems/minimax/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": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:44"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#fafafa",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:45"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "#f0f0f0",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:46"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#222222",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:49"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "#18181b",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:50"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "#45515e",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:51"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "#8e8e93",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:52"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "#e5e7eb",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:55"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "#f2f3f5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:56"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#1456f0",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:59"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:60"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "#2563eb",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:61"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "#1d4ed8",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:62"
|
||||
],
|
||||
"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:65"
|
||||
],
|
||||
"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:66"
|
||||
],
|
||||
"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:67"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"Outfit\", \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:74"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:75"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:76"
|
||||
],
|
||||
"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:81"
|
||||
],
|
||||
"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:82"
|
||||
],
|
||||
"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:83"
|
||||
],
|
||||
"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:84"
|
||||
],
|
||||
"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:85"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:86"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:87"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "80px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:88"
|
||||
],
|
||||
"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:94"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.1",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:95"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "-0.01em",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:96"
|
||||
],
|
||||
"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:102"
|
||||
],
|
||||
"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:103"
|
||||
],
|
||||
"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:104"
|
||||
],
|
||||
"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:105"
|
||||
],
|
||||
"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:106"
|
||||
],
|
||||
"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:107"
|
||||
],
|
||||
"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:108"
|
||||
],
|
||||
"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:109"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "80px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:114"
|
||||
],
|
||||
"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:115"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "40px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:116"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "13px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:122"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"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:124"
|
||||
],
|
||||
"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:131"
|
||||
],
|
||||
"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:132"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "0 4px 6px rgba(0, 0, 0, 0.08)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:133"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"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:139"
|
||||
],
|
||||
"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:140"
|
||||
],
|
||||
"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:141"
|
||||
],
|
||||
"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:144"
|
||||
],
|
||||
"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:145"
|
||||
],
|
||||
"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:146"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:147"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "minimax",
|
||||
"files": [
|
||||
"DESIGN.md",
|
||||
"tokens.css",
|
||||
"components.html"
|
||||
],
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#ffffff",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:44"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#fafafa",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:45"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#f0f0f0",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:46"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#222222",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:49"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#18181b",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:50"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#45515e",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:51"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#8e8e93",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:52"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#e5e7eb",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:55"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#f2f3f5",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:56"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#1456f0",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:59"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:60"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#2563eb",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:61"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "#1d4ed8",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:62"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#16a34a",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:65"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:66"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#dc2626",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:67"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"Outfit\", \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:74"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"DM Sans\", \"Helvetica Neue\", Helvetica, Arial, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Noto Sans SC\", sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:75"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:76"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:81"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:82"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:83"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:84"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:85"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:86"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:87"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "80px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:88"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:94"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.1",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:95"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.01em",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:96"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:102"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:103"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:104"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:105"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:106"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:107"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:108"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:109"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:114"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "64px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:115"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "40px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:116"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:121"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "13px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:122"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:123"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:124"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:131"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:132"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 4px 6px rgba(0, 0, 0, 0.08)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:133"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:136"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:139"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:140"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:141"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:144"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:145"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:146"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:147"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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>MiniMax - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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 MiniMax, 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="MiniMax" /></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>MiniMax - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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 MiniMax, 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="MiniMax" /></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>MiniMax - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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 MiniMax, 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="MiniMax" /></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>MiniMax - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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 MiniMax, 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="MiniMax" /></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>MiniMax - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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 MiniMax, 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="MiniMax" /></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>MiniMax - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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 MiniMax, 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="MiniMax" /></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>MiniMax - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax 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>MiniMax - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for MiniMax, 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>MiniMax - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #1456f0;
|
||||
--accent-active: #1d4ed8;
|
||||
--accent-hover: #2563eb;
|
||||
--accent-on: #ffffff;
|
||||
--bg: #ffffff;
|
||||
--border: #e5e7eb;
|
||||
--border-soft: #f2f3f5;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #222222;
|
||||
--fg-2: #18181b;
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--meta: #8e8e93;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #45515e;
|
||||
--radius-lg: 20px;
|
||||
--radius-md: 13px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 40px;
|
||||
--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: #fafafa;
|
||||
--surface-warm: #f0f0f0;
|
||||
--text-2xl: 32px;
|
||||
--text-3xl: 48px;
|
||||
--text-4xl: 80px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.01em;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #fafafa;
|
||||
--od-text: #222222;
|
||||
--od-muted: #45515e;
|
||||
--od-border: #e5e7eb;
|
||||
--od-accent: #1456f0;
|
||||
--od-radius: 13px;
|
||||
--od-font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--od-font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
* { 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>MiniMax component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for MiniMax, 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": "#1456f0",
|
||||
"colorPrimaryBg": "#f0f0f0",
|
||||
"colorPrimaryHover": "#2563eb",
|
||||
"colorPrimaryActive": "#1d4ed8",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 13
|
||||
}
|
||||
@@ -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,148 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/minimax/tokens.css
|
||||
*
|
||||
* Structured token bindings for the "MiniMax" brand — the Shanghai-based
|
||||
* AI lab behind Hailuo (海螺) video and Conch text. The visual language
|
||||
* is a white-dominant product gallery: pure white canvas, vivid product
|
||||
* cards, pill navigation, multi-font hierarchy, and a purple-tinted brand
|
||||
* glow on featured surfaces. The font stacks include CJK fallbacks
|
||||
* (PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC) so the
|
||||
* bilingual en/zh audience sees the same vertical rhythm in either script.
|
||||
*
|
||||
* Brand identity in three sentences:
|
||||
* 1. White canvas (#ffffff) is structural; color enters via product
|
||||
* cards, illustrations, and a single brand-blue accent — never via
|
||||
* tinted page backgrounds.
|
||||
* 2. Multi-font system: Outfit for display headings (geometric, weight
|
||||
* 500), DM Sans as the UI workhorse for body / nav / buttons. CJK
|
||||
* fallbacks keep Chinese headings on the same rhythm as English.
|
||||
* 3. Brand blue (#1456f0) is the accent — sparing, reserved for links,
|
||||
* focus rings, and small chips. Primary CTAs use near-black
|
||||
* (#181e25 → --fg-2) per the MiniMax button system; brand pink
|
||||
* (#ea5ec1) is logo / decorative only and never tokenized.
|
||||
*
|
||||
* Schema decisions:
|
||||
* - --bg: #ffffff; --surface: #fafafa (whisper card lift on white).
|
||||
* - --surface-warm: #f0f0f0 (secondary button bg per DESIGN.md §4).
|
||||
* - --fg: #222222 (near-black); --fg-2: #18181b (button text, deep heads).
|
||||
* - --muted: #45515e (DESIGN.md "dark gray" secondary text).
|
||||
* - --meta: #8e8e93 (tertiary, muted labels per DESIGN.md §2).
|
||||
* - --border: #e5e7eb; --border-soft: #f2f3f5 (section divider).
|
||||
* - --accent: #1456f0 (brand blue 6); hover #2563eb / active #1d4ed8.
|
||||
* - --font-display: Outfit + CJK fallbacks; --font-body: DM Sans + CJK.
|
||||
* - --text-4xl: 80px (display hero, Outfit weight 500 per DESIGN.md §3).
|
||||
* - --leading-body: 1.5 (universal MiniMax rhythm); --leading-tight: 1.1.
|
||||
* - --radius-sm: 8px (CTA), --radius-md: 13px (card),
|
||||
* --radius-lg: 20px (product showcase), --radius-pill: 9999px (nav).
|
||||
* - --elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08) — DESIGN.md §6 Level 1.
|
||||
* The brand-glow shadow rgba(44, 30, 116, 0.16) stays inline on
|
||||
* featured product cards (one-off, not promoted to a token).
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface ──────────────────────────────────────────────────── */
|
||||
--bg: #ffffff; /* pure white — primary canvas */
|
||||
--surface: #fafafa; /* near-white — card lift on bg */
|
||||
--surface-warm: #f0f0f0; /* secondary button bg (DESIGN.md §4) */
|
||||
|
||||
/* ─── Foreground ───────────────────────────────────────────────── */
|
||||
--fg: #222222; /* near-black — primary text */
|
||||
--fg-2: #18181b; /* button text + dark headings */
|
||||
--muted: #45515e; /* dark gray — secondary text */
|
||||
--meta: #8e8e93; /* mid gray — tertiary, muted labels */
|
||||
|
||||
/* ─── Border ───────────────────────────────────────────────────── */
|
||||
--border: #e5e7eb; /* component edge */
|
||||
--border-soft: #f2f3f5; /* subtle section divider */
|
||||
|
||||
/* ─── Accent ───────────────────────────────────────────────────── */
|
||||
--accent: #1456f0; /* MiniMax brand blue 6 */
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: #2563eb; /* primary 600 — hover */
|
||||
--accent-active: #1d4ed8; /* primary 700 — pressed */
|
||||
|
||||
/* ─── Semantic ─────────────────────────────────────────────────── */
|
||||
--success: #16a34a;
|
||||
--warn: #eab308;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography ───────────────────────────────────────────────── */
|
||||
/* DM Sans = UI workhorse; Outfit = geometric display. CJK fallbacks
|
||||
(PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans SC) give
|
||||
Chinese-language headings + body the same vertical rhythm so 海螺 /
|
||||
Conch / MiniMax all align without per-script overrides. */
|
||||
--font-display: "Outfit", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Type scale — DESIGN.md §3 hierarchy.
|
||||
* MiniMax compresses from 80px display straight to 32px section, then
|
||||
* 16–20px body — a deliberate jump that keeps the visual ladder short. */
|
||||
--text-xs: 12px; /* small label, tag */
|
||||
--text-sm: 14px; /* nav / link */
|
||||
--text-base: 16px; /* body */
|
||||
--text-lg: 20px; /* body large, emphasized */
|
||||
--text-xl: 24px; /* sub-heading (Poppins context) */
|
||||
--text-2xl: 32px; /* section heading alt */
|
||||
--text-3xl: 48px; /* H1 step between section and display */
|
||||
--text-4xl: 80px; /* display hero — Outfit weight 500 */
|
||||
|
||||
/* Leading + tracking.
|
||||
* Universal 1.50 line-height across body and most headings is the
|
||||
* MiniMax signature (DESIGN.md §3); display compresses to 1.10 for the
|
||||
* 80px hero. Slight negative tracking on display sizes only. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.1;
|
||||
--tracking-display: -0.01em;
|
||||
|
||||
/* ─── Spacing ──────────────────────────────────────────────────── */
|
||||
/* 8px base grid per DESIGN.md §5; the schema spine uses 4px steps
|
||||
capped at --space-12 (48px). Larger gallery gaps (64–80px) live in
|
||||
the section-rhythm tier below. */
|
||||
--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 gallery spacing: 64–80px between sections on desktop,
|
||||
compressing to 32–40px on phone. */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 64px;
|
||||
--section-y-phone: 40px;
|
||||
|
||||
/* ─── Radius ───────────────────────────────────────────────────── */
|
||||
/* DESIGN.md §5 scale: 8px on CTA buttons / small cards, 13px on
|
||||
medium cards/panels, 20px on product cards, 9999px on pill nav. */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 13px;
|
||||
--radius-lg: 20px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ────────────────────────────────────────────────── */
|
||||
/* DESIGN.md §6: light, airy shadows capped at 0.08 opacity. Standard
|
||||
cards use the neutral black drop below; featured product cards add
|
||||
the purple-tinted brand glow rgba(44, 30, 116, 0.16) inline as a
|
||||
one-off (single-use, not promoted to a token). */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
/* ─── Focus ────────────────────────────────────────────────────── */
|
||||
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
||||
|
||||
/* ─── Motion ───────────────────────────────────────────────────── */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ───────────────────────────────────────────────────── */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
Reference in new issue
Block a user