Technical reference

Styleguide

The visual foundations used across therkiller.dev. Every example runs inside the production layout and follows the active color mode.

Typography

Lato is the interface typeface. Roboto Slab adds a more editorial voice to long-form content.

Sans serif

Lato

Interface, navigation, and headings

Light300

Sphinx of black quartz, judge my vow.

Regular400

Sphinx of black quartz, judge my vow.

Bold700

Sphinx of black quartz, judge my vow.

Slab serif

Roboto Slab

Articles and editorial emphasis

Light300

Sphinx of black quartz, judge my vow.

Regular400

Sphinx of black quartz, judge my vow.

Bold700

Sphinx of black quartz, judge my vow.

Colors

Semantic tokens adapt to the selected theme. The primary scale provides the underlying brand colors.

Semantic palette

background

bg-background

Light

#f7f5f2

Dark

#0b0d12
surface

bg-surface

Light

#ffffff

Dark

#151923
foreground

text-foreground

Light

#17181c

Dark

#f3f5f7
muted

text-muted

Light

#636873

Dark

#a8b0bb
border

border-border

Light

#d8d4cc

Dark

#2c3340
accent

text-accent

Light

#0b6570

Dark

#54bdc8
accent-hover

hover:text-accent-hover

Light

#084c54

Dark

#80d3dc
accent-contrast

text-accent-contrast

Light

#ffffff

Dark

#0b0d12

Primary scale

primary-400

#54bdc8

primary-500

#238c97

primary-600

#136289

primary-700

#0c4368

primary-800

#06314c

primary-900

#041f30

Buttons

Buttons share a minimum touch target, rounded shape, semantic colors, and the global visible focus treatment.

Component
BaseButton
Variants
primary, secondary, quiet, icon
Native states
hover, focus-visible, disabled
Default type
button