Join

Alt. 2,917 mBrand guide

The Olympia Tech brand

Night as the canvas, magenta as the light, the summit as the vantage point. Every specimen on this page is rendered by the same components the site uses, so the guide never drifts from production.

EditionMegaprojects, since 29 October 2026Downloads

01Foundations

The thesis is the brand

Olympia Tech covers the megaprojects of the intelligence age: gigawatt campuses, sovereign compute, trillion-yuan grids and data centres in orbit. Europe-minded, with the whole world in view. The name and the mark carry the idea of the vantage point.

Olympia is the summit: the high vantage point you watch the build-out from. Altitudes run through the site, from the cover at 2,917 m down the ascent of the topics.

The mark reads three ways at once: a delta for change, a peak for the vantage point, an upward arrow for momentum.

Three principles: announced is not built, signal over noise, and opinionated but earned.

03Colour

Night is the canvas

Click a swatch to copy its hex. Tokens map one to one to the CSS variables in globals.css.

Brand light, not brand bands

Colour arrives as light inside the night: a glow, a blip, a pink accent.

JoinA magenta link
  • Night is the canvas: covers, data plates, the header bar on dark pages, the sign-up band and the footer all sit on Night.
  • Brand colour arrives as light, not as a band: soft indigo and magenta radial glows inside the night, the pink of a blip, the tint of the photo window.
  • Magenta is the one interactive colour. Every link and primary button is magenta; nothing turns purple on hover.
  • The magenta-to-indigo gradient is retired as a surface. It survives only inside archived pieces; new pages never use a gradient band or gradient text.

Night

Brand

Neutrals

04Typography

Type scale

Poppins for display and headings, Inter for body and UI. Each display token carries its size, line height and tracking and scales with the viewport. Live specimens, not screenshots.

Display XL

text-display-xl

Poppins Bold · 43 to 104px · lh 1.02 · -0.04em

The biggest bets on intelligence.

The cover headline. Once per site, on the homepage cover only.

Display Story

text-display-story

Poppins SemiBold · 36 to 72px · lh 1.04 · -0.03em

Seven Bets on a Budget Nobody Has Passed

A story's title on its cover header (articles with a lead image). One size down and one weight lighter than the cover: a story, not a masthead.

Display L

text-display-lg

Poppins Bold · 30 to 52px · lh 1.08 · -0.025em

Before the megaprojects began

Page titles (hub, index, about; articles without a lead image, in SemiBold) and homepage statements.

Display M

text-display-md

Poppins Bold · 24 to 34px · lh 1.15 · -0.02em

Before the megaprojects

Section titles inside a page.

Figure L

text-figure-lg

Poppins Bold · 40 to 60px · lh 1 · -0.035em

€30bn+ 5 GW 1.4 GW

Headline numbers on boards and bands. Stat cards keep their own 2.6rem figure.

Heading S

text-xl

Poppins SemiBold · 20px

EU AI Gigafactories

Card and figure titles.

Body large

text-lg

Inter Regular · 18px

Gigawatt campuses, sovereign compute and data centres in orbit.

Deks and intros. On the cover it steps up to text-xl.

Body

text-base

Inter Regular · 16px

We track the money, the megawatts and the physics behind the race.

Running text in UI. Article bodies read larger: 18px at 1.8 line height (prose-lg plus .story), with a 21px opening lede and numbered section heads.

Eyebrow / label

alt-label

Inter SemiBold · 10px · uppercase · 0.22em

Alt. 2,917 m · The Summit

Kickers, metadata, overlay labels.

Rules

  • One token per role. A heading is font-display + a display token + a weight; if a size is missing, add a token here and in globals.css rather than a one-off clamp().
  • One Display XL per site. Everything else on the homepage, including big statements, steps down to Display L so the cover keeps its weight.
  • Never more than two display sizes in one viewport: a statement plus figures, or a title plus section titles.
  • Tight leading is earned by size: below Display L, use the token's line height, never leading-none on multi-line headings.
  • Figures are tabular and set in Figure L; let the unit ride along (5 GW, €30bn+) rather than shrinking it.
  • In stories, data sits on night plates, like the homepage scale band: white figures, at most one pink accent per plate, no gradient text and no drop shadows.

