Components

Buttons

Three button variants cover the majority of interface needs. Use Primary for the main call to action, Secondary for alternatives, and Ghost for low-emphasis actions.

Button
Primary: background-color: var(--accent); color: #fff
Secondary: background-color: var(--surface-0); border: 1px solid var(--border-default)
Ghost: background: transparent; color: var(--accent-text)

Text Input

A standard text input with a focus ring that matches the accent color. Pair with labels placed above the field.

Input
border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px

Badges

Badges communicate status or category. Five semantic variants are provided.

Default Accent Success Warning Danger
Badge
padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600

Avatar

A circular placeholder for user identity. Falls back to initials when no image is available.

AB CD EF GH
Avatar
width: 40px; height: 40px; border-radius: 50%; font-size: 13px; font-weight: 700

Card

A contained surface for grouping related information. Cards use a subtle border and minimal shadow.

Card Title
A brief description of the content that this card represents in the interface.
Card
background: var(--surface-0); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg)

Spacing Scale

Consistent spacing keeps layouts harmonious. All values are multiples of 4px.

Token Value Visual
--space-xs 4px <span style="display:inline-block;width:4px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>
--space-sm 8px <span style="display:inline-block;width:8px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>
--space-md 16px <span style="display:inline-block;width:16px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>
--space-lg 24px <span style="display:inline-block;width:24px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>
--space-xl 32px <span style="display:inline-block;width:32px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>
--space-2xl 48px <span style="display:inline-block;width:48px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>
--space-3xl 64px <span style="display:inline-block;width:64px;height:16px;background:#364fc7;border-radius:2px;vertical-align:middle;"></span>

Border Radius

Token Value Preview
--radius-sm 4px <span style="display:inline-block;width:32px;height:32px;background:var(--surface-2);border:1px solid #dee2e6;border-radius:4px;vertical-align:middle;"></span>
--radius-md 6px <span style="display:inline-block;width:32px;height:32px;background:var(--surface-2);border:1px solid #dee2e6;border-radius:6px;vertical-align:middle;"></span>
--radius-lg 8px <span style="display:inline-block;width:32px;height:32px;background:var(--surface-2);border:1px solid #dee2e6;border-radius:8px;vertical-align:middle;"></span>