Design System
The Mevi Kit
Brand tokens, typography, and the base component kit — ported from the brand guide into the marketing stack (Astro + React + Tailwind v4). This page is the living reference while the marketing pages are built out.
Colors
Brand palette, exposed as Tailwind tokens.
background
#FBF9F9
Off-white — page surface
foreground
#162A33
Dark navy — text
primary
#00A896
Teal — primary actions
secondary / accent
#FFE600
Yellow — accent
muted-foreground
#4C4C4C
Dark gray — secondary text
border / input
#EEEEEE
Gray — borders, inputs
destructive
#EF4444
Red — destructive
Typography
Nunito for everything; IBM Plex Mono for code/labels.
Heading 1 — Nunito Bold
Heading 2 — Nunito Semibold
Heading 3 — Nunito Semibold
Heading 4 — Nunito Semibold
Body copy is Nunito Regular at 17px with a 1.6 line-height. The transaction workspace for real estate agents and brokerages: forms, offers, deadlines, and contract review in one place.
font-mono — IBM Plex Mono · const deal = await mevi.load(id)
Buttons
Variants and sizes from the kit's buttonVariants.
Cards
Card title
A surface for grouped content, using the card + border tokens.
Cards use --radius (6px), the border token, and a soft shadow.
On dark
The same card on the navy foreground color.
Brand navy #162A33 with off-white text.
Dialog
Interactive Radix dialog (hydrated island).