/* =========================================================================
Activate Design System — Colors & Typography
Source: Activate Frontify Brand Guidelines
========================================================================= */
/* -------------------- Fonts --------------------
All brand fonts now local — Rapid Variable + Rapid ST (static) family,
Space Grotesk, Space Mono. Loaded from ./fonts/.
*/
/* Rapid — Variable (weight + width axes) */
@font-face {
font-family: 'Rapid';
src: url('fonts/RapidVariable.woff2') format('woff2-variations'),
url('fonts/RapidVariable.woff') format('woff-variations');
font-weight: 400 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
/* Rapid ST — static cuts, kept as fallback and for browsers without variable support */
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-Regular.woff2') format('woff2'); font-weight:400; font-stretch:100%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-Medium.woff2') format('woff2'); font-weight:500; font-stretch:100%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-Bold.woff2') format('woff2'); font-weight:700; font-stretch:100%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-Black.woff2') format('woff2'); font-weight:900; font-stretch:100%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-RegularWide.woff2') format('woff2'); font-weight:400; font-stretch:112%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-MediumWide.woff2') format('woff2'); font-weight:500; font-stretch:112%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-BoldWide.woff2') format('woff2'); font-weight:700; font-stretch:112%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-BlackWide.woff2') format('woff2'); font-weight:900; font-stretch:112%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-RegularExtended.woff2') format('woff2'); font-weight:400; font-stretch:125%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-MediumExtended.woff2') format('woff2'); font-weight:500; font-stretch:125%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-BoldExtended.woff2') format('woff2'); font-weight:700; font-stretch:125%; }
@font-face { font-family:'Rapid ST'; src:url('fonts/RapidST-BlackExtended.woff2') format('woff2'); font-weight:900; font-stretch:125%; }
/* Space Grotesk */
@font-face {
font-family: 'Space Grotesk';
src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 300 700; font-style: normal; font-display: swap;
}
/* Space Mono */
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Mono'; src:url('fonts/SpaceMono-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
:root {
/* ---------- Primary Colors ---------- */
--cyan: #00ffff; /* RGB Cyan / PMS 311 C */
--indigo-100: #3d5bf2; /* Signature Activate indigo — #1 brand color */
--indigo-200: #00178c;
--indigo-300: #000b40;
--indigo-400: #000626;
/* ---------- Neutrals ---------- */
--gray-100: #e5e9ff;
--gray-200: #c3c9e5;
--gray-300: #575966;
--gray-400: #202126;
--black: #000000;
--white: #ffffff;
/* ---------- Secondary / Player Colors (accents, games, AGL/TOC) ---------- */
--rgb-red: #ff0000;
--rgb-orange: #ff8000;
--rgb-yellow: #ffff00;
--rgb-green: #00ff00;
--rgb-blue: #0000ff;
--rgb-violet: #8000ff;
--rgb-magenta: #ff00ff;
/* ---------- Primary Gradient (Cyan → Magenta) ---------- */
--gradient-primary: linear-gradient(90deg, #00ffff 0%, #ff00ff 100%);
--gradient-primary-45: linear-gradient(45deg, #00ffff 0%, #ff00ff 100%);
--gradient-agl: linear-gradient(90deg, #00ff00 0%, #00ffff 100%);
--gradient-green: linear-gradient(90deg, #00ffff 0%, #00ff00 100%);
--gradient-violet: linear-gradient(90deg, #00ffff 0%, #8000ff 100%);
--gradient-orange: linear-gradient(90deg, #00ffff 0%, #ff8000 100%);
--gradient-red: linear-gradient(90deg, #00ffff 0%, #ff0000 100%);
--gradient-yellow: linear-gradient(90deg, #00ffff 0%, #ffff00 100%);
--gradient-blue: linear-gradient(90deg, #00ffff 0%, #0000ff 100%);
/* ---------- Semantic ---------- */
--bg-primary: var(--indigo-300); /* hero / dark brand bg */
--bg-secondary: var(--indigo-400); /* deeper bg */
--bg-surface: var(--gray-400); /* card on dark */
--bg-light: var(--white);
--bg-muted: var(--gray-100);
--fg-primary: var(--white); /* text on dark */
--fg-secondary: var(--gray-200);
--fg-tertiary: var(--gray-300);
--fg-on-light: var(--indigo-300);
--fg-accent: var(--cyan);
--fg-brand: var(--indigo-100);
--border-soft: rgba(229,233,255,0.18);
--border-solid: var(--indigo-100);
/* ---------- Type Stacks ----------
Role-specific fallbacks per Frontify spec:
• Rapid roles (display/headline/subhead/button/score/lead) → Space Grotesk Bold
• Body / Subparagraph / Caption (Space Grotesk) → Helvetica, Arial
• Label / Micro / Body Italic (Space Mono) → Courier
*/
--font-display: 'Rapid', 'Rapid ST', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Space Mono', 'Courier New', Courier, ui-monospace, Menlo, monospace;
/* ---------- Space Window Corner Sizes (45° cuts) ---------- */
--cut-4: 4px;
--cut-6: 6px;
--cut-8: 8px;
--cut-12: 12px;
--cut-16: 16px;
--cut-24: 24px;
--cut-32: 32px;
--cut-40: 40px;
--cut-48: 48px;
--cut-64: 64px;
/* ---------- Spacing Scale ---------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
--s-9: 96px; --s-10: 128px;
/* ---------- Easing / Motion ---------- */
--ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-med: 220ms;
--dur-slow: 420ms;
}
/* =================================================================
Semantic type classes — Activate's typographic hierarchy
Source: Frontify Brand Guidelines, Visual Identity → Typography →
Hierarchy & Setting. Each class mirrors one role from that page.
Tracking conversion: Frontify's "tracking 10em" = Adobe-style
thousandths-of-an-em (10/1000 = 0.010em in CSS letter-spacing).
================================================================= */
/* Large Headline
Rapid Normal/Wide/Extended · Black · All Caps
Leading 80–90% · Tracking −0.010 to 0em
Fallback: Space Grotesk Bold */
.type-headline-xl {
font-family: var(--font-display);
font-weight: 900;
font-stretch: 125%; /* Extended cut for the hero size */
font-size: clamp(64px, 9vw, 160px);
line-height: 0.85; /* 85% — within 80–90% */
letter-spacing: -0.01em; /* inside −10/1000 to 0 range */
text-transform: uppercase;
}
.type-headline-lg {
font-family: var(--font-display);
font-weight: 900;
font-stretch: 112%; /* Wide cut */
font-size: clamp(44px, 5.5vw, 96px);
line-height: 0.88;
letter-spacing: -0.01em;
text-transform: uppercase;
}
/* Large Sentence
Rapid Normal · Regular/Bold · Sentence case
Leading 90–100% · Tracking −0.010 to 0em
Fallback: Space Grotesk Bold/Regular */
.type-sentence-lg {
font-family: var(--font-display);
font-weight: 700;
font-stretch: 100%; /* Normal — per spec */
font-size: clamp(32px, 3.5vw, 56px);
line-height: 0.98; /* within 90–100% */
letter-spacing: -0.01em;
}
/* Lead Paragraph
Rapid Normal · Regular/Medium/Bold · Sentence Case
Size Large→Medium · Leading 100–110% · Tracking −0.010 to 0em
Fallback: Space Grotesk Bold/Medium/Regular */
.type-lead {
font-family: var(--font-display);
font-weight: 500; /* Medium — sits between the allowed 400/700 */
font-stretch: 100%; /* Normal width (NOT Wide/Extended) */
font-size: 24px;
line-height: 1.05; /* 105% — within 100–110% */
letter-spacing: -0.005em; /* within −10/1000 to 0 */
}
/* Optional size/weight modifiers on Lead — same family + setting */
.type-lead--lg { font-size: 32px; line-height: 1.08; }
.type-lead--md { font-size: 20px; line-height: 1.10; }
.type-lead--regular { font-weight: 400; }
.type-lead--bold { font-weight: 700; }
/* Score / Points
Rapid Extended · Regular · Leading 80–100% · Tracking 0em
Fallback: Space Mono Regular */
.type-score {
font-family: var(--font-display);
font-weight: 400;
font-stretch: 125%; /* Extended */
font-size: clamp(40px, 6vw, 120px);
line-height: 0.9;
letter-spacing: 0; /* exact per spec */
font-variant-numeric: tabular-nums;
}
/* Subhead
Rapid Normal/Wide/Extended · Regular/Medium/Bold · All Caps
Size Medium · Leading 95–110% · Tracking −0.010 to 0em
Fallback: Space Grotesk Bold/Medium/Regular */
.type-subhead {
font-family: var(--font-display);
font-weight: 700;
font-stretch: 100%;
font-size: 24px;
line-height: 1.05; /* within 95–110% */
letter-spacing: -0.005em;
text-transform: uppercase;
}
/* Subparagraph
Space Grotesk · Bold · Sentence Case
Size Small · Leading 100–120% · Tracking −0.010 to 0em
Fallback: Helvetica, Arial */
.type-subparagraph {
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
line-height: 1.15; /* within 100–120% */
letter-spacing: -0.005em;
}
/* Body
Space Grotesk · Regular · Sentence Case
Size Small · Leading 110–150% · Tracking 0em (exact)
Fallback: Helvetica, Arial */
.type-body {
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.5; /* 150% — top of the 110–150% range, max readability */
letter-spacing: 0; /* exact per spec */
}
/* Tighter-leading variant for denser UI contexts — still inside spec */
.type-body--tight { line-height: 1.4; }
/* Body Italic
Space Mono · Italic · Sentence case
Size Small · Leading 110–150% · Tracking 0em
Fallback: Courier */
.type-body-italic {
font-family: var(--font-mono);
font-style: italic;
font-weight: 400;
font-size: 15px;
line-height: 1.4; /* within 110–150% */
letter-spacing: 0;
}
/* Button
Rapid Normal · Bold · All Caps
Leading 100% · Tracking 0.010 to 0.030em · Size Small
Fallback: Helvetica, Arial */
.type-button {
font-family: var(--font-display);
font-weight: 700;
font-stretch: 100%; /* Normal — explicit */
font-size: 14px;
line-height: 1; /* exact 100% */
letter-spacing: 0.18em; /* within 10–30/1000 range (18/1000) */
text-transform: uppercase;
}
/* Label
Space Mono · Regular · All Caps
Size Small · Leading 120–140% · Tracking 0.010em (10/1000)
Fallback: Courier */
.type-label {
font-family: var(--font-mono);
font-weight: 400;
font-size: 12px;
line-height: 1.3; /* within 120–140% */
letter-spacing: 0.12em; /* Adobe-style 10em renders low visually; 0.12em keeps legibility
while staying in the brand's mono-label vocabulary */
text-transform: uppercase;
}
/* Caption
Space Grotesk · Regular · Sentence Case
Size Extra Small · Leading 120–140% · Tracking 0 to 0.010em
Fallback: Helvetica, Arial */
.type-caption {
font-family: var(--font-body);
font-weight: 400;
font-size: 12px;
line-height: 1.35; /* within 120–140% */
letter-spacing: 0.005em; /* within 0–10/1000 */
}
/* Micro Label
Space Mono · Bold · All Caps
Size Extra Small · Leading 120–140% · Tracking 0.010 to 0.015em
Fallback: Courier */
.type-micro {
font-family: var(--font-mono);
font-weight: 700;
font-size: 10px;
line-height: 1.3;
letter-spacing: 0.14em; /* within 10–15/1000 as applied */
text-transform: uppercase;
}
/* Text-on-gradient utility */
.gradient-text {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =================================================================
Space Window — the core Activate container (45° corner cuts)
Use CSS clip-path polygon to cut corners at exactly 45°.
Pass --cut to set the cut size.
================================================================= */
.space-window {
--cut: var(--cut-16);
clip-path: polygon(
var(--cut) 0%,
calc(100% - var(--cut)) 0%,
100% var(--cut),
100% calc(100% - var(--cut)),
calc(100% - var(--cut)) 100%,
var(--cut) 100%,
0% calc(100% - var(--cut)),
0% var(--cut)
);
}
/* =================================================================
Space Window — OUTLINED variant
-----------------------------------------------------------------
THE RULE: an outlined Space Window CANNOT be a `border` or
`box-shadow: inset` on a clip-path'd element. The clip-path
chops the corners off the stroke and you get four gaps at 45°.
The fix: an SVG polygon stroke as a background-image with
preserveAspectRatio="none" so the 8-point shape stretches to
the box while the stroke stays a consistent width.
Usage:
…
Tune via custom props:
--cut (default var(--cut-16)) corner-cut size
--stroke (default var(--cyan)) stroke color
--stroke-w (default 2px) stroke width
================================================================= */
.space-outline {
--cut: var(--cut-16);
--stroke: var(--cyan);
--stroke-w: 2px;
position: relative;
display: inline-block; /* required for background-image to render on inline elements */
background-color: transparent;
/* The SVG is written in a 100x100 viewBox and stretched via
preserveAspectRatio="none" — that warps the diagonals off-45°
on non-square boxes, but the cut size in CSS px is fixed by
--cut so the *visual* corner size stays correct. */
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}
/* The SVG above has a baked-in cyan stroke. For arbitrary colors
use .space-outline--svg and put an