Styleguide

Color Palette

Primary

50
100
200
300
400
500
600
700
800
900
950

Secondary

50
100
200
300
400
500
600
700
800
900
950

Tertiary

50
100
200
300
400
500
600
700
800
900
950

Success

50
100
200
300
400
500
600
700
800
900
950

Warning

50
100
200
300
400
500
600
700
800
900
950

Error

50
100
200
300
400
500
600
700
800
900
950

Surface

50
100
200
300
400
500
600
700
800
900
950

Typography

Heading 1 .h1
Heading 2 .h2
Heading 3 .h3
Heading 4 .h4
Heading 5 .h5
Heading 6 .h6

Regular paragraph text. The quick brown fox jumps over the lazy dog. This is what normal body copy looks like in our application.

Small muted text .text-sm .opacity-60

Monospace text — used for IDs, prices, and code .font-mono

Buttons

Filled

Tonal

Outlined

With Icons

Icon Buttons

Sizes

Form Elements

Cards

Outlined Card

Standard card with outline border. Used for content sections and forms.

Tonal Primary

Used for informational callouts and highlighted content.

Tonal Surface

Subtle background card for grouped content.

Success

Success messages and confirmations.

Warning

Warnings and important notices.

Error

Error messages and destructive action alerts.

Chips & Badges

Primary Secondary Tertiary CONFIRMED REVERSED REJECTED Surface

Table

NameGroupPrice
Coffee AmericanoBeverages$3.50
CroissantPastries$2.75
Avocado ToastFood$8.00

Spacing

Base spacing unit: 0.27rem. These are Tailwind multipliers.

1
1.1px
2
2.2px
3
3.2px
4
4.3px
5
5.4px
6
6.5px
8
8.6px
10
10.8px
12
13.0px
16
17.3px

Border Radius

rounded-sm
rounded
rounded-lg
rounded-xl
rounded-container
rounded-full