/* =====================================================================
Worldonix Design System — tokens & base type
Drop this file into the of any page:
Or import the Google Font substitutes alongside it:
===================================================================== */
:root {
/* ---------- Brand & accent ---------- */
--color-primary: #2563eb; /* blue — signature CTA & callout */
--color-primary-active: #1d4ed8; /* press / darker blue */
--color-primary-disabled: #dbeafe; /* light blue disabled */
--color-accent-teal: #38bdf8; /* sky blue */
--color-accent-amber: #818cf8; /* indigo accent */
/* ---------- Surface ---------- */
--color-canvas: #f8faff; /* default page floor — blue-tinted white */
--color-surface-soft: #eff6ff; /* blue-50 */
--color-surface-card: #dbeafe; /* blue-100, feature cards */
--color-surface-cream-strong: #bfdbfe; /* blue-200, selected tabs, emphasis bands */
--color-surface-dark: #0f172a; /* dark navy, footer */
--color-surface-dark-elevated: #1e293b;
--color-surface-dark-soft: #172033;
--color-hairline: #bfdbfe; /* border on blue surfaces */
--color-hairline-soft: #dbeafe; /* in-band divider */
/* ---------- Text ---------- */
--color-ink: #141413; /* headlines */
--color-body-strong: #252523;
--color-body: #3d3d3a;
--color-muted: #6c6a64;
--color-muted-soft: #8e8b82;
--color-on-primary: #ffffff; /* on coral */
--color-on-dark: #faf9f5; /* cream-tinted white on navy */
--color-on-dark-soft: #a09d96;
/* ---------- Semantic ---------- */
--color-success: #5db872;
--color-warning: #d4a017;
--color-error: #c64545;
/* ---------- Typography ---------- */
--font-display:
"Cormorant Garamond", "Tiempos Headline", Garamond, "Times New Roman", serif;
--font-body:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Display sizes — Copernicus serif equivalent, weight 400, NEGATIVE tracking */
--type-display-xl-size: 64px;
--type-display-xl-line: 1.05;
--type-display-xl-track: -1.5px;
--type-display-lg-size: 48px;
--type-display-lg-line: 1.1;
--type-display-lg-track: -1px;
--type-display-md-size: 36px;
--type-display-md-line: 1.15;
--type-display-md-track: -0.5px;
--type-display-sm-size: 28px;
--type-display-sm-line: 1.2;
--type-display-sm-track: -0.3px;
/* Title / body / caption — sans, no negative tracking */
--type-title-lg: 22px;
--type-title-md: 18px;
--type-title-sm: 16px;
--type-body-md: 16px;
--type-body-sm: 14px;
--type-caption: 13px;
--type-caption-uppercase: 12px;
--type-code: 14px;
--type-button: 14px;
--type-nav: 14px;
/* ---------- Spacing — 4px base ---------- */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
--space-section: 96px;
/* ---------- Radius ---------- */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px; /* buttons, inputs */
--radius-lg: 12px; /* cards */
--radius-xl: 16px; /* hero illustration */
--radius-pill: 9999px;
--radius-full: 9999px;
/* ---------- Elevation (rare) ---------- */
--shadow-soft: 0 1px 3px rgba(20, 20, 19, 0.08);
/* ---------- Layout ---------- */
--container-max: 1200px;
}
/* =====================================================================
Base type — apply to body. Use semantic classes for headings.
===================================================================== */
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--color-canvas);
color: var(--color-body);
font-family: var(--font-body);
font-size: var(--type-body-md);
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Display headings — serif, weight 400, negative tracking */
h1,
.h-display-xl,
h2,
.h-display-lg,
h3,
.h-display-md,
h4,
.h-display-sm {
font-family: var(--font-display);
font-weight: 400;
color: var(--color-ink);
margin: 0;
text-wrap: balance;
}
h1,
.h-display-xl {
font-size: var(--type-display-xl-size);
line-height: var(--type-display-xl-line);
letter-spacing: var(--type-display-xl-track);
}
h2,
.h-display-lg {
font-size: var(--type-display-lg-size);
line-height: var(--type-display-lg-line);
letter-spacing: var(--type-display-lg-track);
}
h3,
.h-display-md {
font-size: var(--type-display-md-size);
line-height: var(--type-display-md-line);
letter-spacing: var(--type-display-md-track);
}
h4,
.h-display-sm {
font-size: var(--type-display-sm-size);
line-height: var(--type-display-sm-line);
letter-spacing: var(--type-display-sm-track);
}
/* Title / label sizes — sans, weight 500 */
.t-title-lg {
font-family: var(--font-body);
font-size: var(--type-title-lg);
font-weight: 500;
line-height: 1.3;
color: var(--color-ink);
}
.t-title-md {
font-family: var(--font-body);
font-size: var(--type-title-md);
font-weight: 500;
line-height: 1.4;
color: var(--color-ink);
}
.t-title-sm {
font-family: var(--font-body);
font-size: var(--type-title-sm);
font-weight: 500;
line-height: 1.4;
color: var(--color-ink);
}
/* Body */
p,
.t-body-md {
font-size: var(--type-body-md);
line-height: 1.55;
color: var(--color-body);
margin: 0;
}
.t-body-sm {
font-size: var(--type-body-sm);
line-height: 1.55;
color: var(--color-body);
}
/* Captions */
.t-caption {
font-size: var(--type-caption);
font-weight: 500;
line-height: 1.4;
color: var(--color-muted);
}
.t-caption-uppercase {
font-size: var(--type-caption-uppercase);
font-weight: 500;
line-height: 1.4;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-muted);
}
/* Code */
code,
.t-code,
pre {
font-family: var(--font-mono);
font-size: var(--type-code);
line-height: 1.6;
}
/* Inline coral text-link — one of the system's distinctive details */
a,
.t-link {
color: var(--color-primary);
text-decoration: none;
}
a:active,
.t-link:active {
text-decoration: underline;
}
/* =====================================================================
Reusable component-ish helpers (light-touch — not full components).
Component implementations live in ui_kits/marketing/.
===================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border-radius: var(--radius-md);
border: 1px solid transparent;
font-family: var(--font-body);
font-size: var(--type-button);
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background-color 150ms ease;
}
.btn-primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn-primary:active {
background: var(--color-primary-active);
}
.btn-secondary {
background: var(--color-canvas);
color: var(--color-ink);
border-color: var(--color-hairline);
}
.btn-secondary-on-dark {
background: var(--color-surface-dark-elevated);
color: var(--color-on-dark);
border-color: transparent;
}
.input {
height: 40px;
padding: 0 14px;
border-radius: var(--radius-md);
border: 1px solid var(--color-hairline);
background: var(--color-canvas);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--type-body-md);
outline: none;
}
.input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.15);
}
.badge-pill {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 12px;
border-radius: var(--radius-pill);
background: var(--color-surface-card);
color: var(--color-ink);
font-size: var(--type-caption);
font-weight: 500;
}
.badge-coral {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 12px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-on-primary);
font-size: var(--type-caption-uppercase);
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
}