01
Phase · Diagnose
v3 absorbs the marketing-surface patterns crystallised from the new homepage and BOS Platform page. Refined, cream-forward, typographically layered. This document is itself the system — every token, surface, and pattern below is built with v3 itself.
v2's base palette holds. v3 adds warm-dark surface tokens and the peach-blush gradient that unifies the storefront card family.
General Sans replaces Inter for display headings. Inter remains for body, sublines, and UI. IBM Plex Mono is the metadata voice. Noto Serif italic enters where editorial emphasis lives.
For founders of established African businesses whose brand has fallen behind the operation. We diagnose the gap, then build the clarity, identity, and systems to close it.
Inter at 17/1.55 carries body and sublines. The eye reads this comfortably for long stretches. v3 standardises on Inter for any text under display size — including section descriptions, card sublines, form labels, button text.
v2's wider hue range stays available for app dashboards. v3 introduces a warm-only palette for marketing surfaces — the OS reads as a story: sand → peach → dark anchor → coral → red → gold → deepest.
The dark structural anchor in position 03 gives the palette visual rhythm. Without it, the seven stages would blur into a single coral gradient.
Mix all three on a page and it reads as composed. Use only one and it falls flat. Hover the peach-blush card — the v3 fade-to-white hover is the core marketing-card move.
Informational. Used for dashboard surfaces, app interiors, neutral cards. --cream-card on --cream-border.
Storefront. Hover me — fades to white over 350ms with a brand-red glow shadow and translateY(-3px) lift.
Focal moment. Earned weight. Cap at 2–3 dark surfaces per page, no more — they earn meaning by scarcity.
The methodology+platform pattern. Two stacked subsections inside one warm-dark surface, separated by a dashed divider. Says "paired views of one OS, not two separate things."
Three phases. Seven Modules.
Each stage produces an output that becomes the input for the next. Skipping stages creates downstream problems.
Active tab and panel share the same gradient — they read as one folder. Click any of the three demo tabs to see the panel swap colour. In production: auto-rotates 5s per stage, pauses on hover, stops on user click.
Crystallise positioning, audience, and the narrative that runs everything. Brand Clarity AI runs the workshop and produces the strategy document.
Five vertical pill bars (rx=36 — half bar width, so tops and bottoms are full semicircles). Heights step up to compound. Each bar fills with its own top-to-bottom gradient from the v3 stage palette.
v3 hero rule: in a hero with three CTAs, do one filled primary + one filled secondary + one text link. Three filled buttons of equal weight don't read as a hierarchy.
The nav pill, the Connect-With-Us CTA, and the floating section-nav button all use frosted glass. v3 specifies dark-mode variants so the nav stays consistent regardless of the page's theme.
Use these and only these. Adding new statuses fragments the visual language and erodes the system's clarity over time.
Descriptions collapse to zero height at rest, then expand on hover after a deliberate 0.5s delay. The delay turns hover from a twitchy state into something the user has to mean. Hover any card below.
Audit where the brand has fallen behind the operation. Every engagement begins here, no exceptions.
Positioning, audience, messaging architecture. The strategic foundation every other module runs on.
Visual identity and website built from completed strategy. Expression follows clarity, not the other way around.
/* Description collapsed at rest */
.card-desc{
max-height: 0;
opacity: 0;
transform: translateY(-12px);
overflow: hidden;
transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
}
/* On hover — 0.5s delay before reveal */
.card:hover .card-desc{
max-height: 200px;
opacity: 1;
transform: translateY(0);
margin-top: 10px;
transition: max-height .55s ease .5s,
opacity .4s ease .5s,
transform .5s ease .5s,
margin-top .45s ease .5s;
}The same hover-reveal pattern, but auto-cycling through items in a loop. Hovering anywhere over the row pauses the cycle and lets the user drive. Cycle stops permanently on first manual click in interactive use cases.
Diagnose where the brand has fallen behind the operation.
Positioning, audience, and the narrative that runs everything.
Identity, messaging, and the operating frameworks behind them.
A content operation that compounds, not a stream of one-offs.
Offers, funnels, and the growth infrastructure that turns attention into revenue.
// Auto-cycle reveal — pauses on hover, runs only when in viewport
(function() {
var items = document.querySelectorAll('.cyclable');
var current = 0, interval = null, paused = false;
function reveal(idx){
items.forEach(function(el, i){
el.classList.toggle('is-revealed', i === idx);
});
}
function start(){
if (interval) return;
reveal(current);
interval = setInterval(function(){
if (paused) return;
current = (current + 1) % items.length;
reveal(current);
}, 3000);
}
function stop(){ if (interval){ clearInterval(interval); interval = null; } }
container.addEventListener('mouseenter', function(){ paused = true; });
container.addEventListener('mouseleave', function(){ paused = false; });
new IntersectionObserver(function(entries){
entries.forEach(function(e){ e.isIntersecting ? start() : stop(); });
}, { threshold: 0.3 }).observe(container);
})();The theme toggle pill at bottom-center and the section-nav button at right-edge mid-height. Both float over the page regardless of scroll. Both are subtle. Both stay out of the user's way until needed. This very page has both — try them.
A warm peach gradient wrapping the final CTA + footer. Turns the bottom of the page into the warmest, most resolved part of the page rather than a generic block. You can see this exact pattern at the bottom of this very document — keep scrolling.
Every v3 BXS surface starts with this token set. If a colour isn't in here, you're inventing — go back to the system.
:root{
/* Cream surfaces */
--cream:#FDF8F5;
--cream-card:#FAF7F3;
--cream-soft:#F5F0EA;
--cream-border:rgba(0,0,0,0.08);
--cream-border-strong:rgba(0,0,0,0.12);
/* Ink */
--ink:#0D0B09;
--ink-mid:#3D3A36;
--ink-light:#7A756E;
--ink-faint:#B8B3AC;
/* Brand */
--red:#E13540;
--coral:#F27067;
--grad:linear-gradient(135deg,#E13540,#F27067);
/* Warm-dark surfaces (v3) */
--warm-dark:#15110E;
--warm-dark-card:#1F1A16;
--warm-dark-border:rgba(255,255,255,0.08);
--warm-dark-border-strong:rgba(255,255,255,0.14);
/* Gradients (v3) */
--peach-blush-grad:linear-gradient(160deg, #FBE5D8 0%, #FAF1EA 60%, #F6EDE3 100%);
--page-bottom-grad:linear-gradient(to top, #ECBFAE 0%, #F6D8C8 22%, #FBE5D8 45%, #F8EFE6 70%, #FFFFFF 100%);
/* Radius */
--r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-2xl:32px;
}The spec captures intent. The showcase (this page) shows the patterns at runtime. The skill update merges the v3 deltas into the design rule book.