nexu-io--open-design
wehub-resource-sync
152 行
9.4 KiB
CSS
152 行
9.4 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────────
|
|
* design-systems/perplexity/tokens.css
|
|
*
|
|
* Structured token bindings for the "Perplexity" brand — the research-
|
|
* terminal voice of a conversational AI search engine.
|
|
*
|
|
* Brand identity in three sentences:
|
|
* 1. Dark canvas as the native medium — a flat near-black (#0f0f10)
|
|
* that recedes so citations, sources, and the answer column lead;
|
|
* depth is three luminance steps (base → surface → elevated), never
|
|
* shadow.
|
|
* 2. Inter for all UI and reading, JetBrains Mono for code and
|
|
* citations; weight 600 is the cap for display (700 reads too
|
|
* thin against #0f0f10), generous 1.65 body leading for dense
|
|
* research paragraphs.
|
|
* 3. A single chromatic accent — Perplexity Purple (#a855f7) —
|
|
* reserved for the primary CTA and active focus state; everything
|
|
* else is grayscale. Color appears once per view, never twice.
|
|
*
|
|
* Schema decisions:
|
|
* - --bg: #0f0f10 (page background, anti-gradient flat).
|
|
* - --surface: #19191a (card / sidebar surface).
|
|
* - --surface-warm aliases --surface — dark achromatic system, no warm
|
|
* tier; the third luminance step (#232325) lives in --border-soft so
|
|
* hover/elevated states can borrow it without inventing a token.
|
|
* - --fg: #f0f0f0 (near-white, not pure white — prevents eye strain).
|
|
* - --fg-2 aliases --fg — DESIGN.md §2 lists a single primary text
|
|
* color; secondary lives in --muted, tertiary in --meta.
|
|
* - --border: #2e2e30; --border-soft: #232325 (also the elevated tier).
|
|
* - --accent: #a855f7 (purple); --accent-hover: #c084fc;
|
|
* --accent-active: #9333ea (darker pressed — one step down the
|
|
* violet scale, since DESIGN.md does not name an active value).
|
|
* - --tracking-display: -0.01em (Inter at 32px tightens slightly).
|
|
* - --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px (DESIGN.md §4).
|
|
* - --elev-raised: hairline ring only — DESIGN.md §6 §9 forbids
|
|
* drop shadows; elevation is communicated through border contrast.
|
|
* - --motion-fast: 120ms (DESIGN.md §7 hover), --motion-base: 200ms
|
|
* (modal); ease-out flavored cubic-bezier per DESIGN.md guidance.
|
|
* ─────────────────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* ─── Surface ──────────────────────────────────────────────────── */
|
|
--bg: #0f0f10; /* flat near-black canvas — no gradient */
|
|
--surface: #19191a; /* card / sidebar / search bar fill */
|
|
--surface-warm: var(--surface); /* no warm tier in dark achromatic system */
|
|
|
|
/* ─── Foreground ───────────────────────────────────────────────── */
|
|
--fg: #f0f0f0; /* near-white — body copy, headings */
|
|
--fg-2: var(--fg); /* DESIGN.md §2 has a single primary tier */
|
|
--muted: #9b9b9b; /* secondary — meta, captions, labels */
|
|
--meta: #5c5c5e; /* tertiary — placeholder, disabled */
|
|
|
|
/* ─── Border ───────────────────────────────────────────────────── */
|
|
--border: #2e2e30; /* divider, input border, card edge */
|
|
--border-soft: #232325; /* inner row separator + elevated tier */
|
|
|
|
/* ─── Accent ───────────────────────────────────────────────────── */
|
|
--accent: #a855f7; /* Perplexity purple — sole chromatic color */
|
|
--accent-on: #ffffff; /* white on accent for buttons / badges */
|
|
--accent-hover: #c084fc; /* lighter violet hover */
|
|
--accent-active: #9333ea; /* darker pressed — derived, DESIGN.md silent */
|
|
|
|
/* ─── Semantic ─────────────────────────────────────────────────── */
|
|
--success: #22c55e; /* verified source badge */
|
|
--warn: #f59e0b; /* caution */
|
|
--danger: #ef4444; /* error state */
|
|
|
|
/* ─── Typography ───────────────────────────────────────────────── */
|
|
/* Inter for UI/body/display (weight 600 cap at display sizes).
|
|
JetBrains Mono for code, citations, inline tags. */
|
|
--font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* Type scale — DESIGN.md §3.
|
|
* 4xl=32 display, 3xl=22 heading-l, 2xl=18 heading-m, lg=16 reading-large,
|
|
* base=15 body, sm=13 body-sm, xs=11 caption. The 3xl/2xl→xl gap (16) is
|
|
* the natural reading-large bridge for source-card titles. */
|
|
--text-xs: 11px; /* caption — source labels, timestamps */
|
|
--text-sm: 13px; /* body-sm — secondary, meta */
|
|
--text-base: 15px; /* body — primary reading copy */
|
|
--text-lg: 16px; /* reading-large — source card titles */
|
|
--text-xl: 18px; /* heading-m — sub-section heading */
|
|
--text-2xl: 22px; /* heading-l — section heading */
|
|
--text-3xl: 28px; /* sub-display — intermediate hero step */
|
|
--text-4xl: 32px; /* display — page title, hero answer */
|
|
|
|
/* Leading + tracking.
|
|
* --leading-body=1.65: dense research paragraphs (DESIGN.md §3 body).
|
|
* --leading-tight=1.2: display compression (DESIGN.md display row).
|
|
* --tracking-display=-0.01em: Inter at 32px tightens subtly; never stretch. */
|
|
--leading-body: 1.65;
|
|
--leading-tight: 1.2;
|
|
--tracking-display: -0.01em;
|
|
|
|
/* ─── Spacing ──────────────────────────────────────────────────── */
|
|
/* 8px base unit (DESIGN.md §4). Schema spine maps the key stops;
|
|
DESIGN.md's 48/64 page/above-fold tiers ride --space-12 and the
|
|
section-y tokens 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 §4: 48px page-level, 64px above-fold. */
|
|
--section-y-desktop: 64px;
|
|
--section-y-tablet: 48px;
|
|
--section-y-phone: 32px;
|
|
|
|
/* ─── Radius ───────────────────────────────────────────────────── */
|
|
/* DESIGN.md §4: 4 tag, 8 input/card, 12 modal/popover. Pill for
|
|
avatars/tags only — never on cards (DESIGN.md §9 anti-pattern). */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* ─── Elevation ────────────────────────────────────────────────── */
|
|
/* DESIGN.md §6 §9: no drop shadows. Elevation = border contrast.
|
|
--elev-raised intentionally collapses to a hairline ring — the
|
|
visual lift comes from the background stepping to #232325 in
|
|
the consuming rule, not from a cast shadow. */
|
|
--elev-flat: none;
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--elev-raised: 0 0 0 1px var(--border);
|
|
|
|
/* ─── Focus ────────────────────────────────────────────────────── */
|
|
/* DESIGN.md §5 search bar: --accent 2px outline, no box-shadow halo. */
|
|
--focus-ring: 0 0 0 2px var(--accent);
|
|
|
|
/* ─── Motion ───────────────────────────────────────────────────── */
|
|
/* DESIGN.md §7: hover 120ms, modal 200ms; anti-animation brand.
|
|
Easing reads as "ease-out-like" (cubic-bezier(0.2, 0, 0, 1)) since
|
|
DESIGN.md prescribes ease-out for panel/modal openers. */
|
|
--motion-fast: 120ms;
|
|
--motion-base: 200ms;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
/* ─── Layout ───────────────────────────────────────────────────── */
|
|
/* DESIGN.md §4: 1100px full-page shell (answer column 720px lives
|
|
inline in components that want the reading width). Gutter 16px
|
|
on phone matches DESIGN.md's stated side margin. */
|
|
--container-max: 1100px;
|
|
--container-gutter-desktop: 24px;
|
|
--container-gutter-tablet: 16px;
|
|
--container-gutter-phone: 16px;
|
|
}
|