The little pink shop in the High Street
Dancewear of Fareham design system
The colours, type, spacing and components used to build the new Dancewear of Fareham website. Every value comes from a dof- global variable and is applied through a global class.
Colour
Brand palette
Cerise pink, black and white, softened with blush tints. Swatches below read straight from the colour variables.
Primary
Primary Hover
Primary Active
Primary Deep
Blush 300
Blush 200
Blush 100
Black
White
Ink
Ink 2
Muted
Line
Silver
Success
Warning
Error
Typography
Fraunces and DM Sans
Fraunces (display) for headings, DM Sans for body copy. Both are self-hosted.
Heading 1 · text-3xl
Heading 2 · text-2xl
Heading 3 · text-xl
Heading 4 · text-l
Heading 5 · text-m
Heading 6 · text-s
Eyebrow · small caps label
Lead text introduces a page or section. Pointe shoes, leotards, tights and exam uniform, fitted in store by people who dance.
Body text is set in DM Sans at text-m with a 1.6 line height. We stock ballet, tap, jazz and contemporary dancewear for children and adults, including RAD and ISTD exam uniform, and we offer a free fitting service for pointe shoes.
Muted text is used for secondary information such as delivery notes or captions.
Links look like this: read our pointe shoe fitting guide.
Buttons
Button variants
On dark
Buttons on a dark band
Buttons on a pink band
Cards
Product and category cards
Bloch
Satin ballet shoes
From £10.99
Bloch
Canvas split-sole ballet shoes
From £16.50
Bloch
Cotton camisole leotard
£14.99
Bloch
Ballet tights
From £7.50
Ballet
Shoes, leotards, tights and skirts
Tap & jazz
Tap shoes, jazz shoes and trousers
Exam uniform
RAD and ISTD uniform for every grade
UI
Badges, chips, notices and dividers
Pointe shoe fittings are by appointment. Please call the shop to book.
A divider separates groups of content.
Spacing
Spacing scale
Fluid spacing tokens, from space-3xs to space-3xl.