Design System

Style Guide

The tokens, type and components that build Cyberpunk Alpaca.

Colour

--color-primary

--color-secondary

--color-complement

--color-surface

--color-surface-raised

--color-bg

Typography

Heading 1 — Space Grotesk

Heading 2 — Space Grotesk

Heading 3 — Space Grotesk

Body copy is set in Inter. The quick brown alpaca jacks into the grid and ports out before the ICE notices. Neon rain, chrome fur, questionable life choices.

Monospace — JetBrains Mono for code & data.

Wake up, alpaca. The grid has you.

Buttons

Primary Action Secondary Action

Cards

Card Title

Cards lift on hover and glow at the border. Use them for feature grids.

Another Card

Consistent spacing via the token scale keeps the rhythm tight.

Text Block

Editable Text Block

This is the rich-text component authors edit inline. The left rail and the blinking cursor after the heading are pure CSS flourishes.