Eventafy — Design System

Branding

Logo on light and dark backgrounds. Wordmark #4D3421 · Brand mark #FB7145.

Eventafy

Colors

Click any swatch to copy the hex value.

Primary — Orange Coral

Greyscale

Semantic

Chart Series

Typography

Font family: Inter. Sole typeface across all surfaces.

32 / BoldDisplay headline

24 / SemiboldSection title

20 / SemiboldSubheading

18 / MediumLarge body

16 / RegularBody — the quick brown fox jumps over the lazy dog.

14 / RegularSmall body — UI default.

14 / MediumSmall body medium — labels.

12 / RegularCaption / helper text.

Spacing

Base unit: 4px. Most-used in product: 8 px gap, 16 px padding, 24 px section gap.

Border Radius

Buttons & inputs 8 px · Cards 12 px · Modals 16 px · Pills 9999 px.

sm

4px

md

8px

lg

12px

full

9999px

Shadows

Shadow tint #161924 at low opacity. Cards use sm/md · Modals use lg/xl.

sm

md

lg

xl

Buttons

Height 40 px · Radius 8 px · 14 px / medium. Primary = dark; orange = brand accent only.

Variants

Sizes

With icon

Badges

Status chips use pill shape · Category badges use radius-sm.

Draft Featured Live Cancelled Pending Music Workshop Free

Inputs

Height 40 px · Radius 8 px · Focus ring primary-50 at 3 px.

Event name Up to 80 characters.

Checkboxes, radios & switch

Send confirmation email Add to mailing list Allow refunds

Public event Unlisted Private (invite only)

Publish immediately Require approval Show seat map

Cards

Radius 12 px · Border 1 px grey-100 · Optional shadow-sm.

Music

Sunset Beats Festival

An open-air evening with live electronic acts on the rooftop.

📅 Jun 14📍 Marina

Conference

DevSummit 2026

Three days of talks on AI, infra, and the open web.

📅 Jul 02📍 Online

Workshop

Hands-on UX

A practical workshop on user research with real cases.

📅 May 22📍 Studio 4

Avatars

Sizes 24 · 32 · 40 · 56. Default background: primary-100.

AQ SR JD MK

AQ SR JD +5

Alerts

Inline messages with semantic accent. Body uses text-secondary, title uses text-primary.

i

Heads up

Your event will be reviewed within 24 hours before going live.

✓

Saved

Your changes have been published successfully.

!

Action needed

3 attendees are waiting for refund approval.

×

Couldn't save

Connection lost. We'll retry automatically in 5 seconds.

Tables

Header on grey-25 · Row dividers · Hover state for rows.

Order	Attendee	Ticket	Status	Amount
#A0291	Sara Reda	VIP	Paid	$120.00
#A0290	Ahmed Q.	General	Paid	$45.00
#A0289	Mona Khaled	Student	Pending	$25.00
#A0288	Jad Daoud	General	Refunded	-$45.00

Tabs

Underline tabs for page sections · Pills for compact toggles.

Overview

Attendees

Tickets

Settings

Day

Week

Month

Year

Pagination

Compact pager with active page in solid dark.

Stepper

Linear progress through a multi-step flow.

✓

Details

2

Tickets

3

Publish

Modals

Centered dialog with header / body / footer.

Breadcrumb

Compact path navigation.

Tooltips

Hover the buttons to preview.

Toast

✓

Event published

Sunset Beats is now live.

Loading & Empty States

Skeletons during load · Empty states when there's nothing to show.

Loading attendees…

+

No events yet

Create your first event to start selling tickets.

Forms — Composite

A realistic event-creation form using the components above.

Event title

Ticket Card

Signature pattern for confirmation pages & QR-coded tickets.

Jun

14

2026

Music

Sunset Beats Festival

🕗 19:00 · 📍 Marina Rooftop

QR

Ticket #A0291

Sara Reda · VIP