A refined visual identity that feels elevated without feeling exclusive. Thoughtful design gives it a distinctive presence while keeping it welcoming and approachable.
Drop 04
Hand-dyed adire sets from three Yaba studios, sized S to XXL and shipped from Lagos within two days.
Admin · 12 orders to ship · 1 refund pending
Select a type to highlight it in the card above. Select again to clear.
Playfair Display is the page's root face: wordmark, headings, navigation and button labels. DM Sans carries paragraphs, answers, form copy and the footer. Section headings request weight 300, which renders as Playfair's lightest available weight (400); the hero uses 500 and small card titles 600 in uppercase. Body copy often sits at DM Sans 300 with 1.5–1.6 line height.
The ground is #222222 and the ink is #f1efe0; light mode swaps them, as the landing's cream sections do. Derive every other neutral from those two at reduced strength: borders at 10–15%, quiet fills at 2–5%, supporting text at 60–70%. Never use pure white text or a grey from another scale.
Large headings pull in tracking (about −1 to −2px at 32–64px) with 1.1–1.2 leading and stay in sentence case. Italicise one phrase for emphasis, as in "Join the culture". Small eyebrows, numbering (01, 02…) and footer captions go uppercase with +0.05em to 1px tracking.
Primary calls to action are rounded-full pills in Playfair: cream fill with charcoal label, or a cream outline in the navigation. On hover, a small dot expands to fill the pill and the label gives way to an up-right arrow over about 300ms. Inputs and inner controls use rounded-inset (8px), cards rounded-panel (12px) and full-screen dialogs about 16px.
Cards barely lift from the ground: a near-invisible fill with a border-rule hairline. Lists and accordions separate items with bottom borders only. Reserve deep, soft black shadows for floating media such as phone mock-ups; do not add decorative shadows to cards.
Lead is the lilac from the page glow and the app's on-switches, spinners and default-address badges. Use it for links, focus, selection and small marks, never for large fills or body text. Primary buttons stay cream on charcoal (or charcoal on cream). In light mode, lead deepens so it reads as text on cream.
Steeze's internal dashboards mark good in mint, warning in gold and bad in rose, and rank in gold, silver and bronze. Pair each with a label. On charcoal the pastels are used as-is; on cream this entry deepens them so they pass as text.
Entrances rise 20–50px and fade over 0.8–1s on cubic-bezier(0.22, 1, 0.36, 1), staggered 0.1–0.2s. The hero's slide uses 2.8s on cubic-bezier(0.19, 1, 0.22, 1). Hover changes take about 300ms, card washes about 500ms. Honour reduced motion with useReducedMotionConfig().
The admin dashboard uses Outfit (variable, 100–900) for everything; it is the interface font here (font-interface). Use it for dense screens such as tables, dashboards and the app's earnings figures. Customer-facing copy stays Playfair and DM Sans. The admin's own colours are not part of this system, and nor is the app's Montserrat.
The app sets payment-card digits in Orbitron with wide tracking; it is the mono face here (font-mono). Keep it to short technical strings such as card numbers and codes, never paragraphs or labels.
Beside a primary action, the app uses two filled buttons with rounded-inset corners and DM Sans semibold labels: tonal, a blue-slate (#323743) with off-white text, for things like Earnings; and secondary, a mid grey (#5E5E5E) with white text, for things like Edit Profile. Both hold their colour in light and dark.
Calculated from this system’s colours in both modes. These are contrast checks, not an overall accessibility score or certification.
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
Text pairs use the normal-size AA threshold; focus-ring pairs use the non-text threshold.
Normal text: AA ≥ 4.5:1, AAA ≥ 7:1. Large text: AA ≥ 3:1, AAA ≥ 4.5:1 (24px regular or approximately 18.67px bold). Non-text indicators: AA ≥ 3:1. Ratios are displayed rounded down; results use full precision.