Green Dominance · design system · v1 · 1 Nov 2026
the system
One calm world for every page after the landing: the shop, joining, the member dashboard, content and admin. The grammar is The Bloom's: rounded colour sheets, giant tight lowercase heads that end in a full stop, quiet pills, thin rules with tiny mono labels. Green means Shop, burgundy means Member, yellow is the spark.
colour.
brief.md section 8 only, plus lime as the loud green (dark text only). Text on yellow and lime is always dark. Red is for errors alone.
Brand
Surfaces and ink
type.
Archivo (variable weight and width) for display and UI; IBM Plex Mono 500 for data labels, PV and references, never prices. The display face is one token: --font-display.
your bag
earnings.
Start with a package of products.
Choose what goes in your basket
Canopy Daily
Your details and your sponsor
A capsule that sits beside your breakfast. Body copy is 16px, lead is 17 to 20px, muted ink for anything secondary.
Body: when your team buys products, you can earn from those sales, paid weekly after EPS approval.
Placeholders EPS must fill stay visible: [Approved benefit: EPS]
buttons and pills.
One pill shape. Ink is the default; green for Shop, burgundy for Member, yellow for the single spark action on a page. 44px minimum.
Buttons
Pills and chips
Status, tags, badges
forms.
52px fields, 16px type (no zoom on phones), one label above, hint below, error and success said in words with an icon, never colour alone.
Enter a full email, like name@example.com.
Strong enough.
What 1 PV pays out in pairing.
sponsor and placement.
The sponsor is required and checked live: green with the full name, red if not found. Submitting it empty says the meeting's line. Placement shows only Right; Left lives inside the dropdown so it never draws the eye.
Live: try amaka, admin, hauwa, or nobody
Frozen states
Enter your referral code. If you don't have one, use admin.
Dashboard “+”: sponsor limited to your genealogy, slot fixed
That username is not in your genealogy.
tabs and swatches.
Segmented tabs for switching a view, line tabs for page sections, The Bloom's swatch pill for picking a product.
Showing: All (arrow keys move between tabs)
products.
Every product stands in the same studio light. Hover turns the bottle to its three-quarter view. Price in Archivo, PV in mono. Cards come from productCard() so every listing matches.
Quantity, line items, totals
the bag.
A drawer from the right on desktop, a sheet from the bottom on phones. The bag lives in localStorage; totals always come from the product data.
toasts, modals, confirms.
Toasts confirm in one line. Modals sit centred on desktop and rise as sheets on phones. Sensitive actions (payout approval, compensation, refunds, bank changes) show exactly what changes, ask for the password or a code, and say they are audited.
Sensitive action
Approve this payout run?
Paystack sends each ready line to the member's verified bank. Lines that need review are held back.
- Week
- 26 Oct to 1 Nov 2026
- Lines to send
- 11 of 14
- Total to send
- ₦184,215
This is written to the audit log with your name and the time.
tables.
Mono column labels, numbers right-aligned in tabular figures. Under 720px a .table--stack turns each row into a labelled card, so nothing scrolls sideways.
Member payouts
Admin payout run
states.
Empty, loading, error and success each say what happened and what to do next, in one line. Notices carry the honest lines and the disclaimer.
that didn't load.
Check your connection and try again. Nothing was changed.
payment confirmed.
Your order reference is GD-10612.
No product sale, no earning. Joining alone earns nothing.
Green Dominance does not promise or guarantee any income. What a member earns depends entirely on real product sales by them and their team.
Products and people shown are samples
sheets and heads.
Pages move through the palette one rounded sheet at a time: a dark moment, a loud one, a burgundy one for membership, soft mint and cream, yellow sparks. Components read each sheet's ink and rules. Each sheet resets muted and faint text so both pass AA (4.5:1); the figures are measured live.
Default page
Faint words
Calm grouping
Faint words
Shop, soft
Faint words
Daily, warm
Faint words
Member, soft
Faint words
The loud one
Faint words
Shop, loud
Faint words
Membership
Faint words
The dark moment
Faint words
Black
Faint words
dashboard pieces.
The dashboard is calm but never grey: figures are giant type, not boxes; the two legs are the one comparison that matters; every earning row links to the order behind it; held money is gold and apart.
- 01Details
- 02Package
- 03Pay
- 04Verify email
- Package
- Package 4 · 22%
- Sponsor
- Chidi Eze · @chidi
- Bank
- GTBank •••• 4821 Verified
Do I earn just by joining?
What is the upgrade account?
genealogy.
You, your 2, their 4. Every node shows its left and right PV and how they relate to you; every empty slot offers "+ Add member". Nodes go compact by their own width, so the third row fits a phone.
shells.
The member shell (burgundy, a quiet sidebar, a floating tab bar on phones) and the admin shell (deep green-black, denser, grouped). Both run as real pages from data-shell.