Skip to content
Get Tickets

Design tokens live.

Colors, type buckets, sticker buttons, and shared components — resize the viewport to verify responsive behavior.

Color

Tokens only — never hardcode hex in components. Source: src/styles/global.css.

  • --color-primary
  • --color-accent
  • --color-accent-red
  • --color-accent-acid
  • --color-bg-card
  • --color-sticker-bg
  • --color-footer-from
  • --color-footer-to
  • --color-text-primary
  • --color-text-secondary

Typography

Heading sizes live in typography buckets across 4 breakpoints. Body stays 1rem.

Heading LG — footer logo scale

Heading — section statements

Heading MD

Heading SM — inner section titles

Body — Inter medium for festival copy.

Body SM — nav, meta, fine print.

Button

Handlee sticker pills. Do not set width on .btn. Hover gated at ≥992px.

Yellow sticker Blue sticker Small

PageHero

Cream card band for inner pages — eyebrow sticker, Boldonse title, lead, optional slot (CTAs). Padding tightens at 767 / 479.

Inner page hero.

Used on lineup, tickets, news, gallery, legal, and styleguide.

Example CTA

Ticket

Festival ticket graphic (hero / Barcelona). Scales with stage cqw when nested in collage; here shown at a fixed preview width.

2026

29.06
30.06

PhotoCard

Acid frame + optional stacked images. Pass meaningful alt when the photo is content.

Festival energy demo photo

StatWidget

Hero collage mini-stat card — keep inside collage stages for fidelity.

Intelligence Every Decision

Monthly expanse

$4,900 / $10,000

TimeCard

Date / time sticker widget from the hero collage.

Tuesday 10:57

Forms

Contact + newsletter — wire endpoints in src/data/site.ts → forms. Full width on small screens; inputs stack cleanly.

ContactForm

Demo mode: opens your mail app to hello@cutwave.example.com. Set forms.contactAction in src/data/site.ts for Formspree / API.

NewsletterForm

Demo: goes to Contact. Set forms.newsletterAction in src/data/site.ts.

Responsive rules

  • Breakpoints: 991 / 767 / 479 (max-width)
  • Hover only inside min-width: 992px + hover: hover + pointer: fine
  • Mega Menu collapses to accordion drawer below 992px
  • Grids (lineup / gallery) go 3 → 2 → 1 columns
  • Validate with npm run check after UI changes