/* ============================================================================ ATLAS DESIGN SYSTEM A warm, modern, light "house style" for standalone HTML artifacts. Link this file and set to inherit the full system. Two layers, both in this file: 1. Foundations — design tokens (color / type / spacing / radius / shadow / motion) + base element styling + type utilities. 2. Components — cosmetic, reusable building blocks (buttons, badges, inputs, cards, code/diff, callouts, tables, timeline, tabs). Fonts: Geist + Geist Mono + Montserrat (Google Fonts). Swap freely via --font-sans / --font-serif / --font-mono. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&family=Montserrat:ital,wght@0,300..700;1,300..600&display=swap'); :root { /* ---- Brand & raw palette ------------------------------------------------- A warm paper palette with a single muted denim-blue accent; everything else is a soft warm neutral. Backgrounds are ivory, never pure white-on-black. */ --blue: #3F5E8C; /* primary accent (denim) */ --blue-strong: #314A70; /* accent hover / press */ --blue-soft: #DEE4EF; /* accent tint surface */ --blue-faint: #EEF1F6; /* accent wash */ --slate: #141413; /* near-black ink */ --ivory: #FAF9F5; /* default page background */ --oat: #E3DACC; /* warm panel */ /* Neutral ramp (warm grays) */ --white: #FFFFFF; --gray-50: #F6F4EE; --gray-100: #F0EEE6; --gray-200: #E6E2D7; --gray-300: #D1CFC5; --gray-400: #ABA99F; --gray-500: #87867F; --gray-600: #605F58; --gray-700: #3D3D3A; /* Semantic hues (muted, never neon) */ --success: #788C5D; --success-soft: #E7ECDD; --warning: #C78E3F; --warning-soft: #F4E8D3; --danger: #B04A4A; --danger-soft: #F1DCDC; --info: #5C7CA3; --info-soft: #DEE5EE; /* Highlight / marker emphasis (warm yellow) */ --highlight: #F7DB6A; --highlight-soft: #FBEDB4; /* ---- Semantic surface & text tokens ------------------------------------ */ --bg: var(--ivory); --surface: var(--white); --surface-sunken:var(--gray-100); --panel: var(--oat); --border: #E7E3D8; /* soft hairline */ --border-strong: var(--gray-300); --fg-1: #1A1915; /* headings / primary ink (softened slate) */ --fg-2: #3D3D3A; /* body copy */ --fg-3: #6E6D65; /* muted / secondary */ --fg-4: #97968E; /* faint / captions */ --accent: var(--blue); --accent-fg: #FFFFFF; --link: #3A547D; /* Focus ring */ --ring: 0 0 0 3px rgba(63, 94, 140, 0.32); /* ---- Typography --------------------------------------------------------- */ --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Montserrat', ui-sans-serif, system-ui, 'Segoe UI', sans-serif; /* display & headings */ --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; --text-display: 3rem; /* 48 */ --text-h1: 2rem; /* 32 */ --text-h2: 1.5rem; /* 24 */ --text-h3: 1.25rem; /* 20 */ --text-body: 1rem; /* 16 */ --text-small: 0.875rem; /* 14 */ --text-caption: 0.75rem; /* 12 */ --lh-tight: 1.12; --lh-snug: 1.32; --lh-normal: 1.65; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.14em; /* overlines / captions */ /* ---- Spacing (8pt-based) ------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- Radius ------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ---- Elevation (warm-tinted, soft) -------------------------------------- */ --shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.06); --shadow-md: 0 4px 10px rgba(20, 20, 19, 0.08), 0 1px 2px rgba(20, 20, 19, 0.05); --shadow-lg: 0 12px 28px rgba(20, 20, 19, 0.12), 0 2px 6px rgba(20, 20, 19, 0.06); /* ---- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; } /* ============================================================================ Base element styling — opt in with class="atlas" on (or any wrapper). ============================================================================ */ .atlas { background: var(--bg); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-normal); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .atlas h1, .atlas h2, .atlas h3, .atlas h4 { color: var(--fg-1); font-family: var(--font-serif); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: -0.01em; margin: 0 0 var(--sp-4); text-wrap: balance; } .atlas h1 { font-size: var(--text-h1); letter-spacing: -0.015em; } .atlas h2 { font-size: var(--text-h2); letter-spacing: var(--tracking-normal); } .atlas h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-normal); } .atlas p { margin: 0 0 var(--sp-5); max-width: 66ch; text-wrap: pretty; } .atlas a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent); transition: border-color var(--dur) var(--ease); } .atlas a:hover { border-bottom-color: var(--link); } .atlas strong { font-weight: var(--fw-semibold); color: var(--fg-1); } .atlas small { font-size: var(--text-small); color: var(--fg-3); } .atlas hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } .atlas code, .atlas kbd { font-family: var(--font-mono); font-size: 0.9em; } .atlas ::selection { background: var(--blue-soft); } /* ============================================================================ Type utilities — use when you want the scale without semantic elements. ============================================================================ */ .t-display { font-family: var(--font-serif); font-size: var(--text-display); font-weight: var(--fw-light); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--fg-1); } .t-h1 { font-family: var(--font-serif); font-size: var(--text-h1); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--fg-1); } .t-h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg-1); } .t-serif { font-family: var(--font-serif); } .t-serif-i { font-family: var(--font-serif); font-style: italic; } .t-body { font-size: var(--text-body); line-height: var(--lh-normal); color: var(--fg-2); } .t-small { font-size: var(--text-small); line-height: var(--lh-snug); color: var(--fg-3); } .t-caption { font-size: var(--text-caption); line-height: var(--lh-snug); color: var(--fg-4); } .t-overline{ font-size: var(--text-caption); font-weight: var(--fw-regular); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-size: var(--text-small); color: var(--fg-2); } .t-hl, .atlas mark { background: linear-gradient(transparent 14%, var(--highlight) 14%, var(--highlight) 84%, transparent 84%); padding: 0 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; color: var(--fg-1); } .t-mute { color: var(--fg-3); } /* tabular numerals helpers */ .num, td.num, th.num, .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .t-center, td.center, th.center { text-align: center; } /* ============================================================================ COMPONENTS — cosmetic, reusable building blocks. ============================================================================ */ /* ---- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: var(--text-small); font-weight: var(--fw-medium); line-height: 1; padding: 11px 22px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .btn:active { transform: translateY(0.5px) scale(0.99); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn .ico { width: 16px; height: 16px; } .btn--primary { background: var(--blue); color: var(--accent-fg); } .btn--primary:hover { background: var(--blue-strong); } .btn--secondary { background: var(--surface); color: var(--fg-1); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn--secondary:hover { background: var(--gray-50); border-color: var(--gray-400); } .btn--ghost { background: transparent; color: var(--fg-2); } .btn--ghost:hover { background: var(--gray-100); } .btn--danger { background: var(--danger); color: #fff; } .btn--danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); } .btn--sm { padding: 7px 14px; font-size: var(--text-caption); } .btn--lg { padding: 14px 26px; font-size: var(--text-body); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* ---- Badges & pills ------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--fw-medium); line-height: 1; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; background: var(--gray-100); color: var(--fg-2); border: 1px solid var(--border); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--neutral { background: var(--gray-100); color: var(--fg-3); } .badge--accent { background: var(--blue-soft); color: var(--blue-strong); border-color: transparent; } .badge--success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 80%, #000); border-color: transparent; } .badge--warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 78%, #000); border-color: transparent; } .badge--danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 82%, #000); border-color: transparent; } .badge--info { background: var(--info-soft); color: color-mix(in srgb, var(--info) 80%, #000); border-color: transparent; } /* ---- Inputs --------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: var(--text-small); font-weight: var(--fw-medium); color: var(--fg-2); } .input, .textarea, .select { font-family: var(--font-sans); font-size: var(--text-small); color: var(--fg-1); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 12px; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--fg-4); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); } .hint { font-size: var(--text-caption); color: var(--fg-3); } /* Checkbox / radio */ .check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-small); color: var(--fg-2); cursor: pointer; } .check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: grid; place-content: center; cursor: pointer; transition: all var(--dur) var(--ease); } .check input:checked { background: var(--blue); border-color: var(--blue); } .check input:checked::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg) translateY(-1px); } .check input[type="radio"] { border-radius: 50%; } .check input[type="radio"]:checked::after { width: 8px; height: 8px; border: none; border-radius: 50%; background: #fff; transform: none; } /* Toggle */ .toggle { position: relative; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--gray-300); cursor: pointer; transition: background var(--dur) var(--ease); flex: none; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); } .toggle[aria-checked="true"] { background: var(--blue); } .toggle[aria-checked="true"]::after { transform: translateX(16px); } /* ---- Cards ---------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--sp-5); } .card--flat { box-shadow: none; } .card--raised { box-shadow: var(--shadow-md); } .card--panel { background: var(--panel); border-color: transparent; } /* ---- Code & diff ---------------------------------------------------------- */ .code { font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.6; background: #FBFAF6; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg-1); padding: var(--sp-4); overflow: auto; } .code .tok-key { color: var(--info); } .code .tok-str { color: var(--success); } .code .tok-com { color: var(--fg-4); font-style: italic; } .code .tok-fn { color: var(--blue-strong); } .code .tok-num { color: var(--warning); } .diff { font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.7; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .diff .ln { display: grid; grid-template-columns: 44px 1fr; } .diff .gut { text-align: right; padding: 0 10px; color: var(--fg-4); user-select: none; } .diff .txt { padding: 0 12px; white-space: pre; } .diff .add { background: var(--success-soft); } .diff .add .gut { color: color-mix(in srgb, var(--success) 70%, #000); } .diff .del { background: var(--danger-soft); } .diff .del .gut { color: color-mix(in srgb, var(--danger) 70%, #000); } /* ---- Callouts / admonitions ----------------------------------------------- */ .callout { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--gray-50); border: 1px solid var(--border); } .callout .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; } .callout__body { font-size: var(--text-small); color: var(--fg-2); } .callout__body strong { display: block; margin-bottom: 2px; color: var(--fg-1); } .callout--info { background: var(--info-soft); border-color: transparent; } .callout--success { background: var(--success-soft); border-color: transparent; } .callout--warning { background: var(--warning-soft); border-color: transparent; } .callout--danger { background: var(--danger-soft); border-color: transparent; } /* ---- Tables --------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-small); } .table th { text-align: left; font-weight: var(--fw-medium); color: var(--fg-3); padding: 10px 14px; border-bottom: 1px solid var(--border-strong); font-size: var(--text-caption); letter-spacing: 0.02em; text-transform: uppercase; } .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--fg-2); } .table tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--dur) var(--ease); } .table tbody tr:hover { background: var(--gray-50); } /* ---- Timeline ------------------------------------------------------------- */ .timeline { display: flex; flex-direction: column; gap: var(--sp-4); position: relative; padding-left: var(--sp-5); } .timeline::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--border-strong); } .timeline__item { position: relative; } .timeline__item::before { content: ""; position: absolute; left: calc(-1 * var(--sp-5) + 0px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--blue); } .timeline__item--done::before { background: var(--blue); } .timeline__t { font-size: var(--text-caption); color: var(--fg-4); } .timeline__h { font-size: var(--text-small); font-weight: var(--fw-medium); color: var(--fg-1); } /* ---- Nav / tabs ----------------------------------------------------------- */ .tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); } .tab { padding: 10px 14px; font-size: var(--text-small); font-weight: var(--fw-medium); color: var(--fg-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .tab:hover { color: var(--fg-1); } .tab[aria-selected="true"] { color: var(--blue-strong); border-bottom-color: var(--blue); } /* Inline key */ .kbd { font-family: var(--font-mono); font-size: 0.78rem; padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-strong); color: var(--fg-2); }