/* ============================================================ iConference AG / Serv24 — Design System Foundations colors_and_type.css Brand: AI consulting for the Mittelstand + interim COO/CIO. Aesthetic (from the team's own materials): warm editorial — CREAM paper surfaces, deep NAVY ink & emphasis blocks, a single OCHRE/gold accent, bold rounded display + humanist body + mono for code tokens. RAG sits at the centre of the story. ============================================================ */ /* ---- Webfonts ----------------------------------------------------------- Display: Poppins (bold, geometric, rounded — matches the heavy rounded headline in the team's RAG/explainer artwork, e.g. "Was ist RAG eigentlich?"). Body: Hanken Grotesk (clean humanist grotesk, calm at reading sizes). Code/labels: IBM Plex Mono (the `last-reviewed`, `projects-registry.md` token style seen throughout the diagrams). Substitution note: chosen Google Fonts matched to the reference artwork — no brand font files were supplied. Swap if official fonts arrive. */ @import url('assets/fonts/fonts.css'); :root { /* --------------------------------------------------------------- CREAM — warm paper surfaces (sampled: cards #f5f1ea, bands #eee5d4) --------------------------------------------------------------- */ --cream-card: #faf6ee; /* lightest — raised cards on a cream page */ --cream-50: #f6f1e7; --cream-100: #f1eadc; /* default page background */ --cream-200: #ece2d0; /* band / section tint */ --cream-300: #e4d8c1; /* deeper band */ --cream-line: #e1d6c0; /* hairline borders on cream */ --cream-line-2: #d4c6ac; /* stronger border (unused fallback) */ /* --------------------------------------------------------------- NAVY — ink, text, emphasis blocks & dark surfaces (sampled #234055) --------------------------------------------------------------- */ --navy-900: #15293a; /* deepest */ --navy-800: #1b3346; --navy-700: #234055; /* ← PRIMARY navy: text, dark cards, bars */ --navy-600: #33506a; --navy-500: #4d6478; /* slate — secondary text on cream */ --navy-400: #7c8d9c; /* muted slate */ --navy-300: #a8b5c0; /* --------------------------------------------------------------- OCHRE / GOLD — the single accent (sampled #c98b3b) --------------------------------------------------------------- */ --ochre-50: #f8efde; --ochre-100: #f0ddb8; --ochre-200: #e6c489; --ochre-300: #d9aa5e; --ochre-500: #c98b3b; /* ← ACCENT: eyebrows, links, monograms, marks */ --ochre-600: #b0741f; /* text-on-cream / hover (better contrast) */ --ochre-700: #8d5c16; /* --------------------------------------------------------------- LEGACY ALIASES — the components were authored against an earlier cornflower/ink/gray palette. These map the old names onto the new cream/navy/ochre system so everything cascades. --cornflower-* was only ever used as THE ACCENT, so it now points at ochre. The logo PNG is unaffected (it carries its own colour). --------------------------------------------------------------- */ --white: #ffffff; --cornflower-50: var(--ochre-50); --cornflower-100: var(--ochre-100); --cornflower-200: var(--ochre-200); --cornflower-300: var(--ochre-300); --cornflower-400: var(--ochre-300); --cornflower-500: var(--ochre-500); --cornflower-600: var(--ochre-600); --cornflower-700: var(--ochre-700); --cornflower-800: var(--ochre-700); --cornflower-900: var(--ochre-700); --ink-900: var(--navy-900); --ink-800: var(--navy-800); --ink-700: var(--navy-600); --gray-50: var(--cream-50); --gray-100: var(--cream-100); --gray-200: #e7ddca; --gray-300: var(--border-2); --gray-400: var(--navy-400); --gray-500: var(--navy-500); --gray-600: var(--navy-500); --gray-700: var(--navy-600); --gray-800: var(--navy-800); --gray-900: var(--navy-700); /* --------------------------------------------------------------- SEMANTIC --------------------------------------------------------------- */ --success: #2f8f63; --success-bg: #e3f0e6; --warning: var(--ochre-600); --warning-bg: #f6ebd6; --danger: #b8473f; --danger-bg: #f4e2dd; --live: #c0453d; /* --------------------------------------------------------------- SEMANTIC TEXT / SURFACE TOKENS --------------------------------------------------------------- */ --fg-1: var(--navy-700); /* primary text — deep navy */ --fg-2: var(--navy-500); /* secondary — slate */ --fg-3: var(--navy-400); /* muted / captions */ --fg-on-dark: #f2ebdc; /* cream text on navy */ --fg-on-dark-2: #aebbc6; /* muted on navy */ --fg-brand: var(--ochre-600); /* links / accents on cream */ --bg-1: var(--cream-100); /* page */ --bg-2: var(--cream-50); /* subtle raised */ --bg-3: var(--cream-200); /* band / sunken */ --bg-card: var(--cream-card); --bg-tint: var(--ochre-50); --bg-dark: var(--navy-700); --border-1: var(--cream-line); --border-2: #d8cbb2; --border-strong: #c7b793; /* --------------------------------------------------------------- TYPE FAMILIES --------------------------------------------------------------- */ --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* TYPE SCALE — 1.250 (major third), 16px base ------------------- */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 25px; --text-2xl: 31px; --text-3xl: 39px; --text-4xl: 49px; --text-5xl: 61px; --text-6xl: 76px; --leading-tight: 1.06; --leading-snug: 1.22; --leading-normal:1.6; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.1em; /* eyebrows / mono labels */ /* SPACING — 4px base -------------------------------------------- */ --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 — soft, generous (echo the rounded artwork) ------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* SHADOWS — soft, warm-tinted, layered -------------------------- */ --shadow-sm: 0 1px 2px rgba(35,64,85,.07), 0 1px 1px rgba(35,64,85,.05); --shadow-md: 0 6px 18px rgba(35,64,85,.09), 0 2px 4px rgba(35,64,85,.06); --shadow-lg: 0 16px 38px rgba(35,64,85,.12), 0 5px 12px rgba(35,64,85,.07); --shadow-xl: 0 30px 64px rgba(21,41,58,.20), 0 12px 26px rgba(21,41,58,.12); --ring: 0 0 0 3px rgba(201,139,59,.40); /* MOTION — calm, precise. Ease-out, short. No bounce. ----------- */ --ease: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.5,0,.2,1); --dur-fast: 140ms; --dur: 200ms; --dur-slow: 320ms; } /* ============================================================ SEMANTIC TYPE — compose into components or use directly ============================================================ */ .ic-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-brand); } .ic-h1 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } .ic-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } .ic-h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .ic-h4 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: var(--leading-snug); color: var(--fg-1); } .ic-lead { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 400; line-height: var(--leading-normal); color: var(--fg-2); text-wrap: pretty; } .ic-body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); color: var(--fg-2); text-wrap: pretty; } .ic-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-3); } .ic-mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-2); } .ic-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }