/* ============================================================================ AERALYTE — colors_and_type.css · "MICRO" The Aeralyte design system. Monospace-only, monochrome, flat. ---------------------------------------------------------------------------- PRINCIPLE Everything is IBM Plex Mono. Warm paper, near-black ink. No shadows, no fills-for-decoration, no color-for-color's-sake. Emphasis comes from INVERSION (ink blocks) and WEIGHT, never hue. Hairline rules divide; whitespace carries the composition. Tiny uppercase labels with wide tracking are the recurring voice. One muted "signal" tone exists for the rare live/active moment — use it almost never. Derived from the M5 "Micro" landing direction. ---------------------------------------------------------------------------- No brand font was supplied — IBM Plex Mono is the system face (Google Fonts). ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ---- Monochrome — warm paper → near-black ink ------------------------- */ --paper: #F6F5F1; /* page */ --paper-2: #EEEBE3; /* sunken / alternating band / faint fill */ --card: #FCFBF8; /* barely-raised surface (flat, hairline only) */ --white: #FFFFFF; --ink: #1C1C1A; /* primary text & ink blocks */ --ink-2: #2A2A27; /* raised surface on dark */ --graphite: #45423D; /* secondary text */ --slate: #757067; /* tertiary text */ --mist: #9A958C; /* labels / footer / disabled / ticks */ --line: #DEDBD2; /* hairline on paper */ --line-strong: #C9C5B9; /* stronger divider */ --line-dark: rgba(255,255,255,0.18); /* hairline on ink */ --line-dark-2: rgba(255,255,255,0.28); /* ---- Signal — the one muted accent. Use almost never. ----------------- */ --signal: #356A5B; /* live / active dot, the rare highlighted link */ --signal-tint: #E4ECE8; /* ---- Semantic roles (monochrome; status reads via label, not hue) ----- */ --fg-1: var(--ink); --fg-2: var(--graphite); --fg-3: var(--slate); --fg-4: var(--mist); --fg-link: var(--ink); --bg-1: var(--paper); --bg-2: var(--paper-2); --bg-card: var(--card); --border: var(--line); --pass: var(--ink); /* PASS — shown ink-filled / bold label */ --warn: var(--slate); /* CHECK — shown outlined */ --block: var(--ink); /* BLOCKED — shown with a strike/heavier label */ --info: var(--signal); /* Evidence ladder — monochrome; differentiated by FILL not hue. 0 = outline only … 4 = solid ink. (label always carries the meaning) */ --ev-synthetic: var(--mist); --ev-bench: var(--slate); --ev-chamber: var(--graphite); --ev-field: var(--ink); --ev-validated: var(--ink); /* ---- Brand mark ------------------------------------------------------- */ --mark-air: var(--ink); --mark-signal: var(--graphite); /* two-tone but monochrome */ --mark-air-dark: var(--paper); --mark-signal-dark: var(--mist); /* ---- Back-compat aliases (pre-Micro files map to mono so nothing renders with undefined colors) --------------------------------- */ --accent: var(--ink); --accent-bright: var(--graphite); --accent-deep: #000; --accent-tint: var(--paper-2); --ion: var(--ink); --ion-bright: var(--graphite); --ion-deep: #000; --ion-tint: var(--paper-2); --chloro: var(--ink); --chloro-bright: var(--graphite); --chloro-tint: var(--paper-2); --copper: var(--slate);--copper-bright: var(--graphite); --copper-tint: var(--paper-2); --amber: var(--slate); --amber-bright: var(--graphite); --amber-tint: var(--paper-2); --sky: var(--slate); --sky-tint: var(--paper-2); --thresh: var(--slate);--thresh-bright: var(--graphite); --thresh-tint: var(--paper-2); --warm: var(--slate); --warm-bright: var(--graphite); --warm-tint: var(--paper-2); --danger: var(--ink); --danger-tint: var(--paper-2); --signal-red: var(--ink); --red-tint: var(--paper-2); --pass-bright: var(--ink); --pass-tint: var(--paper-2); --ring: 0 0 0 2px var(--ink); /* ---- Type — IBM Plex Mono, everywhere --------------------------------- */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-sans: var(--font-mono); /* aliased so token consumers stay mono */ --font-serif: var(--font-mono); /* ---- Type scale (px) — restrained; mono reads large -------------------- */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px; --text-3xl: 30px; --text-4xl: 38px; --text-5xl: 48px; --text-6xl: 60px; /* ---- Weights — only three exist --------------------------------------- */ --w-light: 400; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 600; /* ---- Line height & tracking — wide tracking is the brand's voice ------ */ --lh-tight: 1.18; --lh-snug: 1.32; --lh-normal: 1.5; --lh-relaxed: 1.7; --track-tight: 0; --track-normal: 0.01em; --track-label: 0.2em; --track-caps: 0.24em; --track-brand: 0.4em; /* ---- Spacing (4px base; whitespace is generous) ----------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Radius — crisp. Effectively square. ------------------------------ */ --r-none: 0; --r-xs: 1px; --r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 4px; --r-pill: 999px; /* ---- Elevation — there is none. Hairline borders only. ---------------- */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; /* ---- Motion — minimal; quick crossfades only -------------------------- */ --ease-out: cubic-bezier(0.2,0.6,0.2,1); --ease-in-out: cubic-bezier(0.4,0,0.2,1); --dur-fast: 100ms; --dur: 160ms; --dur-slow: 280ms; --maxw: 1080px; } /* ============================================================================ SEMANTIC TYPE — all IBM Plex Mono. Apply as classes or copy onto elements. ============================================================================ */ .t-brand { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--w-medium); letter-spacing: var(--track-brand); text-transform: uppercase; color: var(--fg-1); } .t-eyebrow, .t-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--w-regular); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-3); } .t-meta { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--w-regular); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-4); } .t-display { font-family: var(--font-mono); font-size: var(--text-4xl); font-weight: var(--w-regular); line-height: var(--lh-snug); letter-spacing: var(--track-normal); color: var(--fg-1); text-wrap: balance; } .t-h1 { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--w-medium); line-height: var(--lh-snug); color: var(--fg-1); } .t-h2 { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--w-medium); line-height: var(--lh-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--w-medium); line-height: var(--lh-snug); color: var(--fg-1); } .t-h4 { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--w-medium); line-height: var(--lh-normal); color: var(--fg-1); } .t-h5 { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--w-medium); line-height: var(--lh-normal); color: var(--fg-1); } .t-statement { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--w-regular); line-height: var(--lh-normal); letter-spacing: var(--track-normal); color: var(--fg-1); text-wrap: balance; } .t-body { font-family: var(--font-mono); font-size: var(--text-base); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg-2); } .t-body-sm { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-2); } .t-lead { font-family: var(--font-mono); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); } .t-mono, .t-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-1); } .t-caption { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-3); line-height: var(--lh-normal); } code, .t-code { font-family: var(--font-mono); font-size: 0.95em; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.06em 0.34em; color: var(--ink); } /* ============================================================================ MICRO PRIMITIVES — the recurring devices. ============================================================================ */ .rule { width: 100%; height: 1px; background: var(--line); border: 0; } .rule-tick { width: 40px; height: 1px; background: var(--ink); border: 0; } /* the M5 centered tick */ .hairbox { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); }