/* ============================================================= ReadMe Design System — tokens Derived from the actual app screenshots + icon. Brand is a vivid saturated yellow (#FED605), bookmark-book logomark in black, marketing pages use scattered yellow/white squares as a decorative motif. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap'); :root { /* ----- Brand ---------------------------------------------- */ --brand: #FED605; /* PRIMARY YELLOW — sampled from splash */ --brand-ink: #E5C000; /* pressed / darker */ --brand-soft: #FFE96B; /* paler yellow, decorative squares */ --brand-wash: #FFF7C2; /* tint behind pills, chips */ --brand-glow: #FFEB7A; /* very pale, bg washes */ --ink-black: #0A0A0A; /* logo + headlines */ --bookmark: #FFFFFF; /* bookmark slip in logo */ /* accents used in app */ --orange: #FF7A1A; /* "Serializing" badge, hot tags */ --orange-wash: #FFE9D6; --rose: #FF3E5F; /* "Sign in for rewards" tag */ --rose-wash: #FFE1E6; --success: #22C55E; --info: #3B82F6; /* ----- Neutrals (cool light, matches app) ----------------- */ --ink-900: #0A0A0A; /* headlines */ --ink-800: #1A1A1A; --ink-700: #2E2E2E; /* body */ --ink-600: #4A4A4A; --ink-500: #737373; /* secondary */ --ink-400: #A3A3A3; /* tertiary, placeholder */ --ink-300: #D4D4D4; --ink-200: #E5E5E5; --ink-100: #F0F0F0; --ink-50: #F7F7F7; --line-soft: #EFEFEF; --line-hard: #DCDCDC; /* ----- Surface -------------------------------------------- */ --bg-page: #FFFFFF; --bg-muted: #F5F5F5; /* card well, search field */ --bg-hover: #F0F0F0; --bg-pressed: #E5E5E5; --reader-cream: #F5EFE2; --reader-sepia: #E7D9B8; --reader-night: #1A1714; --reader-night-ink:#C9C3B8; /* ----- Semantic ------------------------------------------- */ --fg-1: var(--ink-900); --fg-2: var(--ink-700); --fg-3: var(--ink-500); --fg-4: var(--ink-400); --fg-on-brand: var(--ink-black); /* yellow is light → use black */ --fg-on-dark: #FFFFFF; --danger: #EF4444; /* ----- Type families -------------------------------------- */ --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ----- Type scale --------------------------------------- */ --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-56: 56px; /* marketing display (Discover / Update Push) */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-reader: 1.75; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* ----- Spacing (8pt grid, 4pt half-step) ----------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 80px; /* ----- Radius -------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* cards, search bar */ --radius-xl: 20px; /* big cards, hero banners */ --radius-2xl: 28px; /* app icon tile */ --radius-tab: 20px 20px 0 0; /* folder-style tabs at top */ --radius-full: 999px; /* ----- Shadow -------------------------------------------- */ --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04), 0 4px 16px rgba(20, 20, 20, 0.06); --shadow-elevated: 0 2px 4px rgba(20, 20, 20, 0.06), 0 12px 28px rgba(20, 20, 20, 0.10); --shadow-book: 0 2px 6px rgba(20, 20, 20, 0.12), 0 8px 20px rgba(20, 20, 20, 0.10); --shadow-sheet: 0 -4px 24px rgba(20, 20, 20, 0.12); --shadow-focus: 0 0 0 3px rgba(254, 214, 5, 0.55); /* ----- Motion -------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-micro: 150ms; --dur-base: 240ms; --dur-celebrate: 360ms; } /* ============================================================= Semantic element defaults ============================================================= */ body { font-family: var(--font-sans); font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--fg-2); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-56); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--brand); /* marketing display uses yellow on white */ } .display-ink { color: var(--fg-1); } .h1, h1 { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-32); line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: -0.01em; } .h2, h2 { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-24); line-height: var(--lh-tight); color: var(--fg-1); } .h3, h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-1); } .h4, h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--fg-1); } .p, p { font-size: var(--fs-15); line-height: var(--lh-normal); color: var(--fg-2); } .small { font-size: var(--fs-13); color: var(--fg-3); } .caption { font-size: var(--fs-12); color: var(--fg-3); letter-spacing: 0.01em; } .eyebrow { font-size: var(--fs-11); font-weight: var(--fw-extrabold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); } .reader-body { font-family: var(--font-serif); font-size: var(--fs-18); line-height: var(--lh-reader); color: var(--ink-800); } .mono { font-family: var(--font-mono); font-size: var(--fs-13); }