Design system

UI Kit

Every reusable pattern used across the mini-site templates — buttons, alerts, modals, inputs, tags and more.

Composition

Page builder

HeroMenu / Products

Tokens

Colors

brand
oklch(0.585 0.235 27)
ink
oklch(0.16 0.02 260)
yellow
oklch(0.86 0.17 92)
success
oklch(0.68 0.17 150)
background
oklch(0.985 0.003 90)
card
#fff
border
oklch(0.92 0.008 90)
muted
oklch(0.5 0.02 260)

Type

Typography

Display 5xl · Alexandria

Heading 3xl

Heading xl

Body — IBM Plex Sans Arabic / Alexandria fallback.

Muted body copy for descriptions.

Eyebrow · overline

Actions

Buttons

Chips

Tags & badges

HotPopularNewDealOutlineSoft

Feedback

Alerts

Heads up
Delivery times may be longer than usual today.
Order confirmed
Your reservation was saved. Check your email.
Almost sold out
Only 2 seats left for this workshop.
Payment failed
Your card was declined. Try another method.

Forms

Inputs

Quantity:
1

Containers

Cards

Soft card

Neutral container with a soft shadow.

Dark card

Dark surface for accent sections.

Accent card

Bright accent for offers.

Navigation

Tabs

Content for overview.

Modals

Overlays

Disclosure

Accordion

What's included?

Free-form answer text goes here with details about the question.

Cancellation policy

Free-form answer text goes here with details about the question.

Where is it held?

Free-form answer text goes here with details about the question.