90 lines
3.5 KiB
CSS
90 lines
3.5 KiB
CSS
/* ============================================================
|
|
Family Home Lab — Design Tokens
|
|
Source: DESIGN.md (Notion design language)
|
|
Only structural/semantic tokens here. All values map 1:1.
|
|
============================================================ */
|
|
|
|
/* Inter (@fontsource) — self-hosted substitute for NotionInter */
|
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
|
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); }
|
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
|
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); }
|
|
|
|
:root {
|
|
/* --- Surface --- */
|
|
--canvas-soft: #f6f5f4;
|
|
--surface: #ffffff;
|
|
--hairline: #e6e6e6;
|
|
|
|
/* --- Text --- */
|
|
--ink: #000000;
|
|
--ink-secondary: #31302e;
|
|
--ink-muted: #615d59;
|
|
--ink-faint: #a39e98;
|
|
|
|
/* --- Structural accents --- */
|
|
--primary: #0075de; /* the ONLY action colour */
|
|
--primary-active: #005bab;
|
|
--on-primary: #ffffff;
|
|
--secondary: #213183; /* deep indigo — login band + greeting only */
|
|
|
|
/* --- Sticker palette (decorative only) --- */
|
|
--sticker-sky: #62aef0; /* chat */
|
|
--sticker-purple: #d6b6f6; /* image */
|
|
--sticker-pink: #ff64c8; /* video */
|
|
--sticker-orange: #dd5b00; /* audio */
|
|
--sticker-teal: #2a9d99; /* docs */
|
|
--sticker-green: #1aae39; /* status: online/saved */
|
|
--sticker-purple-deep: #391c57; /* illustration only */
|
|
--sticker-orange-deep: #793400; /* illustration only */
|
|
|
|
/* --- Typography (Inter, self-hosted via @font-face) --- */
|
|
--font-family: "Inter", -apple-system, system-ui, "Segoe UI",
|
|
Helvetica, Arial, sans-serif;
|
|
|
|
/* Font-family is baked into each token below: the CSS `font` shorthand
|
|
resets font-family to the UA default (serif) unless a family is written,
|
|
and it cannot carry letter-spacing — so weights/sizes ship inline and the
|
|
family is appended per token. */
|
|
--type-display-1: 700 48px/1.05 var(--font-family);
|
|
--type-heading-1: 700 32px/1.1 var(--font-family);
|
|
--type-heading-2: 700 22px/1.27 var(--font-family);
|
|
--type-title: 600 17px/1.4 var(--font-family);
|
|
--type-body-md: 400 15px/1.5 var(--font-family);
|
|
--type-body-sm: 400 14px/1.4 var(--font-family);
|
|
--type-button: 500 15px/1.4 var(--font-family);
|
|
--type-caption: 400 13px/1.43 var(--font-family);
|
|
--type-eyebrow: 600 12px/1.33 var(--font-family);
|
|
|
|
/* --- Layout (base unit 8px) --- */
|
|
--space-xxs: 4px;
|
|
--space-xs: 8px;
|
|
--space-sm: 12px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 28px;
|
|
--space-xxl: 32px;
|
|
|
|
--container-max: 1200px;
|
|
|
|
/* --- Elevation --- */
|
|
--shadow-level-1: rgba(0, 0, 0, 0.01) 0 0.175px 1px,
|
|
rgba(0, 0, 0, 0.02) 0 0.8px 3px,
|
|
rgba(0, 0, 0, 0.027) 0 2px 8px,
|
|
rgba(0, 0, 0, 0.04) 0 4px 18px;
|
|
--shadow-level-2: rgba(0, 0, 0, 0.0122) 0 0.175px 1px,
|
|
rgba(0, 0, 0, 0.024) 0 0.8px 3px,
|
|
rgba(0, 0, 0, 0.032) 0 2px 8px,
|
|
rgba(0, 0, 0, 0.047) 0 4px 18px,
|
|
rgba(0, 0, 0, 0.05) 0 23px 52px;
|
|
|
|
/* --- Shapes --- */
|
|
--rounded-xs: 4px;
|
|
--rounded-sm: 5px;
|
|
--rounded-md: 8px;
|
|
--rounded-lg: 12px;
|
|
--rounded-full: 9999px;
|
|
}
|
|
|
|
/* Numerals: enable OpenType lnum */
|
|
html { font-feature-settings: "lnum" 1; } |