Design System
A catalog of the fonts, colors, and styles available in this project.
The app defaults to light theme; use the toggle to preview dark tokens on this page.
Button
Variants
Sizes (text buttons)
Sizes (icon-only)
With icon (spacing)
Disabled
Rounded full
As child
Invalid
Badge
Card
Examples use size="sm" for compact spacing.
Default
Main body copy goes in CardContent. Keep hierarchy clear with the header above.
Stacked actions
Put full-width actions in CardFooter with a column layout and w-full on each control.
Secondary text or details before the user chooses an action.
With form fields
Use FieldGroup inside CardContent with FieldLabel on top, placeholder / rightLabel on Input, and innerLabel on Textarea. Wrap a control in Field with data-invalid, FieldDescription, and FieldError when validating. Actions stay in CardFooter; the submit button uses the form attribute to target the form in content. Wider max-w-md fits several text areas.
Image
The card removes top padding when the first child is an image and rounds top corners on the media.
Input
Field + floating placeholder
Put the visible label in FieldLabel above the control. Use placeholder on Input for the in-field hint that moves to the right when filled (or rightLabel when set). Use FieldDescription below the control and FieldError last. Prefixes and icons beside the field live in InputGroup — see Text and Icon — with floating placeholder on this page's Input Group section.
Basic — FieldLabel only
With rightLabel
With hint
File upload
Disabled
Invalid — FieldDescription and FieldError below control
We will never share your email.
Dynamic error — invalid on 2+ characters
Shown on your public profile.
Floating form (group)
Field group — description + error per field; last row has error only (no description)
Must match your ID.
Shown everywhere else.
Textarea
innerLabel and hint stay in a static row above the field. Only placeholder uses motion (blur / slide) when the field goes empty or filled; there is no in-field right label. Native placeholder is hidden while the animated empty-state line shows. Add FieldLabel above when you need an external form label.
Basic
With hint and maxLength
Disabled
Input Group
Addons, icons, and actions beside inputs. Place InputGroupAddon after InputGroupInput or InputGroupTextarea in the DOM; use align for visual position and correct focus handling.
Overview
Icon — with floating placeholder
Text
Button
Kbd
Dropdown
Spinner
Switch
Toggle control built on Radix Switch. API reference: Radix docs.
Choice card
FieldLabel wraps the whole Field so the card is clickable; link label and switch with htmlFor / id. Use Field orientation="horizontal" for a single-row layout — add an inline muted span for an optional secondary descriptor, or wrap in FieldContent to place it on a second line.
Size
Use size="sm" or size="default".
Typography
Sans Serif (Geist Sans)
Heading 1
text-4xl font-medium
Heading 2
text-3xl font-medium
Heading 3
text-2xl font-medium
Heading 4
text-xl font-medium
Regular body text. The quick brown fox jumps over the lazy dog.
text-base
Small text for supplementary information.
text-sm text-muted-foreground
Monospace (Geist Mono)
const function = () => {}
text-2xl
pnpm install @rivalhawk/core
text-lg
0123456789 !@#$%^&*()
text-sm
Heading (font-heading)
Same family as sans today
font-heading text-2xl font-medium
Colors
Base
Background
background
Default page canvas and main app surface.
Foreground
foreground
Primary text, icons, and strong UI ink on background.
Card
card
Raised blocks: cards, tiles, and grouped content.
Popover
popover
Floating layers: menus, popovers, autocomplete panels.
Brand & Status
Primary
primary
Main CTAs, key links, and brand emphasis.
Secondary
secondary
Secondary actions and quieter filled controls.
Muted
muted
Subtle fills: table stripes, skeletons, low-priority areas.
Accent
accent
Hover and selection on lists, rows, and interactive surfaces.
Destructive
destructive
Errors, delete, and irreversible or dangerous actions.
UI Elements
Border
border
Default dividers and 1px outlines on neutral UI.
Input
input
Inputs, triggers, and fields that share a field chrome.
Ring
ring
Focus rings and keyboard focus visibility (with offset).
Sidebar
Sidebar
sidebar
App sidebar shell behind navigation and tools.
Sidebar Primary
sidebar-primary
Active section, logo mark, or primary nav emphasis.
Sidebar Accent
sidebar-accent
Hovered or selected items inside the sidebar.
Sidebar Border
sidebar-border
Separators between sidebar regions and the main pane.
Sidebar Ring
sidebar-ring
Focus ring color when focus moves inside the sidebar.
Charts
chart-1
First data series or primary metric in charts.
chart-2
Second series; comparisons and paired metrics.
chart-3
Third series; breakdowns and extra dimensions.
chart-4
Fourth series; use when you need more distinct lines or bars.
chart-5
Fifth series; legends and small multiples.
Border Radius
Base token --radius (0.625rem) maps to rounded-lg. Smaller steps use 0.6× and 0.8×; larger steps use 1.4× through 2.6×, matching shadcn theming. rounded-full is separate (not derived from --radius).
sm
md
lg
xl
2xl
3xl
4xl
full