Brava design system

Built to be loud

Everything this template is made of — colours with their contrast, the type scale, the grid, every component, every movement, the illustration library and the stack behind it.

Principles

Five rules every page of Brava keeps.

  1. 01

    Loud type, calm page

    Huge narrow capitals carry the voice; the cream page and generous rhythm keep it readable.

  2. 02

    One bright orange

    No dark orange. Orange is for large type, surfaces, lines and actions — small text stays ink.

  3. 03

    White on orange is large

    On orange, every word is white and at least 19 px bold (WCAG large text).

  4. 04

    Motion with intent

    Every movement answers the scroll or the pointer; reduced motion gets the final state at once.

  5. 05

    Read once, by everyone

    Moving copies are decoration; screen readers hear each sentence exactly once.

Colour

Cream is the page, orange the voice, ink the reading colour. Art tones only for project tiles.

  • AaOrange#FF5400surfaces and graphics (footer, ribbon, team); text on it = ink (6.5:1) or paper only ≥ 24px (3.06:1)
  • AaAction orange#F55100buttons: white 19 px bold labels (large text 3.4:1), 3.0:1 to the cream page — lighter than orange-700 (DD-79)
  • AaInk#0E0E0Etext, stickers, lines
  • AaCream (page)#F8EEE8alternate surface, rows
  • AaPaper#FDF8F5page background, text on dark
  • AaBlush#FAE3E2hero surface
  • AaInk 2#333333secondary text (11:1 on cream)
  • AaInk 3#5C5552muted text (6.4:1 on cream)
  • #2F4BFF
  • #BFE8D6
  • #D9C8FF
  • #FFE27A
  • #C6E2FF
Contrast pairs, measured live
PairUseRatioRule
ink on creamBody text16.9:1✓ ≥ 4.5:1
ink-3 on creamSecondary text6.4:1✓ ≥ 4.5:1
white on actionButtons — 19 px bold (large text)3.5:1✓ ≥ 3:1
white on orange-500Text on orange — ≥ 19 px bold3.2:1✓ ≥ 3:1
orange-600 on creamOrange type — large only3.0:1✓ ≥ 3:1
paper on inkText on ink18.3:1✓ ≥ 4.5:1

Type

Bricolage Grotesque (wdth 75 · wght 800 · opsz 96) for display, Instrument Sans for text. Sizes: desktop / tablet / phone.

  • heroMake it loud128/104 -1.92 800 display · 96/80 -1.44 · 64/54 -0.96
  • displayMake it loud88/76 -1.32 800 display · 64/56 -0.96 · 44/40 -0.66
  • claimMake it loud60/63 -0.6 800 display · 48/50 -0.48 · 40/42 -0.4
  • statementSmall studio, big appetite80/84 -1 700 display · 56/60 -0.7 · 34/38 -0.4
  • eyebrowBrands people remember18/22 500 · 14/18
  • titleBrands people remember34/38 700 · 28/32 · 24/28
  • subtitleBrands people remember22/29 700 · 19/25
  • leadBrands people remember24/30 400 · 18/24
  • bodyBrands people remember18/25 400 · 16/22
  • navBrands people remember14/20 500 · 14/20
  • buttonBrands people remember19/22 700
  • stickerBrands people remember16/20 500 · 12/16
  • labelBrands people remember14/14 0.28 600 · 12/12 0.24
  • smallBrands people remember12/14 500

Grid

Every control is 44 px high. Sections breathe on an 80 / 56 px rhythm.

Gutter
20 px · phone 18 px
Section rhythm
80 px · phone 56 px
Control height
44 px (HIG 44 pt)
Card gap
8 px · gap 12 px
Radii
pill 999 · card 6 · tile 4 · stack cards 24–28
Breakpoints
phone < 768 · tablet 768–991 · desktop ≥ 992 (measured)

Components

The real building blocks of the site — hover them.

Buttons
Let's talkSee the workAll projects
Tags
Brand strategyWeb design
Stickers
  • Independent studio
  • No boring briefs
Card arrow · text link
Rolling link
Brand board (project preview)
MagnetHover me

Motion

Values come from the motion spec and scale with the chosen intensity. Reduced motion: the final state, at once.

  • Text roll

    Letters roll out of a mask, a copy rolls in — links, buttons, logo, cards

    0.34 s · 12 ms/letter

  • Blur reveal

    Words come into focus one by one when a paragraph is seen

    0.7 s · blur 10 px

  • Display lines

    Headlines rise line by line out of a mask, un-blurring

    0.8 s

  • Word band

    The phrase runs along a curved band; drifts, scrolling pushes it

    19.2 s per width

  • Colour front

    The statement fills from soft orange to sharp ink while it scrolls by

    scroll-linked

  • Cards

    Project cards spring in with a short stretch; the grid leans with scroll speed

    scroll-linked

  • Pinned title

    The services title stands in the middle while cards pass left and right

    scroll-linked

  • Cursor & magnet

    „View“ follows a fine pointer over projects; buttons lean towards it

    scroll-linked

  • Page change

    View transition: the old page fades, the new one rises out of a soft blur

    scroll-linked

