The Olympia Tech brand
Logo, color, gradient, typography, and voice. This page is rendered from the same design tokens the site itself uses, so it never drifts from what you see in production.
Foundations
The thesis is the brand
Olympia Tech is opinionated tech-industry analysis: the signals, the implications, and where the opportunity is. The name and the mark carry that idea.
Olympia is the summit, the high vantage point you watch the industry from.
The mark reads three ways at once: a delta for change, a peak for the Olympus vantage point, and an upward arrow for momentum and the signal of what is next.
Principles: opinionated not neutral, signal over noise, decision-useful over comprehensive.
Logo
Logo system
Use the full lockup wherever space allows. Pick the variant that matches the background.
The mark
The mark is always a single solid color: magenta on light, ink for mono, white on dark. Never fill it with the gradient.
Don'ts
Color
Palette
Click any swatch to copy its hex. Tokens map one-to-one to the CSS variables in the codebase.
Brand
Neutrals
Gradient
The signature gradient
Magenta to indigo, reserved for large surfaces: hero bands, section headers, and key art. Never on the logo mark, badges, underlines, or other small UI — use a solid brand color there. Keep text legible by placing it on a solid container when needed.
background: linear-gradient(115deg, #CC3399 0%, #363794 52%, #4831B0 100%);The family
On-brand variations for accents, kickers, and interactive surfaces. All are built from the five brand colors and stay color-to-color (never fading to white); pair them with white or near-white text.
Ember
.grad-ember115° · #FF832F → #CC3399 → #4831B0
Warm and energetic. Editorial accents, kickers, article headers.
Aurora
.grad-aurora115° · #CC3399 → #6366F1
Vibrant two-stop. Buttons, highlights, badges on dark.
Deep
.grad-deep150° · #CC3399 → #4831B0 → #17123F
Premium and moody. White-text headers, cards, key art.
Eclipse
.grad-eclipsenear-black → indigo, magenta glow
Dark-first. Callout panels and dark sections with white text.
Typography
Type scale
Poppins for display and headings, Inter for body and UI. Live specimens, not screenshots.
Display
Poppins Bold · up to 72px
Heading 1
Poppins Bold · 36px
Heading 2
Poppins SemiBold · 24px
Body large
Inter Regular · 18px
Body
Inter Regular · 16px
Eyebrow / label
Inter SemiBold · uppercase · tracked
Voice & tone
How we sound
The voice is the moat. Opinionated, but earned.
- Opinionated by default, but earn it: every piece states a clear thesis, then shows the work.
- Analyst voice, not pundit voice: confident and direct, but precise about uncertainty.
- Signals, then implications, then opportunities: name the event, reason the consequences, surface the move.
- Credible, not corporate; sharp, not snarky. Argue against ideas, not people.
- Plain, modern, jargon-aware language. No hype, no doomerism, and no em dashes.
Do
"The carve-outs, not the headline, are where this rule actually bites. Here is who should care."
Don't
"This game-changing, revolutionary breakthrough will disrupt everything as we know it."
Downloads
Assets
Vector files for every variant. More raster sizes live in /public/brand.
Explorations
Design explorations
Standalone studies used to review and pick component designs before they ship. Working artifacts, not production pages, they open in a new tab.