Design System v1.0

JellyCat Dream Lab Game

A soft, floral-inspired UI system built for warm, playful digital experiences. Muted purples, generous radii, and expressive type.

Colors

6 palettes

Primary — Purple Mauve

50
#f7f2f8
100
#eeddf0
200
#ddbfe0
300
#c9a0cc
400
#b388b5
500 ★
#9a729c
600
#835c85
700
#6b496d
800
#533755
900
#3c2640

Secondary — Sage Green

50
#eef4f3
100
#d8eae8
200
#bad5d2
300
#97bdb9
400
#7aa89f
500 ★
#68938a
600
#537b73
700
#40615b
800
#2f4844
900
#1f302e
950
#142020
975
#0c1413

Secondary — Amber

50
#fff9f0
100
#fff1da
200
#ffe4b3
300
#ffd488
400
#ffc96a
500 ★
#ffc26d
600
#e8a748
700
#c48831
800
#9e6b21
900
#764f14
950
#52360b
975
#321f05

Tertiary — Periwinkle Blue

50
#f0f4fc
100
#dce8f8
200
#c4d9f2
300
#a9c5eb
400
#94b6e7
500 ★
#83a8e2
600
#6289c8
700
#4a6dad
800
#355290
900
#223870
950
#152550
975
#0c1632

Semantic

Error
#ff8175
Error Surface
#ffd5d1
Error BG
#fff1ef
Success
#40615b
Success Surface
#bad5d2
Success BG
#eef4f3
Warning
#c48831
Warning Surface
#ffe4b3
Warning BG
#fff9f0
Info
#2c4e8a
Info Surface
#cddcf7
Info BG
#eef4ff

Neutral

BG
#fafafa
BG Secondary
#f5f5f5
Gray 200
#e8e8e8
Gray 400
#d4d4d4
Gray 600
#808080
Gray 800
#2b2b2b
Text Primary
#1a1a1a

Typography

Cormorant Garamond + Lato

heading-1 · Cormorant Garamond Bold · 40px

The quick brown fox

heading-2 · Cormorant Garamond Bold · 32px

The quick brown fox jumps

heading-3 · Cormorant Garamond Bold · 24px

The quick brown fox jumps over

heading-4 · Cormorant Garamond Medium · 18px

The quick brown fox jumps over the lazy dog

body-lg · Lato Regular · 16px

The quick brown fox jumps over the lazy dog. Soft, warm, and inviting.

body · Lato Regular · 14px

The quick brown fox jumps over the lazy dog. Perfect for paragraph text and descriptions.

body-sm · Lato Regular · 12px · secondary color

The quick brown fox jumps over the lazy dog. Used for captions and supporting text.

label · Lato Medium · 14px

Form label text

caption · Lato Regular · 10px

Caption text · metadata · timestamps

Spacing

8 steps
2
4
6
8
12
16
20
24
32
40
48
64

Buttons

4 variants · 3 sizes · 4 states
Default
Hover
Pressed
Disabled

Primary

SM
MD
LG

Secondary

SM
MD
LG

Ghost

SM
MD
LG

Danger

SM
MD
LG

Badges

5 variants · 2 sizes

Small

Neutral Success Warning Error Info

Medium

Neutral Success Warning Error Info

Chips

3 variants · 2 sizes

Small

Medium

Interactive example — click to toggle

Cards

4 variants

Default Card

Card description goes here. Uses muted floral palette tokens.

Hover State

This card is in its elevated hover state with a stronger shadow.

Pressed State

A subtle background shift indicates the pressed / active card state.

Card — Mobile

1 variant · w/ button

Card Title

Card description goes here. Uses muted floral palette tokens.

Card — Visual Design

3 variants

Dreamy Purple

A whimsical blend of lavender and violet, perfect for enchanting evenings and magical moments.

Product image placeholder

Warm Amber

Sun-kissed hues of golden amber and tangerine, radiating warmth and playful energy.

Product image placeholder

Ocean Teal

Refreshing tones of emerald and ocean blue, evoking calm seas and lush tropical escapes.

Product image placeholder

Inputs

3 sizes · 4 states
Default
Focus
Error
Disabled

Select & Textarea

Alerts & Toasts

4 variants

Info

This is an alert message describing something the user should know.

Success

This is an alert message describing something the user should know.

Warning

This is an alert message describing something the user should know.

Error

This is an alert message describing something the user should know.

Tabs

3 variants

Default

Pill

Underline

Form Controls

Checkbox · Radio · Switch

Checkbox

Radio

Switch

Feedback

Skeleton · Modal

Skeleton — Text variant

Skeleton — Avatar variant

Skeleton — Card variant

Modal — Small (360px)

Modal Title

Modal content goes here. Add your description or form elements.

Modal — Medium (480px)

Modal Title

Modal content goes here. Add your description or form elements.