MixDesign System

Recipes

Patterns

Each pattern shows the live render and the JSX. Copy, paste, ship — that's the whole idea.

Tile

The default Mix card: white, 0.25rem radius, soft beige border, optional photo on top.

Brussels

Mix Souverain

Refined editorial palette with a touch of warmth.

tsx
<div className="rounded-md border border-border bg-card overflow-hidden">
  <div className="h-40 bg-gradient-to-br from-secondary to-muted" />
  <div className="p-6">
    <p className="text-xs uppercase tracking-widest text-muted-foreground">
      Brussels
    </p>
    <h3 className="mt-2 font-display text-2xl">Mix Souverain</h3>
    <p className="mt-2 text-sm text-muted-foreground">
      Refined editorial palette with a touch of warmth.
    </p>
  </div>
</div>

Hero block

Editorial hero with eyebrow, large display heading, supporting paragraph, and dual CTA.

Mix · Studio

A quieter kind of luxury.

Crafted spaces, attentive service, and a design language that lets the venue speak for itself.

tsx
<section className="rounded-md border border-border bg-card p-10">
  <p className="mb-3 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
    Mix · Studio
  </p>
  <h2 className="font-display text-4xl tracking-tight">
    A quieter <em className="italic">kind</em> of luxury.
  </h2>
  <p className="mt-4 max-w-md text-muted-foreground">…</p>
  <div className="mt-8 flex gap-3">
    <Button>Book a stay</Button>
    <Button variant="outline">Discover</Button>
  </div>
</section>

Photo profiles

Avatar sizes from xs to xl, with name + role caption.

A

Anna

Concierge

L

Léo

Manager

M

Maya

Chef

T

Théo

Director

Carousel

Snap-scrolling carousel for venues, dishes, or imagery. Minimal arrows, no dots.

Slide 1

Caption goes here

Slide 2

Caption goes here

Slide 3

Caption goes here

Slide 4

Caption goes here

Slide 5

Caption goes here

Slide 6

Caption goes here

Centered CTA

A quiet, full-bleed call to action between content sections.

Ready to start your project?

Remix this design system as your starting point — header, footer, auth, and tokens are all wired up.