05Covers

Every page opens on a cover

Three covers share one grammar: an altitude eyebrow, a big title on night, and a place shown on the right. The homepage gets a photograph, a story gets its lead image, every other page gets a page cover.

The homepage cover

A full-viewport photograph with the masthead set over it, and a vector overlay curated for every lead story: blips pinned to facts, traces for flows, brackets around the subject.

Alt. 2,917 m · Megaprojects of the intelligence age

The biggest bets
on intelligence.

Live specimen of the current cover (“Seven Bets on a Budget Nobody Has Passed”), scaled down. Data in src/lib/covers.ts, overlay in cover-overlay.tsx.

Image

  • One cover per lead story. The subject is that story's megaproject, shown at awe scale: aerial, very high, blue hour or dusk, with tiny trucks or people for scale.
  • Brand light lives in the scene (magenta and indigo glow in the subject), so the photo needs no tinting in CSS.
  • The composition reserves the type: the left half and the floor fall into shadow and haze. The subject sits right and up.
  • Always two crops: a 16:9 wide for md and up, and a 9:16 portrait for phones that puts the subject in the top third.

Type

  • The headline is the masthead line in Display XL, two lines. The second line is a photo window: the cover image seen through the letters, tinted pink, with a 1px blush outline (.cover-window; solid #f6c9e8 where unsupported). The words stay the same across covers; the image, the window and the overlay change with each cover.
  • Eyebrow, one-sentence intro (text-xl, at most about 30 words), two CTAs at most, and a floor line with the cover's "Now tracking".
  • Legibility comes from three night gradients (left, floor, top), never from dimming the whole photo.

Overlay

  • Blips pin a fact to a place. Traces show a flow: power, data, money, launches. Corner brackets frame the subject. Nothing else.
  • Every label is a number from the lead story, and must appear in the article with its source. No decorative statistics.
  • At most 4 labels, about 5 bare sparks and 1 or 2 traces. Nothing sits behind the headline, the intro or the CTAs.
  • Labels render from lg up and flip sides automatically near the edge; tablets get blips and traces only; phones get the photo only.

Motion

  • The photo settles in with a slow 9s zoom and a gentle parallax; the overlay shares both, so it stays pinned.
  • Type rises in a short stagger; labels fade in after it, one by one. Blips pulse on a 3.2s cycle with offset delays.
  • Under prefers-reduced-motion everything is static and fully visible.

The photo window

The cover headline's second line shows the cover photograph through the letters, tinted pink, with a 1px blush outline. Solid blush where background-clip: text is unsupported.

on intelligence.

.cover-window · --window-wide / --window-tall

The page cover

Index and section pages: Analysis, Signals, topics, About and this guide. Same night, same eyebrow, a framed place plate on the right.

Alt. 2,400 mThe Ascent

Analysis

The megaprojects of the intelligence age, and the money and power behind them.

LatestThe floor line carries one live fact
  • Every index and section page opens on a page cover: Analysis, Signals, topics, About, this guide. The homepage keeps the photographic cover; stories with a lead image get the story cover.
  • Left: an altitude eyebrow (Alt. 2,650 m, a hairline, a pink label), a Display L title and one dek. Right, from md up: a framed plate held by the cover's corner brackets.
  • The plate is a place pattern, never decoration: a dot-matrix map when the page is about where, a wireframe facility when it is about what is being built.
  • A floor line under a hairline closes the cover: one live fact (the latest signal, a count) and at most one link.
  • The header floats transparent over the cover and settles into a dark frosted bar on scroll. Component: PageCover in src/components/site/page-cover.tsx.

Curating a new homepage cover

  1. 01Generate the wide and portrait images with the cover prompt; reject any with invented text or a busy left half.
  2. 02Export the five sizes into /public/images/home/ (or a per-story folder). Production serves files as-is, so the sizes matter.
  3. 03Lay a numbered grid over the wide image and pick points for the blips, traces and frame. Coordinates are fractions of the image (0 to 1).
  4. 04Add an entry to COVERS in src/lib/covers.ts, keyed by the lead article's slug, with its Now tracking line. Stories without one fall back to the default cover.
  5. 05Check at 1280x720, 1440x900, 1920x1080 and a 390px phone: no label behind type, none clipped, none touching a CTA.

06Place patterns

Show the place, not a picture of it

Three patterns came out of the scale card exploration. Each one answers a different question: where it is, what is being built, and who is bidding.

Dot-matrix maps · where

The cover's blips at card scale: every megaproject opens on a hex dot map of where it is being built.

EU AI Gigafactories

Stargate

China's national AI computing network

  • Every megaproject card opens on a place plate: a hex dot-matrix map of where it is. The plate keeps a 400 by 176 ratio and sits above the figure, never behind text.
  • Four dot tones only: faint white for context land, bright white for the project's country, pink for the story's highlight, faint pink for its runner-up. Add a legend whenever pink appears.
  • Pin sites with the cover blip. One labelled pin per card (the site that matters), small quiet pins for the rest, a hollow ring for announced but uncommitted.
  • Crop to the story, not the continent: fit the bounding box to the sites and let it bleed off the plate when that reads better.
  • Off-world projects get the globe with orbits. The motion stays slow; the satellites are the only thing that travels.
  • Data lives with the project in src/lib/megaprojects.ts (map field). Dots are computed on the server at build time; no map code ships to the browser.

Wireframe facilities · what

An isometric line drawing of the site itself. Used on the page covers of Analysis and the topics.

Stargate, Abilene

Meta Hyperion

Mistral, Fouju

China's compute hubs

EU AI Gigafactories

Orbital data centres

Standing Going up or on paper Power coming in
  • An isometric line drawing of the facility itself: halls, plots, pylons, cables, cranes, cooling towers. Built from primitives in src/lib/wireframe.ts, one scene per megaproject.
  • Solid white lines are standing. Dashed pink lines are going up or still on paper. A flowing pink current is power coming in. Nothing else carries colour.
  • One cover blip marks the part that matters: the hall going up, the largest site, the satellite.
  • Use it to say what is being built (topic covers, Analysis). For where, use the dot-matrix map.

Flags · who

Only where nationality is the story, as on the gigafactory bidder board.

  • ES·PTNamed

    Spain + Portugal

  • DEForming

    Germany

  • NLOut

    Netherlands

  • Flags only where nationality is the story: the bidder board, a national race. Never on a project card, which is about a place, not a country.
  • A crisp chip (19 by 14, 3px radius, 1px white hairline) beside the country code, plus a soft wash in the corner: 16% opacity, desaturated, blurred and masked to a radial fade.
  • Out of the race means greyscale, chip and wash.
  • Files are self-hosted from flag-icons (MIT) in /public/images/flags; add a country by copying its 4x3 SVG.

Blips, live dots and brackets

The small marks that tie every pattern together.

Blip
Announced
Live
Brackets
  • The cover blip: a white core in a pink glow, breathing on a 3.2s cycle with a sonar ring. It pins a fact to a place, on covers and maps alike.
  • Small pins for secondary sites; a hollow pink ring for announced but uncommitted.
  • The live dot (a small magenta dot with a pulse) means now: the newest signal, the tracker eyebrow, the briefing.
  • Corner brackets frame a subject or a plate. Four 16px corners at 35% white; never a full box.

07The story page

The story page

Like the cover, a little less bold and far more readable: a story is something you settle into.

Standfirst · Our take

Our take

The gigafactories are the right idea at the wrong speed.

Section head

01

What Brussels is actually buying

The call opened on 30 July. Four medium sites, three large ones, and a budget nobody has passed.

  • Gigafactories

    7

    up to, in at least 7 member states

  • EU money committed

    €1bn

    of a €5bn EU share

  • Largest sites

    100k

    H100-equivalents

  • EU capex cap

    17%

    of a site's IT spend

Night data plate: white figures, one pink accent, no gradient text, no shadows.

  • A story with a lead image opens on its cover: the photo full bleed under night gradients, the title in Display Story, a hub and type eyebrow, a byline floor line.
  • Our Take is a standfirst, not a box: a small label, a magenta rule on the left, the verdict in a larger weight. No border, no shadow.
  • Body text at 18px with 1.8 line height in a 44rem column; a 21px opening lede; numbered section heads (01, 02) in pink; paragraphs of two or three sentences.
  • Data sits on night plates that break out of the column: white figures, at most one pink accent per plate, no gradient text, no shadows.

08Components

Components

The few pieces everything is built from.

Megaproject card

Place plate, headline figure, name, and a status line pinned to the floor. Compact on the homepage, detailed on the tracker.

Links

One colour, two behaviours. Hover either one below.

Standalone link

All signals

Always magenta. On hover the colour holds; an underline draws in from the left and the arrow nudges forward (backward for a back link). A card with .group triggers it too.

<Link className="link">All signals <span className="link-arrow">→</span></Link>

Link in running text

Read the tender notice in full.

Magenta with a faint magenta underline that turns solid and heavier on hover. Applied by .story and .prose-links, so prose never needs per-link classes.

<div className="prose prose-links">…</div>

Buttons

Pills only. Magenta for the one action that matters, white on a photograph, a hairline ghost for the second choice.

Join the communityRead the lead story See the full tracker →

Header

Transparent with white type over a cover, then a dark frosted bar once the page scrolls. Light pages keep a light frosted bar. Megaprojects, Analysis, Signals, About; search; Join.

Join

The scrolled bar on a dark page: rgba(7, 6, 26, 0.94) with a 14px backdrop blur.

09Imagery

Imagery

Images are generated, not stocked, with one locked prompt per use so everything reads as the same hand.

Cover photographs

Photographic, dark and from very high up. Generated with google/nano-banana-pro (Replicate · 16:9 at 4K for the wide crop, 9:16 at 2K for the portrait crop · jpg).

Cinematic photorealistic aerial photograph, shot from very high altitude at blue hour: {MEGAPROJECT SCENE}. {SCALE CUES}. Rooftop seams, roads or structures glow with deep magenta (#cc3399) and indigo (#4831b0) light. Atmospheric haze, volumetric light, epic sense of scale, ultra-detailed, wide-angle, dark moody sky. The left half and bottom of the frame fall into deep shadow and haze so large white text can sit on top. No text, no letters, no logos, no watermarks.

For the portrait crop, add "vertical composition", move the hero element (peak, tower, launch pad) to the upper middle, and let the bottom half fall into shadow.

Card artwork

Light line art for cards on light pages. Only {SUBJECT} changes; stored in /public/images/hubs/{slug}.jpg.

AI background artwork
AI
Green Tech background artwork
Green Tech
Data Engineering background artwork
Data Engineering
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.

10Voice

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

“Europe has put up to seven gigafactories out to tender. Only €1 billion of the money is legally committed.”

Don't

“This game-changing, revolutionary breakthrough will disrupt everything.”

11Downloads

Assets

Vector files for every variant. More raster sizes live in /public/brand.

Logo, on light (SVG)Logo, on dark (SVG)Logo, all white (SVG)Wordmark, on light (SVG)Wordmark, on dark (SVG)Mark, color (SVG)Mark, white (SVG)

12Explorations

Design explorations

Standalone studies used to pick designs before they ship. Working artifacts, not production pages; they open in a new tab.

"Our Take" boxSeven design directions for the opinion callout that opens each analysis. Winner: the pull-quote.Stack company cardsSeven treatments for the AI Stack explorer's company cards: split bands, overlap seams, ghost watermarks, logo-color plates, and a dark specimen plate. Winner: the ghost watermark.Cover headlineSeven textures for the cover's second line: halftone, blip tittles, contours, scanlines, a flowing current and a photo window. Winner: the photo window.Scale band cardsThree ways to give each megaproject a place: dot-matrix maps, flags and wireframe facilities. Winner: the dot-matrix map.

13Archive

Before the megaprojects

The first edition's devices: gradient numbers, contour cards and the gradient family. Archived pieces still use them, so they stay documented here. Don't use them in new work.

R1 vs o1 · MATH-500
97.3%
o1: 96.4
R1 vs o1 · AIME 2024
79.8%
o1: 79.2
AIME 2024 · open vs closed+0.6
DeepSeek R1 · open79.8
OpenAI o1 · closed79.2
Deep DiveAI

China's Open Gambit: Why Its AI Labs Give Away What America Sells

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.

Olympia Tech · 10 min

Ember.grad-ember

Aurora.grad-aurora

Deep.grad-deep

Eclipse.grad-eclipse