Marketing site launched. Design system codified. CI/CD wired across all three planes. The pipeline can now build what it stands on.
Design System
Style Guide
The visual language, tokens, and patterns that define BasalMind. Earth tones — warm amber accent, dark brown surfaces, cream text. Built for editorial clarity; no ornament for its own sake.
Color
A warm earth palette anchored in dark brown and a single amber accent. Surfaces distinguish depth; the accent marks interaction and emphasis only.
Brand palette
--basal-bg
#0e0c09
#0e0c09
--basal-surface-low
#1a1610
#1a1610
--basal-surface-mid
#252018
#252018
--basal-accent
#c49a3c
#c49a3c
--basal-accent-light
#d4b05a
#d4b05a
--basal-accent-dark
#a07828
#a07828
Text tokens (all pass WCAG AA on --basal-bg)
| Token | Value | Contrast | Use |
|---|---|---|---|
--basal-text-bright |
#f5ede0 | ~17:1 | Hero headings, marquee text |
--basal-text |
#ede0cc | ~14:1 | Body headings, logo |
--basal-text-heading |
#d4bf98 | ~11:1 | Section h2, italic headings |
--basal-text-secondary |
#c0a87a | ~9:1 | Default body copy |
--basal-text-muted |
#a89070 | ~6.8:1 | Supporting copy, long-form paragraphs |
--basal-text-dim |
#9a8060 | ~5.5:1 | Hooks, sub-labels, step hooks |
--basal-text-ghost |
#887858 | ~4.8:1 | Footer links, dim chrome |
Border & divider
All dividers are amber-tinted rgba values. Three opacities in use:
--basal-border-strong (0.18) -- header border
--basal-border (0.12) -- section separators
--basal-border-subtle (0.08) -- row dividers within sections
Typography
Two typefaces. Georgia for headings and editorial text — authoritative, not decorative. System sans-serif for labels, metadata, and UI chrome.
Heading scale
h1 -- Hero heading (italic)
Strategy and technology, delivered together
h2 -- Section heading (italic)
Two problems. One frame of reference.
h3 -- Subsection heading (italic)
You have an existing business
Body & labels
Eyebrow / section label
For business owners and founders
Hero sub-copy
Most consultants tell you what to do and send a bill. BasalMind does neither — we figure out what’s worth building, then we build it.
Body copy
We map your current operations, your constraints, who is affected, and what is actually broken. We ask the questions most consultants skip because they already think they know the answer.
Pull quote
The gap between knowing what to build and actually building it costs most businesses their best ideas.
Type rules
- All headings are italic Georgia. No exceptions on marketing pages.
- UI labels (eyebrows, step numbers, badge text) use system sans-serif at 0.75–0.8125rem, uppercase, letter-spacing 0.05–0.1em.
- Line-height 1.7 for body, 1.8 for long-form reading passages, 1.15 for display headings.
- Maximum measure for body: 640–680px. For pull quotes: 600px.
Spacing
A loose, editorial rhythm. Sections breathe. Dense UI patterns are not part of this system.
Section padding
Element spacing
Container
Max-width 860px centered. Side padding 2rem (desktop), 1.25rem (mobile). No nested containers — one horizontal constraint per page.
Components
Three structural patterns cover the full site. No card components. No modals. No grid of equal boxes.
Progressive disclosure (How it works)
Implemented with native <details>/<summary>. No JavaScript. The step hook disappears when open; the body expands via CSS grid row transition.
01
Discovery
We start where you are, not where you think you should be.
Discovery
We start where you are, not where you think you should be.We map your current operations, your constraints, who is affected, and what is actually broken.
02
Map the gap
Making the gap visible is where most strategy work fails.
Map the gap
Making the gap visible is where most strategy work fails.We define your desired state: what success looks like, who benefits, and what outcomes matter.
Editorial contrast grid (Gap section)
Two-column editorial layout with a divider and resolution text below. Not a card grid — no borders on the columns.
Strategy without execution
A consultant delivers a deck and sends a bill. You know what to build. You can’t build it.
Execution without strategy
A developer builds exactly what you described. Six months later you realize you described the wrong thing.
BasalMind closes both gaps — from a single frame of reference, start to finish.
Editorial list (Who we work with)
Two-column grid: label column (13rem) + body column. Row borders, no outer box. Collapses to single column at 640px.
You have an existing business
Your operations are outgrowing your tools. You need better technology but don’t have a CTO or dev team.
You have a great idea
You know what problem you want to solve. You need the strategy to make it viable, the technology to make it real.
Pull moment
One per page. Centered, italic Georgia, var(--basal-accent-light). Maximum 600px wide. No box, no background.
The gap between knowing what to build and actually building it costs most businesses their best ideas.
Build Journal entry
Left-bordered entry feed. Border var(--basal-accent-border), 2px. Date in uppercase sans-serif, body in muted serif.
What this system does not include
- Card components with box shadows or glow effects
- Modal dialogs or overlays
- Tabs, accordions (outside the disclosure pattern)
- Icon sets — text and arrows carry navigation
- JavaScript-dependent UI patterns on marketing pages
Forms
Minimal, accessible form inputs. No floating labels, no elaborate validation animations. Label above, hint below, error replaces hint.
Text input (default)
Used for correspondence only.
Background var(--basal-surface-low), border var(--basal-border-strong). Focus ring: var(--basal-accent) border, no box-shadow.
Textarea
A paragraph is enough to start.
Error state
Enter a valid email address.
Error color var(--basal-state-error) (terracotta — warm, not aggressive). aria-invalid="true" + aria-describedby required for screen reader support.
Form rules
- Label is always visible above the field — no placeholder-only labels.
- Every form element has a
for/idpairing. - Error messages use
role="alert"and replace the hint text — never stack both. - Forms on marketing pages use
mailto:or a server POST — no JavaScript form handling on pages withscript-src 'none'.