/* ============================================================================= Dark Networks Design System - Compiled tokens + base Plain CSS. No build step, no JS runtime. ASCII only. Ink on paper, editorial register. Dark theme is the default; add data-theme="light" to or any subtree to opt into the light theme. Reference from a page with: ========================================================================= */ /* --- 0 - Brand fonts - local variable @font-face -------------------------- Mona Sans is shipped locally from /shared/ds/fonts. Inter and JetBrains Mono load from Google Fonts in the page head. */ @font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("/shared/ds/fonts/MonaSans-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("/shared/ds/fonts/MonaSans-VariableFont_wdth_wght.ttf") format("truetype"); } @font-face { font-family: "Mona Sans"; font-style: italic; font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; src: url("/shared/ds/fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("/shared/ds/fonts/MonaSans-Italic-VariableFont_wdth_wght.ttf") format("truetype"); } /* --- 1 - Primitive color scales ------------------------------------------- */ :root { /* Ink - the brand. Cool-neutral black ramped down. */ --ink-1000: #000000; --ink-950: #06070A; --ink-900: #0B0D12; --ink-800: #14171E; --ink-700: #1F232C; --ink-600: #2B303B; --ink-500: #3D434F; --ink-400: #5A6170; --ink-300: #828896; --ink-200: #B0B5BF; --ink-100: #D6D9DF; --ink-50: #ECEDF1; --ink-25: #F5F6F8; /* Paper - warm off-whites for editorial body surfaces. */ --paper-100: #FFFFFF; --paper-200: #FAFAF7; --paper-300: #F2F0E9; --paper-400: #E6E3DA; /* Editorial slate - precise, restrained blue. Use sparingly. */ --slate-900: #0D1B33; --slate-700: #16335E; --slate-600: #1A4FBE; --slate-500: #2F66D4; --slate-100: #E4EBFB; /* Signal - semantic states. Muted editorial palette, never neon. */ --signal-positive-700: #15633A; --signal-positive-600: #1E7A47; --signal-positive-100: #DDEEE2; --signal-warning-700: #8A4500; --signal-warning-600: #B25502; --signal-warning-100: #F4E4CC; --signal-negative-700: #8A1B12; --signal-negative-600: #B42318; --signal-negative-100: #F7DDD9; --signal-info-700: #16335E; --signal-info-600: #1A4FBE; --signal-info-100: #E4EBFB; } /* --- 2 - Semantic color tokens - light mode (opt-in) ---------------------- */ :root[data-theme="light"] { --color-brand: var(--ink-950); --color-brand-on: var(--paper-100); --color-primary: var(--ink-950); --color-primary-hover: var(--ink-1000); --color-primary-pressed: var(--ink-1000); --color-on-primary: var(--paper-100); --color-secondary: var(--ink-700); --color-secondary-hover: var(--ink-800); --color-on-secondary: var(--paper-100); --color-accent: var(--slate-600); --color-accent-hover: var(--slate-500); --color-surface: var(--paper-200); --color-surface-elevated: var(--paper-100); --color-surface-sunken: var(--paper-300); --color-surface-inverse: var(--ink-950); --color-text-primary: var(--ink-950); --color-text-secondary: var(--ink-500); --color-text-muted: var(--ink-400); --color-text-inverse: var(--paper-100); --color-text-link: var(--slate-600); --color-border-subtle: var(--ink-50); --color-border-default: var(--ink-100); --color-border-strong: var(--ink-300); --color-border-inverse: var(--ink-700); --color-focus-ring: var(--slate-600); --color-signal-positive: var(--signal-positive-600); --color-signal-warning: var(--signal-warning-600); --color-signal-negative: var(--signal-negative-600); --color-signal-info: var(--slate-600); --color-signal-positive-bg: var(--signal-positive-100); --color-signal-warning-bg: var(--signal-warning-100); --color-signal-negative-bg: var(--signal-negative-100); --color-signal-info-bg: var(--signal-info-100); color-scheme: light; } /* --- 3 - Semantic color tokens - dark mode (default) ---------------------- */ :root, :root[data-theme="dark"] { --color-brand: var(--paper-100); --color-brand-on: var(--ink-950); --color-primary: var(--paper-100); --color-primary-hover: var(--ink-25); --color-primary-pressed: var(--ink-50); --color-on-primary: var(--ink-950); --color-secondary: var(--ink-100); --color-secondary-hover: var(--ink-50); --color-on-secondary: var(--ink-950); --color-accent: #6FA4FF; --color-accent-hover: #94BBFF; --color-surface: var(--ink-950); --color-surface-elevated: var(--ink-900); --color-surface-sunken: #030406; --color-surface-inverse: var(--paper-200); --color-text-primary: var(--paper-100); --color-text-secondary: var(--ink-200); --color-text-muted: var(--ink-300); --color-text-inverse: var(--ink-950); --color-text-link: #6FA4FF; --color-border-subtle: var(--ink-800); --color-border-default: var(--ink-700); --color-border-strong: var(--ink-500); --color-border-inverse: var(--ink-100); --color-focus-ring: #6FA4FF; --color-signal-positive: #4ED084; --color-signal-warning: #F0A056; --color-signal-negative: #F47065; --color-signal-info: #6FA4FF; --color-signal-positive-bg: rgba(78,208,132,0.08); --color-signal-warning-bg: rgba(240,160,86,0.08); --color-signal-negative-bg: rgba(244,112,101,0.08); --color-signal-info-bg: rgba(111,164,255,0.08); color-scheme: dark; } /* --- 4 - Typography - families -------------------------------------------- */ :root { --font-display: "Mona Sans", "InterVariable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-sans: "InterVariable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --ff-default: "kern", "calt", "liga"; --ff-data: "tnum", "cv11", "cv03"; --ff-display: "ss01", "cv01", "calt"; } /* --- 5 - Typography - role scale ------------------------------------------ */ :root { --type-display-size: 44px; --type-h1-size: 36px; --type-h2-size: 30px; --type-h3-size: 24px; --type-h4-size: 20px; --type-h5-size: 18px; --type-h6-size: 16px; --type-lead-size: 18px; --type-body-size: 16px; --type-body-sm-size: 14px; --type-caption-size: 12px; --type-ui-size: 14px; --type-ui-sm-size: 12px; --type-code-size: 14px; --type-eyebrow-size: 12px; --lh-tight: 1.08; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.6; --tr-display: -0.022em; --tr-h: -0.015em; --tr-body: -0.005em; --tr-eyebrow: 0.12em; } @media (min-width: 768px) { :root { --type-display-size: 64px; --type-h1-size: 52px; --type-h2-size: 40px; --type-h3-size: 28px; --type-h4-size: 22px; --type-h5-size: 18px; --type-h6-size: 16px; --type-lead-size: 20px; } } @media (min-width: 1280px) { :root { --type-display-size: 84px; --type-h1-size: 64px; --type-h2-size: 48px; --type-h3-size: 32px; --type-h4-size: 24px; --type-lead-size: 22px; } } /* --- 6 - Typography - semantic classes ------------------------------------ */ .t-display { font-family: var(--font-display); font-weight: 500; font-size: var(--type-display-size); line-height: var(--lh-tight); letter-spacing: var(--tr-display); color: var(--color-text-primary); text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--type-h1-size); line-height: var(--lh-tight); letter-spacing: var(--tr-h); color: var(--color-text-primary); text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--type-h2-size); line-height: var(--lh-snug); letter-spacing: var(--tr-h); color: var(--color-text-primary); text-wrap: balance; } .t-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--type-h3-size); line-height: var(--lh-snug); letter-spacing: var(--tr-h); color: var(--color-text-primary); } .t-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--type-h4-size); line-height: var(--lh-snug); color: var(--color-text-primary); } .t-h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--type-h5-size); line-height: var(--lh-snug); color: var(--color-text-primary); } .t-h6 { font-family: var(--font-sans); font-weight: 600; font-size: var(--type-h6-size); line-height: var(--lh-snug); color: var(--color-text-primary); } .t-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-lead-size); line-height: var(--lh-normal); color: var(--color-text-secondary); text-wrap: pretty; } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-body-size); line-height: var(--lh-relaxed); color: var(--color-text-primary); text-wrap: pretty; } .t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-body-sm-size); line-height: var(--lh-normal); color: var(--color-text-secondary); } .t-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-caption-size); line-height: var(--lh-normal); color: var(--color-text-muted); } .t-ui-label { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-ui-size); line-height: 1.2; color: var(--color-text-primary); } .t-ui-label-sm { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-ui-sm-size); line-height: 1.2; color: var(--color-text-secondary); } .t-code { font-family: var(--font-mono); font-weight: 400; font-size: var(--type-code-size); line-height: 1.5; color: var(--color-text-primary); font-feature-settings: "ss01"; } /* Eyebrow - the // section // pattern used across darknt.com */ .t-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--type-eyebrow-size); line-height: 1.2; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-muted); } .t-eyebrow::before { content: "// "; opacity: 0.55; } .t-eyebrow::after { content: " //"; opacity: 0.55; } /* --- 7 - Spacing - 8pt grid (4pt for fine adjustments) -------------------- */ :root { --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; --space-6xl: 192px; --section-y-sm: var(--space-3xl); --section-y-md: var(--space-4xl); --section-y-lg: var(--space-5xl); --container-xs: 480px; --container-sm: 680px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1440px; --container-prose: 68ch; --gutter-mobile: 16px; --gutter-tablet: 32px; --gutter-desktop: 48px; } /* --- 8 - Layout - radii / shadows / borders ------------------------------- */ :root { --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; --border-hairline: 1px solid var(--color-border-subtle); --border-default: 1px solid var(--color-border-default); --border-strong: 1px solid var(--color-border-strong); --shadow-xs: 0 1px 2px rgba(11,13,18,0.04); --shadow-sm: 0 1px 2px rgba(11,13,18,0.06), 0 1px 3px rgba(11,13,18,0.04); --shadow-md: 0 4px 8px -2px rgba(11,13,18,0.06), 0 2px 4px -2px rgba(11,13,18,0.04); --shadow-lg: 0 12px 20px -6px rgba(11,13,18,0.08), 0 4px 8px -4px rgba(11,13,18,0.04); --shadow-xl: 0 24px 40px -12px rgba(11,13,18,0.12), 0 8px 12px -6px rgba(11,13,18,0.04); --shadow-inner: inset 0 1px 2px rgba(11,13,18,0.06); --shadow-focus: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus-ring); } /* --- 9 - Motion - durations + easing -------------------------------------- */ :root { --duration-instant: 0ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.50, 0, 0.75, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-standard: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- 10 - Base element styles --------------------------------------------- */ .ds-base { background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Selection */ ::selection { background: var(--ink-950); color: var(--paper-100); } /* Focus - never remove the ring without replacing it */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }