/* ============================================================ Mariusz Kotas — Design System Colors & Type tokens ------------------------------------------------------------ Brand: dark navy + gold, modern minimalist. Positioning: product builder / solopreneur (evolving from "software craftsman"). ============================================================ */ /* -------- TYPEFACES -------- Display: Fraunces — modern serif with character UI/Body: Inter — neutral, highly legible sans Mono: JetBrains Mono — code, kbd, ticker numerals Loaded via Google Fonts in HTML . */ :root { /* ============= COLOR — RAW PALETTE ============= */ /* Navy — primary brand surface */ --navy-900: #0B1A2E; --navy-800: #102439; --navy-700: #17314F; --navy-600: #20406A; --navy-500: #2F5A8E; --navy-300: #6B86A8; --navy-100: #C9D2DE; /* Gold — accent. The single non-neutral hue. */ --gold-700: #B8860D; --gold-600: #D4A017; --gold-500: #E8AE0D; --gold-400: #EFC149; --gold-200: #F7E2A0; --gold-50: #FBF5E3; /* Warm neutrals — paper-like off-white, never pure white */ --paper: #FAF7F1; --paper-2: #F2EEE3; --paper-3: #E8E2D2; --ink-900: #0B1A2E; --ink-700: #2A3548; --ink-500: #5A6478; --ink-300: #8B94A6; /* Semantic */ --success: #1F7A4D; --warning: #C97A0E; --danger: #B23A3A; --info: var(--navy-500); /* ============= COLOR — SEMANTIC ROLES ============= */ --bg: var(--paper); --bg-elevated: #FFFFFF; --bg-sunken: var(--paper-2); --bg-brand: var(--navy-800); --bg-accent: var(--gold-500); --fg: var(--ink-900); --fg-muted: var(--ink-700); --fg-subtle: var(--ink-500); --fg-faint: var(--ink-300); --fg-on-brand: var(--paper); --fg-on-accent: var(--navy-900); --accent: var(--gold-600); --accent-hover: var(--gold-500); --accent-press: var(--gold-700); --border: var(--paper-3); --border-strong:var(--ink-300); --border-brand: var(--navy-600); --link: var(--navy-800); --link-hover: var(--gold-600); /* ============= TYPE SCALE ============= */ --font-display: "Fraunces", "Source Serif Pro", Georgia, serif; --font-sans: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* Sizes */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 84px; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Leading */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.55; --leading-loose: 1.75; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* ============= SPACING (4px base) ============= */ --space-0: 0; --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; /* ============= RADII ============= */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ============= SHADOWS / ELEVATION ============= */ --shadow-xs: 0 1px 2px rgba(11, 26, 46, 0.06); --shadow-sm: 0 2px 6px rgba(11, 26, 46, 0.08); --shadow-md: 0 6px 18px rgba(11, 26, 46, 0.10); --shadow-lg: 0 18px 40px rgba(11, 26, 46, 0.14); --shadow-gold: 0 4px 14px rgba(212, 160, 23, 0.30); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); /* ============= MOTION ============= */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1.0); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; --duration-4: 500ms; } /* ============= SEMANTIC ELEMENT STYLES ============= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-5) 0; } h2, .h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4) 0; } h3, .h3 { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); margin: 0 0 var(--space-3) 0; } h4, .h4 { font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin: 0 0 var(--space-2) 0; } p { margin: 0 0 var(--space-4) 0; text-wrap: pretty; max-width: 68ch; } small, .text-sm { font-size: var(--text-sm); color: var(--fg-muted); } .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-subtle); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--bg-sunken); padding: 0.12em 0.4em; border-radius: var(--radius-xs); border: 1px solid var(--border); } a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: color var(--duration-1) var(--ease-standard), border-color var(--duration-1) var(--ease-standard); } a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); } ::selection { background: var(--gold-200); color: var(--ink-900); }