admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根

Browse Source 
一、④段整套同步（用户选候选 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 2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
4184 files changed
+326 -70
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

open-design/design-systems/meta/DESIGN.md
+369
View File
@@ -0,0 +1,369 @@
# Design System Inspired by Meta (Store)
> Category: E-Commerce & Retail
> Tech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs.
## 1. Visual Theme & Atmosphere
The Meta Store is a product-forward retail experience built to sell hardware — Quest VR headsets, Ray-Ban Meta smart glasses, and accessories. The design walks a tightrope between consumer electronics showroom and lifestyle editorial, deploying cinematic product photography against expansive white canvas to create a gallery-like sense of aspiration. Every design decision serves the merchandise: generous negative space frames hero product shots like museum pieces, while alternating light and dark surface sections create a visual rhythm that mimics the experience of walking through a physical retail space.
The "Dolly" design system (Meta's internal name for the store layer) sits atop the broader FDS (Facebook Design System) foundation, inheriting its gray scale and semantic tokens while overlaying its own product-focused palette. The result is a system that feels distinctly Meta — the custom Optimistic typeface brings warmth and approachability to what could otherwise be cold tech retail — yet flexible enough to showcase wildly different product lines (from VR headsets to fashion eyewear) without feeling disjointed. The surface strategy is binary: pure white for browsing and information, rich dark for immersive product moments.
The store's visual hierarchy is ruthlessly simple. Photography does the heavy lifting, supported by short, punchy headlines in Optimistic Medium and body text that stays brief and scannable. Calls to action are pill-shaped, unmistakable, and always Meta Blue. There is no visual noise, no decoration for decoration's sake — every element either sells or navigates.
**Key Characteristics:**
- Photography-first retail design where products are the visual heroes, not UI
- Binary surface strategy: pure white for information, deep dark for immersive product moments
- Pill-shaped CTAs in saturated blue create unmistakable action points
- Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth
- Generous whitespace frames products like gallery exhibits
- 8px spacing grid with disciplined vertical rhythm
- Alternating light/dark sections create a "walkthrough" retail cadence
## 2. Color Palette & Roles
### Primary
- **Meta Blue** (`#0064E0`): Primary CTA background, interactive links, action-driving elements throughout the store
- **Meta Blue Hover** (`#0143B5`): Darkened blue for hover states on primary buttons
- **Meta Blue Pressed** (`#004BB9`): Deepest blue for active/pressed button states
- **Meta Blue Light** (`#47A5FA`): Lighter blue variant used on dark backgrounds for CTAs
- **Facebook Blue** (`#1877F2`): Legacy accent inherited from FDS, used for deemphasized button text and badges
### Secondary & Accent
- **Ray-Ban Red** (`#D6311F`): Product-specific accent for Ray-Ban Meta smart glasses sections
- **Oculus Purple** (`#A121CE`): Quest/Oculus product accent for VR content
- **Work Purple** (`#6441D2`): Accent for Meta for Work/enterprise content
- **Portal Blue** (`#1B365D`): Deep navy accent for Portal product line
- **Portal Hero Blue** (`#C8E4E8`): Soft teal-blue for Portal hero backgrounds
- **Portal Light Blue** (`#ADD4E0`): Secondary Portal surface tint
### Surface & Background
- **White** (`#FFFFFF`): Primary page canvas, nav bar background, card surfaces
- **Soft Gray** (`#F1F4F7`): Secondary background for content sections (--dolly-bg-grey)
- **Warm Gray** (`#F7F8FA`): Flat card background, subtle surface differentiation
- **Web Wash** (`#F0F2F5`): Deemphasized background areas, attachment footers
- **Linen** (`#F2F0E6`): Warm off-white for lifestyle-adjacent sections
- **Baby Blue** (`#E8F3FF`): Highlight background, subtle blue tint for informational areas
- **Near Black** (`#1C1E21`): Dark section backgrounds, immersive product showcase areas
- **Oculus Light** (`#181A1B`): Slightly warm dark surface for Quest product sections
- **Oculus Dark** (`#000000`): Pure black for maximum contrast product displays
- **Overlay** (`rgba(0, 0, 0, 0.6)`): Modal/lightbox backdrop
### Neutrals & Text
- **Primary Text** (`#050505`): Main body and heading text on light surfaces
- **Dark Charcoal** (`#1C2B33`): Dolly system primary text, slightly warmer than pure black (--dolly-text-primary)
- **Icon Secondary** (`#465A69`): Secondary icon fills, subdued UI elements
- **Secondary Text** (`#65676B`): Supporting copy, labels, timestamps (--secondary-text)
- **Slate Gray** (`#5D6C7B`): Meta Store secondary text, product descriptions (--dolly-text-secondary)
- **Section Header** (`#4B4C4F`): Mid-gray for section titles
- **Button Text Gray** (`#444950`): FDS button text default (--fds-button-text)
- **Disabled Text** (`#BCC0C4`): Inactive button labels, placeholder text
- **CTA Disabled Text** (`#8595A4`): Muted blue-gray for disabled interactive labels
- **Divider** (`#CED0D4`): Content separators, input borders
- **Divider Gray** (`#DEE3E9`): Lighter divider for Dolly sections
- **CTA Gray Border** (`#CBD2D9`): Outline button borders
- **Dark Gray Border** (`#909396`): Stronger outline for emphasis
### Semantic & Accent
- **Success Green** (`#31A24C`): Badge success background, positive indicators
- **Store Success** (`#007D1E`): Darker success green for Dolly store confirmations
- **Error Red** (`#E41E3F`): Critical badge background, notification badges
- **Store Error** (`#C80A28`): Darker error red for Dolly store error states
- **Warning Amber** (`#F7B928`): Attention badges, caution indicators
- **Positive BG** (`rgba(36, 228, 0, 0.15)`): Subtle success background tint
- **Error BG** (`rgba(255, 123, 145, 0.15)`): Subtle error background tint
- **Warning BG** (`rgba(255, 226, 0, 0.15)`): Subtle warning background tint
- **Info BG** (`rgba(0, 145, 255, 0.15)`): Subtle informational blue tint
### Base Color Spectrum (FDS)
- **Cherry** (`#F3425F`): Expressive accent
- **Grape** (`#9360F7`): Purple accent
- **Lime** (`#45BD62`): Green accent
- **Seafoam** (`#54C7EC`): Cyan accent
- **Teal** (`#2ABBA7`): Teal accent
- **Tomato** (`#FB724B`): Orange accent
- **Pink** (`#FF66BF`): Pink accent
### Gradient System
- **Dark Overlay Gradient**: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` — applied over dark product photography for text legibility
- **Blue Infinity Gradient**: The Meta symbol uses a blue-to-teal gradient on brand materials, though the store uses flat blue
- **Shadow Alpha Scale**: 0.05, 0.10, 0.15, 0.20, 0.30, 0.40, 0.50, 0.60, 0.80 — both black and white alpha ramps for layered transparency
## 3. Typography Rules
### Font Family
**Primary:** Optimistic VF (variable font by Dalton Maag, commissioned by Meta)
- Fallbacks: Montserrat, Helvetica, Arial, Noto Sans
- OpenType features: `"ss01", "ss02"` — stylistic sets that activate Meta-specific alternate glyphs
- Variable font with continuous weight axis (observed: 300, 400, 500, 700)
**Secondary:** Helvetica
- Fallbacks: Arial
- Used for small utility text (12px footer links, legal copy)
### Hierarchy
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|--------|-------------|----------------|-------|
| Display 1 | 64px | 500 (Medium) | 1.16 | — | Hero headlines on desktop, ss01+ss02 |
| Display 2 | 48px | 500 (Medium) | 1.17 | — | Section heroes, product titles |
| Heading 1 | 36px | 500 (Medium) | 1.28 | — | Major section headings |
| Heading 2 | 28px | 300 (Light) | 1.21 | — | Subheadings, lighter feel |
| Heading 3 | 18px | 700 (Bold) | 1.44 | — | Card titles, bold callouts, ss01+ss02 |
| Body | 18px | 400 (Regular) | 1.44 | — | Product descriptions, body copy |
| Body Compact | 16px | 500 (Medium) | 1.50 | -0.16px | Navigation links, UI labels |
| Caption Bold | 14px | 700 (Bold) | 1.43 | — | Emphasized labels, price text |
| Caption | 14px | 400 (Regular) | 1.43 | -0.14px | Secondary labels, metadata |
| Small | 12px | 400 (Regular) | 1.33 | — | Footer links, legal text, timestamps |
| Button | 14px | 400 (Regular) | 1.43 | -0.14px | Button label text |
### Principles
Optimistic VF is the cornerstone of Meta's typographic identity — a humanist sans-serif with geometric underpinnings that strikes a balance between Silicon Valley precision and consumer warmth. The "ss01" and "ss02" stylistic sets introduce alternate glyphs that give headlines a distinctive Meta character. Weight 500 (Medium) dominates headlines, creating a presence that commands without shouting, while the unexpected use of weight 300 (Light) at 28px adds an airy, editorial quality to subheadings. Negative letter-spacing at smaller sizes (-0.14px to -0.16px) tightens the optical rhythm for UI elements, keeping the reading experience crisp and efficient.
## 4. Component Stylings
### Buttons
**Primary (Pill)**
- Background: Meta Blue (`#0064E0`)
- Text: White (`#FFFFFF`)
- Border: none
- Border radius: fully rounded pill (100px)
- Padding: 10px 22px
- Font: Optimistic VF, 14px, regular, -0.14px tracking
- Hover: darkens to `#0143B5`, scale(1.1) transform
- Pressed: `#004BB9`, scale(0.9), opacity 0.5
- Focus: 3px ring in accent color, outline auto 2px
- Transition: background 200ms ease, transform 150ms ease
**Secondary (Outlined Pill)**
- Background: transparent
- Text: Dark Charcoal (`#1C2B33`) at 50% opacity
- Border: 2px solid `rgba(10, 19, 23, 0.12)`
- Border radius: fully rounded pill (100px)
- Padding: 10px 22px
- Hover: background shifts to `rgba(70, 90, 105, 0.7)`, text to white
**Ghost/Link Button**
- Background: transparent / `rgba(255, 255, 255, 0)`
- Text: Link Blue (`#385898`)
- Border radius: 24px
- Padding: 4px 12px
**Disabled**
- Background: `#DEE3E9` (--dolly-cta-disabled)
- Text: `#8595A4` (--dolly-cta-disabled-text)
- Cursor: not-allowed, no hover effects
### Cards & Containers
- Background: White (`#FFFFFF`) or Flat Gray (`#F7F8FA`)
- Corner radius: 20px (--card-corner-radius) for standard cards, 24px for product feature cards
- Padding: 10px horizontal, 20px vertical (--card-padding)
- Shadow: `0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)` (elevated cards)
- Hover: subtle lift via translateY(-2px) and shadow intensification
- Transition: transform 300ms ease, box-shadow 300ms ease
- Product cards use full-bleed imagery with text overlay on dark gradient
### Inputs & Forms
- Background: White (`#FFFFFF`)
- Border: 1px solid `#CED0D4` (--input-border-color)
- Border radius: 8px
- Font: Optimistic VF, 16px
- Focus: border color shifts to accent blue `hsl(214, 89%, 52%)`, 3px outer ring
- Error: border and label color `hsl(350, 87%, 55%)`
- Placeholder: `#65676B` (--secondary-text)
- Transition: border-color 200ms ease, box-shadow 200ms ease
### Navigation
- Background: White (`#FFFFFF`), sticky at top
- Frosted glass effect: `rgba(241, 244, 247, 0.8)` with backdrop-filter blur
- Logo: Meta wordmark SVG, left-aligned
- Links: Optimistic VF, 16px/500, Dark Charcoal (`#1C2B33`)
- Hover: underline decoration
- CTA: Blue pill button, right-aligned
- Mobile: hamburger collapse, full-screen overlay nav
- Height: approximately 56px desktop, 48px mobile
- Border-bottom: subtle `rgba(0,0,0,0.1)` separator
### Image Treatment
- Product hero: full-width, cinematic aspect ratio (~21:9 on desktop, ~4:3 on mobile)
- Product cards: 1:1 or 4:3, edge-to-edge within card radius
- Feature images: rounded corners matching card radius (20-24px)
- Dark text-over-image: gradient overlay `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))`
- Lazy loading: native loading="lazy" on below-fold images
- WebP format with JPEG fallback
### Product-Specific Sections
- **Quest sections**: Dark backgrounds (`#181A1B` or `#000000`), white/light text, purple accents (`#A121CE`)
- **Ray-Ban sections**: Warm lifestyle photography, red accents (`#D6311F`), linen tones (`#F2F0E6`)
- **Portal sections**: Teal-blue palette (`#C8E4E8`, `#ADD4E0`), navy accents (`#1B365D`)
## 5. Layout Principles
### Spacing System
Base unit: 8px
| Token | Value | Use |
|-------|-------|-----|
| space-1 | 1px | Hairline borders |
| space-2 | 4px | Tight internal padding |
| space-3 | 8px | Base unit, icon gaps |
| space-4 | 10px | Card horizontal padding |
| space-5 | 12px | Button icon spacing, tight margins |
| space-6 | 14px | Caption line height spacing |
| space-7 | 16px | Standard paragraph spacing, nav padding |
| space-8 | 18px | Body text vertical rhythm |
| space-9 | 24px | Card section spacing, grid gaps |
| space-10 | 32px | Section content padding |
| space-11 | 40px | Major content block spacing |
| space-12 | 48px | Section vertical padding (compact) |
| space-13 | 64px | Section vertical padding (standard) |
| space-14 | 80px | Hero section padding, large section gaps |
### Grid & Container
- Max container width: ~1440px, centered with auto margins
- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
- Feature grid: 2-column split (image + content), stacks on mobile
- Grid gap: 24px between cards, 16px on mobile
- Page horizontal padding: 24-40px depending on breakpoint
### Whitespace Philosophy
Whitespace is the store's primary luxury signifier. Sections breathe with 64-80px vertical padding, creating a sense of unhurried browsing. Product images float in generous negative space rather than being crammed edge-to-edge. This restrained spacing communicates premium positioning — the visual equivalent of wide aisles in a high-end retail store.
### Border Radius Scale
| Value | Context |
|-------|---------|
| 8px | Inputs, small UI elements, glimmer placeholders |
| 20px | Cards (--card-corner-radius) |
| 24px | Feature cards, product highlight areas, ghost buttons |
| 100px | Pill buttons, tags, badges (fully rounded) |
## 6. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| Flat | No shadow, background differentiation only | Default cards, sections |
| Level 1 | `0 2px 4px 0 rgba(0,0,0,0.1)` | Subtle lift for interactive cards |
| Level 2 | `0 12px 28px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1)` | Elevated cards, dropdowns |
| Overlay | `rgba(0,0,0,0.6)` full-screen | Modal/lightbox backdrop |
| Inset | `rgba(255,255,255,0.5)` inset | Inner glow on glass-effect surfaces |
The Meta Store favors a primarily flat elevation model. Most surface differentiation comes from background color shifts (white → soft gray → dark) rather than shadows. When shadows appear, they are soft, diffused, and use the dual-shadow pattern (a large blurred shadow for ambient light + a small sharp shadow for direct light). This creates a physically plausible depth feel without heavy visual weight.
### Decorative Depth
- **Frosted glass nav**: `rgba(241, 244, 247, 0.8)` background with backdrop-filter blur, creating a translucent navigation bar
- **Dark section gradient**: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` overlay on product photography for text legibility
- **Glimmer loading states**: Pulsating opacity animation (0.25 → 1.0) on `#979A9F` base color with 8px radius, 1000ms steps timing — used for skeleton screens during product image loading
## 7. Do's and Don'ts
### Do
- Use pill-shaped (100px radius) buttons for all primary and secondary CTAs
- Let product photography dominate — make images the visual hero of every section
- Alternate between light and dark surface sections to create visual rhythm
- Use Optimistic VF with ss01 and ss02 features for all display text
- Keep body copy brief and scannable — this is retail, not editorial
- Use the dual-shadow pattern (ambient + direct) when elevation is needed
- Apply Meta Blue (`#0064E0`) exclusively for actionable elements
- Use generous whitespace (64-80px section padding) to convey premium feel
- Apply gradient overlays on dark photography when placing text over images
- Use the semantic color tokens (success, error, warning) consistently for status communication
### Don't
- Don't use sharp corners (< 8px radius) — the Meta Store is all smooth curves
- Don't mix product-specific accents (Ray-Ban Red with Quest Purple in the same section)
- Don't add decorative borders or ornamental dividers — dividers are functional only
- Don't place important text directly on photography without a gradient scrim
- Don't use weight 300 for anything smaller than 28px — it becomes too thin
- Don't use Facebook Blue (`#1877F2`) as a primary CTA color — use Meta Blue (`#0064E0`) instead
- Don't crowd product images — maintain generous padding around all photography
- Don't use more than 2 levels of text hierarchy in a single card
- Don't add drop shadows to cards in dark sections — rely on border and color separation
- Don't use long paragraphs — limit to 2-3 lines of body copy per block
## 8. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | Single column, hamburger nav, hero text shrinks to 36px, full-width product cards, 48px section padding |
| Tablet | 768-1024px | 2-column product grid, compact nav, hero text at 48px |
| Desktop | 1024-1440px | 3-column product grid, full horizontal nav, hero text at 64px, 80px section padding |
| Large Desktop | >1440px | Max-width container (1440px) centered, increased horizontal margins |
### Touch Targets
- Minimum touch target: 44x44px (WCAG AAA compliant)
- Mobile button height: minimum 44px with 10px vertical padding
- Nav hamburger icon: 48x48px touch area
- Product card tappable area: full card surface
### Collapsing Strategy
- **Navigation**: Horizontal links collapse to hamburger menu below 768px; CTA button remains visible
- **Product grids**: 3-col → 2-col at 1024px → 1-col at 768px
- **Hero sections**: Display text scales from 64px → 48px → 36px; CTA buttons stack vertically on mobile
- **Feature sections**: 2-column (image + text) → full-width stacked below 768px, image on top
- **Section padding**: 80px → 64px → 48px → 32px as viewport narrows
- **Card radius**: Remains consistent at 20-24px across all breakpoints
### Image Behavior
- Responsive images via srcset with multiple resolutions
- WebP format with progressive JPEG fallback
- Hero images: full-bleed on mobile, contained on desktop
- Product grid images: maintain aspect ratio, scale proportionally
- Art direction: hero crop changes between desktop (wide cinematic) and mobile (tighter product focus)
- Lazy loading with glimmer skeleton (pulsating gray placeholder) during load
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary CTA: Meta Blue (`#0064E0`)
- Background: White (`#FFFFFF`)
- Heading text: Dark Charcoal (`#1C2B33`)
- Body text: Slate Gray (`#5D6C7B`)
- Border/divider: Divider Gray (`#DEE3E9`)
- Secondary surface: Soft Gray (`#F1F4F7`)
- Dark sections: Near Black (`#1C1E21`)
### Example Component Prompts
- "Create a product hero section with a full-width cinematic image, `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` text overlay, Optimistic-style 64px/500 white headline, and a Meta Blue (`#0064E0`) pill button (100px radius, 10px 22px padding)"
- "Design a 3-column product card grid with 20px rounded corners, white backgrounds, edge-to-edge product images at top, 18px/400 body text in Slate Gray (`#5D6C7B`), and 24px grid gap"
- "Build a sticky navigation bar with white background, `rgba(241, 244, 247, 0.8)` frosted glass effect, 16px/500 dark text links, and a right-aligned Meta Blue pill CTA"
- "Create a dark product showcase section with `#1C1E21` background, white 48px/500 headline, `#5D6C7B` body text, and a secondary outlined pill button with `rgba(10, 19, 23, 0.12)` border"
- "Design a feature comparison grid with Soft Gray (`#F1F4F7`) background, 24px rounded cards, Meta Blue checkmark icons, and 14px/700 bold labels"
### Iteration Guide
When refining existing screens generated with this design system:
1. Focus on ONE component at a time
2. Reference specific color names and hex codes from this document
3. Use natural language descriptions, not CSS values — "pill-shaped Meta Blue button" not "border-radius: 100px; background: #0064E0"
4. Describe the desired "feel" alongside specific measurements — "generous whitespace like a gallery" means 64-80px section padding
5. For dark sections, specify which product context (Quest dark `#181A1B`, pure black `#000000`, or standard dark `#1C1E21`)
6. Always specify the Optimistic VF weight explicitly (300, 400, 500, or 700) — each creates a dramatically different feel
open-design/design-systems/meta/USAGE.md
+32
View File
@@ -0,0 +1,32 @@
# Meta (Store) 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
- Photography-first retail design where products are the visual heroes, not UI
- Binary surface strategy: pure white for information, deep dark for immersive product moments
- Pill-shaped CTAs in saturated blue create unmistakable action points
- Optimistic VF typeface with OpenType ss01/ss02 features brings geometric warmth
## 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`.
open-design/design-systems/meta/components.html
+398
View File
@@ -0,0 +1,398 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Meta — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/meta. Photography-first retail polish:
white canvas, Optimistic VF type, Meta Blue (#0064E0) pill CTAs, gallery whitespace."
/>
<style>
:root {
--bg: #ffffff;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--fg: #1c2b33;
--fg-2: #5d6c7b;
--muted: #65676b;
--meta: #8595a4;
--border: #ced0d4;
--border-soft: #dee3e9;
--accent: #0064e0;
--accent-on: #ffffff;
--accent-hover: #0143b5;
--accent-active: #004bb9;
--success: #31a24c;
--warn: #f7b928;
--danger: #e41e3f;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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: 18px;
--text-xl: 28px;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--leading-body: 1.5;
--leading-tight: 1.16;
--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: 48px;
--radius-sm: 8px;
--radius-md: 20px;
--radius-lg: 24px;
--radius-pill: 100px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised:
0 12px 28px 0 rgba(0, 0, 0, 0.2),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
--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: 1440px;
--container-gutter-desktop: 40px;
--container-gutter-tablet: 24px;
--container-gutter-phone: 16px;
}
/* ─── Reset ─────────────────────────────────────────────── */
*, *::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;
font-feature-settings: "ss01", "ss02";
}
/* ─── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
section { padding-block: var(--section-y-desktop); }
@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); }
}
/* Alternating light cadence — DESIGN.md §1 walkthrough rhythm */
.surface-soft { background: var(--surface); }
/* ─── Typography — Optimistic VF, weight carries hierarchy ── */
h1, h2, h3 {
font-family: var(--font-display);
line-height: var(--leading-tight);
margin: 0;
color: var(--fg);
}
h1 { font-size: var(--text-4xl); font-weight: 500; letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-lg); font-weight: 700; }
p { margin: 0; }
.lead { font-size: var(--text-lg); color: var(--fg-2); line-height: 1.44; font-weight: 300; }
.body-muted { color: var(--fg-2); }
.body-meta { color: var(--muted); }
.body-sm { font-size: var(--text-sm); }
.eyebrow {
font-size: var(--text-xs);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
}
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
.stack-8 > * + * { margin-block-start: var(--space-8); }
@media (max-width: 1023px) {
h1 { font-size: var(--text-3xl); }
}
@media (max-width: 639px) {
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
}
/* ─── Buttons — Meta Blue pill ───────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 22px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
line-height: 1.43;
letter-spacing: -0.14px;
cursor: pointer;
border: none;
text-decoration: none;
transition:
background-color var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-standard);
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Primary: Meta Blue pill — the only chromatic action */
.btn-primary {
background: var(--accent);
color: var(--accent-on);
}
.btn-primary:hover { background: var(--accent-hover); transform: scale(1.02); }
.btn-primary:active { background: var(--accent-active); transform: scale(0.98); }
/* Secondary: outlined pill, Dark Charcoal at 50% opacity per DESIGN.md §4 */
.btn-secondary {
background: transparent;
color: color-mix(in oklab, var(--fg), transparent 50%);
box-shadow: inset 0 0 0 2px rgba(10, 19, 23, 0.12);
}
.btn-secondary:hover {
background: color-mix(in oklab, var(--fg-2), transparent 30%);
color: var(--bg);
box-shadow: inset 0 0 0 2px transparent;
}
/* ─── Inputs — Dolly form pattern ────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.field input {
padding: 12px 14px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
outline: none;
transition:
border-color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard);
}
.field input:focus-visible {
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.field input::placeholder { color: var(--muted); }
.field-help { font-size: var(--text-xs); color: var(--muted); }
/* ─── Cards — 20px radius, dual-shadow elevation on hover ─ */
.card {
background: var(--bg);
border-radius: var(--radius-md);
padding: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-4);
box-shadow: var(--elev-ring);
transition:
transform var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard);
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--elev-raised);
}
.card-feature {
background: var(--surface-warm);
border-radius: var(--radius-lg);
}
/* ─── Badges ─────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 4px 10px;
border-radius: var(--radius-pill);
font-size: var(--text-xs); font-weight: 700; line-height: 1.43;
}
.badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 88%); }
.badge-muted { color: var(--muted); background: var(--surface); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ─── Links ──────────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
kbd {
font-family: var(--font-mono); font-size: var(--text-xs);
padding: 2px 6px; border-radius: var(--radius-sm);
border: 1px solid var(--border-soft); background: var(--surface); color: var(--muted);
}
/* ─── Layout helpers ─────────────────────────────────────── */
.hero-grid { display: grid; grid-template-columns: 1.5fr 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-8); flex-wrap: wrap; }
.hero-meta {
display: flex; flex-direction: column; gap: var(--space-4);
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--elev-ring);
}
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
.form-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; gap: var(--space-8); } }
.form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 440px; }
.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); }
/* Brand mark — gradient logotype dot (Meta's blue → purple → magenta) */
.brand-mark {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--text-sm); font-weight: 700; color: var(--fg);
}
.brand-mark::before {
content: "";
width: 14px; height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, #0064e0 0%, #6441d2 50%, #d6311f 100%);
}
</style>
</head>
<body>
<main class="container">
<section data-od-id="hero">
<div class="hero-grid">
<div class="stack-6">
<span class="brand-mark">From Meta</span>
<h1 style="max-width: 16ch">Build what brings us closer.</h1>
<p class="lead" style="max-width: 56ch">
From mixed reality to open-source AI, we ship the platforms and tools that
billions of people use to create, connect, and discover what's next.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">
Explore products
<svg class="icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
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-secondary">Inside Meta</a>
</div>
</div>
<aside class="hero-meta" aria-label="Newsroom">
<div class="row-between">
<span class="eyebrow">Newsroom</span>
<span class="badge badge-success">
<span class="badge-dot" aria-hidden="true"></span>
Live
</span>
</div>
<p class="body-sm body-muted" style="line-height: 1.5">
Llama 4 ships with native multimodal reasoning. Quest 4 introduces full-color
passthrough across the entire device family.
</p>
<p class="body-sm body-meta">
Updated <time datetime="2026-05-15">2026-05-15</time> · Press
<kbd>⌘</kbd> <kbd>K</kbd> to search the press library.
</p>
</aside>
</div>
</section>
<section class="surface-soft" data-od-id="features">
<div class="stack-3">
<p class="eyebrow">What we build</p>
<h2 style="max-width: 22ch">Three product families, one long-running thesis.</h2>
<p class="lead" style="max-width: 60ch">
Every Meta surface — phone, headset, glasses, model, API — is built so the next
billion creators can move at the speed of imagination.
</p>
</div>
<div class="features-grid stack-8" style="margin-block-start: var(--space-12)">
<article class="card">
<span class="eyebrow">Meta AI</span>
<h3>An assistant that meets you where you are.</h3>
<p class="body-muted body-sm">
Llama-powered, multimodal, available in every Meta app — and open-weight
for anyone who wants to build on top.
</p>
<a href="./tokens.css" class="body-sm">Try Meta AI →</a>
</article>
<article class="card card-feature">
<span class="eyebrow">Reality Labs</span>
<h3>Mixed reality, finally for everyone.</h3>
<p class="body-muted body-sm">
Quest headsets and Ray-Ban Meta glasses share one platform — pass-through
video, spatial audio, and on-device AI built in.
</p>
<a href="./DESIGN.md" class="body-sm">Inside Reality Labs →</a>
</article>
<article class="card">
<span class="eyebrow">Open source</span>
<h3>The infrastructure of the open web.</h3>
<p class="body-muted body-sm">
PyTorch, Llama, React, GraphQL — Meta open-sources the technology that
billions of products depend on, every day.
</p>
<a href="./tokens.css" class="body-sm">Browse the catalog →</a>
</article>
</div>
</section>
<section data-od-id="form">
<div class="form-row">
<div class="stack-4">
<p class="eyebrow">Stay close to what's next</p>
<h2 style="max-width: 18ch">Get the Meta brief.</h2>
<p class="body-muted" style="max-width: 48ch">
Quarterly updates on our research, product launches, and open-source releases —
written by the people who built them. No marketing copy, no tracking pixels.
</p>
</div>
<form class="form" onsubmit="event.preventDefault();">
<div class="field">
<label for="email">Work email</label>
<input id="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<p class="field-help">One short email per quarter. Unsubscribe in one click.</p>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Subscribe</button>
<button type="button" class="btn btn-secondary">Read past issues</button>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/components.manifest.json
+497
View File
@@ -0,0 +1,497 @@
{
"schemaVersion": 1,
"brandId": "meta",
"source": {
"componentsHtml": "components.html",
"tokensCss": "tokens.css"
},
"fixture": {
"title": "Meta — reference components",
"description": "Reference fixture for design-systems/meta. Photography-first retail polish: white canvas, Optimistic VF type, Meta Blue (#0064E0) pill CTAs, gallery whitespace.",
"styleBlockCount": 1,
"selectorCount": 55,
"classCount": 31,
"elementCount": 25
},
"tokens": {
"declared": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--danger",
"--ease-standard",
"--elev-flat",
"--elev-raised",
"--elev-ring",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--meta",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-lg",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--space-1",
"--space-12",
"--space-2",
"--space-3",
"--space-4",
"--space-5",
"--space-6",
"--space-8",
"--success",
"--surface",
"--surface-warm",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-base",
"--text-lg",
"--text-sm",
"--text-xl",
"--text-xs",
"--tracking-display",
"--warn"
],
"referenced": [
"--accent",
"--accent-active",
"--accent-hover",
"--accent-on",
"--bg",
"--border",
"--border-soft",
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--ease-standard",
"--elev-raised",
"--elev-ring",
"--fg",
"--fg-2",
"--focus-ring",
"--font-body",
"--font-display",
"--font-mono",
"--leading-body",
"--leading-tight",
"--motion-base",
"--motion-fast",
"--muted",
"--radius-lg",
"--radius-md",
"--radius-pill",
"--radius-sm",
"--section-y-desktop",
"--section-y-phone",
"--section-y-tablet",
"--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"
],
"unusedDeclared": [
"--danger",
"--elev-flat",
"--meta",
"--space-1",
"--warn"
],
"undeclaredReferenced": []
},
"selectors": [
".badge",
".badge-dot",
".badge-muted",
".badge-success",
".body-meta",
".body-muted",
".body-sm",
".brand-mark",
".brand-mark::before",
".btn",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible",
".card",
".card-feature",
".card:hover",
".container",
".eyebrow",
".features-grid",
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field label",
".field-help",
".form",
".form-actions",
".form-row",
".hero-actions",
".hero-grid",
".hero-meta",
".icon",
".lead",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
".stack-8 > * + *",
".surface-soft",
"*",
"*::after",
"*::before",
"a",
"a:hover",
"body",
"h1",
"h2",
"h3",
"html",
"kbd",
"p",
"section"
],
"classes": [
"badge",
"badge-dot",
"badge-success",
"body-meta",
"body-muted",
"body-sm",
"brand-mark",
"btn",
"btn-primary",
"btn-secondary",
"card",
"card-feature",
"container",
"eyebrow",
"features-grid",
"field",
"field-help",
"form",
"form-actions",
"form-row",
"hero-actions",
"hero-grid",
"hero-meta",
"icon",
"lead",
"row-between",
"stack-3",
"stack-4",
"stack-6",
"stack-8",
"surface-soft"
],
"elements": [
"a",
"article",
"aside",
"body",
"button",
"div",
"form",
"h1",
"h2",
"h3",
"head",
"html",
"input",
"kbd",
"label",
"main",
"meta",
"p",
"path",
"section",
"span",
"style",
"svg",
"time",
"title"
],
"groups": [
{
"id": "buttons",
"label": "Buttons and calls to action",
"present": true,
"selectors": [
".btn",
".btn-primary",
".btn-primary:active",
".btn-primary:hover",
".btn-secondary",
".btn-secondary:hover",
".btn:focus-visible"
],
"classes": [
"btn",
"btn-primary",
"btn-secondary"
],
"elements": [
"button"
],
"tokenReferences": [
"--accent",
"--accent-active",
"--accent-on",
"--bg",
"--ease-standard",
"--fg-2",
"--font-body",
"--motion-base",
"--motion-fast",
"--radius-pill",
"--space-2",
"--text-sm"
]
},
{
"id": "inputs",
"label": "Form fields and controls",
"present": true,
"selectors": [
".field",
".field input",
".field input::placeholder",
".field input:focus-visible",
".field label",
".field-help"
],
"classes": [
"field",
"field-help",
"form",
"form-actions",
"form-row"
],
"elements": [
"form",
"input",
"label"
],
"tokenReferences": [
"--accent",
"--fg",
"--focus-ring",
"--muted",
"--text-sm",
"--text-xs"
]
},
{
"id": "cards",
"label": "Cards and panels",
"present": true,
"selectors": [
".card",
".card-feature",
".card:hover"
],
"classes": [
"card",
"card-feature"
],
"elements": [],
"tokenReferences": [
"--elev-raised"
]
},
{
"id": "badges",
"label": "Badges, chips, and status labels",
"present": true,
"selectors": [
".badge",
".badge-dot",
".badge-muted",
".badge-success"
],
"classes": [
"badge",
"badge-dot",
"badge-success"
],
"elements": [],
"tokenReferences": [
"--muted",
"--radius-pill",
"--space-2",
"--surface",
"--text-xs"
]
},
{
"id": "links",
"label": "Links and inline actions",
"present": true,
"selectors": [
"a",
"a:hover"
],
"classes": [],
"elements": [
"a"
],
"tokenReferences": [
"--accent",
"--ease-standard",
"--motion-fast"
]
},
{
"id": "keyboard",
"label": "Keyboard hints",
"present": true,
"selectors": [
"kbd"
],
"classes": [],
"elements": [
"kbd"
],
"tokenReferences": [
"--border-soft",
"--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": [
"--fg-2",
"--muted",
"--text-2xl",
"--text-3xl",
"--text-4xl",
"--text-lg",
"--text-xs",
"--tracking-display"
]
},
{
"id": "layout",
"label": "Layout primitives",
"present": true,
"selectors": [
".container",
".row-between",
".stack-3 > * + *",
".stack-4 > * + *",
".stack-6 > * + *",
".stack-8 > * + *",
"section"
],
"classes": [
"container",
"features-grid",
"hero-grid",
"row-between",
"stack-3",
"stack-4",
"stack-6",
"stack-8"
],
"elements": [
"main",
"section"
],
"tokenReferences": [
"--container-gutter-desktop",
"--container-gutter-phone",
"--container-gutter-tablet",
"--container-max",
"--space-4",
"--space-8"
]
}
],
"literals": {
"colorExpressions": 7,
"pixelValues": 30,
"hardcodedFontFamilies": 5
}
}
open-design/design-systems/meta/design-tokens.json
+701
View File
@@ -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:111"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"value": "#f7f8fa",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:112"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"value": "#f2f0e6",
"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:113"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"value": "#1c2b33",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:120"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"value": "#5d6c7b",
"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:121"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"value": "#65676b",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"value": "#8595a4",
"type": "color",
"layer": "B-slot",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:123"
],
"sourceName": "--meta"
},
{
"name": "--border",
"value": "#ced0d4",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:128"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"value": "#dee3e9",
"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:129"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"value": "#0064e0",
"type": "color",
"layer": "A1-identity",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:138"
],
"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:139"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"value": "#0143b5",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:140"
],
"sourceName": "--accent-hover"
},
{
"name": "--accent-active",
"value": "#004bb9",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:141"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"value": "#31a24c",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:147"
],
"sourceName": "--success"
},
{
"name": "--warn",
"value": "#f7b928",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:148"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"value": "#e41e3f",
"type": "color",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:149"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"value": "\"Optimistic VF\", \"Optimistic\", Inter, Montserrat, Helvetica, Arial, \"Noto Sans\", 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:159"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"value": "\"Optimistic VF\", \"Optimistic\", Inter, Montserrat, Helvetica, Arial, \"Noto Sans\", 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:160"
],
"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:161"
],
"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:168"
],
"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:169"
],
"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:170"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"value": "18px",
"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:171"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"value": "28px",
"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:172"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"value": "36px",
"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:173"
],
"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:174"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"value": "64px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:175"
],
"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:181"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"value": "1.16",
"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:182"
],
"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:183"
],
"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:191"
],
"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:192"
],
"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:193"
],
"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:194"
],
"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:195"
],
"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:196"
],
"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:197"
],
"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:198"
],
"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:204"
],
"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:205"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"value": "48px",
"type": "dimension",
"layer": "A1-structure",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:206"
],
"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:215"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"value": "20px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:216"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"value": "24px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:217"
],
"sourceName": "--radius-lg"
},
{
"name": "--radius-pill",
"value": "100px",
"type": "dimension",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:218"
],
"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:229"
],
"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:230"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"value": "0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)",
"type": "shadow",
"layer": "A2",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:231"
],
"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:241"
],
"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:248"
],
"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:249"
],
"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:250"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"value": "1440px",
"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:259"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"value": "40px",
"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:260"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"value": "24px",
"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:261"
],
"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:262"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/meta/manifest.json
+54
View File
@@ -0,0 +1,54 @@
{
"schemaVersion": "od-design-system-project/v1",
"id": "meta",
"name": "Meta (Store)",
"category": "E-Commerce & Retail",
"description": "Bundled OpenDesign package for Meta (Store), 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"
}
}
open-design/design-systems/meta/preview/colors.html
+39
View File
@@ -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>Meta (Store) 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>
open-design/design-systems/meta/preview/spacing.html
+41
View File
@@ -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>Meta (Store) 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>
open-design/design-systems/meta/preview/typography.html
+34
View File
@@ -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>Meta (Store) 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">E-Commerce & Retail</p>
<h2>Display sample for Meta (Store)</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>
open-design/design-systems/meta/source/evidence.md
+17
View File
@@ -0,0 +1,17 @@
# Meta (Store) 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/meta/DESIGN.md
- design-systems/meta/tokens.css
- design-systems/meta/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.
open-design/design-systems/meta/source/token-contract.report.json
+641
View File
@@ -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:111"
],
"sourceName": "--bg"
},
{
"name": "--surface",
"layer": "A1-identity",
"value": "#f7f8fa",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:112"
],
"sourceName": "--surface"
},
{
"name": "--surface-warm",
"layer": "B-slot",
"value": "#f2f0e6",
"confidence": "high",
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:113"
],
"sourceName": "--surface-warm"
},
{
"name": "--fg",
"layer": "A1-identity",
"value": "#1c2b33",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:120"
],
"sourceName": "--fg"
},
{
"name": "--fg-2",
"layer": "B-slot",
"value": "#5d6c7b",
"confidence": "high",
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:121"
],
"sourceName": "--fg-2"
},
{
"name": "--muted",
"layer": "A1-identity",
"value": "#65676b",
"confidence": "high",
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:122"
],
"sourceName": "--muted"
},
{
"name": "--meta",
"layer": "B-slot",
"value": "#8595a4",
"confidence": "high",
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:123"
],
"sourceName": "--meta"
},
{
"name": "--border",
"layer": "A1-identity",
"value": "#ced0d4",
"confidence": "high",
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:128"
],
"sourceName": "--border"
},
{
"name": "--border-soft",
"layer": "B-slot",
"value": "#dee3e9",
"confidence": "high",
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:129"
],
"sourceName": "--border-soft"
},
{
"name": "--accent",
"layer": "A1-identity",
"value": "#0064e0",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:138"
],
"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:139"
],
"sourceName": "--accent-on"
},
{
"name": "--accent-hover",
"layer": "A2",
"value": "#0143b5",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:140"
],
"sourceName": "--accent-hover"
},
{
"name": "--accent-active",
"layer": "A2",
"value": "#004bb9",
"confidence": "high",
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:141"
],
"sourceName": "--accent-active"
},
{
"name": "--success",
"layer": "A2",
"value": "#31a24c",
"confidence": "high",
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:147"
],
"sourceName": "--success"
},
{
"name": "--warn",
"layer": "A2",
"value": "#f7b928",
"confidence": "high",
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:148"
],
"sourceName": "--warn"
},
{
"name": "--danger",
"layer": "A2",
"value": "#e41e3f",
"confidence": "high",
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:149"
],
"sourceName": "--danger"
},
{
"name": "--font-display",
"layer": "A1-identity",
"value": "\"Optimistic VF\", \"Optimistic\", Inter, Montserrat, Helvetica, Arial, \"Noto Sans\", sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:159"
],
"sourceName": "--font-display"
},
{
"name": "--font-body",
"layer": "A1-identity",
"value": "\"Optimistic VF\", \"Optimistic\", Inter, Montserrat, Helvetica, Arial, \"Noto Sans\", sans-serif",
"confidence": "high",
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:160"
],
"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:161"
],
"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:168"
],
"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:169"
],
"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:170"
],
"sourceName": "--text-base"
},
{
"name": "--text-lg",
"layer": "A1-structure",
"value": "18px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:171"
],
"sourceName": "--text-lg"
},
{
"name": "--text-xl",
"layer": "A1-structure",
"value": "28px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:172"
],
"sourceName": "--text-xl"
},
{
"name": "--text-2xl",
"layer": "A1-structure",
"value": "36px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:173"
],
"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:174"
],
"sourceName": "--text-3xl"
},
{
"name": "--text-4xl",
"layer": "A1-structure",
"value": "64px",
"confidence": "high",
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:175"
],
"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:181"
],
"sourceName": "--leading-body"
},
{
"name": "--leading-tight",
"layer": "A1-structure",
"value": "1.16",
"confidence": "high",
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:182"
],
"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:183"
],
"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:191"
],
"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:192"
],
"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:193"
],
"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:194"
],
"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:195"
],
"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:196"
],
"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:197"
],
"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:198"
],
"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:204"
],
"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:205"
],
"sourceName": "--section-y-tablet"
},
{
"name": "--section-y-phone",
"layer": "A1-structure",
"value": "48px",
"confidence": "high",
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:206"
],
"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:215"
],
"sourceName": "--radius-sm"
},
{
"name": "--radius-md",
"layer": "A2",
"value": "20px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:216"
],
"sourceName": "--radius-md"
},
{
"name": "--radius-lg",
"layer": "A2",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:217"
],
"sourceName": "--radius-lg"
},
{
"name": "--radius-pill",
"layer": "A2",
"value": "100px",
"confidence": "high",
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:218"
],
"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:229"
],
"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:230"
],
"sourceName": "--elev-ring"
},
{
"name": "--elev-raised",
"layer": "A2",
"value": "0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)",
"confidence": "high",
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:231"
],
"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:241"
],
"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:248"
],
"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:249"
],
"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:250"
],
"sourceName": "--ease-standard"
},
{
"name": "--container-max",
"layer": "A1-structure",
"value": "1440px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:259"
],
"sourceName": "--container-max"
},
{
"name": "--container-gutter-desktop",
"layer": "A1-structure",
"value": "40px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:260"
],
"sourceName": "--container-gutter-desktop"
},
{
"name": "--container-gutter-tablet",
"layer": "A1-structure",
"value": "24px",
"confidence": "high",
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
"sources": [
"tokens.css:261"
],
"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:262"
],
"sourceName": "--container-gutter-phone"
}
]
}
open-design/design-systems/meta/source/tokens.source.json
+349
View File
@@ -0,0 +1,349 @@
{
"schemaVersion": 1,
"sourceScope": "open-design-bundled-fixture",
"brandId": "meta",
"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:111"
},
{
"name": "--surface",
"value": "#f7f8fa",
"layer": "A1-identity",
"source": "tokens.css:112"
},
{
"name": "--surface-warm",
"value": "#f2f0e6",
"layer": "B-slot",
"source": "tokens.css:113"
},
{
"name": "--fg",
"value": "#1c2b33",
"layer": "A1-identity",
"source": "tokens.css:120"
},
{
"name": "--fg-2",
"value": "#5d6c7b",
"layer": "B-slot",
"source": "tokens.css:121"
},
{
"name": "--muted",
"value": "#65676b",
"layer": "A1-identity",
"source": "tokens.css:122"
},
{
"name": "--meta",
"value": "#8595a4",
"layer": "B-slot",
"source": "tokens.css:123"
},
{
"name": "--border",
"value": "#ced0d4",
"layer": "A1-identity",
"source": "tokens.css:128"
},
{
"name": "--border-soft",
"value": "#dee3e9",
"layer": "B-slot",
"source": "tokens.css:129"
},
{
"name": "--accent",
"value": "#0064e0",
"layer": "A1-identity",
"source": "tokens.css:138"
},
{
"name": "--accent-on",
"value": "#ffffff",
"layer": "A2",
"source": "tokens.css:139"
},
{
"name": "--accent-hover",
"value": "#0143b5",
"layer": "A2",
"source": "tokens.css:140"
},
{
"name": "--accent-active",
"value": "#004bb9",
"layer": "A2",
"source": "tokens.css:141"
},
{
"name": "--success",
"value": "#31a24c",
"layer": "A2",
"source": "tokens.css:147"
},
{
"name": "--warn",
"value": "#f7b928",
"layer": "A2",
"source": "tokens.css:148"
},
{
"name": "--danger",
"value": "#e41e3f",
"layer": "A2",
"source": "tokens.css:149"
},
{
"name": "--font-display",
"value": "\"Optimistic VF\", \"Optimistic\", Inter, Montserrat, Helvetica, Arial, \"Noto Sans\", sans-serif",
"layer": "A1-identity",
"source": "tokens.css:159"
},
{
"name": "--font-body",
"value": "\"Optimistic VF\", \"Optimistic\", Inter, Montserrat, Helvetica, Arial, \"Noto Sans\", sans-serif",
"layer": "A1-identity",
"source": "tokens.css:160"
},
{
"name": "--font-mono",
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
"layer": "A2",
"source": "tokens.css:161"
},
{
"name": "--text-xs",
"value": "12px",
"layer": "A1-structure",
"source": "tokens.css:168"
},
{
"name": "--text-sm",
"value": "14px",
"layer": "A1-structure",
"source": "tokens.css:169"
},
{
"name": "--text-base",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:170"
},
{
"name": "--text-lg",
"value": "18px",
"layer": "A1-structure",
"source": "tokens.css:171"
},
{
"name": "--text-xl",
"value": "28px",
"layer": "A1-structure",
"source": "tokens.css:172"
},
{
"name": "--text-2xl",
"value": "36px",
"layer": "A1-structure",
"source": "tokens.css:173"
},
{
"name": "--text-3xl",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:174"
},
{
"name": "--text-4xl",
"value": "64px",
"layer": "A1-structure",
"source": "tokens.css:175"
},
{
"name": "--leading-body",
"value": "1.5",
"layer": "A1-structure",
"source": "tokens.css:181"
},
{
"name": "--leading-tight",
"value": "1.16",
"layer": "A1-structure",
"source": "tokens.css:182"
},
{
"name": "--tracking-display",
"value": "-0.01em",
"layer": "A1-structure",
"source": "tokens.css:183"
},
{
"name": "--space-1",
"value": "4px",
"layer": "A2",
"source": "tokens.css:191"
},
{
"name": "--space-2",
"value": "8px",
"layer": "A2",
"source": "tokens.css:192"
},
{
"name": "--space-3",
"value": "12px",
"layer": "A2",
"source": "tokens.css:193"
},
{
"name": "--space-4",
"value": "16px",
"layer": "A2",
"source": "tokens.css:194"
},
{
"name": "--space-5",
"value": "20px",
"layer": "A2",
"source": "tokens.css:195"
},
{
"name": "--space-6",
"value": "24px",
"layer": "A2",
"source": "tokens.css:196"
},
{
"name": "--space-8",
"value": "32px",
"layer": "A2",
"source": "tokens.css:197"
},
{
"name": "--space-12",
"value": "48px",
"layer": "A2",
"source": "tokens.css:198"
},
{
"name": "--section-y-desktop",
"value": "80px",
"layer": "A1-structure",
"source": "tokens.css:204"
},
{
"name": "--section-y-tablet",
"value": "64px",
"layer": "A1-structure",
"source": "tokens.css:205"
},
{
"name": "--section-y-phone",
"value": "48px",
"layer": "A1-structure",
"source": "tokens.css:206"
},
{
"name": "--radius-sm",
"value": "8px",
"layer": "A2",
"source": "tokens.css:215"
},
{
"name": "--radius-md",
"value": "20px",
"layer": "A2",
"source": "tokens.css:216"
},
{
"name": "--radius-lg",
"value": "24px",
"layer": "A2",
"source": "tokens.css:217"
},
{
"name": "--radius-pill",
"value": "100px",
"layer": "A2",
"source": "tokens.css:218"
},
{
"name": "--elev-flat",
"value": "none",
"layer": "A2",
"source": "tokens.css:229"
},
{
"name": "--elev-ring",
"value": "0 0 0 1px var(--border)",
"layer": "A2",
"source": "tokens.css:230"
},
{
"name": "--elev-raised",
"value": "0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)",
"layer": "A2",
"source": "tokens.css:231"
},
{
"name": "--focus-ring",
"value": "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)",
"layer": "A2",
"source": "tokens.css:241"
},
{
"name": "--motion-fast",
"value": "150ms",
"layer": "A2",
"source": "tokens.css:248"
},
{
"name": "--motion-base",
"value": "200ms",
"layer": "A2",
"source": "tokens.css:249"
},
{
"name": "--ease-standard",
"value": "cubic-bezier(0.2, 0, 0, 1)",
"layer": "A2",
"source": "tokens.css:250"
},
{
"name": "--container-max",
"value": "1440px",
"layer": "A1-structure",
"source": "tokens.css:259"
},
{
"name": "--container-gutter-desktop",
"value": "40px",
"layer": "A1-structure",
"source": "tokens.css:260"
},
{
"name": "--container-gutter-tablet",
"value": "24px",
"layer": "A1-structure",
"source": "tokens.css:261"
},
{
"name": "--container-gutter-phone",
"value": "16px",
"layer": "A1-structure",
"source": "tokens.css:262"
}
]
}
open-design/design-systems/meta/system/artifacts/deck.html
+137
View File
@@ -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>Meta (Store) - Pitch deck</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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>Meta (Store) 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 Meta (Store), 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="Meta (Store)" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/system/artifacts/email.html
+137
View File
@@ -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>Meta (Store) - Email</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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>Meta (Store) 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 Meta (Store), 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="Meta (Store)" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/system/artifacts/form.html
+137
View File
@@ -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>Meta (Store) - Form page</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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>Meta (Store) 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 Meta (Store), 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="Meta (Store)" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/system/artifacts/landing.html
+137
View File
@@ -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>Meta (Store) - Landing page</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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>Meta (Store) 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 Meta (Store), 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="Meta (Store)" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/system/artifacts/newsletter.html
+137
View File
@@ -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>Meta (Store) - Newsletter</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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>Meta (Store) 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 Meta (Store), 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="Meta (Store)" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/system/artifacts/poster.html
+137
View File
@@ -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>Meta (Store) - Poster</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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>Meta (Store) 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 Meta (Store), 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="Meta (Store)" /></label></div>
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
</div>
</article>
</section>
</main>
</body>
</html>
open-design/design-systems/meta/system/index.html
+128
View File
@@ -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>Meta (Store) - system assets</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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">E-Commerce &amp; Retail</p>
<h1>Meta (Store) 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>
open-design/design-systems/meta/system/kit.dark.html
+149
View File
@@ -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>Meta (Store) - dark component kit</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #0f1115;
--od-surface: #171a21;
--od-text: #f8fafc;
--od-muted: #a7adba;
--od-border: #2a2f3a;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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">E-Commerce &amp; Retail system</p>
<h1>Meta (Store) component kit</h1>
<p class="lead">Bundled OpenDesign package for Meta (Store), 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>
open-design/design-systems/meta/system/kit.html
+149
View File
@@ -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>Meta (Store) - component kit</title>
<style>
:root {
--accent: #0064e0;
--accent-active: #004bb9;
--accent-hover: #0143b5;
--accent-on: #ffffff;
--bg: #ffffff;
--border: #ced0d4;
--border-soft: #dee3e9;
--container-gutter-desktop: 40px;
--container-gutter-phone: 16px;
--container-gutter-tablet: 24px;
--container-max: 1440px;
--danger: #e41e3f;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--elev-flat: none;
--elev-raised: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
--elev-ring: 0 0 0 1px var(--border);
--fg: #1c2b33;
--fg-2: #5d6c7b;
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
--leading-body: 1.5;
--leading-tight: 1.16;
--meta: #8595a4;
--motion-base: 200ms;
--motion-fast: 150ms;
--muted: #65676b;
--radius-lg: 24px;
--radius-md: 20px;
--radius-pill: 100px;
--radius-sm: 8px;
--section-y-desktop: 80px;
--section-y-phone: 48px;
--section-y-tablet: 64px;
--space-1: 4px;
--space-12: 48px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--success: #31a24c;
--surface: #f7f8fa;
--surface-warm: #f2f0e6;
--text-2xl: 36px;
--text-3xl: 48px;
--text-4xl: 64px;
--text-base: 16px;
--text-lg: 18px;
--text-sm: 14px;
--text-xl: 28px;
--text-xs: 12px;
--tracking-display: -0.01em;
--warn: #f7b928;
}
:root {
--od-page-bg: #ffffff;
--od-surface: #f7f8fa;
--od-text: #1c2b33;
--od-muted: #65676b;
--od-border: #ced0d4;
--od-accent: #0064e0;
--od-radius: 20px;
--od-font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--od-font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", 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">E-Commerce &amp; Retail system</p>
<h1>Meta (Store) component kit</h1>
<p class="lead">Bundled OpenDesign package for Meta (Store), 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>
open-design/design-systems/meta/system/tokens.default.json
+8
View File
@@ -0,0 +1,8 @@
{
"colorPrimary": "#0064e0",
"colorPrimaryBg": "#f2f0e6",
"colorPrimaryHover": "#0143b5",
"colorPrimaryActive": "#004bb9",
"fontSize": 16,
"borderRadius": 20
}
open-design/design-systems/meta/tailwind-v4.css
+63
View File
@@ -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);
}
open-design/design-systems/meta/tokens.css
+263
View File
@@ -0,0 +1,263 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/meta/tokens.css
*
* Structured token bindings for "Design System Inspired by Meta (Store)".
* Photography-first retail: pure white canvas, Optimistic VF typography,
* Meta Blue (#0064E0) reserved for action, generous gallery whitespace,
* pill-shaped CTAs, dual-shadow elevation.
*
* Brand-specific schema decisions (each one bends a schema convention to
* match Meta's voice rather than the cross-brand default):
*
* 1. `--bg` is pure white (#FFFFFF), `--surface` is Warm Gray
* (#F7F8FA — Dolly's --flat-card-bg), and `--surface-warm` is
* independently bound to Linen (#F2F0E6) — the "warm off-white for
* lifestyle-adjacent sections" called out in DESIGN.md §2. Three
* genuinely different surface tiers ladder up: white for browsing,
* warm gray for card differentiation, linen for the lifestyle /
* Ray-Ban-adjacent moments. Aliasing `--surface-warm` to surface
* would collapse a meaningful brand tier.
*
* 2. The foreground ramp binds four distinct tiers — Dark Charcoal
* (#1C2B33) → Slate Gray (#5D6C7B) → Secondary Text (#65676B) →
* CTA Disabled Text (#8595A4). DESIGN.md §2 names each one as a
* shipped Dolly/FDS token with its own role (heading vs body vs
* caption vs muted/disabled), so `--fg-2` and `--meta` are bound
* independently rather than aliased to `--fg` / `--muted`.
*
* 3. `--accent` is Meta Blue (#0064E0), NOT Facebook Blue (#1877F2).
* DESIGN.md §7 ("Don'ts") explicitly forbids Facebook Blue as a
* primary CTA color — the corporate Meta Store layer overlays a
* slightly deeper, more saturated blue on the FDS gray ramp.
* `--accent-hover` and `--accent-active` are bound to the exact
* Meta Blue Hover (#0143B5) and Pressed (#004BB9) hexes from
* DESIGN.md §2 rather than computed via `color-mix()`, because
* the Dolly hover/pressed pair is hand-tuned to land on different
* hue points than a flat luminance darken.
*
* 4. Semantic colors bind to the Dolly-store palette: Success Green
* (#31A24C), Warning Amber (#F7B928), Error Red (#E41E3F) — the
* "badge" tier from DESIGN.md §2. Darker store-confirmation
* variants (#007D1E, #C80A28) live in components, not the schema,
* because they are state overrides on top of the shared semantic
* slot rather than the slot itself.
*
* 5. `--font-display` and `--font-body` share the Optimistic VF
* stack with the documented fallbacks (Montserrat, Helvetica,
* Arial, Noto Sans). Inter is added as a humanist sans bridge for
* hosts that have neither Optimistic nor Montserrat installed —
* it matches Optimistic's geometric warmth more closely than the
* Helvetica/Arial fallbacks alone. The variable font keeps weight
* 300/400/500/700 all available; component CSS picks the weight,
* not the face.
*
* 6. The type scale tracks DESIGN.md §3 verbatim: 12 / 14 / 16 / 18
* / 28 / 36 / 48 / 64. The 18px tier (`--text-lg`) is Meta's
* primary body size — Body and Heading 3 BOTH live there per
* DESIGN.md §3 — while `--text-base` (16px) is Body Compact
* reserved for navigation and dense UI. Display tracking stays
* neutral (`-0.01em`) because DESIGN.md §3 specifies negative
* letter-spacing only at small sizes (`-0.14px` to `-0.16px` on
* 14–16px UI text), not on display headlines.
*
* 7. Section rhythm is gallery-generous: 80 / 64 / 48 px desktop /
* tablet / phone, mirroring the responsive padding ladder
* DESIGN.md §8 prescribes ("Section padding: 80 → 64 → 48 → 32").
* The 32px floor folds into component-level overrides on the
* smallest viewports rather than into the shared schema.
*
* 8. Radius scale: 8 / 20 / 24 / 100. DESIGN.md §5 explicitly
* enumerates these four tiers — 8px inputs, 20px standard cards
* (--card-corner-radius), 24px feature cards & ghost buttons,
* 100px pill — and `--radius-pill` is bound to literal `100px`
* (not the schema's 9999px sentinel) because the brand's pill
* radius IS 100px and that value flows into actual padding /
* stroke calculations on Meta-Blue CTAs.
*
* 9. `--elev-raised` reproduces DESIGN.md §6 Level 2 dual-shadow
* pattern verbatim: a small sharp shadow (0 2px 4px rgba(0,0,0,
* 0.1)) for direct-light contact + a large diffused shadow
* (0 12px 28px rgba(0,0,0,0.2)) for ambient-light depth.
* Reordering or dropping a layer breaks Meta's "physically
* plausible depth" feel — the brand specifically uses two
* shadows together, not one blurred soft shadow.
*
* 10. Container caps at 1440px per DESIGN.md §5 ("Max container
* width: ~1440px"), wider than Vercel's 1200 because the store
* surfaces full-bleed cinematic product photography that needs
* the room. Gutters step 40 / 24 / 16 to preserve generous
* breathing room around hero imagery on every breakpoint.
*
* Source contracts:
* - Standard token names: design-systems/_schema/tokens.schema.ts
* - A2 fallback parity: design-systems/_schema/defaults.css
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
*
* Optimistic VF is not embedded; the stack falls back through
* Montserrat → Helvetica → Arial → Noto Sans so artifacts render
* acceptably on hosts that haven't loaded the commissioned face.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels — schema slot) ─────────────────────────────
* Binary plus a warm tier: pure white for browsing/information,
* Warm Gray for flat card differentiation, Linen as the lifestyle-
* adjacent warm off-white. DESIGN.md §1 calls out the binary
* white/dark cadence; Linen lives between for Ray-Ban-flavored
* sections where pure white feels too cold. Dark immersive
* surfaces (#1C1E21 / #181A1B / #000000) are component-level
* overrides, not surface tokens — they're product-context, not
* canvas. */
--bg: #ffffff; /* White — primary canvas, nav, default cards */
--surface: #f7f8fa; /* Warm Gray — flat card, subtle differentiation */
--surface-warm: #f2f0e6; /* Linen — lifestyle-adjacent warm off-white */
/* ─── Foreground ramp (4 levels) ──────────────────────────────────
* Dark Charcoal heading → Slate Gray body → Secondary Text caption
* → CTA Disabled muted blue-gray. DESIGN.md §2 names each tier as
* a shipped Dolly/FDS token with its own role, so the four-level
* ramp resolves to four distinct values rather than aliasing. */
--fg: #1c2b33; /* Dark Charcoal — Dolly primary text, headings */
--fg-2: #5d6c7b; /* Slate Gray — Meta Store secondary text, body */
--muted: #65676b; /* Secondary Text — captions, labels, timestamps */
--meta: #8595a4; /* CTA Disabled — placeholder, muted blue-gray */
/* ─── Border (2 levels) ──────────────────────────────────────────
* Standard divider for input/card edges, lighter inner divider for
* Dolly section separators that should not visually compete. */
--border: #ced0d4; /* Divider — content separators, input borders */
--border-soft: #dee3e9; /* Divider Gray — lighter Dolly inner separator */
/* ─── Accent ─────────────────────────────────────────────────────
* Meta Blue is the single action color. DESIGN.md §7 forbids
* Facebook Blue (#1877F2) for primary CTAs — Meta Blue (#0064E0)
* is the deeper, more saturated corporate-store variant. Hover
* and active states are hand-tuned hexes from DESIGN.md §2, not
* `color-mix()` derivations, because Dolly's interactive states
* shift hue, not just luminance. */
--accent: #0064e0; /* Meta Blue — primary CTA, links, focus */
--accent-on: #ffffff; /* white label on Meta Blue */
--accent-hover: #0143b5; /* Meta Blue Hover — hand-tuned, not a darken */
--accent-active: #004bb9; /* Meta Blue Pressed — deepest interactive state */
/* ─── Semantic ───────────────────────────────────────────────────
* Dolly badge tier — bright enough to read on white surfaces.
* Darker store-confirmation variants (#007D1E success, #C80A28
* error) are component-level state overrides, not slot bindings. */
--success: #31a24c; /* Success Green — badge, positive indicators */
--warn: #f7b928; /* Warning Amber — attention, caution badges */
--danger: #e41e3f; /* Error Red — critical badges, notifications */
/* ─── Typography ─────────────────────────────────────────────────
* Optimistic VF is Meta's commissioned variable face; the documented
* fallbacks (Montserrat → Helvetica → Arial → Noto Sans) ensure
* artifacts read consistently on hosts without the licensed font.
* Inter bridges between Optimistic and Helvetica when neither the
* commissioned face nor Montserrat is loaded — it's the closest
* humanist geometric sans available system-wide. Display and body
* share one stack; weight (300/400/500/700) and size carry hierarchy. */
--font-display: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-body: "Optimistic VF", "Optimistic", Inter, Montserrat, Helvetica, Arial, "Noto Sans", sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
/* Type scale — DESIGN.md §3 verbatim. The 18px tier (text-lg) is
* Meta's primary body size (Body AND Heading 3 both live at 18/?);
* 16px (text-base) is Body Compact for navigation and dense UI.
* Display 1 lands at 64px on desktop; Display 2 at 48px; Heading 1
* at 36px; Heading 2 at 28px. */
--text-xs: 12px; /* Small — footer, legal, timestamps */
--text-sm: 14px; /* Caption — labels, button text, metadata */
--text-base: 16px; /* Body Compact — navigation, dense UI */
--text-lg: 18px; /* Body / Heading 3 — primary reading size */
--text-xl: 28px; /* Heading 2 — light-weight subheading */
--text-2xl: 36px; /* Heading 1 — major section heading */
--text-3xl: 48px; /* Display 2 — section heroes, product titles */
--text-4xl: 64px; /* Display 1 — hero headlines on desktop */
/* Body leading 1.5 (16px Body Compact ratio); tight leading 1.16
* (Display 1 ratio) for hero headlines. Display tracking stays
* neutral (-0.01em) — DESIGN.md §3 reserves negative tracking for
* small UI (-0.14px on Caption / Button), not for headlines. */
--leading-body: 1.5;
--leading-tight: 1.16;
--tracking-display: -0.01em;
/* ─── Spacing ────────────────────────────────────────────────────
* 8px-base scale per DESIGN.md §5 ("Base unit: 8px"). The 1px /
* 10px / 14px / 18px sub-tiers from DESIGN.md (hairlines, card
* horizontal padding, caption rhythm, body vertical rhythm) are
* inlined per-component because they are too fine to belong in
* the shared schema. */
--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 §8: "Section padding: 80 → 64 → 48
* → 32 as viewport narrows". We bind the documented desktop /
* tablet / phone tiers; the 32px ultra-narrow floor falls into
* component-level @media overrides, not the schema. */
--section-y-desktop: 80px;
--section-y-tablet: 64px;
--section-y-phone: 48px;
/* ─── Radius ─────────────────────────────────────────────────────
* DESIGN.md §5 enumerates 8 / 20 / 24 / 100 px. Pill is literal
* 100px (not 9999px sentinel) because Meta's pill radius IS 100px
* — DESIGN.md §4 buttons specify "Border radius: fully rounded
* pill (100px)". For most components 100px and 9999px render
* identically, but 100px flows correctly into outline / focus
* geometry calculations in product. */
--radius-sm: 8px; /* Inputs, small UI, glimmer placeholders */
--radius-md: 20px; /* --card-corner-radius — standard cards */
--radius-lg: 24px; /* Feature cards, ghost buttons */
--radius-pill: 100px; /* Pill buttons, tags, badges (DESIGN.md §5) */
/* ─── Elevation ──────────────────────────────────────────────────
* Three sanctioned levels. `--elev-raised` is DESIGN.md §6 Level 2
* dual-shadow pattern reproduced verbatim: small sharp shadow for
* direct-light contact + large diffused shadow for ambient-light
* depth. Together they create "physically plausible depth without
* heavy visual weight" — never collapse to a single soft blur.
* Most surface differentiation in Meta comes from background
* color shifts (white → soft gray → dark), not shadow; cards in
* dark sections SHOULD use --elev-flat per DESIGN.md §7 ("Don'ts"). */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised:
0 12px 28px 0 rgba(0, 0, 0, 0.2),
0 2px 4px 0 rgba(0, 0, 0, 0.1);
/* ─── Focus ring ─────────────────────────────────────────────────
* DESIGN.md §4 inputs: "Focus: border color shifts to accent blue,
* 3px outer ring". DESIGN.md §4 buttons: "Focus: 3px ring in accent
* color". The schema-default 3px alpha glow at the accent matches
* Meta's documented behavior; the inner-element border-color shift
* is component-level. */
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
/* ─── Motion ─────────────────────────────────────────────────────
* DESIGN.md §4 buttons: "Transition: background 200ms ease,
* transform 150ms ease". Two durations, one easing curve. The
* scale(1.1) hover and scale(0.9) press transforms from DESIGN.md
* are component-level animation, not schema. */
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ─────────────────────────────────────────────────────
* DESIGN.md §5: "Max container width: ~1440px, centered with auto
* margins". Wider than Vercel/Mistral because Meta surfaces full-
* bleed cinematic product photography that needs the room. Gutters
* step 40 / 24 / 16 — DESIGN.md §5 names "Page horizontal padding:
* 24-40px depending on breakpoint" and §8 collapses to 16px on
* mobile to preserve gallery-style breathing room. */
--container-max: 1440px;
--container-gutter-desktop: 40px;
--container-gutter-tablet: 24px;
--container-gutter-phone: 16px;
}