/* ============================================================ Quill UI — Design Tokens Extracted from a playful, illustrative productivity teaser. ============================================================ Two modes: [data-theme="light"] — Paper (warm white, ink, dotted grid) — DEFAULT [data-theme="dark"] — Warm dark (hue-matched charcoal, not neutral grey) The light "paper" theme is the signature, faithful to the source. The dark theme is a generated, hue-preserving companion. Colour values are computed-style + pixel-sampled ground truth. Sticker pastels are sampled directly from the source artwork. ============================================================ */ /* ── Light mode (paper — the signature) ──────────────────── */ [data-theme="light"] { /* Surfaces */ --color-bg-page: #FFFFFF; /* body background */ --color-bg-subtle: #FEFEFB; /* faint warm tint behind the grid */ --color-bg-surface: #FFFCF7; /* warm paper card (measured: View button) */ --color-bg-elevated: #FCF8EF; /* table header / raised paper (measured) */ --color-bg-overlay: rgba(23, 23, 23, 0.32); /* Text */ --color-text-primary: #171717; /* ink (--foreground) */ --color-text-strong: #333333; /* table/heading ink (measured) */ --color-text-secondary: #494949; /* (--primary-text-color) */ --color-text-muted: #8A8A8A; /* source #A8A8A8 nudged darker for AA (3:1+ on paper) */ --color-text-disabled: #CFCFCF; --color-text-on-accent: #FFFFFF; /* Brand accent — the mono annotation blue (measured #1964B0) */ --color-brand-accent: #1964B0; --color-brand-accent-hover: #14528F; /* Borders */ --color-border: #E0E0E0; /* hairline (measured everywhere) */ --color-border-strong: #CFCAC0; /* Focus */ --color-focus-ring: #1964B0; /* Actions */ --color-action-bg: #171717; --color-action-bg-hover: #000000; --color-action-text: #FFFFFF; /* Status */ --color-success: #20967F; --color-warning: #FECD54; --color-error: #912E1E; --color-info: #0049AC; /* Dotted grid */ --grid-dot: rgba(23, 23, 23, 0.10); --grid-size: 24px; } /* ── Dark mode (warm, hue-preserving — generated) ────────── */ [data-theme="dark"] { /* Surfaces — warm charcoal, hue kept (not neutral grey) */ --color-bg-page: #16130F; --color-bg-subtle: #1B1712; --color-bg-surface: #221E18; --color-bg-elevated: #2A251E; --color-bg-overlay: rgba(0, 0, 0, 0.55); /* Text */ --color-text-primary: #F5F1E8; --color-text-strong: #FFFFFF; --color-text-secondary: #C8C1B2; --color-text-muted: #8A8377; --color-text-disabled: #5A554C; --color-text-on-accent: #FFFFFF; /* Brand accent — lightened blue for contrast on dark */ --color-brand-accent: #6FA8E0; --color-brand-accent-hover: #8FBEEC; /* Borders */ --color-border: #34302A; --color-border-strong: #4A443B; /* Focus */ --color-focus-ring: #6FA8E0; /* Actions */ --color-action-bg: #F5F1E8; --color-action-bg-hover: #FFFFFF; --color-action-text: #16130F; /* Status */ --color-success: #4FBFA3; --color-warning: #FED77A; --color-error: #E07A63; --color-info: #5E9BE8; /* Dotted grid */ --grid-dot: rgba(245, 241, 232, 0.10); --grid-size: 24px; } /* ── Sticker palette (pixel-sampled from source artwork) ───── Each sticker has a fill and a darker "ink" for text on it. These are mode-independent — the paper stickers keep their hue. */ :root { /* inks solved to ≥4.6:1 on their fill (small sticker titles need AA 4.5) */ --sticker-teal: #20967F; --sticker-teal-ink: #07211C; --sticker-yellow: #FECD54; --sticker-yellow-ink: #6B5623; --sticker-butter: #D3C37E; --sticker-butter-ink: #544E32; --sticker-blue: #0049AC; --sticker-blue-ink: #FFFFFF; --sticker-ocean: #267CA8; --sticker-ocean-ink: #FFFFFF; --sticker-pink: #EBBED0; --sticker-pink-ink: #604E55; --sticker-terracotta: #C27E5D; --sticker-terracotta-ink: #342219; --sticker-lavender: #BAB4DA; --sticker-lavender-ink: #494655; --sticker-sage: #8AA3B7; --sticker-sage-ink: #2F373E; --sticker-brick: #912E1E; --sticker-brick-ink: #FFFFFF; --sticker-forest: #3D5849; --sticker-forest-ink: #FFFFFF; --sticker-cream: #E9E0AD; --sticker-cream-ink: #64604A; --sticker-paper: #D7D4C6; --sticker-paper-ink: #5A5953; --sticker-grey: #E6E6E6; --sticker-grey-ink: #656565; } /* ── Typography ─────────────────────────────────────────── */ :root { /* Display/UI = Gerstner Programm (proprietary; Inter is the practical fallback the source itself ships). Body = Inter. Mono = IBM Plex Mono. */ --font-display: 'Gerstner Programm', 'Neue Haas Grotesk Display', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --size-display: 32px; /* headline (measured 31.97px) */ --lh-display: 38px; /* measured 38.36px ≈ 1.2 */ --size-xl: 24px; --lh-xl: 30px; --size-lg: 18px; /* --text-lg 1.125rem */ --lh-lg: 26px; --size-base: 16px; --lh-base: 24px; --size-md: 14px; --lh-md: 20px; --size-sm: 13px; /* table / tab / UI label (measured) */ --lh-sm: 20px; /* measured 20px */ --size-xs: 12px; /* mono annotation (measured 11.96px) */ --lh-xs: 16px; /* measured 16px */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* The signature tight tracking: -0.39px@13, -0.48px@16 ≈ -0.03em */ --tracking-tight: -0.03em; --tracking-normal: 0em; --tracking-wide: 0.025em; } /* ── Spacing (4px base — Tailwind --spacing: .25rem) ─────── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; /* table section gap (measured) */ --space-6: 24px; --space-8: 32px; --space-9: 36px; /* notification group gap (measured) */ --space-10: 40px; /* table row-group offset (measured) */ --space-12: 48px; --space-16: 64px; } /* ── Border radius ──────────────────────────────────────── */ :root { --radius-none: 0px; /* table cells are square (measured) */ --radius-sm: 4px; /* --radius-sm .25rem */ --radius-md: 6px; /* --radius-md .375rem */ --radius-lg: 8px; /* --radius-lg .5rem */ --radius-xl: 10px; /* measured: View button */ --radius-2xl: 16px; /* --radius-2xl 1rem */ --radius-3xl: 24px; /* --radius-3xl 1.5rem */ --radius-pill: 100px; /* measured: pill CTA */ } /* ── Elevation — soft paper shadows (sticker drop shadows) ── */ :root { --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.04); --shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.05), 0 1px 1px rgba(23, 23, 23, 0.03); --shadow-md: 0 2px 4px rgba(23, 23, 23, 0.05), 0 6px 14px rgba(23, 23, 23, 0.06); --shadow-lg: 0 4px 8px rgba(23, 23, 23, 0.05), 0 12px 28px rgba(23, 23, 23, 0.10); --shadow-paper: 0 1px 1px rgba(23, 23, 23, 0.04), 0 4px 10px rgba(23, 23, 23, 0.06), 0 14px 30px rgba(23, 23, 23, 0.08); } /* ── Motion (from --default-transition + --ease-* tokens) ── */ :root { --duration-fast: 100ms; --duration-normal: 150ms; /* --default-transition-duration .15s */ --duration-slow: 300ms; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* --ease-in-out */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-paper: transform 150ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 150ms ease; } /* ── Keyframes ──────────────────────────────────────────── */ @keyframes quill-float { 0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-6px) rotate(var(--tilt, 0deg)); } } @keyframes quill-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes quill-spin { to { transform: rotate(360deg); } } @keyframes quill-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }