④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,348 @@
|
||||
# Design System Inspired by Binance.US
|
||||
|
||||
> Category: Fintech & Crypto
|
||||
> Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Binance.US radiates the polished urgency of a digital trading floor — a space where money moves and decisions happen in seconds. The design is a two-tone composition that alternates between stark white trading surfaces and deep near-black panels (`#222126`), creating a visual rhythm that mirrors the bull-and-bear duality of crypto markets. Binance Yellow (`#F0B90B`) cuts through this monochrome foundation like a gold ingot on a steel desk — unmistakable, confident, and engineered to guide every eye toward the next action.
|
||||
|
||||
The interface speaks the language of fintech trust. Custom BinancePlex typography gives every headline and data point a proprietary gravitas, while generous whitespace and restrained decoration keep the focus on numbers, charts, and call-to-action buttons. The design avoids visual complexity in favor of operational clarity — every element exists to either inform or convert. Product screenshots of the mobile trading app dominate the middle sections, presented on floating device mockups against golden gradients, reinforcing that this is a platform you carry with you.
|
||||
|
||||
What makes Binance.US distinctive is the tension between warmth and precision. The golden yellow brand color — warm, optimistic, almost celebratory — lives inside a system of cold, clinical grey text and razor-sharp borders. This isn't a playful fintech like Robinhood or a corporate fortress like Fidelity — it's a crypto-native platform that wraps cutting-edge trading technology in the visual language of established finance.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Two-tone light/dark section alternation — white surfaces for trust, dark panels for depth
|
||||
- Binance Yellow (`#F0B90B`) as the singular accent color driving all primary actions
|
||||
- BinancePlex custom typeface providing proprietary brand identity at every text level
|
||||
- Pill-shaped CTA buttons (50px radius) that demand attention
|
||||
- Floating device mockups on golden gradients for product showcasing
|
||||
- Crypto price tickers with real-time data prominently displayed
|
||||
- Shadow-light elevation with subtle 5% opacity card shadows
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
|
||||
- **Binance Yellow** (`#F0B90B`): The signature — primary CTA backgrounds, brand accent, active states, link color. The single most important color in the system
|
||||
- **Binance Gold** (`#FFD000`): Lighter gold variant used for pill button borders, secondary CTA fills, and golden gradient highlights
|
||||
- **Light Gold** (`#F8D12F`): Soft gold for gradient endpoints and hover-adjacent states
|
||||
|
||||
### Secondary & Accent
|
||||
|
||||
- **Active Yellow** (`#D0980B`): Darkened yellow for active/pressed button states — the "clicked" gold
|
||||
- **Focus Blue** (`#1EAEDB`): Accessibility focus state — appears on hover and focus for all interactive elements
|
||||
|
||||
### Surface & Background
|
||||
|
||||
- **Pure White** (`#FFFFFF`): Primary page canvas, card surfaces, light section backgrounds
|
||||
- **Snow** (`#F5F5F5`): Subtle surface differentiation, input backgrounds, alternating row fills
|
||||
- **Binance Dark** (`#222126`): Dark section backgrounds, footer canvas, "Trusted by millions" panel — a near-black with a faint purple undertone
|
||||
- **Dark Card** (`#2B2F36`): Card surfaces within dark sections, elevated dark containers
|
||||
- **Ink** (`#1E2026`): Button text on yellow backgrounds, deepest text color on light surfaces
|
||||
|
||||
### Neutrals & Text
|
||||
|
||||
- **Primary Text** (`#1E2026`): Main body text, headings on light backgrounds — near-black with slight warmth
|
||||
- **Secondary Text** (`#32313A`): Navigation links, descriptive copy on light surfaces
|
||||
- **Slate** (`#848E9C`): Tertiary text, metadata, timestamps, footer links — the workhorse grey
|
||||
- **Steel** (`#686A6C`): Disabled-adjacent text, subtle labels
|
||||
- **Muted** (`#777E90`): Secondary navigation links, less prominent footer text
|
||||
- **Hover Dark** (`#1A1A1A`): Universal link hover color — text darkens on hover
|
||||
|
||||
### Semantic & Accent
|
||||
|
||||
- **Crypto Green** (`#0ECB81`): Positive price movement, success states, "up" indicators
|
||||
- **Crypto Red** (`#F6465D`): Negative price movement, error states, "down" indicators
|
||||
- **Border Light** (`#E6E8EA`): Standard card and section borders on light backgrounds
|
||||
- **Border Gold** (`#FFD000`): Active/selected state borders, pill button outlines
|
||||
|
||||
### Gradient System
|
||||
|
||||
- **Golden Glow**: Radial gradient from `#F0B90B` center to `#F8D12F` edge — used behind product mockup screenshots
|
||||
- **Dark Fade**: Linear gradient from `#222126` to transparent — used for dark section transitions
|
||||
- **Hero Shimmer**: Subtle animated gold gradient on hero section accents
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
|
||||
**Primary:** BinancePlex (custom proprietary typeface designed by Binance)
|
||||
- Fallbacks: Arial, sans-serif
|
||||
- Replaced DIN Next to solve multi-language spacing issues
|
||||
- Available in weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
|
||||
|
||||
**System:** system-ui stack for cookie banners and third-party UI
|
||||
- Fallbacks: Segoe UI, Roboto, Helvetica, Arial
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | 60px | 700 | 1.08 | — | Hero headlines, maximum impact |
|
||||
| Display Secondary | 34px | 700 | 1.00 | — | Section titles on dark backgrounds |
|
||||
| Heading 1 | 28px | 500 | 1.00 | — | Major section headings |
|
||||
| Heading 2 | 24px | 700 | 1.00 | — | Feature headings, card titles |
|
||||
| Heading 3 | 24px | 600 | 1.00 | — | Subsection headings |
|
||||
| Heading 4 | 20px | 600 | 1.25 | — | Card headings, feature labels |
|
||||
| Body Large | 20px | 500 | 1.50 | — | Hero subtitle, lead paragraphs |
|
||||
| Body | 16px | 500 | 1.50 | — | Standard body text |
|
||||
| Body SemiBold | 16px | 600 | 1.30 | — | Emphasized body, nav links |
|
||||
| Body Bold | 16px | 700 | 1.50 | — | Strong emphasis text |
|
||||
| Button | 16px | 600 | 1.25 | 0.16px | Primary button text |
|
||||
| Button Small | 14.4px | 600 | 1.60 | 0.72px | Secondary buttons, wider tracking |
|
||||
| Caption | 14px | 500 | 1.43 | — | Metadata, labels, prices |
|
||||
| Caption SemiBold | 14px | 600 | 1.50 | — | Emphasized captions |
|
||||
| Small | 12px | 600 | 1.00 | — | Tags, badges, fine print |
|
||||
| Tiny | 11px | 500 | 1.00 | — | Micro-labels, chart annotations |
|
||||
|
||||
### Principles
|
||||
|
||||
BinancePlex is engineered for data-dense interfaces where numbers and text must coexist at multiple scales. The typeface has tabular numerals by default — critical for price columns and portfolio values that need perfect vertical alignment. Weights lean toward the heavier end (500-700), giving the interface a sense of authority and confidence that's essential for a financial platform. The tight line-heights (1.00-1.25) on headings create a stacked, compressed feel that mirrors the density of trading dashboards, while body text opens up to 1.50 for comfortable reading of educational and marketing content.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary (Yellow Fill)**
|
||||
- Background: Binance Yellow (`#F0B90B`)
|
||||
- Text: Ink (`#1E2026`), 16px/600, BinancePlex
|
||||
- Border: none
|
||||
- Border radius: slightly rounded (6px)
|
||||
- Padding: 6px 32px
|
||||
- Hover: shifts to Focus Blue (`#1EAEDB`) with white text
|
||||
- Active: darkens to Active Yellow (`#D0980B`)
|
||||
- Focus: Focus Blue (`#1EAEDB`) bg, 1px black border, 2px black outline, opacity 0.9
|
||||
- Transition: background 200ms ease
|
||||
|
||||
**Primary Pill (Gold)**
|
||||
- Background: Binance Gold (`#FFD000`)
|
||||
- Text: White (`#FFFFFF`)
|
||||
- Border: 1px solid `#FFD000`
|
||||
- Border radius: full pill (50px)
|
||||
- Padding: 10px horizontal
|
||||
- Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
|
||||
- Hover: shifts to Focus Blue (`#1EAEDB`) with white text
|
||||
|
||||
**Secondary (White Outlined)**
|
||||
- Background: White (`#FFFFFF`)
|
||||
- Text: Binance Yellow (`#F0B90B`)
|
||||
- Border: 1px solid `#F0B90B`
|
||||
- Border radius: full pill (50px)
|
||||
- Padding: 10px horizontal
|
||||
- Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
|
||||
- Hover: shifts to Focus Blue bg, white text
|
||||
|
||||
**Disabled**
|
||||
- Background: `#E6E8EA`
|
||||
- Text: `#848E9C`
|
||||
- Cursor: not-allowed
|
||||
|
||||
### Cards & Containers
|
||||
|
||||
- Background: White (`#FFFFFF`) on light sections, Dark Card (`#2B2F36`) on dark sections
|
||||
- Border: 1px solid `#E6E8EA` on light cards
|
||||
- Border radius: medium rounded (12px) for content cards, tight (8px) for data cards
|
||||
- Shadow: `rgba(32, 32, 37, 0.05) 0px 3px 5px 0px` — barely visible, trust-building
|
||||
- Hover: shadow intensifies to `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px`
|
||||
- Transition: box-shadow 200ms ease
|
||||
|
||||
### Inputs & Forms
|
||||
|
||||
- Background: White (`#FFFFFF`) or Snow (`#F5F5F5`)
|
||||
- Text: Ink (`#1E2026`)
|
||||
- Border: 1px solid `#E6E8EA`
|
||||
- Border radius: 8px
|
||||
- Padding: 0px 12px (compact for trading context)
|
||||
- Focus: border shifts to black (`#000000`), 1px outline
|
||||
- Placeholder: Slate (`#848E9C`)
|
||||
- Transition: border-color 200ms ease
|
||||
|
||||
### Navigation
|
||||
|
||||
- Background: White (`#FFFFFF`), sticky
|
||||
- Height: ~64px
|
||||
- Left: Binance logo (SVG, yellow mark + dark wordmark)
|
||||
- Center/Right: navigation links in 14px/600 BinancePlex, color `#32313A`
|
||||
- CTA: Yellow pill button "Get Started" in nav right
|
||||
- Hover: links darken to `#1A1A1A`
|
||||
- Mobile: hamburger menu, full-height overlay
|
||||
- Top: optional promotional banner bar
|
||||
|
||||
### Image Treatment
|
||||
|
||||
- Product mockups: device frames on golden gradient backgrounds, floating with subtle shadow
|
||||
- Hero images: full-width contained within card-like areas with rounded corners (24px)
|
||||
- Video sections: 24px radius with embedded player controls
|
||||
- App screenshots: dark-themed trading UI shown within phone/tablet bezels
|
||||
- Crypto icons: 48px circular with brand colors
|
||||
|
||||
### Trust Indicators
|
||||
|
||||
- Real-time crypto price ticker (BTC, BNB, SOL with green/red price change)
|
||||
- "Trusted by millions" section with statistics on dark background
|
||||
- Security badges and regulatory compliance mentions
|
||||
- QR code for direct app download in footer
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
|
||||
Base unit: 8px
|
||||
|
||||
| Token | Value | Use |
|
||||
|-------|-------|-----|
|
||||
| space-1 | 4px | Tight inline gaps, icon padding |
|
||||
| space-2 | 8px | Base unit, button icon gaps, tight margins |
|
||||
| space-3 | 12px | Card internal padding, input padding |
|
||||
| space-4 | 16px | Standard padding, section margins |
|
||||
| space-5 | 20px | Card gaps, medium padding |
|
||||
| space-6 | 24px | Section internal padding |
|
||||
| space-7 | 32px | Section breaks, large padding |
|
||||
| space-8 | 48px | Major section padding |
|
||||
| space-9 | 64px | Hero section padding |
|
||||
| space-10 | 80px | Large section spacing |
|
||||
|
||||
### Grid & Container
|
||||
|
||||
- Max container width: 1200px (centered)
|
||||
- Hero area: single column with side-by-side text + image above 1024px
|
||||
- Feature grid: 3-column on desktop, single column on mobile
|
||||
- Product showcase: 2-column (text + device mockup)
|
||||
- Horizontal padding: 32px desktop, 16px mobile
|
||||
- Grid gap: 24px between feature cards
|
||||
|
||||
### Whitespace Philosophy
|
||||
|
||||
Binance.US uses whitespace as a trust signal. Generous padding around the hero section and between content blocks creates a sense of spaciousness that counters the information density typically associated with crypto exchanges. The light sections breathe — wide margins around headlines and ample spacing between cards — while dark sections compress, packing features into tighter grids to convey capability and depth. The overall rhythm alternates between "inviting entry" (light, spacious) and "deep functionality" (dark, dense).
|
||||
|
||||
### Border Radius Scale
|
||||
|
||||
| Value | Context |
|
||||
|-------|---------|
|
||||
| 1px | Subtle edge softening, fine UI elements |
|
||||
| 2px | Close buttons, micro-interactive elements |
|
||||
| 6px | Primary buttons (non-pill), small cards |
|
||||
| 8px | Form inputs, data cards, image containers |
|
||||
| 10px | Navigation pills, tag containers |
|
||||
| 12px | Content cards, feature containers |
|
||||
| 24px | Video containers, hero imagery, large cards |
|
||||
| 50px | Pill buttons (CTA), search inputs, full-round elements |
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat | No shadow, solid background | Default for inline elements |
|
||||
| Subtle | `rgba(32, 32, 37, 0.05) 0px 3px 5px` | Content cards, resting state |
|
||||
| Medium | `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px` | Hovered cards, elevated containers |
|
||||
| Pill Shadow | `rgb(153,153,153) 0px 2px 10px -3px` | Pill CTA buttons, floating actions |
|
||||
| Heavy | `rgba(0,0,0) 0px 32px 37px` | Modal overlays, dropdown menus |
|
||||
|
||||
Binance.US uses a whisper-light shadow system. Card shadows are barely perceptible at 5% opacity — they exist not for dramatic depth but as subtle ground cues that keep cards from feeling pasted onto the surface. The pill button shadow is the exception: slightly more visible to give CTAs a "floating" quality that invites clicks. The philosophy is pragmatic — in a financial context, heavy shadows feel frivolous, while no shadows at all feel flat and untrustworthy. The 5% sweet spot communicates professionalism.
|
||||
|
||||
### Decorative Depth
|
||||
|
||||
- **Golden gradient backgrounds**: Behind device mockup sections, radial golden glow centered on the product
|
||||
- **Dark-to-light section transitions**: Hard cut (no gradient blend) between white and `#222126` sections
|
||||
- **Price ticker strip**: Flat, borderless, reads as a data bar rather than a decorative element
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Use Binance Yellow (`#F0B90B`) exclusively for primary CTAs and brand accents — it's the single point of color
|
||||
- Keep light and dark sections strictly alternating for visual rhythm
|
||||
- Use BinancePlex at weight 500+ for all interactive elements — this is a confidence-forward design
|
||||
- Apply 50px radius to all primary CTA pill buttons — the signature interactive shape
|
||||
- Maintain 12px radius on content cards for a polished but not overly rounded feel
|
||||
- Show real-time data prominently (prices, percentages, stats) — numbers build trust
|
||||
- Use Slate (`#848E9C`) for all secondary/metadata text — the universal quiet voice
|
||||
- Keep shadows at 5% opacity or less — barely there but present
|
||||
|
||||
### Don't
|
||||
|
||||
- Don't introduce additional brand colors — Binance Yellow is the only accent; all other color is data-driven (green up, red down)
|
||||
- Don't use rounded corners above 12px on content cards — only CTAs and video containers go higher
|
||||
- Don't add heavy shadows or hover lift effects — this is a restrained financial platform
|
||||
- Don't use BinancePlex below weight 500 for headings — lighter weights undermine authority
|
||||
- Don't place yellow text on yellow backgrounds — always ensure high contrast pairing
|
||||
- Don't mix pill (50px) and square (6px) button styles in the same row
|
||||
- Don't soften the dark sections — `#222126` should feel authoritative, not grey
|
||||
- Don't use decorative illustrations — imagery should be product screenshots or data visualizations
|
||||
- Don't add animation beyond subtle transitions (200ms ease) — financial platforms need stability
|
||||
- Don't use colored backgrounds for semantic states in cards — keep cards white or dark, use text color for semantic meaning
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <425px | Single column, stacked hero, hamburger nav, 16px padding |
|
||||
| Small Mobile | 425-599px | Wider mobile layout, price ticker wraps |
|
||||
| Tablet Small | 600-768px | 2-column feature grid begins |
|
||||
| Tablet | 769-896px | Hero side-by-side layout begins |
|
||||
| Desktop Small | 897-1024px | Full nav expands, 3-column features |
|
||||
| Desktop | 1024-1280px | Full layout, max content width |
|
||||
| Large Desktop | 1280-1440px | Increased margins, centered container |
|
||||
| XL Desktop | >1440px | Max-width container (1200px) with expanded margins |
|
||||
|
||||
### Touch Targets
|
||||
|
||||
- Minimum touch target: 44x44px (WCAG AAA)
|
||||
- Pill CTA buttons: 48px height minimum
|
||||
- Nav links: 44px touch area
|
||||
- Crypto ticker items: full-width tappable rows on mobile
|
||||
- App download buttons: large tap zones (50px+)
|
||||
|
||||
### Collapsing Strategy
|
||||
|
||||
- **Navigation**: Full horizontal links → hamburger menu below 897px; logo and "Get Started" CTA remain visible
|
||||
- **Hero section**: Side-by-side (text left, image right) → stacked (text top, image below) at 768px
|
||||
- **Feature grid**: 3-col → 2-col at 768px → 1-col at 600px
|
||||
- **Price ticker**: Horizontal row → wrapping or scrollable at 600px
|
||||
- **Section padding**: 64px → 48px → 32px → 16px as viewport narrows
|
||||
- **Device mockups**: Scale down proportionally, maintain centered positioning
|
||||
- **Footer**: Multi-column → stacked accordion sections on mobile
|
||||
|
||||
### Image Behavior
|
||||
|
||||
- Device mockups: CSS-scaled with max-width constraints, maintain aspect ratio
|
||||
- Hero imagery: contained within rounded containers (24px), scale proportionally
|
||||
- App screenshots: responsive width with fixed aspect ratio
|
||||
- QR code: fixed 120px square, hidden on mobile (replaced with direct app store links)
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
|
||||
- Primary CTA: Binance Yellow (`#F0B90B`)
|
||||
- Secondary CTA: Binance Gold (`#FFD000`)
|
||||
- Background Light: Pure White (`#FFFFFF`)
|
||||
- Background Dark: Binance Dark (`#222126`)
|
||||
- Heading text: Ink (`#1E2026`)
|
||||
- Body text: Slate (`#848E9C`)
|
||||
- Border: Border Light (`#E6E8EA`)
|
||||
- Positive: Crypto Green (`#0ECB81`)
|
||||
- Negative: Crypto Red (`#F6465D`)
|
||||
|
||||
### Example Component Prompts
|
||||
|
||||
- "Create a hero section with white background, a 60px/700 bold headline in Ink (#1E2026), a 20px/500 subtitle in Slate (#848E9C), and a Binance Yellow (#F0B90B) pill button (50px radius) with dark text (#1E2026)"
|
||||
- "Design a crypto price ticker strip showing BTC, BNB, SOL prices in 14px/600 Ink (#1E2026) with green (#0ECB81) or red (#F6465D) percentage changes, on a white background with #E6E8EA bottom border"
|
||||
- "Build a feature card grid (3-column, 24px gap) with 12px radius white cards, subtle shadow (rgba(32,32,37,0.05) 0px 3px 5px), each containing a yellow (#F0B90B) icon, 20px/600 heading, and 14px/500 #848E9C description"
|
||||
- "Create a dark section (#222126) with a 34px/700 white headline centered, and a 3-column feature grid using dark cards (#2B2F36) with 12px radius and yellow (#F0B90B) accent icons"
|
||||
- "Design a sticky navigation bar with white background, Binance logo left, 14px/600 #32313A nav links center, and a yellow (#F0B90B) pill button (50px radius, 6px padding 32px) labeled 'Get Started' right"
|
||||
|
||||
### 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. Remember: Binance Yellow (#F0B90B) is the ONLY accent color — everything else is grey/dark/white
|
||||
4. Use the dark/light section alternation for visual pacing
|
||||
5. Numbers and data should be prominent — this is a financial platform
|
||||
6. Pill buttons (50px radius) for CTAs, regular buttons (6px radius) for form actions
|
||||
7. Keep shadows almost invisible (5% opacity) — trust comes from clarity, not depth
|
||||
8. BinancePlex at 600+ weight for any text that needs to feel authoritative
|
||||
@@ -0,0 +1,32 @@
|
||||
# Binance.US 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
|
||||
|
||||
- Two-tone light/dark section alternation — white surfaces for trust, dark panels for depth
|
||||
- Binance Yellow (`#F0B90B`) as the singular accent color driving all primary actions
|
||||
- BinancePlex custom typeface providing proprietary brand identity at every text level
|
||||
- Pill-shaped CTA buttons (50px radius) that demand attention
|
||||
|
||||
## Do
|
||||
|
||||
- Preserve the schema token names exactly so cross-brand switching stays reliable.
|
||||
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
|
||||
- Reuse component groups from `components.manifest.json` before inventing new controls.
|
||||
- Treat `source/` files as audit evidence for the bundled fixture backfill.
|
||||
|
||||
## Avoid
|
||||
|
||||
- Avoid raw hex values outside the copied `:root` token block.
|
||||
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
|
||||
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
|
||||
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
|
||||
@@ -0,0 +1,550 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/binance. White trading-floor canvas
|
||||
alternating with deep #222126 panels, Binance Yellow (#F0B90B) as the singular
|
||||
accent, BinancePlex headlines, pill CTAs, and whisper-light 5%-opacity shadows."
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--muted: #848e9c;
|
||||
--meta: #777e90;
|
||||
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
|
||||
--accent: #f0b90b;
|
||||
--accent-on: #1e2026;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-active: #d0980b;
|
||||
|
||||
--success: #0ecb81;
|
||||
--warn: #eab308;
|
||||
--danger: #f6465d;
|
||||
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--text-xs: 11px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: 0;
|
||||
|
||||
--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: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 24px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--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);
|
||||
font-weight: 500;
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "tnum" 1;
|
||||
}
|
||||
|
||||
/* ─── 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); }
|
||||
}
|
||||
|
||||
/* Dark section variant — DESIGN.md §1 alternating light/dark rhythm. */
|
||||
.section-dark {
|
||||
background: #222126;
|
||||
color: #ffffff;
|
||||
}
|
||||
.section-dark .body-muted,
|
||||
.section-dark .eyebrow,
|
||||
.section-dark .lead { color: rgba(255, 255, 255, 0.7); }
|
||||
|
||||
/* ─── Typography — BinancePlex, weights 500–700 only ────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
line-height: var(--leading-tight);
|
||||
letter-spacing: var(--tracking-display);
|
||||
margin: 0;
|
||||
}
|
||||
h1 { font-size: var(--text-4xl); font-weight: 700; }
|
||||
h2 { font-size: var(--text-3xl); font-weight: 700; }
|
||||
h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
|
||||
p { margin: 0; }
|
||||
.eyebrow {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lead { font-size: var(--text-lg); color: var(--muted); font-weight: 500; line-height: var(--leading-body); }
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-sm { font-size: var(--text-sm); font-weight: 500; }
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-5 > * + * { margin-block-start: var(--space-5); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons — DESIGN.md §4 ────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: 12px 28px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.01em;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
transition: background-color var(--motion-base) var(--ease-standard),
|
||||
color var(--motion-base) var(--ease-standard),
|
||||
border-color var(--motion-base) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
/* Primary pill CTA — Binance Yellow, full-round (signature shape) */
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-radius: var(--radius-pill);
|
||||
box-shadow: rgb(153, 153, 153) 0 2px 10px -3px;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
color: #ffffff;
|
||||
}
|
||||
.btn-primary:active { background: var(--accent-active); color: var(--accent-on); }
|
||||
/* Secondary pill — white with yellow outline */
|
||||
.btn-secondary {
|
||||
background: #ffffff;
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--accent-hover);
|
||||
color: #ffffff;
|
||||
border-color: var(--accent-hover);
|
||||
}
|
||||
/* Ghost — for dark sections */
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #ffffff; }
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: var(--space-2); }
|
||||
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
|
||||
.field input {
|
||||
padding: 14px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
transition: border-color var(--motion-base) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input:focus-visible {
|
||||
border-color: #000000;
|
||||
box-shadow: var(--focus-ring);
|
||||
background: #ffffff;
|
||||
}
|
||||
.field input::placeholder { color: var(--muted); font-weight: 500; }
|
||||
.field-help { font-size: var(--text-xs); color: var(--meta); font-weight: 500; }
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
box-shadow: var(--elev-raised);
|
||||
transition: box-shadow var(--motion-base) var(--ease-standard);
|
||||
}
|
||||
.card:hover { box-shadow: 0 3px 5px 5px rgba(8, 8, 8, 0.05); }
|
||||
.card-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: color-mix(in oklab, var(--accent), white 78%);
|
||||
color: var(--accent-active);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.card .card-meta {
|
||||
margin-block-start: auto;
|
||||
padding-block-start: var(--space-4);
|
||||
border-block-start: 1px solid var(--border-soft);
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ─── Price ticker — the "numbers build trust" surface ──── */
|
||||
.ticker {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--border);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 639px) { .ticker { grid-template-columns: repeat(2, 1fr); } }
|
||||
.ticker-cell {
|
||||
background: var(--surface);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ticker-symbol { font-size: var(--text-xs); font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
|
||||
.ticker-price { font-size: var(--text-lg); font-weight: 600; color: var(--fg); }
|
||||
.ticker-change { font-size: var(--text-sm); font-weight: 600; }
|
||||
.ticker-change.up { color: var(--success); }
|
||||
.ticker-change.down { color: var(--danger); }
|
||||
|
||||
/* ─── Badges ────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: var(--space-2);
|
||||
padding: 3px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.badge-success { color: var(--success); background: color-mix(in oklab, var(--success), transparent 88%); }
|
||||
.badge-danger { color: var(--danger); background: color-mix(in oklab, var(--danger), transparent 88%); }
|
||||
.badge-accent { color: var(--accent-active); background: color-mix(in oklab, var(--accent), white 82%); }
|
||||
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
||||
|
||||
/* ─── Links ─────────────────────────────────────────────── */
|
||||
a { color: var(--accent); text-decoration: none; font-weight: 600; transition: color var(--motion-fast) var(--ease-standard); }
|
||||
a:hover { color: #1a1a1a; }
|
||||
.section-dark a:hover { color: var(--accent); }
|
||||
kbd {
|
||||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||||
padding: 2px 6px; border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border); background: var(--surface-warm); color: var(--muted);
|
||||
}
|
||||
|
||||
/* ─── Layout helpers ────────────────────────────────────── */
|
||||
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-12); align-items: center; }
|
||||
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); } }
|
||||
.hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
|
||||
.hero-art {
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
radial-gradient(circle at 50% 45%, #f0b90b 0%, #fcd535 38%, #f8d12f 72%, rgba(248, 209, 47, 0) 100%),
|
||||
#ffffff;
|
||||
display: grid; place-items: center;
|
||||
box-shadow: var(--elev-raised);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-art-device {
|
||||
width: 58%;
|
||||
aspect-ratio: 9 / 16;
|
||||
background: #222126;
|
||||
border-radius: 28px;
|
||||
border: 6px solid #1a1a1a;
|
||||
padding: var(--space-4);
|
||||
display: flex; flex-direction: column; gap: var(--space-3);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.hero-art-row { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; }
|
||||
.hero-art-row .sym { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.06em; }
|
||||
.hero-art-row .pr { font-size: 13px; font-weight: 600; }
|
||||
|
||||
.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; } }
|
||||
@media (max-width: 639px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
|
||||
.form-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: start; }
|
||||
@media (max-width: 1023px) { .form-row { grid-template-columns: 1fr; } }
|
||||
.form {
|
||||
display: flex; flex-direction: column; gap: var(--space-4);
|
||||
max-width: 460px;
|
||||
padding: var(--space-6);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--elev-raised);
|
||||
}
|
||||
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-2); flex-wrap: wrap; }
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
|
||||
@media (max-width: 639px) { .stat-grid { grid-template-columns: 1fr; } }
|
||||
.stat-num { font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-tight); color: var(--accent); font-variant-numeric: tabular-nums; }
|
||||
.stat-label { font-size: var(--text-sm); font-weight: 500; color: rgba(255, 255, 255, 0.7); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-5">
|
||||
<p class="eyebrow">Reference fixture · binance</p>
|
||||
<h1>The world's leading cryptocurrency exchange.</h1>
|
||||
<p class="lead" style="max-width: 56ch">
|
||||
Trade 350+ coins on the platform millions trust for low fees, deep liquidity,
|
||||
and a security record built for the long term. Buy, sell, and stake in seconds.
|
||||
</p>
|
||||
<div class="ticker" aria-label="Live crypto prices">
|
||||
<div class="ticker-cell">
|
||||
<span class="ticker-symbol">BTC / USD</span>
|
||||
<span class="ticker-price">$68,432.10</span>
|
||||
<span class="ticker-change up">+2.41%</span>
|
||||
</div>
|
||||
<div class="ticker-cell">
|
||||
<span class="ticker-symbol">ETH / USD</span>
|
||||
<span class="ticker-price">$3,584.20</span>
|
||||
<span class="ticker-change up">+1.18%</span>
|
||||
</div>
|
||||
<div class="ticker-cell">
|
||||
<span class="ticker-symbol">BNB / USD</span>
|
||||
<span class="ticker-price">$612.55</span>
|
||||
<span class="ticker-change down">−0.73%</span>
|
||||
</div>
|
||||
<div class="ticker-cell">
|
||||
<span class="ticker-symbol">SOL / USD</span>
|
||||
<span class="ticker-price">$148.07</span>
|
||||
<span class="ticker-change up">+4.92%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
Get started
|
||||
<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">View markets</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-art" aria-hidden="true">
|
||||
<div class="hero-art-device">
|
||||
<div class="hero-art-row" style="margin-block-end: 4px">
|
||||
<span class="sym" style="color: var(--accent); letter-spacing: 0.08em">PORTFOLIO</span>
|
||||
<span class="pr" style="color: var(--success)">+8.42%</span>
|
||||
</div>
|
||||
<div class="hero-art-row"><span class="sym">BTC</span><span class="pr">$68,432.10</span></div>
|
||||
<div class="hero-art-row"><span class="sym">ETH</span><span class="pr">$3,584.20</span></div>
|
||||
<div class="hero-art-row"><span class="sym">BNB</span><span class="pr">$612.55</span></div>
|
||||
<div class="hero-art-row"><span class="sym">SOL</span><span class="pr">$148.07</span></div>
|
||||
<div class="hero-art-row"><span class="sym">USDT</span><span class="pr">$1.00</span></div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">Built for traders</p>
|
||||
<h2 style="max-width: 24ch">Operational clarity, every screen.</h2>
|
||||
</div>
|
||||
<div class="features-grid" style="margin-block-start: var(--space-8)">
|
||||
<article class="card">
|
||||
<span class="card-icon" aria-hidden="true">
|
||||
<svg class="icon" width="22" height="22" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<h3>Industry-low fees</h3>
|
||||
<p class="body-muted body-sm">
|
||||
0.10% spot trading fee — discounted further when paying in BNB.
|
||||
Tabular numerics keep price columns aligned across portfolios.
|
||||
</p>
|
||||
<div class="card-meta">
|
||||
<span class="badge badge-accent">Spot · 0.10%</span>
|
||||
<a href="./tokens.css" class="body-sm">Fees →</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-icon" aria-hidden="true">
|
||||
<svg class="icon" width="22" height="22" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/>
|
||||
<path d="M9 12l2 2 4-4"/>
|
||||
</svg>
|
||||
</span>
|
||||
<h3>Security & SAFU</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Cold-storage majority, real-time risk monitoring, and the SAFU fund —
|
||||
an insurance reserve protecting user assets since 2018.
|
||||
</p>
|
||||
<div class="card-meta">
|
||||
<span class="badge badge-success">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
Operational
|
||||
</span>
|
||||
<a href="./DESIGN.md" class="body-sm">Trust →</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<span class="card-icon" aria-hidden="true">
|
||||
<svg class="icon" width="22" height="22" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 17l6-6 4 4 8-9"/>
|
||||
<path d="M14 6h7v7"/>
|
||||
</svg>
|
||||
</span>
|
||||
<h3>Deep liquidity</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Execute size on 350+ markets with the order-book depth of the world's
|
||||
busiest exchange. Sub-millisecond matching engine across global regions.
|
||||
</p>
|
||||
<div class="card-meta">
|
||||
<span class="badge badge-danger">24h vol −1.2%</span>
|
||||
<a href="./tokens.css" class="body-sm">Markets →</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="trust" class="section-dark" style="margin-inline: calc(var(--container-gutter-desktop) * -1); padding-inline: var(--container-gutter-desktop);">
|
||||
<div class="stack-6">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">Trusted by millions</p>
|
||||
<h2 style="color: #ffffff; max-width: 22ch">A platform engineered to scale.</h2>
|
||||
</div>
|
||||
<div class="stat-grid">
|
||||
<div>
|
||||
<p class="stat-num">$76B+</p>
|
||||
<p class="stat-label">24h trading volume across spot and derivatives</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="stat-num">180M+</p>
|
||||
<p class="stat-label">Registered users in 180+ countries worldwide</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="stat-num">350+</p>
|
||||
<p class="stat-label">Cryptocurrencies and trading pairs available today</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="./tokens.css" class="btn btn-ghost">
|
||||
Read the security report
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Open an account</p>
|
||||
<h2 style="max-width: 18ch">Start trading in minutes.</h2>
|
||||
<p class="body-muted" style="max-width: 50ch">
|
||||
KYC verification is fast and runs entirely in-app. Sign up with email,
|
||||
verify your identity, fund your account, and place your first trade.
|
||||
Press <kbd>⌘</kbd> <kbd>K</kbd> anytime to search markets.
|
||||
</p>
|
||||
<p class="body-sm">
|
||||
Already have an account?
|
||||
<a href="./DESIGN.md">Log in →</a>
|
||||
</p>
|
||||
</div>
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="field">
|
||||
<label for="email">Email address</label>
|
||||
<input id="email" type="email" placeholder="[email protected]" autocomplete="email" required />
|
||||
<p class="field-help">We'll send a verification code — no marketing.</p>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="referral">Referral ID <span style="color: var(--meta); font-weight: 500">(optional)</span></label>
|
||||
<input id="referral" type="text" placeholder="e.g. 35480123" autocomplete="off" />
|
||||
<p class="field-help">Get up to 20% trading-fee kickback on your first trades.</p>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Create account</button>
|
||||
<button type="button" class="btn btn-secondary">Continue with passkey</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,550 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "binance",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "Binance — reference components",
|
||||
"description": "Reference fixture for design-systems/binance. White trading-floor canvas alternating with deep #222126 panels, Binance Yellow (#F0B90B) as the singular accent, BinancePlex headlines, pill CTAs, and whisper-light 5%-opacity shadows.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 74,
|
||||
"classCount": 46,
|
||||
"elementCount": 24
|
||||
},
|
||||
"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",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--fg",
|
||||
"--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-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xs",
|
||||
"--tracking-display"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--elev-flat",
|
||||
"--elev-ring",
|
||||
"--fg-2",
|
||||
"--space-1",
|
||||
"--text-2xl",
|
||||
"--text-xl",
|
||||
"--warn"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".badge",
|
||||
".badge-accent",
|
||||
".badge-danger",
|
||||
".badge-dot",
|
||||
".badge-success",
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".card .card-meta",
|
||||
".card-icon",
|
||||
".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-art",
|
||||
".hero-art-device",
|
||||
".hero-art-row",
|
||||
".hero-art-row .pr",
|
||||
".hero-art-row .sym",
|
||||
".hero-grid",
|
||||
".icon",
|
||||
".lead",
|
||||
".row-between",
|
||||
".section-dark",
|
||||
".section-dark .body-muted",
|
||||
".section-dark .eyebrow",
|
||||
".section-dark .lead",
|
||||
".section-dark a:hover",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-5 > * + *",
|
||||
".stack-6 > * + *",
|
||||
".stat-grid",
|
||||
".stat-label",
|
||||
".stat-num",
|
||||
".ticker",
|
||||
".ticker-cell",
|
||||
".ticker-change",
|
||||
".ticker-change.down",
|
||||
".ticker-change.up",
|
||||
".ticker-price",
|
||||
".ticker-symbol",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"a",
|
||||
"a:hover",
|
||||
"body",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"kbd",
|
||||
"p",
|
||||
"section"
|
||||
],
|
||||
"classes": [
|
||||
"badge",
|
||||
"badge-accent",
|
||||
"badge-danger",
|
||||
"badge-dot",
|
||||
"badge-success",
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"btn-secondary",
|
||||
"card",
|
||||
"card-icon",
|
||||
"card-meta",
|
||||
"container",
|
||||
"down",
|
||||
"eyebrow",
|
||||
"features-grid",
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-actions",
|
||||
"form-row",
|
||||
"hero-actions",
|
||||
"hero-art",
|
||||
"hero-art-device",
|
||||
"hero-art-row",
|
||||
"hero-grid",
|
||||
"icon",
|
||||
"lead",
|
||||
"pr",
|
||||
"section-dark",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"stack-5",
|
||||
"stack-6",
|
||||
"stat-grid",
|
||||
"stat-label",
|
||||
"stat-num",
|
||||
"sym",
|
||||
"ticker",
|
||||
"ticker-cell",
|
||||
"ticker-change",
|
||||
"ticker-price",
|
||||
"ticker-symbol",
|
||||
"up"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"body",
|
||||
"button",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"head",
|
||||
"html",
|
||||
"input",
|
||||
"kbd",
|
||||
"label",
|
||||
"main",
|
||||
"meta",
|
||||
"p",
|
||||
"path",
|
||||
"section",
|
||||
"span",
|
||||
"style",
|
||||
"svg",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"btn-secondary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--accent-hover",
|
||||
"--focus-ring",
|
||||
"--radius-pill"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus-visible",
|
||||
".field label",
|
||||
".field-help",
|
||||
".stat-label"
|
||||
],
|
||||
"classes": [
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-actions",
|
||||
"form-row"
|
||||
],
|
||||
"elements": [
|
||||
"form",
|
||||
"input",
|
||||
"label"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--ease-standard",
|
||||
"--fg",
|
||||
"--font-body",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-sm",
|
||||
"--space-2",
|
||||
"--surface-warm",
|
||||
"--text-base"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card",
|
||||
".card .card-meta",
|
||||
".card-icon",
|
||||
".card:hover"
|
||||
],
|
||||
"classes": [
|
||||
"card",
|
||||
"card-icon",
|
||||
"card-meta"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--border",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--motion-base",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--space-3",
|
||||
"--space-6",
|
||||
"--surface"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".badge",
|
||||
".badge-accent",
|
||||
".badge-danger",
|
||||
".badge-dot",
|
||||
".badge-success"
|
||||
],
|
||||
"classes": [
|
||||
"badge",
|
||||
"badge-accent",
|
||||
"badge-danger",
|
||||
"badge-dot",
|
||||
"badge-success"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--danger",
|
||||
"--radius-pill",
|
||||
"--space-2",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".section-dark a:hover",
|
||||
"a",
|
||||
"a:hover"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
"kbd"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"kbd"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--font-mono",
|
||||
"--muted",
|
||||
"--radius-sm",
|
||||
"--surface-warm",
|
||||
"--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",
|
||||
".section-dark .body-muted",
|
||||
".section-dark .eyebrow",
|
||||
".section-dark .lead",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"eyebrow",
|
||||
"lead"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--font-display",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--muted",
|
||||
"--text-3xl",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--tracking-display"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".row-between",
|
||||
".section-dark",
|
||||
".section-dark .body-muted",
|
||||
".section-dark .eyebrow",
|
||||
".section-dark .lead",
|
||||
".section-dark a:hover",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-5 > * + *",
|
||||
".stack-6 > * + *",
|
||||
"section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"hero-grid",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"stack-5",
|
||||
"stack-6",
|
||||
"stat-grid"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--space-4",
|
||||
"--space-6"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 30,
|
||||
"pixelValues": 45,
|
||||
"hardcodedFontFamilies": 5
|
||||
}
|
||||
}
|
||||
@@ -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:119"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#f5f5f5",
|
||||
"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:121"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#1e2026",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:127"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#32313a",
|
||||
"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:128"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#848e9c",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:129"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#777e90",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:130"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#e6e8ea",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#f0f1f2",
|
||||
"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:137"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#f0b90b",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:144"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#1e2026",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:145"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#1eaedb",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:146"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "#d0980b",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:147"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#0ecb81",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:154"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:155"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#f6465d",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:156"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "BinancePlex, Arial, 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:163"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "BinancePlex, Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:164"
|
||||
],
|
||||
"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:165"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "11px",
|
||||
"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:172"
|
||||
],
|
||||
"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:173"
|
||||
],
|
||||
"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:174"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:175"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:176"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "28px",
|
||||
"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:177"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "34px",
|
||||
"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:178"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "60px",
|
||||
"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:179"
|
||||
],
|
||||
"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:185"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.0",
|
||||
"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:186"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "0",
|
||||
"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:187"
|
||||
],
|
||||
"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:193"
|
||||
],
|
||||
"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:194"
|
||||
],
|
||||
"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:195"
|
||||
],
|
||||
"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:196"
|
||||
],
|
||||
"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:197"
|
||||
],
|
||||
"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:198"
|
||||
],
|
||||
"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:199"
|
||||
],
|
||||
"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:200"
|
||||
],
|
||||
"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:206"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"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:207"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"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:208"
|
||||
],
|
||||
"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:216"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:217"
|
||||
],
|
||||
"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:218"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:219"
|
||||
],
|
||||
"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:227"
|
||||
],
|
||||
"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:228"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 3px 5px 0 rgba(32, 32, 37, 0.05)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:229"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 2px #1eaedb",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:235"
|
||||
],
|
||||
"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:241"
|
||||
],
|
||||
"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:242"
|
||||
],
|
||||
"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:243"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:251"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "32px",
|
||||
"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:252"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:253"
|
||||
],
|
||||
"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:254"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "binance",
|
||||
"name": "Binance.US",
|
||||
"category": "Fintech & Crypto",
|
||||
"description": "Bundled OpenDesign package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
|
||||
"source": {
|
||||
"type": "bundled",
|
||||
"origin": "OpenDesign curated bundled fixture"
|
||||
},
|
||||
"files": {
|
||||
"design": "DESIGN.md",
|
||||
"tokens": "tokens.css",
|
||||
"designTokens": "design-tokens.json",
|
||||
"tailwind": "tailwind-v4.css",
|
||||
"components": "components.html"
|
||||
},
|
||||
"usage": "USAGE.md",
|
||||
"componentsManifest": "components.manifest.json",
|
||||
"importMode": "normalized",
|
||||
"craft": {
|
||||
"applies": [],
|
||||
"suggested": [
|
||||
"color",
|
||||
"accessibility-baseline"
|
||||
],
|
||||
"exemptions": []
|
||||
},
|
||||
"preview": {
|
||||
"dir": "preview",
|
||||
"pages": [
|
||||
{
|
||||
"path": "preview/colors.html",
|
||||
"role": "colors",
|
||||
"title": "Colors"
|
||||
},
|
||||
{
|
||||
"path": "preview/typography.html",
|
||||
"role": "typography",
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "preview/spacing.html",
|
||||
"role": "spacing",
|
||||
"title": "Spacing"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceFiles": {
|
||||
"evidence": "source/evidence.md",
|
||||
"tokens": "source/tokens.source.json",
|
||||
"report": "source/token-contract.report.json"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US colors</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
|
||||
.color { height: 88px; background: var(--value); }
|
||||
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
|
||||
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Color roles</h1>
|
||||
|
||||
<section class="grid">
|
||||
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
|
||||
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
|
||||
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
|
||||
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
|
||||
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
|
||||
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
|
||||
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
|
||||
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
|
||||
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US spacing</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
|
||||
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
|
||||
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
|
||||
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Spacing and radius</h1>
|
||||
|
||||
<section class="stack">
|
||||
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
|
||||
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
|
||||
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
|
||||
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
|
||||
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
|
||||
</section>
|
||||
<section class="radii">
|
||||
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
|
||||
<article style="border-radius: var(--radius-md)">--radius-md</article>
|
||||
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
|
||||
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US 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">Fintech & Crypto</p>
|
||||
<h2>Display sample for Binance.US</h2>
|
||||
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
|
||||
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
# Binance.US 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/binance/DESIGN.md
|
||||
- design-systems/binance/tokens.css
|
||||
- design-systems/binance/components.html
|
||||
|
||||
## Token Contract
|
||||
|
||||
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
|
||||
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
|
||||
@@ -0,0 +1,641 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:119"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:120"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "#f5f5f5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:121"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#1e2026",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:127"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "#32313a",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:128"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "#848e9c",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:129"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "#777e90",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:130"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "#e6e8ea",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "#f0f1f2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:137"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#f0b90b",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:144"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#1e2026",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:145"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "#1eaedb",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:146"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "#d0980b",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:147"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#0ecb81",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:154"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#eab308",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:155"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#f6465d",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:156"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "BinancePlex, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:163"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "BinancePlex, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:164"
|
||||
],
|
||||
"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:165"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"layer": "A1-structure",
|
||||
"value": "11px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:172"
|
||||
],
|
||||
"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:173"
|
||||
],
|
||||
"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:174"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"layer": "A1-structure",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:175"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:176"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "28px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:177"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "34px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:178"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "60px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:179"
|
||||
],
|
||||
"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:185"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.0",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "0",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"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:193"
|
||||
],
|
||||
"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:194"
|
||||
],
|
||||
"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:195"
|
||||
],
|
||||
"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:196"
|
||||
],
|
||||
"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:197"
|
||||
],
|
||||
"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:198"
|
||||
],
|
||||
"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:199"
|
||||
],
|
||||
"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:200"
|
||||
],
|
||||
"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:206"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"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:216"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:217"
|
||||
],
|
||||
"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:218"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"layer": "A2",
|
||||
"value": "9999px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:219"
|
||||
],
|
||||
"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:227"
|
||||
],
|
||||
"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:228"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "0 3px 5px 0 rgba(32, 32, 37, 0.05)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:229"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 2px #1eaedb",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:235"
|
||||
],
|
||||
"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:241"
|
||||
],
|
||||
"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:242"
|
||||
],
|
||||
"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:243"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1200px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:251"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:252"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:253"
|
||||
],
|
||||
"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:254"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "binance",
|
||||
"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:119"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#ffffff",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:120"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#f5f5f5",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:121"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#1e2026",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:127"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#32313a",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:128"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#848e9c",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:129"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#777e90",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:130"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#e6e8ea",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:136"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "#f0f1f2",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:137"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#f0b90b",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:144"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#1e2026",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:145"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "#1eaedb",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:146"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "#d0980b",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:147"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#0ecb81",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:154"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#eab308",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:155"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#f6465d",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:156"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "BinancePlex, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:163"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "BinancePlex, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:164"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:165"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "11px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:172"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:173"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:174"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:175"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:176"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "28px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:177"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "34px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:178"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "60px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:179"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:185"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.0",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:186"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "0",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:187"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:193"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:194"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:195"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:196"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:197"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:198"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:199"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:200"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "80px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:206"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:207"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:208"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:216"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:217"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:218"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:219"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:227"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:228"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0 3px 5px 0 rgba(32, 32, 37, 0.05)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:229"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 2px #1eaedb",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:235"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:241"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:242"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:243"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1200px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:251"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:252"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:253"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:254"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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>Binance.US - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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>Binance.US 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 Binance.US, 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="Binance.US" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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>Binance.US 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 Binance.US, 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="Binance.US" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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>Binance.US 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 Binance.US, 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="Binance.US" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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>Binance.US 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 Binance.US, 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="Binance.US" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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>Binance.US 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 Binance.US, 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="Binance.US" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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>Binance.US 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 Binance.US, 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="Binance.US" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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">Fintech & Crypto</p>
|
||||
<h1>Binance.US system assets</h1>
|
||||
<p class="lead">Generated preview modules for bundled official presets.</p>
|
||||
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
|
||||
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
|
||||
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
|
||||
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
|
||||
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
|
||||
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
|
||||
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
|
||||
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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">Fintech & Crypto system</p>
|
||||
<h1>Binance.US component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Binance.US - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #f0b90b;
|
||||
--accent-active: #d0980b;
|
||||
--accent-hover: #1eaedb;
|
||||
--accent-on: #1e2026;
|
||||
--bg: #ffffff;
|
||||
--border: #e6e8ea;
|
||||
--border-soft: #f0f1f2;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-phone: 16px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1200px;
|
||||
--danger: #f6465d;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #1e2026;
|
||||
--fg-2: #32313a;
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--meta: #777e90;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #848e9c;
|
||||
--radius-lg: 24px;
|
||||
--radius-md: 12px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 8px;
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-phone: 32px;
|
||||
--section-y-tablet: 48px;
|
||||
--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: #0ecb81;
|
||||
--surface: #ffffff;
|
||||
--surface-warm: #f5f5f5;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 34px;
|
||||
--text-4xl: 60px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 11px;
|
||||
--tracking-display: 0;
|
||||
--warn: #eab308;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #ffffff;
|
||||
--od-surface: #ffffff;
|
||||
--od-text: #1e2026;
|
||||
--od-muted: #848e9c;
|
||||
--od-border: #e6e8ea;
|
||||
--od-accent: #f0b90b;
|
||||
--od-radius: 12px;
|
||||
--od-font-body: BinancePlex, Arial, sans-serif;
|
||||
--od-font-display: BinancePlex, Arial, 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">Fintech & Crypto system</p>
|
||||
<h1>Binance.US component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for Binance.US, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"colorPrimary": "#f0b90b",
|
||||
"colorPrimaryBg": "#f5f5f5",
|
||||
"colorPrimaryHover": "#1eaedb",
|
||||
"colorPrimaryActive": "#d0980b",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 12
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
@theme {
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-warm: var(--surface-warm);
|
||||
--color-fg: var(--fg);
|
||||
--color-fg-2: var(--fg-2);
|
||||
--color-muted: var(--muted);
|
||||
--color-meta: var(--meta);
|
||||
--color-border: var(--border);
|
||||
--color-border-soft: var(--border-soft);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-on: var(--accent-on);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-active: var(--accent-active);
|
||||
--color-success: var(--success);
|
||||
--color-warn: var(--warn);
|
||||
--color-danger: var(--danger);
|
||||
--font-display: var(--font-display);
|
||||
--font-body: var(--font-body);
|
||||
--font-sans: var(--font-body);
|
||||
--font-mono: var(--font-mono);
|
||||
--text-xs: var(--text-xs);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-base: var(--text-base);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--leading-body: var(--leading-body);
|
||||
--leading-tight: var(--leading-tight);
|
||||
--tracking-display: var(--tracking-display);
|
||||
--spacing-1: var(--space-1);
|
||||
--spacing-2: var(--space-2);
|
||||
--spacing-3: var(--space-3);
|
||||
--spacing-4: var(--space-4);
|
||||
--spacing-5: var(--space-5);
|
||||
--spacing-6: var(--space-6);
|
||||
--spacing-8: var(--space-8);
|
||||
--spacing-12: var(--space-12);
|
||||
--spacing-section-desktop: var(--section-y-desktop);
|
||||
--spacing-section-tablet: var(--section-y-tablet);
|
||||
--spacing-section-phone: var(--section-y-phone);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
--radius-pill: var(--radius-pill);
|
||||
--shadow-flat: var(--elev-flat);
|
||||
--shadow-ring: var(--elev-ring);
|
||||
--shadow-raised: var(--elev-raised);
|
||||
--shadow-focus-ring: var(--focus-ring);
|
||||
--duration-fast: var(--motion-fast);
|
||||
--duration-base: var(--motion-base);
|
||||
--ease-standard: var(--ease-standard);
|
||||
--container-max: var(--container-max);
|
||||
--spacing-container-desktop: var(--container-gutter-desktop);
|
||||
--spacing-container-tablet: var(--container-gutter-tablet);
|
||||
--spacing-container-phone: var(--container-gutter-phone);
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/binance/tokens.css
|
||||
*
|
||||
* Structured token bindings for "Design System Inspired by Binance.US"
|
||||
* — the polished urgency of a crypto trading floor: white surfaces and
|
||||
* deep near-black `#222126` panels alternating in rhythm, Binance Yellow
|
||||
* `#F0B90B` cutting through the monochrome as the single brand signal,
|
||||
* BinancePlex headlines that carry proprietary gravitas, pill-shaped CTAs
|
||||
* (50px+ radius) demanding attention, and whisper-light 5%-opacity card
|
||||
* shadows that ground floating surfaces without ever feeling decorative.
|
||||
*
|
||||
* This file pre-compiles the values described in `DESIGN.md` into the
|
||||
* shared schema. Agents generating a Binance-flavored artifact should
|
||||
* paste the `:root { … }` block verbatim into the first `<style>` of
|
||||
* the artifact, then reference every value through `var(--name)`.
|
||||
*
|
||||
* Brand-specific schema decisions (each one bends a schema convention
|
||||
* to match Binance's voice rather than the cross-brand default):
|
||||
*
|
||||
* 1. `--accent` is Binance Yellow (`#F0B90B`) — the singular point
|
||||
* of brand color. DESIGN.md §7 is unambiguous: "Don't introduce
|
||||
* additional brand colors — Binance Yellow is the only accent;
|
||||
* all other color is data-driven (green up, red down)". The
|
||||
* yellow lives inside a system of cold neutrals on purpose;
|
||||
* every CTA, link, and active state resolves to this one value.
|
||||
*
|
||||
* 2. `--accent-on` is Ink (`#1E2026`), not white. Yellow on white
|
||||
* text would smear; yellow on near-black text is the high-contrast
|
||||
* pairing DESIGN.md §4 documents for every primary button.
|
||||
*
|
||||
* 3. `--accent-hover` is Focus Blue (`#1EAEDB`), NOT a darker yellow.
|
||||
* DESIGN.md §4 explicitly defines the hover for every interactive
|
||||
* yellow surface as "shifts to Focus Blue with white text" — the
|
||||
* hue change IS the brand interaction. The hovered button's text
|
||||
* becomes white (component-level override), not Ink. This is the
|
||||
* single most counter-intuitive token in the file; rebinding to
|
||||
* a yellow-darken mix erases Binance's signature hover.
|
||||
*
|
||||
* 4. `--accent-active` is Active Yellow (`#D0980B`) — the documented
|
||||
* "clicked" gold from DESIGN.md §2, hand-picked rather than
|
||||
* formula-derived so the pressed state stays warm rather than
|
||||
* shifting cool with the hover.
|
||||
*
|
||||
* 5. Foreground ramp binds the full four-tier neutral scale from
|
||||
* DESIGN.md §2: Ink `#1E2026` (primary), Secondary `#32313A`
|
||||
* (nav links / descriptive copy), Slate `#848E9C` (the workhorse
|
||||
* grey for metadata / timestamps), Muted `#777E90` (secondary
|
||||
* nav / less-prominent footer text). Binance genuinely uses four
|
||||
* distinct text tiers across trading dashboards, so `--fg-2` and
|
||||
* `--meta` are independently bound, not aliased.
|
||||
*
|
||||
* 6. `--surface-warm` is Snow (`#F5F5F5`) — DESIGN.md §2 calls it
|
||||
* out as the "subtle surface differentiation, input backgrounds,
|
||||
* alternating row fills" tier. Bound independently (not aliased
|
||||
* to `--surface`) because dense data tables use it to visually
|
||||
* stripe rows without introducing a border weight.
|
||||
*
|
||||
* 7. `--success` is Crypto Green (`#0ECB81`) and `--danger` is
|
||||
* Crypto Red (`#F6465D`) — these are not generic semantic
|
||||
* colors, they are the bull/bear price-movement signals that
|
||||
* define the entire crypto-trading visual language. Binding the
|
||||
* schema slots to the documented brand values keeps semantic
|
||||
* pills, badges, and tickers on-brand without per-component
|
||||
* overrides.
|
||||
*
|
||||
* 8. Type scale tops out at 60px (`--text-4xl`). DESIGN.md §3
|
||||
* caps Display Hero at 60px / 700 with line-height 1.08 — the
|
||||
* ceiling expresses authority through weight, not size. Smaller
|
||||
* tiers map directly to the documented hierarchy table:
|
||||
* 11 / 14 / 16 / 20 / 24 / 28 / 34 / 60.
|
||||
*
|
||||
* 9. `--leading-tight` is `1.0`, not the schema's 1.2. DESIGN.md §3
|
||||
* explicitly sets headings 1–4 to line-height 1.00 ("stacked,
|
||||
* compressed feel that mirrors the density of trading
|
||||
* dashboards"). `--tracking-display` is `0` — the brand uses
|
||||
* weight (600–700) and size, not negative letter-spacing.
|
||||
*
|
||||
* 10. `--radius-pill` is `9999px`, not the literal 50px DESIGN.md
|
||||
* cites for CTAs. 9999 is the schema convention for "always
|
||||
* fully rounded"; both values render identically at any button
|
||||
* height below 4998px tall, and 9999 is what other brands ship.
|
||||
*
|
||||
* 11. `--elev-raised` is the literal "whisper" card shadow from
|
||||
* DESIGN.md §6 — `0 3px 5px 0 rgba(32, 32, 37, 0.05)`. At 5%
|
||||
* opacity the shadow is barely perceptible by design; DESIGN.md
|
||||
* §6 calls heavier shadows "frivolous" for a financial platform.
|
||||
* Components that hover-elevate (per DESIGN.md §4) inline the
|
||||
* richer `rgba(8, 8, 8, 0.05) 0 3px 5px 5px` variant.
|
||||
*
|
||||
* 12. `--focus-ring` is a SOLID 2px Focus Blue (`#1EAEDB`) ring, NOT
|
||||
* the schema's accent-tinted alpha glow. DESIGN.md §2 specifies
|
||||
* Focus Blue as the universal "Accessibility focus state" color
|
||||
* for all interactive elements — reproducing it as a sharp 2px
|
||||
* box-shadow keeps keyboard focus razor-legible against either
|
||||
* white or `#222126` surfaces.
|
||||
*
|
||||
* 13. Section rhythm is 80 / 48 / 32 (`--section-y-*`). DESIGN.md §5
|
||||
* lists `space-10: 80px` as "Large section spacing" and `space-8:
|
||||
* 48px` as "Major section padding" — the desktop hero gets the
|
||||
* 80px tier, tablet collapses to 48px, phone tightens to 32px.
|
||||
* Container caps at 1200px per DESIGN.md §5; gutters compress
|
||||
* 32 → 16 → 16 (DESIGN.md mobile = 16, no separate tablet step).
|
||||
*
|
||||
* Brand-specific extensions (Layer C): none. Crypto Green / Red /
|
||||
* Focus Blue / Dark Card `#2B2F36` / Binance Dark `#222126` are used
|
||||
* as inline expressions in components.html where dark sections and
|
||||
* price-ticker tints are rendered. They are not promoted to shared
|
||||
* tokens because no cross-brand component needs to reference them by
|
||||
* name — DESIGN.md §7 forbids dark-section colorization in shared
|
||||
* components anyway.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels) ──────────────────────────────────────────
|
||||
* Pure white canvas for trust, Snow for input fields and alternating
|
||||
* data-table rows. Dark sections (`#222126`) are component-scoped:
|
||||
* shared components stay light-canvas; sections that flip dark
|
||||
* carry their own inline backgrounds. */
|
||||
--bg: #ffffff; /* Pure White — primary page canvas */
|
||||
--surface: #ffffff; /* White cards on light sections */
|
||||
--surface-warm: #f5f5f5; /* Snow — input bg, alternating rows */
|
||||
|
||||
/* ─── Foreground ramp (4 tiers) ──────────────────────────────────
|
||||
* Four distinct text tiers from DESIGN.md §2 — Ink for headings,
|
||||
* Secondary for nav links, Slate for metadata (the workhorse grey),
|
||||
* Muted for tertiary nav and quiet footer text. */
|
||||
--fg: #1e2026; /* Ink — primary text, headings */
|
||||
--fg-2: #32313a; /* Secondary — nav links, descriptive copy */
|
||||
--muted: #848e9c; /* Slate — metadata, timestamps, captions */
|
||||
--meta: #777e90; /* Muted — tertiary nav, footer text */
|
||||
|
||||
/* ─── Border (2 levels) ──────────────────────────────────────────
|
||||
* One light border tier for cards and forms; a softer inner tier
|
||||
* for row separators in dense data tables that must not compete
|
||||
* with the card edge. */
|
||||
--border: #e6e8ea; /* Border Light — cards, inputs, sections */
|
||||
--border-soft: #f0f1f2; /* Softer inner row separator */
|
||||
|
||||
/* ─── Accent ─────────────────────────────────────────────────────
|
||||
* The signature. Binance Yellow is the ONE non-neutral color in
|
||||
* the system — every primary CTA, every brand accent, every active
|
||||
* state resolves here. DESIGN.md §7 forbids introducing additional
|
||||
* brand colors. */
|
||||
--accent: #f0b90b; /* Binance Yellow */
|
||||
--accent-on: #1e2026; /* Ink — high-contrast label on yellow */
|
||||
--accent-hover: #1eaedb; /* Focus Blue — DESIGN.md §4 hover hue-shift */
|
||||
--accent-active: #d0980b; /* Active Yellow — pressed state */
|
||||
|
||||
/* ─── Semantic ───────────────────────────────────────────────────
|
||||
* Crypto-native semantics: green is "up", red is "down". These are
|
||||
* the bull/bear price-movement signals, not generic status colors,
|
||||
* and they bind directly to the shared semantic slots so tickers
|
||||
* and badges resolve on-brand without overrides. */
|
||||
--success: #0ecb81; /* Crypto Green — up indicators */
|
||||
--warn: #eab308; /* schema default — DESIGN.md has no warn tier */
|
||||
--danger: #f6465d; /* Crypto Red — down indicators */
|
||||
|
||||
/* ─── Typography ─────────────────────────────────────────────────
|
||||
* BinancePlex is the custom proprietary face; Arial is the
|
||||
* documented fallback (DESIGN.md §3 — "replaced DIN Next to solve
|
||||
* multi-language spacing issues"). Display and body share the
|
||||
* stack; weight (500–700) and size carry the entire hierarchy. */
|
||||
--font-display: BinancePlex, Arial, sans-serif;
|
||||
--font-body: BinancePlex, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Type scale (px) — direct mapping of DESIGN.md §3 hierarchy:
|
||||
* 11 (Tiny) / 14 (Caption) / 16 (Body) / 20 (H4, Body Large) /
|
||||
* 24 (H2/H3) / 28 (H1) / 34 (Display Secondary) / 60 (Display Hero).
|
||||
* The 12px Small tier is collapsed into 11px (--text-xs); the 14.4px
|
||||
* Button Small variant is inlined per-component. */
|
||||
--text-xs: 11px; /* Tiny — micro-labels, chart annotations */
|
||||
--text-sm: 14px; /* Caption — metadata, prices, button-small */
|
||||
--text-base: 16px; /* Body — standard reading text, buttons */
|
||||
--text-lg: 20px; /* Body Large / Heading 4 — card titles */
|
||||
--text-xl: 24px; /* Heading 2 / Heading 3 — feature headings */
|
||||
--text-2xl: 28px; /* Heading 1 — major section headings */
|
||||
--text-3xl: 34px; /* Display Secondary — section titles on dark */
|
||||
--text-4xl: 60px; /* Display Hero — maximum impact */
|
||||
|
||||
/* Leading & tracking — DESIGN.md §3 sets headings at 1.00 line-height
|
||||
* (the "stacked, compressed feel that mirrors trading-dashboard
|
||||
* density"). Body opens to 1.5 for reading. No letter-spacing on
|
||||
* display — weight and size carry authority, not tracking. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.0;
|
||||
--tracking-display: 0;
|
||||
|
||||
/* ─── Spacing ────────────────────────────────────────────────────
|
||||
* 8px base unit per DESIGN.md §5. 4/8/12/16/20/24/32/48 covers the
|
||||
* structural ladder; the 64px/80px hero/section tiers live in
|
||||
* --section-y-* below. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* Section rhythm — DESIGN.md §5 "Large section spacing" 80px desktop,
|
||||
* "Major section padding" 48px tablet, "Section breaks" 32px phone.
|
||||
* The alternating light/dark rhythm DESIGN.md §1 calls out is handled
|
||||
* per-section in components.html, not at the token level. */
|
||||
--section-y-desktop: 80px;
|
||||
--section-y-tablet: 48px;
|
||||
--section-y-phone: 32px;
|
||||
|
||||
/* ─── Radius ─────────────────────────────────────────────────────
|
||||
* DESIGN.md §5 scale: 1/2/6/8/10/12/24/50. We bind: 8 (form inputs,
|
||||
* data cards), 12 (content cards — the polished-but-not-overly-
|
||||
* rounded middle), 24 (hero/video containers), 9999 (pill CTAs —
|
||||
* DESIGN.md cites 50px but 9999 is the schema's "always full"
|
||||
* convention and renders identically). */
|
||||
--radius-sm: 8px; /* Form inputs, data cards */
|
||||
--radius-md: 12px; /* Content cards, feature containers */
|
||||
--radius-lg: 24px; /* Hero imagery, video containers */
|
||||
--radius-pill: 9999px; /* Pill CTAs — the signature interactive shape */
|
||||
|
||||
/* ─── Elevation (3 levels) ───────────────────────────────────────
|
||||
* Whisper-light: DESIGN.md §6 caps card shadows at 5% opacity ("in
|
||||
* a financial context, heavy shadows feel frivolous"). The raised
|
||||
* shadow is the documented resting-state card; hover-elevated and
|
||||
* pill-CTA shadows are component-scoped because they layer on top
|
||||
* of the base. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);
|
||||
|
||||
/* ─── Focus ring ─────────────────────────────────────────────────
|
||||
* Focus Blue (`#1EAEDB`) per DESIGN.md §2 — the universal a11y
|
||||
* focus state for every interactive surface. Sharp 2px solid, not
|
||||
* a soft halo; trading platforms need unambiguous keyboard focus. */
|
||||
--focus-ring: 0 0 0 2px #1eaedb;
|
||||
|
||||
/* ─── Motion ─────────────────────────────────────────────────────
|
||||
* DESIGN.md §7 Don't list: "Don't add animation beyond subtle
|
||||
* transitions (200ms ease) — financial platforms need stability".
|
||||
* The brand voice is precision, not choreography. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ─────────────────────────────────────────────────────
|
||||
* 1200px max content width per DESIGN.md §5. Desktop gutter 32px
|
||||
* (DESIGN.md "Horizontal padding: 32px desktop"); mobile 16px
|
||||
* (DESIGN.md "16px mobile"); tablet sits at 16px because DESIGN.md
|
||||
* does not define a separate tablet gutter — better to match
|
||||
* mobile than over-extend the container on narrow screens. */
|
||||
--container-max: 1200px;
|
||||
--container-gutter-desktop: 32px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 16px;
|
||||
}
|
||||
Reference in new issue
Block a user