Micety — Design System

Color Palette

Teal is used sparingly for key actions and price highlights. Gold for selection states and badges. Ink tones for text hierarchy.

Brand

Teal

#00d1c1

Teal Hover

#00bfb0

Teal Dark

#00a89a

Teal Soft

#e6faf8

Gold

#ffc047

Gold Soft

#fff8e7

Ink (Text)

Ink

#1a1a2e

Secondary

#3d3d56

Muted

#7a7a8e

Faint

#b0b0be

Disabled

#c8c8d4

Surfaces & Borders

Surface

#ffffff

Warm

#fafaf8

Cool

#f5f5f3

Border

#e8e6e1

Border Light

#f0eee9

Semantic

Success

#22c55e

Warning

#f59e0b

Error

#ef4444

Info

#3b82f6

Typography

Playfair Display for display headings (editorial warmth). DM Sans for everything else (clean, modern readability).

Display XL

Playfair 46px / 600

Plan your next trip

Display

Playfair 36px / 600

Athens Incentive Program

Heading 1

Playfair 28px / 500

Your Accommodation

Heading 2

Playfair 22px / 500

Budget Breakdown

Heading 3

Playfair 18px / 600

Hotel Grande Bretagne

Body

DM Sans 14px / 400

Landmark luxury on Syntagma Square with Acropolis views, rooftop pool, and the acclaimed GB Roof Garden restaurant.

Body Small

DM Sans 13px / 400

Private luxury coach from Athens International Airport to hotel and return transfer.

Caption

DM Sans 12px / 500

May 12–16, 2026 · 5 days, 4 nights · 45 guests

Label

DM Sans 11px / 600 UC

Room Rates · Included Services · Optional

Price

DM Sans 16px / 700

€2,475.00

Buttons

Primary for main CTAs. Secondary for cancel/dismiss. Soft for contextual actions. Ghost for inline text-level actions.

Large

Medium (default)

Small

Form Elements

Consistent inputs used across login, account settings, trip creation, and admin forms.

First Name

Last Name

Email Address Contact support to change your email

Password Password must be at least 8 characters

Destination

Group Size

Toggles, Checkboxes & Radios

Email on status change

Email on inquiry reply

Daily breakfast

Spa day pass

Per person

Flat rate

Tags & Badges

Used for trip statuses, service types, budget tiers, and inline labels.

Trip Status (from TripStatus enum)

Awaiting Hotel Options Pending Hotel Selection Ready to Confirm Awaiting Payment Booked Past Trip

Service Type (from ProductType.menu_type)

Hotel Dining Activity Transfer Experience Wellness

Budget Tier (from BudgetType enum)

Limited Balanced Luxury World Class

Inline Labels

Included Preferred Selected

Status Pill (overlay style, used on hero images)

Pending Hotel Selection

Cost Basis (from TripService.cost_basis)

Flat fee Per person Per person/night Per night Per room

Expand / Collapse Controls

Chevron indicators for collapsible sections and bulk expand/collapse pill buttons.

Chevron States

Collapsed state

Expanded state

Bulk Actions

Shadows & Elevation

Five levels of elevation. Cards use sm at rest, md on hover. Modals use xl.

XS

SM

MD

LG

XL

Cards

Destination cards shown on landing page. Same pattern used for trip cards on My Trips. Data: Destination model (title, subtitle, media, country_code).

Athens

Ancient wonders meet vibrant nightlife in the birthplace of democracy

Luxury 12 venues

Lisbon

Coastal charm, pastel architecture, and world-class gastronomy

Balanced 18 venues

Barcelona

Mediterranean flair, Gaudi masterpieces, and endless energy

Luxury 24 venues

Spacing Scale

4px base unit. Used consistently for padding, margins, and gaps.

sp-1

4px

sp-2

8px

sp-3

12px

sp-4

16px

sp-6

24px

sp-8

32px

sp-10

40px

sp-12

48px

sp-16

64px

sp-20

80px

Data Reference

Key enums and field values from the data layer that drive UI states.

Trip Statuses (TripStatus enum)

Value	Display	Tag
awaiting_hotel_options	Awaiting Hotel Options	Awaiting
pending_hotel_selection	Pending Hotel Selection	Pending
ready_to_confirm	Ready to Confirm	Ready
awaiting_payment	Awaiting Payment	Payment
booked	Booked	Booked
past_trip	Past Trip	Past

Cost Basis Values (Service pricing)

Value	Formula
per_person	sell × group_size
per_person_per_night	sell × group_size × nights
per_night	sell × nights
per_room	sell × room_count
flat	sell (fixed)

Product Types (menu_type)

hotel restaurant activity tour event transfer