Design System

Three Brands.
One Story.

The same narrative about AI and the future of work — told through three completely different visual identities. Each brand makes a different argument about tone, audience, and meaning.

Currently active:SHIFT.
✓ Currently active
Theme 01
AI & The Future of WorkSHIFT.AI & The Future of Work

SHIFT.

AI & The Future of Work

AI is not coming — it's already here. The name "SHIFT." is a definitive statement, not a question. The period ends the debate. The gradient from indigo (Jere's traditional world) through purple and into teal (Maiju's AI-enabled future) is the visual metaphor: the gradient itself IS the shift happening between the two.

PaletteIndigo → Purple → Teal on deep slate
TypographyGeist Sans — clean, modern, Vercel-era
ToneConfident, forward-looking, no hedging
LanguageEnglish — international by design

Best for

LinkedIn posts, international audiences, video thumbnails, conference decks

✦ Design note

The gradient direction is intentional: left-to-right reads as time moving forward. Indigo = past, teal = future.

Theme 02
🇫🇮 Tekoäly & työn tulevais…Korvataanko?Tekoäly ja työn tulevaisuus

Korvataanko?

Tekoäly ja työn tulevaisuus

Finnish has a word that English doesn't. "Korvata" means both "to replace" and "to compensate." "Korvataanko?" — will we be replaced? Will we be compensated? One word, two existential questions, zero comfortable answers. The warm amber palette was chosen to feel human and close, not corporate and cold. This isn't a tech announcement — it's a conversation.

PaletteAmber → Orange → Rose on warm stone-black
TypographyGeist Sans — same font, warmer soul
ToneConversational, slightly ironic, Finnish-direct
LanguageFinnish first — authentic to the story's origin

Best for

Finnish social media, talks to Finnish audiences, personal brand content

✦ Design note

The story was originally inspired by a Finnish LinkedIn post by Juhani Mykkänen. "Korvataanko?" brings it home.

Theme 03
LOMAKE A-247
Nro 2024-AI-001KORVATAANKO?Lomake A-247 · Vakuutusvirasto

KORVATAANKO?

Lomake A-247 · Vakuutusvirasto

What if the insurance company issued an official form about the AI disruption of its own workforce? LOMAKE A-247/2024 — VAHINGONKORVAUSILMOITUS. Jere works for an insurance company. Now he needs to file a claim against his own displacement. The joke writes itself. The monospace font, form grid background, "KÄSITTELYSSÄ" watermark, and fine print (*"Vakuutusyhtiö ei vastaa mahdollisista ammatin katoamisista"*) are the punchline.

PaletteInstitutional blue + cream paper on white
TypographyGeist Mono — typewriter, bureaucratic, official
DecorationsForm grid, diagonal watermark, form reference numbers
CTAsRed rubber stamp style, square corners, ALL CAPS

Best for

Conferences, humor-aware audiences, creative industry talks, viral Finnish content

✦ Design note

The fine print says: "The insurance company is not responsible for possible job losses. See general terms section 7.3: Automation."

Under the Hood

Built with a live theme engine

Switching themes isn't just a colour swap — the brand name, tagline, badge content, button style, typography flavour, and even decorative elements all change simultaneously. Option C adds a form grid background, diagonal watermark, monospace type, and fine print that's specific to the insurance narrative. All transitions are 500–700ms CSS so the change feels intentional on camera.

3
Themes
20+
Design tokens per theme
~100
Lines of TypeScript

// lib/themes.ts — each theme is just a typed object

const themes: Record<ThemeId, SiteTheme> = {

shift: { brandName: "SHIFT.", heroBg: "from-slate-900...", ... },

'korvataanko-a': { brandName: "Korvataanko?", heroBg: "from-stone-900...", ... },

'korvataanko-c': { brandName: "KORVATAANKO?", heroIsLight: true, ... },

}

Choose Theme

Three brands. One story.