Dev
Typography, colours, and components. Press d to toggle dark mode.
text-3xl · 110px · display
Display
text-2xl · 68px · page heading
Page Heading
text-xl · 42px · section heading
Section Heading
text-lg · 26px · sub-heading
Sub-heading
text-base · 16px · body
Body text. Senior Experience Consultant at IBM with over six years of experience designing digital enterprise products.
text-sm · 13px · secondary
Secondary / meta text. Used for subtitles, captions, and supporting information.
text-xs · 10px · label
Section Label · All Caps
Neutrals
background
Page and panel backgrounds
foreground
Default text and icon colour
muted
Subtle fill for inactive areas
muted-foreground
De-emphasised text, captions, labels
secondary
Secondary button and tag backgrounds
secondary-foreground
Text on secondary surfaces
border
Dividers, input outlines, card edges
popover
Dropdown and floating panel backgrounds
Brand — Orange
primary
Main action colour; filled buttons, active states
primary-foreground
Text and icons placed on primary surfaces
accent
Hover and selected state backgrounds
accent-foreground
Text and icons placed on accent surfaces
Status
info
Informational signal; icons, text, borders
info-surface
Background for info banners and badges
warning
Warning signal; icons, text, borders
warning-surface
Background for warning banners and badges
success
Positive/success signal; icons, text, borders
success-surface
Background for success banners and badges
destructive
Errors, deletions, and irreversible actions
The ring appears on any interactive element when navigated to via keyboard (Tab key). It uses --ring at 50% opacity. The examples below simulate a focused state so you can verify the colour without tabbing.
button:focus
input:focus
badge:focus
Separator (shadcn)
divide-y · list dividers
Incorrect password. Try again.
Senior User Experience Consultant
09/2025 – present
IBM, Hamburg
After Sales Portal
2024 · UX Design, Automotive
Master Thesis
2022 · Research, Open Source