Designer's note Gyst carries the brand voice in headlines, Roboto handles every operational moment with neutral clarity, and Inter takes the precise small work — three voices, each with one clear job, so the page never speaks over itself.

Font families

Type scale

Designer's note Lavender lifts and Deep Violet anchors — two accents give the system a clear emotional spectrum where light moments feel buoyant and dark moments feel intentional, without diluting either.

Backgrounds

Text

Purple accents

Warm accents

Designer's note Gradients are where Braid's beauty lives — they carry the warmth and sheen that flat color cannot, and each blend is tied to a specific surface so the language stays unmistakable at a glance.

Designer's note Small for inputs, large for cards, pill for anything that invites action — three radii give Braid a consistent silhouette so the product reads the same on a phone, a tablet, and a poster.

Designer's note Neutral shadows carry hierarchy quietly; violet and amber glows mark the two things Braid wants users to feel — action and momentum — so attention always lands where the brand asks for it.

Designer's note Glossy glass mirrors the polish of the category — sheen, reflection, and shine are visual cues Braid users already recognize from product packaging, salon mirrors, and finished hair.

Designer's note Buttons, badges, inputs, and tabs all share the same visual grammar — rounded silhouettes, lavender highlights, soft glass — so the system reads as one product, never assembled parts.

Designer's note Cards are where the brand meets the user — gloss, gradients, and type hierarchy come together to show how the tokens add up to a feeling, not just a screen.

Designer's note Cards collapse gracefully because spacing, type, and surfaces all stay token-driven — Braid's silhouette holds from phone to desktop without bespoke layouts for any size.

Designer's note Bento boxes let one screen carry many signals at once — instructor, certificate, social proof, overview, CTA — without competing for attention, because every tile speaks in the same glass-and-gradient vocabulary.