Dashboard

Design System

Beehive

Design System

A comprehensive overview of our UI components and styles.

Colors

Functional Colors

These are the semantic variables used throughout the application components.

--color-primary
--color-secondary
--color-neutral
--color-error

Layer Colors

Background colors for different elevation levels.

--layer-0
--layer-1
--layer-2

Internal Palette Scale

The raw shades used to build semantic colors.

Primary

p-50
p-100
p-200
p-300
p-400
p-500
p-600
p-700
p-800
p-900

Secondary

s-50
s-100
s-200
s-300
s-400
s-500
s-600
s-700
s-800
s-900

Neutral

n-50
n-100
n-200
n-300
n-400
n-500
n-600
n-700
n-800
n-900

Typography

<Headline level=1/>

Headline L1

<Headline level=2/>

Headline L2

<Paragraph />

Paragraph text for long-form content and descriptions.

<Paragraph fontSize="0.875rem" fontWeight=600 />

Custom Paragraph Styling

Cards

Layer 0 Card

Standard card used for most content blocks.

Layer 1 Card

Slightly darker background, ideal for nesting or contrast.

Buttons

Form Controls

This is a helper message.
Something went wrong!

Badges

PrimarySecondaryNeutral

Modals

Modals are overlay components for focused tasks or information.