Reference
Design system
Every token, component and icon in one place, so the look can be tuned here and land everywhere at once.
Colour
Built out from the five colours already in the brand. Swatches marked brand are the originals, sampled from the logo and the current site.
Amber
Primary brand accent, from the logo wordmark. Calls to action and highlights.
amber-50
#fffaec
amber-100
#fff2cf
amber-200
#ffe5a0
amber-300
#ffde5f
amber-400
#ffbb3d
amber-500
#f5a01c
amber-600
#d47c07
amber-700
#a85c0a
Forest
On the original site this is the heading and body text colour. Here it carries one job only: action, selection and money. See Colour roles below.
forest-50
#f0f7f3
forest-100
#d8ebe0
forest-200
#aed3bd
forest-300
#7bb495
forest-400
#4b8d6c
forest-500
#275f49
forest-600
#1e4c3a
forest-700
#163a2c
Terracotta
From the logo balloons. The occasion marquee, the location pin, short-notice callouts.
terracotta-50
#fff4ef
terracotta-100
#ffe3d6
terracotta-200
#ffc2a8
terracotta-300
#ff9670
terracotta-400
#f96a38
terracotta-500
#d74000
terracotta-600
#b33400
terracotta-700
#8a2800
Warm neutrals
Every ground in the site. Warm, never grey.
cream-50
#fffdfa
cream-100
#fff9f2
cream-200
#fff5f0
cream-300
#f8f5ee
cream-400
#f3f2ed
cream-500
#e8e4d9
cream-600
#d5cfc0
line
#e9e3d8
Confetti accents
Category coding and section bands. peri-200 is the original header and footer band colour. Never for text on their own.
peri-200
#dcd9fe
peri-300
#bdb7fb
petal-200
#f9dbd9
petal-300
#f2b9b5
mint-200
#e4f2d4
mint-300
#c6e0a8
sky-200
#cbe9f5
sky-300
#9ed6ea
Ink
Warm-shifted text greys. ink-700 is body copy.
ink-300
#8c8378
ink-400
#6b6257
ink-500
#4a423a
ink-600
#2f2923
ink-700
#1c1815
Colour roles
The palette is inherited, so the discipline has to come from how each colour is used. Every colour below has one job. When something looks arbitrary, this is the table it failed.
Forest
- Primary buttons and the footer call to action
- Selected and confirmed states: chosen cards, checkboxes, active nav, today's date
- Money: every price, total and range
- Inline affordances like Edit links
Not: Decorative fills and section bands. If it is not an action, a selection or a number, it is not forest.
Amber
- The secondary button, where forest would be too heavy
- Highlight marker behind a headline word
- Step progress that is already complete
- The star doodle
Not: Text on cream. It does not carry enough contrast.
Terracotta
- The occasion marquee band
- The location pin
- Short-notice and error callouts
Not: Anything a visitor is meant to click. That reads as forest.
Periwinkle
- Full-width section bands, as on the original site
- The footer ground
Not: Text, icons, or anything needing contrast.
Client palettes
Choose From In-Stock Colours
Choose from the colours currently available in our balloon inventory.
Choose From Our Metallics
Add chrome, metallic or pearl balloons from our stock for extra shine and dimension.
Choose a Custom Colour
Looking for a specific colour? We can special order it for your design.
Typography
Fraunces for display, an evolution of the Playfair Display already in use, with the SOFT and WONK axes dialled in so large headings stay warm. Sora carries everything else, carried over from the current site.
h1 · clamp(2.5rem, 6.4vw, 4.75rem)
Turn a room into the moment
h2 · clamp(2rem, 4.4vw, 3.25rem)
Find your perfect celebration
h3 · clamp(1.25rem, 2.2vw, 1.75rem)
Signature Setup
Lede · 1.125rem / 1.6
Pick the package, the colours and the details you want. The price updates as you go, so you can see exactly what moves the number.
Body · 1rem / 1.6
Every garland is built by hand, in my space, in the colours you picked. Nothing is pre-made or pulled off a shelf.
.eyebrow · 0.6875rem, 0.16em tracking
How it works
.tnum · tabular figures for all prices
$550–$800
.marker · editorial highlight
Build your estimate
Components
Buttons
Badges
Option card states
Default
Resting state
Selected
Forest border and wash
Elevation
Radii
Brand doodles
The original marks from the existing site, applied as CSS masks and painted with currentColor. That keeps the real artwork while still letting any call site tint them, including on a dark ground.
Iconography
Twenty-eight icons drawn specifically for balloon decor on a 32px grid. Duotone: a 1.6px stroke in the current text colour, plus a soft accent fill. Generic icon sets have no vocabulary for a garland, a shimmer wall or a marquee number.