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 at weights 400, 500, 600, and 700. Display headings use Henk-Work at 400 or 700, with a 400 italic face for editorial use. All faces are self-hosted and loaded by the theme.

• --font-sans → "Graphik Web", …
• --font-serif / --font-heading → "Henk-Work", …
• H1–H3 → Henk-Work: 48/56, 32/40, and 28/32 with negative tracking.
• H4–H5 → Graphik Web 500: 24/28 and 18/24.
• Body → Graphik Web 400 at 16/24; helper text uses 14px and metadata 12px.
• Labels use Graphik Web 500 at 16px or 14px.
• b / strong map to weight 500, so 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

Buttons use the explicit 10px --kr-radius-btn; cards stick to the 6px default; modals and toasts round to the 20px --kr-radius-modal; larger editorial feature blocks step up to 16, 24, or 32px. The scale maps to 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: