Style guide

Colour

Swatches read their value straight from the CSS variable, in whichever theme is active. Use the semantic name, never the raw value — that is what makes light and dark work for free.

Surface

The layers a page is built from. Pick the flattest one that still separates content — page, then card, then a raised popover.

Content

Text and icons. Each surface has a matching foreground — never pair a foreground with a surface it was not made for.

Interactive

Anything a person can act on. The pink-to-blue gradient is the brand's primary action; the flat primary is its calm sibling for dense UI.

Feedback

Status only — never decoration. Each has a solid fill for badges and a subtle tint for message backgrounds.

Gradient

The pink-to-purple gradient is the brand's primary. It belongs on the one leading action of a screen and on hero headlines — nowhere else.

Typography

Geist for everything, Geist Mono for anything technical: times, ticket codes, token names. Sizes come from named steps, never from ad-hoc classes.

Spacing

The standard 4px scale — no parallel system. Gaps inside a component step by 2 and 3; gaps between blocks step by 6, 8 and 12.

Radius & elevation

Every radius derives from one token, so changing --radius rescales the whole system. Elevation is one ladder of four steps plus a brand accent — every shadow in the system is one of these variables, never a hand-written box-shadow.

Motion

Motion confirms an action — a press, a toggle, an expand. Nothing fades in on load, and nothing moves that the person did not touch. Hover each bar to see its timing.

Icons

Lucide is the base icon set, plus curated brand/social glyphs, always rendered through the Icon component so size and colour stay on-system.

Components

Every variant and every state that applies, side by side. States that a component does not own are marked so — they are handled by the field or the surrounding form.

Tabs

<Tabs defaultValue="talk">
  <TabsList aria-label="Ways to contribute">
    <TabsTrigger value="talk">Talk/Session</TabsTrigger>
    <TabsTrigger value="volunteer">Volunteer</TabsTrigger>
  </TabsList>
  <TabsContent value="talk">Talk content</TabsContent>
  <TabsContent value="volunteer">Volunteer content</TabsContent>
</Tabs>

Button

Hover and focus are live — point at or tab to any button above. The focus column shows the ring statically so both can be compared.

Which variant where: inside cards use gradient, solid or secondary. Inside a call-to-action panel use secondary. ghost and link stay for tertiary and inline actions only.

<Button variant="gradient" size="lg" loading={isSaving}>
  Get tickets
</Button>

Feature card & CTA panel

Feature card

Icon medallion, heading and short supporting text — for non-interactive content.

Clickable feature card

Pass href and the whole card becomes a link, with hover lift and a focus ring.

Feature card with picture

Pass imageSrc and a circular photo replaces the icon medallion.

Call-to-action panel

Full-bleed gradient panel for the closing action on a page.

Get your ticket

<FeatureCard
  icon="sparkles"
  title="Feature card"
  description="Short supporting text."
/>

<FeatureCard
  href="/programme"
  icon="ticket"
  title="Clickable feature card"
  description="Whole card is a link."
/>

<FeatureCard
  imageSrc={speakerPhoto}
  imageAlt="Speaker"
  title="Feature card with picture"
  description="Circular photo instead of the icon medallion."
/>

<CtaPanel
  title="Call-to-action panel"
  description="Full-bleed gradient panel."
  actionLabel="Get your ticket"
  actionHref="/tickets"
  image={{ src: speakerPhoto, alt: "Speaker" }}
/>

Input

<Input
  label="Email"
  error={errors.email}
  hint="We only email you the ticket."
/>

Badge

Badges are static labels: no hover, focus, disabled or loading state.

<Badge variant="success" tone="solid">Free</Badge>

Card

<Card variant="glass">
  <CardHeader><CardTitle>Workshop pass</CardTitle></CardHeader>
</Card>

<Card
  variant="elevated"
  action={
    <Button variant="ghost" size="icon" aria-label="Edit">
      <Icon name="pencil" />
    </Button>
  }
>
  …
</Card>

Photo frame

View Full Photo Gallery

Photos by Silvan Mühlelemann (mühlelemann+popp AG)

Six photographs share one gradient frame with rounded tiles, a gallery button and an optional credit line inside. The grid uses two columns on mobile and three columns from tablet size onward.

<PhotoFrame
  photos={eventPhotos}
  href="https://example.com/full-gallery"
  credit="Photos by Silvan Mühlelemann"
  creditLabel="mühlelemann+popp AG"
  creditHref="https://example.com"
/>

Ticket card

The tear line and side notches are rendered with a CSS mask, so the ticket works on gradient or image backgrounds too. The top area shows the tier price; the bottom area shows the regular-pass comparison.

<TicketCard
  pill={<Badge variant="brand" tone="solid">Early bird</Badge>}
>
  <TicketPrice>
    <span className="text-body font-semibold">89 CHF</span>
  </TicketPrice>
  <TicketRegular label="regular price" price="129 CHF" />
</TicketCard>

Heading & Text

Link

Avatar

NK

size="sm"

NK

size="md"

NK

size="lg"

NK

size="xl"

ring="gradient"

Speaker card

Ada Mwangi

Staff Engineer · Northwind

PerformanceDX

View profile

variant="plain"

Ada Mwangi

Staff Engineer · Northwind

PerformanceDX

View profile

variant="elevated"

Ada Mwangi

Staff Engineer · Northwind

PerformanceDX

View profile

variant="glass"

LinkedIn bubble

<LinkedInBubble href="https://linkedin.com/in/nora-keller" name="Nora Keller" placement="inline" />

Sponsor card

variant="default"

variant="highlight"

variant="default" size="sm"

variant="highlight" size="sm"

<SponsorCard logoSrc={atollLogo} name="ATOLL by EUTIMA" variant="highlight" size="sm" href="https://atoll-by-eutima.example.com" />

Schedule timeline

SPARK

An inspiring opening to ignite creativity.

10:00

Arrival & coffee

10:30–11:00

Keynote & fireside chat

Nora Keller & Marco Frei

SHARE

Interactive sessions led by the community.

11:00–11:25

Community talk

Luca Bianchi

12:30

Lunch

BUILD

Turn ideas into working products.

15:00–18:15

Hackathon

Ada Mwangi

18:15

Pizza break

CELEBRATE

Recognise the winners and close the day together.

19:30

Top five app pitches

Community voting and winner selection

20:00–22:00

Awards and celebration

<Schedule>
  <ScheduleCategory markerTone="info" headerTransition="accentInfo">
    <ScheduleHeader icon="share" title="SHARE" subtext="Community sessions." />
    <ScheduleItem
      time="11:00"
      title="Community talk"
      speaker="Luca Bianchi"
      linkedinHref="https://linkedin.com/in/luca-bianchi"
      description="A short talk about building together."
      avatar={{ src: "https://example.com/luca.jpg", name: "Luca Bianchi" }}
    />
    <ScheduleItem time="12:30" title="Lunch" />
  </ScheduleCategory>
</Schedule>

Stat

FAQ

Open, closed, hover and keyboard focus are all live — tab into the questions above.

Navbar & Footer

Tickets