Calm, not quiet
Generous space and soft colour create composure. One precise gesture keeps the work alive.
Boompah visual language
Calm energy,made visible.
A working reference for the choices that make Boompah feel unmistakably Boompah—from pearl surfaces and expressive display type to our living signal orbits.
Principles
How the system should feel
Use these as a decision filter, especially when a composition starts collecting too many ideas.
Technical, made human
System signals and fine rules meet warm surfaces, plain language, and editorial typography.
Restraint earns impact
The spectrum, motion, and orbit motifs are accents. Their value comes from not appearing everywhere.
Colour
Soft spectrum, deep ink
A warm neutral field does most of the work. Pastels carry meaning in small, concentrated doses.
Pearl#F8F5F3
Blush#F1BCDB
Lilac#D2B6F5
Sky#BAE6F2
Warm#F7D3BC
Ink#081716
Boompah spectrum
Warm → blush → lilac → sky
Contrast anchor
Ink gives
soft colour a spine.
Typography
Display with personality. Body with ease.
Clash Display supplies the character; Manrope keeps the explanation direct and highly readable.
Display / 112
Clash Display · Light
Attention
to signal.
Heading / 48
Clash Display · Medium
Good work should feel inevitable once you see it.
Body / 18
Manrope · Regular
We use plain language, short sentences, and enough room for each idea to land. The tone is capable, candid, and pleasantly unforced.
Interface
Round where it invites. Square where it explains.
Pills belong to actions and small status objects. Content containers stay softly structured, never bubbly.
Actions
Available Q3
ActionSecondaryStatus
+◇/•↗×+◇/•↗×+◇/•↗×+◇The signal
Featured motif
The signal
orbit system
Layered, ambient, and built to hold the atmosphere without stealing the message.
Jump to the orbit labComposition
Editorial structure, atmospheric edges
Keep the message on a strong grid. Let the expressive layer crop, overlap, and live near the perimeter.
+ו/↗+ו/↗+ו/↗+ו/↗Message first.
Do / keep it peripheral
Message first.
Atmosphere second.
Composition rule
One expressive move per viewport is usually enough.
Actions
One clear next move
Use one primary action per decision area. Secondary and quiet actions should support it, not compete with it.
Variants
States
Forms
Ask clearly. Help generously.
Labels stay visible, instructions arrive before the error, and validation explains exactly how to recover.
Field states
Use a work email.
Selection
Make the choice visible
Use radios for one choice, checkboxes for many, and switches only for settings that take effect immediately.
Radio / one
Checkbox / many
Switch / immediate
Project updates
Email when a milestone changes.
Current state: On
Feedback
Status should never rely on colour alone
Pair every semantic colour with an icon, a plain-language title, and a useful next step when one exists.
A useful note
Supporting context belongs close to the decision it affects.
Changes saved
Confirm completed actions in the past tense.
Review before publishing
Warnings describe the consequence without creating panic.
We could not save this
Keep the user’s input and explain how to recover.
Content patterns
Containers organize. They do not decorate.
Cards need a clear job, a deliberate hierarchy, and one obvious interactive target.
Featured work
2.4×
Use one number, one unit, and one sentence of context.
“Clear enough to repeat. Distinct enough to remember.”
Inclusive by default
Accessibility is a component state
A specimen is incomplete until it works without a mouse, survives zoom, and communicates change beyond colour.
Keyboard
Every action is reachable and the focus order follows the reading order.
RequiredFocus
Use a persistent 2px ring with enough contrast against both light and dark surfaces.
RequiredTouch
Interactive targets are at least 44 × 44px with space between adjacent actions.
RequiredErrors
Connect messages with aria-describedby; move focus to the summary after submit.
RequiredMotion
Respect prefers-reduced-motion and preserve meaning when animation is removed.
RequiredContent
Buttons use verbs, links name destinations, and icon-only controls have a label.
RequiredNext chapter
See the expressive layer.
Signature element
Signal
orbits.
Part interface, part atmosphere. These circles make Boompah’s technical confidence feel warm, patient, and alive.
LayeredAmbientRestrained
Live lab
Tune the signal.
Use the presets as starting points, then isolate layers and push the variables until the right character becomes clear.
Live specimenEvery layer is adjustable
560px / 88%92s master cycle
+×·~/◇—⌁+×·~/◇—⌁+×·~
Approved voices
Same system, different tone.
Colour, crop, and mark rhythm can shift. The core construction and restrained opacity stay consistent.
+×·~/◇+×·~/◇+×·~/◇+×
Lilac / hero
Primary brand signal
?+/→•↗?+/→•↗?+/→•↗?+
Blush / story
Warm editorial moments
◇+/→✓↗◇+/→✓↗◇+/→✓↗◇+
Sky / detail
Utility and process
+◇/•↗×+◇/•↗×+◇/•↗×+◇
Night / support
Dark field, screen blend
Scale & placement
Crop with confidence.
A signal orbit should feel larger than its container. Cropping creates atmosphere; centring makes it feel like a diagram.
S
18–24rem
Cards & quiet details
Suggested crop30–45%
M
28–36rem
Section headers
Suggested crop25–40%
L
42–60rem
Hero fields
Suggested crop35–55%
Guidance
Keep the signal intentional.
Do✓
Let it breathe
- Keep opacity between 35–75%
- Use long, almost ambient cycles
- Crop against a clear page edge
- Match glyphs to the page context
Avoid×
Turning it into decoration
- Stacking more than two at once
- Fast or synchronized ring speeds
- Placing key copy through the centre
- Using saturated or unrelated colours