Skip to content
← Back to home

Design system

Built on shadcn/ui (Base UI) and Tailwind CSS v4. Each theme is a set of tokens, so every component below renders in Dark Mode, MS-DOS and Codecademy side by side.

Colors

Semantic tokens. Components only ever reference these, never raw colors.

Dark Mode

  • background
  • foreground
  • foreground-secondary
  • card
  • primary
  • primary-foreground
  • muted-foreground
  • accent
  • cta
  • border
  • ring
  • destructive

MS-DOS

  • background
  • foreground
  • foreground-secondary
  • card
  • primary
  • primary-foreground
  • muted-foreground
  • accent
  • cta
  • border
  • ring
  • destructive

Codecademy

  • background
  • foreground
  • foreground-secondary
  • card
  • primary
  • primary-foreground
  • muted-foreground
  • accent
  • cta
  • border
  • ring
  • destructive

Typography

Dark Mode

Heading 1

Heading 2

Heading 3

Body copy in the secondary foreground color.

Muted helper text.

shawn@nas:/home $

MS-DOS

Heading 1

Heading 2

Heading 3

Body copy in the secondary foreground color.

Muted helper text.

shawn@nas:/home $

Codecademy

Heading 1

Heading 2

Heading 3

Body copy in the secondary foreground color.

Muted helper text.

shawn@nas:/home $

Radius & elevation

Radii scale from --radius, so MS-DOS is square everywhere.

Dark Mode

sm
md
lg
xl
2xl
raised
window

MS-DOS

sm
md
lg
xl
2xl
raised
window

Codecademy

sm
md
lg
xl
2xl
raised
window

Buttons

Dark Mode

LinkedInGitHubEmail

MS-DOS

LinkedInGitHubEmail

Codecademy

LinkedInGitHubEmail

Badges

Dark Mode

defaultsecondaryoutlinedestructiveproject tag

MS-DOS

defaultsecondaryoutlinedestructiveproject tag

Codecademy

defaultsecondaryoutlinedestructiveproject tag

Cards

Dark Mode

BNNVARA - Full-Stack Developer

Full-time at the Dutch public broadcaster since July 2024. I work on CoMa (MeMa, JoeJoe and Dino), Auth0, and Symfony microservices deployed with Terraform and FrankenPHP.

Card title
Plain shadcn card with header, content and footer.
Content area

MS-DOS

BNNVARA - Full-Stack Developer

Full-time at the Dutch public broadcaster since July 2024. I work on CoMa (MeMa, JoeJoe and Dino), Auth0, and Symfony microservices deployed with Terraform and FrankenPHP.

Card title
Plain shadcn card with header, content and footer.
Content area

Codecademy

BNNVARA - Full-Stack Developer

Full-time at the Dutch public broadcaster since July 2024. I work on CoMa (MeMa, JoeJoe and Dino), Auth0, and Symfony microservices deployed with Terraform and FrankenPHP.

Card title
Plain shadcn card with header, content and footer.
Content area

Toggle group

Same primitive as the theme switcher.

Dark Mode

MS-DOS

Codecademy

Terminal

Line variants, prompt with block cursor, window chrome and shortcuts.

Dark Mode

terminal

$ ls -la
about.txt uses.txt work/
Type 'help' for all commands, or pick one below.
command not found: sl
$
Tab
complete a path
↑↓
browse history
CtrlL
clear the screen
CtrlC
cancel the line
Esc
leave fullscreen

MS-DOS

terminal

$ ls -la
about.txt uses.txt work/
Type 'help' for all commands, or pick one below.
command not found: sl
$
Tab
complete a path
↑↓
browse history
CtrlL
clear the screen
CtrlC
cancel the line
Esc
leave fullscreen

Codecademy

terminal

$ ls -la
about.txt uses.txt work/
Type 'help' for all commands, or pick one below.
command not found: sl
$
Tab
complete a path
↑↓
browse history
CtrlL
clear the screen
CtrlC
cancel the line
Esc
leave fullscreen

Motion

Pick a speed to slow things down, or click a row to replay just that one. In the terminal, all of these respect prefers-reduced-motion.

Dark Mode

MS-DOS

Codecademy