Sections

Every section the template ships, with what it does for the reader. Variants are set in the editor.

  • HeroBrHerohero.promise
  • HaltungBrStatementpositioning
  • BandBrRibbonpositioning
  • ArbeitenBrWorksproof.case
  • LeistungenBrServicessolution.highlights · solution.features
  • FähigkeitenBrCapabilitiessolution.overview
  • GeschichteBrStorystory · process
  • RegelnBrRulesvalues
  • TeamBrTeamteam
  • StimmenBrVoicesproof.voices
  • ZahlenBrNumbersproof.numbers
  • ZeitleisteBrTimelinetimeline · story
  • FragenBrFaqfaq
  • Design-SystemBrStyleguidebrand.system
  • BildbandBrGalleryculture
  • Abschluss-SatzBrCtaLinecta
  • SeitenkopfBrPageHerohero.page
  • Projekt-KopfBrProjectHerohero.page · proof.case
  • Projekt-TextBrProjectTextproof.case

Library

69 illustrations from the client's sheets and 5 presentation photos — all in the editor's image library.

  • Two people walk by with signs that read MEET and BRAVA, a cat on each side
  • Two people carry MEET and BRAVA signs, two cats walk along
  • Two designers at a laptop
  • A designer has an idea
  • A designer reads a large plan
  • Two designers high-five
  • A designer points at a rising chart
  • A designer with a headset at a laptop
  • Four steps from brief to launch
  • A cat asleep on a question mark
  • A cat peeks out of a box marked 404
  • A cat stretching
  • A cat next to a check mark
  • A cat watches a butterfly
  • A happy cat face
  • A cat face with sunglasses
  • A smiling cat face
  • A sleeping cat face
  • A laptop
  • A browser window
  • A calendar
  • A speech bubble
  • An envelope with a new message
  • Jonas, illustrated
  • Mara, illustrated
  • An orange cat walking
  • A black and white cat walking
  • A designer on a box with a laptop, a cat asleep below
  • A designer on the floor with a laptop and a cat
  • Two designers high-five
  • A designer thinking
  • A designer with an idea
  • A designer looking through binoculars
  • A designer looking through a telescope
  • A designer at a laptop with coffee
  • A founder thinking at a laptop
  • Two designers at a laptop
  • An orange cat asleep
  • A cat stretching
  • A cat in a box
  • A cat with a question
  • A cat with a warning sign
  • A cat with a check mark
  • A cat with a magnifier
  • A cat with a spinner
  • An empty box
  • A cat with an info sign
  • A designer thinking at a laptop
  • A designer working at a large screen
  • A designer leaning back with feet up
  • Three designers around a laptop
  • A designer on the phone at a laptop
  • A designer packing boxes
  • A designer working by the sea
  • A designer arranging sticky notes
  • A designer shakes hands with a client
  • A cat with a question
  • A cat with a warning sign
  • A cat with a check mark
  • A cat with a magnifier
  • A cat reaching for a spark
  • An open box
  • A contract with a pen
  • A calendar
  • An envelope with one new message
  • A rocket taking off
  • A growing plant
  • A target with an arrow
  • Ben, illustrated

Illustrations: provided by the client, usage rights confirmed. Photos: Unsplash License — presentation placeholders; replace them with your own project images before you ship a site.

Accessibility

WCAG 2.2 AA and Apple's HIG, checked by axe and measurement tests on every page at phone and desktop width.

  • Text ≥ 4.5:1; white on orange only at ≥ 19 px bold (large text, ≥ 3:1).
  • Every control 44 px high; footer links ≥ 32 px, 44 on touch.
  • Visible focus rings on every link and button; keyboard reaches everything.
  • Moving text exists once for screen readers; decorative copies are hidden.
  • Reduced motion shows the final state; nothing blinks or runs on its own forever.
  • No sideways scrolling at any width; illustrations never blown up beyond 1.6 ×.

Stack

What Brava is built with. No GSAP — its licence excludes visual website builders.

PartRoleLicence
Next.js 16 · React 19Pages, routing, server rendering, image deliveryMIT
Motion (LazyMotion)Every animation — transform, opacity and filter onlyMIT
LenisSmooth scrolling as a light layer over native scrollMIT
matter-jsPhysics for the capability badges (loaded only there)MIT
PuckThe visual editor (only in the editor, never on the site)MIT
ZodValidated page documents — content never as HTML fragmentsMIT
Bricolage Grotesque · Instrument SansDisplay (wdth 75, wght 800) and text facesSIL OFL 1.1
SharpImage measuring and the illustration cutterApache 2.0
Playwright · axe · VitestEnd-to-end, accessibility and unit testsApache 2.0 · MPL 2.0 · MIT

There's more where that came from

  • Fresh every month
  • Promise
All projects