/* ============================================================ Open Automation — Foundations Colors, typography, spacing, shadows, radii, motion. Use these tokens everywhere; never hardcode brand values. ============================================================ */ /* ---------- Webfonts ---------- The Open Automation wordmark is set in Swiss 721 BT (Bitstream): • "OPEN" → Swiss 721 Black Condensed BT • "automation" → Swiss 721 Roman / Light BT Swiss 721 BT is a licensed family (Bitstream/Monotype) and is not freely web-distributable. The font stack below is structured so that: 1. Swiss 721 BT renders on machines that have it installed (designers, brand team, anyone using the brand toolkit). 2. Helvetica Neue / Helvetica fall in next — the direct cousin family that ships on almost all macOS, iOS, Windows, and modern Linux distributions. The visual match is very close: same Grotesk lineage, near-identical proportions. 3. Roboto / Roboto Condensed (loaded from Google Fonts) is the absolute last-resort fallback for environments without either Swiss 721 or Helvetica. If you have a brand licence for Swiss 721, drop the .woff2 files into /fonts/ and add proper @font-face declarations to override the stack everywhere. */ :root { /* ------------------------------------------------------------------ COLOR — Brand ------------------------------------------------------------------ */ --oa-blue: #364EA2; /* primary — pulled from the logo bg */ --oa-blue-700: #2A3F86; /* hover / pressed / dense headers */ --oa-blue-800: #1F2E64; /* deep field / footer */ --oa-blue-900: #131C42; /* near-black blue — heavy text on white */ --oa-blue-500: #4E68C2; /* tint — links on dark, accents */ --oa-blue-300: #93A3DD; /* soft tint — disabled, dividers on bg */ --oa-blue-100: #E5EAF6; /* surface wash — cards on white */ --oa-blue-50: #F3F5FB; /* page background tint */ /* Signal accents — used SPARINGLY. The brand is mono-blue; these only appear for status, warnings, awards, KPIs. */ --oa-amber: #E8B341; /* award / highlight (ABTT-yellow nod) */ --oa-amber-100: #FBF1D6; --oa-success: #2F8F5E; --oa-warn: #C9742B; --oa-danger: #B5322B; /* E-stop, fault, over-load */ /* ------------------------------------------------------------------ COLOR — Neutrals (slightly cool to sit alongside the blue) ------------------------------------------------------------------ */ --oa-white: #FFFFFF; --oa-paper: #FAFBFC; --oa-ink-50: #F2F4F7; --oa-ink-100: #E5E8EF; --oa-ink-200: #D0D5DE; --oa-ink-300: #B0B7C3; --oa-ink-400: #828A99; --oa-ink-500: #5C6473; --oa-ink-600: #424A57; --oa-ink-700: #2C333D; --oa-ink-800: #1A1F27; --oa-ink-900: #0E1218; --oa-black: #000000; /* ------------------------------------------------------------------ SEMANTIC — Foreground / background / borders ------------------------------------------------------------------ */ --fg-1: var(--oa-ink-900); /* primary text */ --fg-2: var(--oa-ink-600); /* secondary, captions */ --fg-3: var(--oa-ink-500); /* tertiary, hint, metadata */ --fg-on-blue: var(--oa-white); --fg-on-blue-2: #C8D1ED; /* secondary on blue */ --fg-link: var(--oa-blue); --fg-link-hover: var(--oa-blue-700); --bg-1: var(--oa-white); /* page */ --bg-2: var(--oa-paper); /* alt section */ --bg-3: var(--oa-ink-50); /* card on page */ --bg-brand: var(--oa-blue); /* brand bg */ --bg-brand-deep: var(--oa-blue-800); /* deep footer / dark hero */ --border-1: var(--oa-ink-100); /* hairline */ --border-2: var(--oa-ink-200); /* default */ --border-strong: var(--oa-ink-400); /* heavy / focus ring base */ /* ------------------------------------------------------------------ TYPOGRAPHY — Families ------------------------------------------------------------------ */ /* Display — "OPEN" half of the wordmark, plus all headlines. Swiss 721 Black Condensed BT first; falls back through the Helvetica family, then Roboto Condensed as a webfont safety net. */ --font-display: "Swiss721BT-BlackCondensed", "Swiss 721 Black Condensed BT", "Helvetica Neue Condensed", "HelveticaNeueCondensedBlack", "Helvetica Neue", "Roboto Condensed", Helvetica, "Arial Narrow", Arial, system-ui, sans-serif; /* Body — "automation" half + all body copy. Swiss 721 BT Roman first, then plain Helvetica, then Roboto. */ --font-body: "Swiss721BT-Roman", "Swiss 721 BT", "Helvetica Neue", Helvetica, "Roboto", Arial, system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ------------------------------------------------------------------ TYPOGRAPHY — Scale (1.250 major-third on a 16-px base) ------------------------------------------------------------------ */ --fs-12: 0.75rem; /* 12 — micro, label, eyebrow */ --fs-14: 0.875rem; /* 14 — caption, metadata */ --fs-16: 1rem; /* 16 — body */ --fs-18: 1.125rem; /* 18 — lede */ --fs-20: 1.25rem; /* 20 — sub-heading */ --fs-24: 1.5rem; /* 24 — h4 */ --fs-32: 2rem; /* 32 — h3 */ --fs-40: 2.5rem; /* 40 — h2 */ --fs-56: 3.5rem; /* 56 — h1 */ --fs-80: 5rem; /* 80 — display */ --fs-128: 8rem; /* 128 — hero / numbered KPI */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-caps: 0.12em; /* for SMALL CAPS eyebrows */ /* ------------------------------------------------------------------ SPACING — 4-px base ramp ------------------------------------------------------------------ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* ------------------------------------------------------------------ RADII — Mostly squared. The brand is engineering, not consumer. ------------------------------------------------------------------ */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; /* default control radius */ --r-4: 8px; /* card */ --r-5: 12px; /* large card */ --r-pill: 999px; /* pills / tags */ /* ------------------------------------------------------------------ SHADOWS — Cool, low, technical. Almost no glow. ------------------------------------------------------------------ */ --shadow-1: 0 1px 0 rgba(19, 28, 66, 0.04), 0 1px 2px rgba(19, 28, 66, 0.06); --shadow-2: 0 1px 0 rgba(19, 28, 66, 0.04), 0 4px 12px rgba(19, 28, 66, 0.08); --shadow-3: 0 2px 0 rgba(19, 28, 66, 0.04), 0 12px 32px rgba(19, 28, 66, 0.12); --shadow-inset: inset 0 0 0 1px rgba(19, 28, 66, 0.08); --shadow-focus: 0 0 0 3px rgba(54, 78, 162, 0.28); /* ------------------------------------------------------------------ MOTION — Functional, fast. Engineering ≠ bouncy. ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 560ms; /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-narrow: 720px; --container: 1080px; --container-wide: 1280px; --container-bleed: 1440px; } /* ============================================================ Semantic typography classes — drop-in ============================================================ */ .oa-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--oa-blue); line-height: 1; } .oa-display { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 7vw, var(--fs-128)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--fg-1); } .oa-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, var(--fs-56)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--fg-1); } .oa-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-40); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--fg-1); } .oa-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-32); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: 0; color: var(--fg-1); } .oa-h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-24); line-height: var(--lh-snug); color: var(--fg-1); } .oa-lede { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-20); line-height: var(--lh-relaxed); color: var(--fg-2); } .oa-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-1); } .oa-caption { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-2); } .oa-micro { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-12); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); } .oa-code { font-family: var(--font-mono); font-weight: 500; font-size: 0.92em; background: var(--bg-3); border: 1px solid var(--border-1); padding: 0.1em 0.4em; border-radius: var(--r-2); color: var(--oa-blue-800); } /* Wordmark recreation — uppercase "OPEN" + lowercase "automation" */ .oa-wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-display); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--oa-blue); } .oa-wordmark__open { font-weight: 900; font-stretch: condensed; text-transform: uppercase; } .oa-wordmark__automation { font-weight: 400; text-transform: lowercase; font-family: var(--font-body); letter-spacing: -0.005em; } .oa-wordmark--on-blue { color: var(--oa-white); }