Style Guide

A living reference for the Alf vs Agent Smith design system.

Colors

--color-primary
--color-primary-light
--color-primary-dark
--color-secondary
--color-secondary-light
--color-secondary-dark
--color-bg
--color-surface

Typography

Heading 1 — The Matrix Has You

h1 — clamp(1.75rem, 1rem + 2vw, 3rem)

Heading 2 — Follow the White Rabbit

h2 — clamp(1.5rem, 1rem + 1.5vw, 2.25rem)

Heading 3 — Knock, Knock

h3 — clamp(1.25rem, 1rem + 1vw, 1.75rem)

Heading 4 — Wake Up

h4 — clamp(1.1rem, 0.9rem + 0.75vw, 1.4rem)

Body text — The quick brown fox jumps over the lazy dog. Font family: var(--font-mono), size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem).

body — monospace

Components

Buttons

Primary Button Secondary Button

Cards

Card Title

A card component with a subtle hover effect and green glow.

Another Card

Cards are used for fighter profiles, stats, and content blocks.

Stats

99
Power
87
Speed
76
Defense
92
Wit

Animations

Hover over the text below to see the glitch effect:

Glitch on Hover

Typing cursor