SOSU Dripping Gold Bahama
Login

Cart

Your cart is empty

SOSU Component Library

SOSU Cosmetics — Atomic Design System v1.1
SOSU Design System
v1.1 — Phase 1 Atomic Foundation · Shopify Plus
sosu-tokens.css + sosu-components.css
Foundation · 01

Colour Tokens

All colours are CSS custom properties. Never hardcode a hex. Reference the token name in every component and section.

SOSU Core — Neutrals
--sosu-cream#F5F0E8
--sosu-cream-light#FAF8F4
--sosu-cream-mid#EDE7DC
--sosu-cream-deep#DED4C4
--sosu-bark#2C1A0E
--sosu-bark-mid#4A2E1A
--sosu-bark-soft#7A5C42
--sosu-bark-muted#A89070
Brand Gold
--sosu-gold#A67C4A
--sosu-gold-light#C9A06E
--sosu-gold-dark#7B5A32
--sosu-gold-pale#F0E6D3
Sub-Brand Accents
--dg-accent#C8860A · DG
--dg-bg#FDF4E3 · DG
--bahama-accent#1B6B6B
--bahama-bg#E8F4F4
--good-prep-accent#5C7A3E
--good-prep-bg#EDF2E8
Semantic / Functional
--sosu-success#2E7D4F
--sosu-error#C0392B
--sosu-warning#D4780A
Foundation · 02

Typography Scale

Display headings use Cormorant Garamond (--font-heading). Body, labels, buttons, and all UI copy use Montserrat (--font-body). Sizes are fluid — they scale between mobile and desktop breakpoints.

display-2xl
40px→80px
Rebuilding
display-xl
32px→60px
SOSU Cosmetics
display-lg
28px→48px
Studio Wear Foundation
display-md
22px→36px
Match My Makeup
text-xl · 20px
Montserrat
Buildable, breathable, sweat-resistant.
text-md · 16px
Montserrat
The leading makeup brand for everyday wear, built by Suzanne Jackson for real life.
text-sm · 14px
Free shipping on orders over €40 · 14-day returns
label · 10px
uppercase
Dripping Gold · Tan Collection
Foundation · 03

Spacing Scale

4/8 base scale. Touch targets never below 44px on mobile.

2px
4px
8px
12px
16px
24px
32px
40px
48px
64px
section
96px
section-lg
Foundation · 04

Border Radius

none · 0
xs · 2px
sm · 4px
button
md · 8px
card
lg · 12px
drawer
xl · 16px
modal
full
badge/pill
Foundation · 05

Shadow Scale

xs
sm · card
md
lg · hover
2xl · drawer
Atoms · 01

Button System

Three variants × three sizes × all states. Every CTA on the site uses exactly one of these. No exceptions.

Primary — Dark Fill
Secondary — Gold Outline
Tertiary — Ghost / Text
Full Width — Mobile Cart
Atoms · 02

Badge System

Single base class, variant modifiers. All badges are pill-shaped. One badge maximum per product card.

Promotional
New Sale Best Seller Bundle Save Trending −20%
Stock Status
In Stock Only 3 Left Out of Stock
Sub-Brand Pills
SOSU Dripping Gold Bahama Good Prep
Atoms · 03

Price Atom

Consistent price formatting across product cards, PDP, and cart. Sale prices use error red.

Standard
€22.00
On Sale
€18.95 €22.00 Save 14%
Bundle
€38.00 €46.00
.sosu-price__current — 16px semibold · bark
.sosu-price__was — 13px strikethrough · muted
.sosu-price--sale .sosu-price__current — error red
Atoms · 04

Star Rating

Used on product cards, PDP, and reviews. Gold filled stars, muted empty stars, review count in muted text.

(1,874)
5.0 — Liquid Luxe Tan
(247)
4.0 — Studio Wear Foundation
Atoms · 05

Form Inputs

Minimum height 44px. Gold focus ring. Consistent across all templates.

Please enter a valid email address.

Atoms · 06

Select / Dropdown

Used for shade selectors, variant pickers, and filter dropdowns. Same height and focus ring as text inputs.

Atoms · 07

Checkbox & Radio

Used in forms, filters, and cart options. Gold accent colour on checked state.

Checkbox
Radio Button
Atoms · 09

Icon System

SVG icons at 4 standard sizes. Inherit colour from parent. Used in trust strip, cart, navigation, and badges.

16px
20px
24px
32px
gold
error
stroke="currentColor" — icon inherits colour from parent CSS
--icon-size-sm: 20px · --icon-size-md: 24px · --icon-size-lg: 32px
Atoms · 10

Section Dividers

Standard — sosu-divider
Gold accent — sosu-divider--gold
Atoms · 11

Tags / Filter Chips

Used in collection filters and search results. Active state uses dark bark fill.

Bestsellers ✕ New In Tan Foundation Bundles Dripping Gold Under €20
.sosu-tag — default: cream bg / cream-deep border / 32px height
.sosu-tag--active — bark bg / cream text (selected filter state)
Atoms · 12

Free Shipping Progress Bar

Cart drawer atom. One Liquid variable as source of truth. Currently absent from live site — critical conversion fix.

You're €18 away from free shipping
🎉 You've unlocked free shipping!
Atoms · 13

Trust Micro-Strip

Free Delivery Over €40
14-Day Returns
Same Day Before 2pm
Atoms · 14

Announcement Bar

✦ 20% off your first order · Join the Beauty Club ✦
✦ New: Liquid Luxe Tan — Shop Now ✦
System · 01

Sub-Brand Overrides

Add [data-brand="dripping-gold"] to any section wrapper. All child atoms inherit the brand colour automatically. Zero duplicate CSS.

SOSU
SOSU Cosmetics
Makeup, skin, nails.
Dripping Gold
Dripping Gold
The tan that started it all.
Bahama
Bahama Body
Body care, reimagined.
Good Prep
Good Prep
Clean skin, every time.
Molecules · 01

Product Card

Built from badge + price + star + typography atoms. One badge maximum. Descriptor below name (Rhode pattern).

Studio Wear
New
SOSU Cosmetics
Studio Wear Foundation
Buildable, breathable, sweat-resistant.
€22.00
Liquid Luxe
Best Seller
Dripping Gold
Liquid Luxe Tan
The deepest, richest formula.
€18.95€22.00
Tan Mousse
Only 4 Left
Dripping Gold
Tan Mousse — Dark
Long-wear, streak-free formula.
€16.50
Molecules · 02

Cart Drawer Atoms

A composition of atomic pieces. Progress bar · line items · pair-and-save · points balance · checkout CTA.

You're €18 away from free shipping
Liquid Luxe Tan · Medium
Qty: 1
€18.95
Studio Wear · Soft Honey
Qty: 1
€22.00
Add Shade Mitt to save €7 — Sunday Night Kit
You'll earn +200 points
Round up €0.20 for Dogs Trust Ireland
SOSU Cosmetics — Atomic Design System v1.1
Phase 1 · Task 1 · Shopify Plus Foundation
Files: sosu-tokens.css · sosu-components.css
Staging: Joel - 15th May · All downstream tickets inherit from this foundation.