The School of Tuna

Styleguide

Every component in the theme, in every variant and state. If something here looks wrong, the token is wrong — components address roles, never colours.

01Palette

The ten literals, registered as utilities.

moss
vellum
ghost
foam
lichen
pewter
acid
green
red
grey

The roles components actually address, including the three the shadcn set does not cover.

background
foreground
card
primary
primary-foreground
secondary
muted
muted-foreground
destructive
border
input
ring
surface-raised
accent-ink
destructive-ink
chart-1
chart-2
chart-3
chart-4
chart-5

02Typography

Make Tuna’s curiosity walkable

Body copy runs large in Manrope, at text-lg, with room to breathe.

IBM Plex Mono — labels, tags, eyebrows, data

That is UI and landing type. Long-form type is not specified yet — measure, prose leading, in-article hierarchy, quotes, lists and captions are all undecided. The reading specimen sets a whole issue in provisional values so they can be judged as reading rather than as numbers.

03Buttons

size=sm

size=default

size=lg

icon sizes

04Inputs and fields

05Alerts

Notice

The acid notice, for anything worth stopping on.

Subscribed

Check your inbox to confirm.

That did not send

Error copy uses accent ink, not the surface hue.

06Cards

Expedition 01

Cities that shouldn’t work, but do.

A card sits on the raised surface, the top of the ladder.

The Library

Locked until Phase 1.

Dashed borders mark anything not yet built.

07Tables

Email	Source	Confirmed
explorer@example.com	quiz	yes
reader@example.com	newsletter	no