Theme

The theme is the foundation of Kickresume UI — install it first. It maps the canonical brand tokens and self-hosted webfonts onto shadcn's semantic CSS variables. Every value below is resolved live from the installed theme, so this page always shows exactly what ships.

npx shadcn@latest add @kickresume/theme

Colors

Brand

Coral --kr-primary is reserved for primary CTAs, inline text links, and error states — never icons, badges, or decoration. It has its own hover, pressed, and disabled states; the tints carry soft brand backgrounds.

Button states

Each button family (White, Dark Blue, Gradient) carries its own state palette. --kr-hover is the single hover-accent color for non-CTA elements — links, nav items, outline fills, and arrows.

Neutrals

A deliberately small six-tone grey scale — the only greys in the system — plus the app background. Legacy --kr-gray-* names still resolve as aliases of the nearest canonical tone.

Extended palette

Supporting accents with no fixed role: the Royal Blue set, greens, star yellow, and the soft beige. Off-palette legacy names (--kr-marketplace-*, --kr-tools-*, …) remain available as aliases.

Premium

The premium stops feed the AI / upgrade gradients — the only gradients that ship system-wide, reserved for premium surfaces.

Semantic mapping

The shadcn contract (--primary, --background, --border, …) maps directly onto the tokens above, so stock shadcn composition renders on-brand without changes. The --sidebar-* set mirrors the main surface values. Kickresume UI ships a single light theme; there is no dark mode.

Typography

Body and UI text use Graphik Web (--font-sans); display headings use Henk-Work (--font-serif / --font-heading), with an italic face for editorial use. All faces are self-hosted and loaded by the theme, and b / strong map to weight 500 — bold emphasis renders as Graphik Medium, not 700.

The exact scale is available through --kr-fs-*, --kr-lh-*, and --kr-tracking-*. See Typography for rendered specimens, and prefer semantic component classes and these tokens over raw font values.

Radii

Every step in the scale has a fixed role — noted under each sample below — and maps onto Tailwind's radius utilities.

Elevation

Four tiers, from a plain hairline border to modal shadows, plus the purple glows reserved for the premium CTA. Cards gain --kr-shadow-dropdown on hover — no positional lift.

Focus indicators are box-shadow rings on the element itself:

Spacing

The spacing tokens follow a 4-based progression (--kr-space-1 through --kr-space-10).

Component tokens

Dimensions baked into specific components: