/* ============================================================ GENTZ Commercial — Colors & Type ============================================================ Source of truth for the design system. Import this file first in any GENTZ design or surface. Brand colors are sampled directly from the official logo. See README.md for usage guidance and rationale. ============================================================ */ /* ---------- Fonts (Google Fonts substitutions; see README) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ------------------------------------------------------------ PRIMITIVE COLOR TOKENS Raw palette. Do not use directly in component CSS — use the semantic tokens (fg-1, surface-1, accent, etc) below. ------------------------------------------------------------ */ /* Teal — the brand accent. Sampled from the Z and "COMMERCIAL" wordmark. Primary 500 is the official logo teal. */ --teal-50: #E6F5F4; --teal-100: #C2E8E6; --teal-200: #8FD3D0; --teal-300: #4FBDB8; --teal-400: #1FAEA8; --teal-500: #00A39E; /* official logo teal */ --teal-600: #008C88; --teal-700: #00736F; --teal-800: #005956; --teal-900: #003D3B; /* Graphite — the secondary brand color. The "GENT" of GENTZ. Used for body text, secondary surfaces, hairlines. */ --graphite-50: #F4F4F4; --graphite-100: #E6E6E6; --graphite-200: #CECECE; --graphite-300: #B5B5B5; --graphite-400: #989898; /* official logo gray */ --graphite-500: #7A7A7A; --graphite-600: #5C5C5C; --graphite-700: #404040; --graphite-800: #262626; --graphite-900: #15181A; /* Warm neutrals — the "paper" the brand sits on. Inspired by architectural plan paper and showroom walls. */ --paper: #F7F5F1; /* default warm off-white surface */ --paper-deep: #EFEBE3; /* warmer secondary surface */ --bone: #FBFAF7; /* near-white for cards on paper */ --ink: #1A1F23; /* almost-black; never pure black */ --ink-soft: #2E353A; /* Semantic feedback colors (used sparingly) */ --success-500: #4F8A6B; --warning-500: #C9892B; --danger-500: #B23A48; /* ------------------------------------------------------------ SEMANTIC COLOR TOKENS What component code should consume. ------------------------------------------------------------ */ --bg: var(--paper); --bg-elevated: var(--bone); --bg-deep: var(--paper-deep); --bg-inverse: var(--ink); --fg-1: var(--ink); /* primary text */ --fg-2: var(--graphite-700); /* secondary text / body */ --fg-3: var(--graphite-500); /* muted / metadata */ --fg-4: var(--graphite-400); /* placeholder / disabled */ --fg-on-accent: var(--paper); /* text on teal */ --fg-on-dark: var(--paper); --accent: var(--teal-500); --accent-hover: var(--teal-600); --accent-press: var(--teal-700); --accent-soft: var(--teal-50); --accent-fg: var(--teal-700); /* readable teal on light bg */ --border-1: rgba(26, 31, 35, 0.08); /* hairline */ --border-2: rgba(26, 31, 35, 0.14); /* default */ --border-3: rgba(26, 31, 35, 0.24); /* strong */ --border-accent: var(--teal-500); /* ------------------------------------------------------------ TYPE FAMILIES Jost - Display & wordmark-adjacent. Geometric, Futura-like. Matches the logo wordmark. DM Sans - Body. Clean, humanist warmth, pairs with Jost. JetBrains Mono - Numeric / address / data. ------------------------------------------------------------ */ --font-display: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; --font-body: 'DM Sans', 'Helvetica Neue', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Type scale (modular, ~1.25) */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --fs-72: 4.5rem; --fs-96: 6rem; /* Letter-spacing — the brand uses GENEROUS tracking on labels (cf. "COMMERCIAL" in the logo) and TIGHT tracking on display. */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.18em; /* label / eyebrow / logo-like */ --tracking-widest: 0.32em; /* logo "COMMERCIAL" feel */ /* Line heights */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-base: 1.5; --lh-loose: 1.7; /* ------------------------------------------------------------ SPACING, RADII, SHADOWS, MOTION ------------------------------------------------------------ */ --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; /* Corner radii — kept restrained. Architectural, not playful. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* Shadows — soft, single-source, never inflated. */ --shadow-1: 0 1px 2px rgba(26, 31, 35, 0.04), 0 1px 1px rgba(26, 31, 35, 0.03); --shadow-2: 0 2px 8px rgba(26, 31, 35, 0.05), 0 1px 2px rgba(26, 31, 35, 0.04); --shadow-3: 0 12px 32px -8px rgba(26, 31, 35, 0.12), 0 4px 12px -4px rgba(26, 31, 35, 0.06); --shadow-inset: inset 0 0 0 1px var(--border-1); /* Motion — restrained, never bouncy. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ============================================================ SEMANTIC ELEMENT STYLES Apply this stylesheet's effects to a scope by adding the `.gentz` class to a root element, or by hooking these to your own components. ============================================================ */ .gentz, .gentz * { box-sizing: border-box; } .gentz { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-base); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings — display family, tight tracking */ .gentz h1, .gentz .h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(var(--fs-40), 4.8vw, var(--fs-72)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0; } .gentz h2, .gentz .h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(var(--fs-32), 3.2vw, var(--fs-56)); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } .gentz h3, .gentz .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-32); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; } .gentz h4, .gentz .h4 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: 0; margin: 0; } /* Eyebrow / label — the GENTZ signature. ALL CAPS + wide tracking. */ .gentz .eyebrow, .gentz .label { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--accent-fg); } /* Body */ .gentz p, .gentz .body { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg-2); text-wrap: pretty; margin: 0 0 1em 0; max-width: 64ch; } .gentz .lede { font-family: var(--font-body); font-size: var(--fs-20); line-height: 1.55; color: var(--fg-1); font-weight: 400; max-width: 56ch; } .gentz small, .gentz .small { font-size: var(--fs-14); color: var(--fg-3); } /* Mono — used for addresses, sf, dates, dollar amounts in compact contexts */ .gentz code, .gentz .mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; } /* Link */ .gentz a { color: var(--accent-fg); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } .gentz a:hover { color: var(--accent-press); } ::selection { background: var(--teal-200); color: var(--ink); }