mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
4e38357e7d
* feat(design-systems): add structured tokens for notion, linear, github, figma, slack, discord, openai, shopify, spotify, uber
Hand-authored batch-2 oracle fixtures for 10 high-profile brands.
Each brand ships tokens.css (A1/A2/B-slot declarations) + components.html
(:root pasted verbatim, no off-token values). pnpm guard reports 12
structured brands (up from 2), all 13 checks pass.
Co-authored-by: Cursor <cursoragent@cursor.com>
* fix(design-systems): correct elev-ring, focus-ring, and spacing schema drift
- slack: rebind --elev-ring to hairline form (0 0 0 1px var(--border)) so
cross-brand components expecting a 1px outline get a ring, not a soft
drop shadow; the previous value was Slack DESIGN.md "Low" elevation
accidentally placed in the wrong slot
- linear-app: expand --focus-ring to the DESIGN.md §6/§7 multi-layer
stack (accent ring + black blur) so keyboard focus is visible on the
near-black #08090a canvas
- openai: restore --space-{5,6,8,12} to the shared 4·N px spine and
introduce --space-16 (64 px) as a brand extension in BRAND_EXTENSIONS;
syncs components.html :root in all three brands
Co-authored-by: Cursor <cursoragent@cursor.com>
---------
Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>
Co-authored-by: Cursor <cursoragent@cursor.com>
125 lines
7.4 KiB
CSS
125 lines
7.4 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
|
* design-systems/discord/tokens.css
|
|
*
|
|
* Structured token bindings for the "Discord" brand — deep blurple,
|
|
* dark-first surfaces, voice-and-chat for gaming and community.
|
|
*
|
|
* Brand identity in three sentences:
|
|
* 1. Dark-first: three-step depth ladder (#1e1f22 deepest → #2b2d31
|
|
* sidebar → #313338 chat surface), pixel-snapped 1px dividers at
|
|
* low alpha, rounded-square server avatars that morph to circles.
|
|
* 2. gg sans (friendly geometric, Whitney-replacement) for all text at
|
|
* 400/500/600/700/800 weights; 16px body never shrinks; hierarchy
|
|
* comes from weight contrast over color contrast.
|
|
* 3. Blurple (#5865f2) as the single saturated accent — reserved for
|
|
* brand mark, primary CTAs, mentions, and "you" affordances; used
|
|
* sparingly so it pops against the muted dark surface.
|
|
*
|
|
* Schema decisions:
|
|
* - --bg: #313338 (chat surface / primary dark); --surface: #2b2d31.
|
|
* - --surface-warm: #191a1e (deepest — server list rail, level below).
|
|
* - --fg: #dbdee1 (text-normal — cooler than pure white).
|
|
* - --fg-2: #f2f3f5 (header-primary — modal titles, channel headers).
|
|
* - --muted: #949ba4 (text-muted — timestamps, metadata).
|
|
* - --border: rgba(255,255,255,0.06); --border-soft: same.
|
|
* - --accent: #5865f2 (Blurple); --accent-hover: #4752c4.
|
|
* - --tracking-display: -0.02em (display 56px hero per DESIGN.md).
|
|
* - --radius-sm: 4px (buttons/inputs); --radius-md: 8px (cards).
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* ─── Surface ──────────────────────────────────────────────────── */
|
|
--bg: #313338; /* chat surface / primary dark */
|
|
--surface: #2b2d31; /* channel sidebar, settings sidebar */
|
|
--surface-warm: #1e1f22; /* server list rail — deepest layer */
|
|
|
|
/* ─── Foreground ───────────────────────────────────────────────── */
|
|
--fg: #dbdee1; /* text-normal — slightly cooler than white */
|
|
--fg-2: #f2f3f5; /* header-primary — modal titles */
|
|
--muted: #949ba4; /* text-muted — timestamps, server names */
|
|
--meta: #80848e; /* channels-default — inactive sidebar names */
|
|
|
|
/* ─── Border ───────────────────────────────────────────────────── */
|
|
--border: rgba(255, 255, 255, 0.06); /* standard divider */
|
|
--border-soft: #3f4147; /* solid divider for cards */
|
|
|
|
/* ─── Accent ───────────────────────────────────────────────────── */
|
|
--accent: #5865f2; /* Blurple — brand primary CTA */
|
|
--accent-on: #ffffff;
|
|
--accent-hover: #4752c4; /* darker hover */
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
|
|
|
/* ─── Semantic ─────────────────────────────────────────────────── */
|
|
--success: #23a55a; /* status-online green */
|
|
--warn: #f0b232; /* status-idle yellow */
|
|
--danger: #f23f43; /* status-dnd / destructive red */
|
|
|
|
/* ─── Typography ───────────────────────────────────────────────── */
|
|
--font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-body: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-mono: "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
|
|
|
|
/* Type scale — DESIGN.md §Typography Hierarchy.
|
|
* Discord: 56px display, 24px page heading, 16px body (never shrinks).
|
|
* Schema spine: xs=12 (timestamp/caption), base=16, 4xl=56. */
|
|
--text-xs: 12px; /* timestamp / caption / meta */
|
|
--text-sm: 14px; /* compact metadata */
|
|
--text-base: 16px; /* message body — never below 16px */
|
|
--text-lg: 18px; /* feature heading */
|
|
--text-xl: 20px; /* sub-heading */
|
|
--text-2xl: 24px; /* page heading — settings/profile */
|
|
--text-3xl: 32px; /* section heading */
|
|
--text-4xl: 56px; /* display hero — marketing */
|
|
|
|
/* Leading + tracking.
|
|
* --leading-tight=1.10: 56px hero compression.
|
|
* h2 (32px) → 1.20; h3 (24px) → 1.25 per brand feel.
|
|
* --tracking-display: -0.02em (display 56px per DESIGN.md). */
|
|
--leading-body: 1.375;
|
|
--leading-tight: 1.10;
|
|
--tracking-display: -0.02em;
|
|
|
|
/* ─── Spacing ──────────────────────────────────────────────────── */
|
|
/* 4px base grid per DESIGN.md §Spacing & Layout. */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-12: 40px;
|
|
|
|
/* Section rhythm. */
|
|
--section-y-desktop: 80px;
|
|
--section-y-tablet: 48px;
|
|
--section-y-phone: 32px;
|
|
|
|
/* ─── Radius ───────────────────────────────────────────────────── */
|
|
/* 4px for buttons/inputs; 8px for cards. Rounded but not balloon-soft. */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 16px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* ─── Elevation ────────────────────────────────────────────────── */
|
|
/* Dark surfaces: luminance stepping; semi-transparent white borders
|
|
as depth signal rather than drop shadows. */
|
|
--elev-flat: none;
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
|
|
/* ─── Focus ────────────────────────────────────────────────────── */
|
|
--focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
|
|
|
|
/* ─── Motion ───────────────────────────────────────────────────── */
|
|
--motion-fast: 80ms;
|
|
--motion-base: 200ms;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
/* ─── Layout ───────────────────────────────────────────────────── */
|
|
--container-max: 1200px;
|
|
--container-gutter-desktop: 24px;
|
|
--container-gutter-tablet: 16px;
|
|
--container-gutter-phone: 16px;
|
|
}
|