Effects BundlesSolid State Logic
Solid State Logic SSL Fusion BundleSSL’s Fusion processors bring saturation, EQ, compression and stereo shaping into a five-plugin collection.
Check live price
On sale 14 Oct - 01 Nov, 2026
Checking current price… bmusiq DESIGN SYSTEM / V1
One identity.
Every touchpoint.
01 / IDENTITY
Keep the face. Build the world.
The supplied wordmark is our primary signature. The face mark works at smaller sizes. Keep their proportions and give them breathing room.
Use the supplied dark logos on light surfaces. A reversed logo for dark backgrounds should be a separately approved brand asset.
02 / COLOUR
A calm canvas. A little energy.
Paper and charcoal carry the content. Lime highlights actions. The secondary palette gives product artwork variety without competing with the writing.
Paper
#f7f7f2Ink
#252623Secondary text
#62675bLime / action
#d1ef75Lavender
#d9d2f0Coral
#edb49cBlue
#c5d8e5Soft panel
#e9edddUse charcoal text on lime. Secondary text uses the darker muted token for easier reading on paper and card surfaces.
03 / TYPOGRAPHY
Distinctive headings.
Comfortable reading.
HEADINGS
Space Grotesk
Medium weight, open layouts and carefully spaced headlines.
BODY & INTERFACE
DM Sans
A clear everyday typeface for reading, navigation and controls.
Display
clamp(3.25rem, 6.2vw, 5.375rem)Better sounds.
Section heading
clamp(2rem, 3.7vw, 3rem)Fresh ideas for your next session.
Card title
1.625remA new starting point.
Reading text
1.125remThe right tool helps you finish the music.
Body & controls
1remExplore plugins, samples and practical advice.
Supporting text
.875remRetailer information and supporting navigation.
Labels & metadata
.8125remPRODUCT BRIEFING / 3 MIN READ
Reading rules: 18px article text, 16px body text and controls, 14px supporting text, 13px labels. Mobile keeps these sizes. Tiny labels inside decorative illustrations are not interface text.
04 / SPACING & SHAPE
Make room for the music.
A shared spacing scale keeps cards, sections and controls related. Gentle corners belong to cards and panels; fully rounded shapes belong to filters and icon actions.
4px
space-18px
space-212px
space-316px
space-420px
space-524px
space-632px
space-840px
space-1048px
space-1264px
space-1680px
space-20Controls
.25remCards
.375remPanels
.5remFilter pills
999px05 / COMPONENTS
Familiar patterns. Clear actions.
These are the actual button, filter, notice and product-card styles used on the site.
ACTIONS & STATES
Lime is reserved for actions, savings and link accents; image boxes use neutral or complementary colours. Text links have a low marker stripe beneath the text, leaving arrow icons clear. Hover, keyboard focus, active and disabled states are shared. Focus a control with Tab to see its outline.
DROPDOWNS, FILTERS & INPUTS
Shared popovers support keyboard navigation, selected-state checks and search for longer lists. Native controls remain available before enhancement loads.
Try these on the deals page . The examples below show the shared appearance.
Selected filterDefault filter
BADGE SIZES
Use medium badges in discovery sections and small badges for quiet metadata above a product title. Filters and purchase buttons keep their own control sizes.
Medium · SamplesSmall · LoopsSmall · One-shots
Informative, never invented. Verify a price or discount before showing it as a live offer.
Effects Bundles06 / USAGE
Change the system once.
Foundations
Fonts, colour, type sizes, spacing, corners and minimum touch targets live in src/styles/tokens.css.
Shared patterns
Site styles live in src/styles/global.css. Product cards, artwork and article cards live in src/components/.
Content
Products and articles are kept separate from presentation in src/data/catalogue.js. A new product should inherit existing styles.
Responsive behaviour
Layouts adapt to the available width. Body text stays readable, controls wrap, and cards stack on smaller screens.