/* ========================================================================== Kindle UI Kit — Design Tokens An e-ink design language: paper, ink, hairlines, no depth. Rule of thumb: if it would need a shadow to work, it isn't e-ink. ========================================================================== */ :root { /* --- Paper & ink ------------------------------------------------------ */ --paper: #FBFAF6; /* page background — warm, never pure white */ --paper-sunk: #F1EEE7; /* wells, inactive tabs, code blocks */ --paper-raised: #FFFFFF; /* cards, sheets — brightness, not shadow */ --paper-bezel: #E7E3DA; /* device frame */ --ink: #17171A; /* body copy, headings */ --ink-2: #3F3E3A; /* secondary copy */ --ink-3: #6E6B64; /* metadata, captions */ --ink-4: #A29E95; /* disabled, placeholders */ --rule: #DFDBD2; /* hairline dividers */ --rule-strong: #C3BEB3; /* input borders, active outlines */ /* --- 8-step grayscale ramp (the panel only really has 16 levels) ------ */ --g-0: #FFFFFF; --g-1: #F1EEE7; --g-2: #DFDBD2; --g-3: #C3BEB3; --g-4: #9B968C; --g-5: #6E6B64; --g-6: #40403C; --g-7: #17171A; /* --- Highlights (app-color) + the e-ink fallback ---------------------- */ --hl-yellow: #F5E6A8; --hl-blue: #C9DCEA; --hl-pink: #F0CFD6; --hl-orange: #F3D8B8; --hl-eink: #E4E0D6; /* what a highlight looks like on device */ /* --- Accent — used sparingly, this is a grayscale system -------------- */ --accent: #2C4A6E; /* link ink / selection */ --accent-sunk: #DCE4EC; /* --- Type ------------------------------------------------------------- */ --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-sans: "Amazon Ember", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --t-xs: 0.75rem; /* 12 — status bar, footnotes */ --t-sm: 0.8125rem; /* 13 — meta, labels */ --t-base: 0.9375rem; /* 15 — UI chrome */ --t-read: 1.1875rem; /* 19 — reading body */ --t-lg: 1.375rem; /* 22 — card titles */ --t-xl: 1.75rem; /* 28 — section heads */ --t-2xl: 2.375rem; /* 38 — chapter titles */ --t-3xl: 3.25rem; /* 52 — display */ --lh-tight: 1.15; --lh-snug: 1.35; --lh-read: 1.62; /* Kindle default line spacing */ --lh-loose: 1.85; --track-caps: 0.14em; /* letter-spacing for small caps labels */ --measure: 34rem; /* ~66 characters — the reading column */ /* --- Space (4px base) ------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; /* --- Shape ------------------------------------------------------------ */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-full: 999px; --hair: 1px; /* --- Motion — e-ink refreshes, it does not glide ---------------------- */ --ease-page: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 90ms; --dur-base: 160ms; /* --- Illustration ------------------------------------------------------ One ink, no grays. Tone is DENSITY, never lightness. */ --ill-w-hair: 1; /* detail, interior lines */ --ill-w-base: 1.5; /* default contour */ --ill-w-bold: 2.25; /* silhouette, ground line */ --ill-grid: 48; /* spot illustration viewBox */ /* Tonal fills — ordered dither, theme-aware, crisp at any size */ --tone-12: radial-gradient(circle at 50% 50%, var(--ink) 0 0.55px, transparent 0.6px) 0 0 / 5px 5px; --tone-25: radial-gradient(circle at 50% 50%, var(--ink) 0 0.7px, transparent 0.75px) 0 0 / 3px 3px; /* dots, not a checkerboard — a 2px checker moirés against the pixel grid */ --tone-50: radial-gradient(circle at 50% 50%, var(--ink) 0 0.72px, transparent 0.77px) 0 0 / 2px 2px; --tone-75: radial-gradient(circle at 50% 50%, var(--paper) 0 0.82px, transparent 0.87px) 0 0 / 3px 3px; --hatch: repeating-linear-gradient(45deg, var(--ink) 0 0.8px, transparent 0.8px 4px); --cross: repeating-linear-gradient(45deg, var(--ink) 0 0.8px, transparent 0.8px 4px), repeating-linear-gradient(-45deg, var(--ink) 0 0.8px, transparent 0.8px 4px); /* --- Texture ---------------------------------------------------------- */ --dither: repeating-conic-gradient(var(--g-3) 0% 25%, transparent 0% 50%) 0 0 / 3px 3px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* --- Dark mode: e-ink inverted, still warm, never OLED black ------------ Applied for the system preference unless light is explicitly pinned, and for an explicit data-theme="dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #101011; --paper-sunk: #191919; --paper-raised: #1D1D1E; --paper-bezel: #000000; --ink: #E9E5DC; --ink-2: #C2BEB5; --ink-3: #8B877F; --ink-4: #5A5751; --rule: #2B2B2C; --rule-strong: #45443F; --g-0: #101011; --g-1: #191919; --g-2: #2B2B2C; --g-3: #45443F; --g-4: #6B675F; --g-5: #8B877F; --g-6: #C2BEB5; --g-7: #E9E5DC; --hl-yellow: #4A4326; --hl-blue: #26384A; --hl-pink: #4A2E35; --hl-orange: #4A3A26; --hl-eink: #2F2F2D; --accent: #9FBEDC; --accent-sunk: #22303D; } } :root[data-theme="dark"] { --paper: #101011; --paper-sunk: #191919; --paper-raised: #1D1D1E; --paper-bezel: #000000; --ink: #E9E5DC; --ink-2: #C2BEB5; --ink-3: #8B877F; --ink-4: #5A5751; --rule: #2B2B2C; --rule-strong: #45443F; --g-0: #101011; --g-1: #191919; --g-2: #2B2B2C; --g-3: #45443F; --g-4: #6B675F; --g-5: #8B877F; --g-6: #C2BEB5; --g-7: #E9E5DC; --hl-yellow: #4A4326; --hl-blue: #26384A; --hl-pink: #4A2E35; --hl-orange: #4A3A26; --hl-eink: #2F2F2D; --accent: #9FBEDC; --accent-sunk: #22303D; }