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
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
Use the full lockup wherever space allows. Pick the variant that matches the background.
The mark is always a single solid color: magenta on light, ink for mono, white on dark. Never fill it with the gradient.
Color
Click any swatch to copy its hex. Tokens map one-to-one to the CSS variables in the codebase.
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%);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
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
Components
One default plus role-based variants, all built from the brand's own devices: the topographic contour, the DeltaMark peak, the gradient family and mono alt-labels. Pick by what the content is, not by taste. A standard stat uses the default; a single section-defining number earns the hero; an X-vs-Y uses the comparison card.
Kicker RuleDefault
variant="kicker"The default. Any standard stat, and the whole article stat row; it stays clean even in a tight four-up. A short gradient kicker draws across on hover; the number carries the signature gradient.
Gradient Edge
variant="edge"The minimal alternate; a full-width gradient edge and a clean hierarchy. Also holds up lined up in a row.
Contour Summit
variant="contour"For a featured stat with room to breathe: a single card or a wide two-up. The contour is the summit seen from above; the number is the peak. Needs width, it gets busy when squeezed.
Elevation
variant="elevation"When the value reads as a level or a share; the gauge shows how far up, capped by a delta peak.
Ghost Delta
variant="ghost"When provenance matters; the footer strip carries the source and a short code.
Eclipse Hero
variant="eclipse"At most one per article, for a single section-defining number. A large dark surface, so the gradient is on-brand.
Delta Bars
CompareCardAny head-to-head figure. The two-color system (open = ember, closed = indigo) does the arguing.
Starved of the best chips and outspent on compute, China's model builders have closed the frontier gap to months, not years. Their answer to every constraint has been the same: give the models away.
Topographic Article Card
ArticleCardIndex grids and 'more from' rails. The same contour and peak-line, so content and metric cards feel like one hand.
Artwork
Background art is generated, not stocked: one locked prompt, a new subject per piece, so everything reads as the same hand. The homepage hub cards are the reference set; reuse the recipe whenever a new article or page needs artwork.
AI
“an abstract neural network of small nodes and fine connecting lines rising into the silhouette of a mountain peak”
Green Tech
“slender wind turbines and stylized solar panels on gentle rolling hills, connected by fine energy-grid lines”
Data Engineering
“fine parallel data-pipeline lines flowing into stacked warehouse blocks and branching into smaller streams”
Tech Policy & Regulation
“a stylized classical parliament facade with slim columns, interwoven with fine circuit traces and a subtle ring of small stars”
Compute & Infrastructure
“a semiconductor chip die with fine circuit traces radiating outward toward small server-rack silhouettes and a transmission pylon”
Startups & Funding
“an ascending line chart with small circular markers climbing like a mountain ridge toward a tiny flag planted on the summit”
One template, and only {SUBJECT} changes; the captions above are the six worked examples. Generated with google/nano-banana-pro (Replicate · aspect_ratio 16:9 · resolution 2K · jpg, then export resized to 1400px wide), stored in /public/images/hubs/{slug}.jpg.
Minimalist background artwork for a premium tech-analysis publication card. Subject: {SUBJECT}, with faint topographic contour lines woven through the composition. Color palette: soft off-white #fafafa background, pale warm gray line work, restrained accents of magenta #cc3399 and deep indigo #4831b0. The artwork concentrates in the right third of the frame and fades to nearly empty clean off-white space across the left two thirds; extremely light, airy, low contrast, generous negative space. No text, no letters, no numbers, no logos, no watermark. Flat, precise, Scandinavian-minimal editorial vector illustration.The readability is baked into the image, so the CSS layer stays thin. Four rules, mirroring the hub cards in topic-hubs.tsx:
Fog wash
A left-to-right wash of fog over the image. Invisible against the artwork's own #fafafa, but it guarantees text contrast on narrow crops.
bg-gradient-to-r from-fog via-fog/60 to-transparentRight-anchored crop
As the card narrows, the empty left of the image is what gets cropped away; the artwork stays pinned to the right edge, behind no text.
object-cover object-rightHover zoom
A slow, subtle scale on the image only, layered on the card's border and shadow hover.
transition-transform duration-500 group-hover:scale-[1.03]Lean files
Production (App Hosting) disables the runtime image optimizer, so weight is set at export: resize to 1400px wide (cards render at most ~1200px retina). next/image still handles lazy loading and layout.
magick in.jpg -resize 1400x -strip -quality 82 out.jpgVoice & tone
The voice is the moat. Opinionated, but earned.
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
Vector files for every variant. More raster sizes live in /public/brand.
Explorations
Standalone studies used to review and pick component designs before they ship. Working artifacts, not production pages, they open in a new tab.