Extensa Brand
Forest for structure, copper for 10% accent. Three fonts: Newsreader (display + money), Inter (body + UI), Plex Mono (captions). 2px corners, no shadows, no emoji, no exclamation marks. Direction A is the visual contract.
0 · Stack
- Next.js 14 (App Router, TypeScript, RSC where it makes sense)
- Tailwind CSS with the provided
tailwind.config.ts - shadcn/ui as the unstyled primitive base — Card, Dialog, DropdownMenu, Tabs, Tooltip
- lucide-react for icons (used sparingly — see §5)
- No component libraries beyond shadcn. No chart libraries except
rechartsif needed for the Bright Connect tab; otherwise SVG. - Mock data lives in
lib/mock-data.ts(provided). Wire real data later.
1 · The eight rules
These override anything the mockup might suggest:
- Forest is structure. Copper is light. Forest fills sidebars, divider rules, primary type. Copper appears on roughly 10% of the page — italic stress, accent rules, the projection edge of a chart, the active state. Never paint a whole button or card copper.
- Three font families, no others. Newsreader (display + money figures), Inter (body + UI), IBM Plex Mono (captions + timestamps + codes). All loaded via
next/font. - Italic only on the word the eye should land on. "Aidan, here is your Sunday." Never italicise a whole sentence.
- No emoji. No exclamation marks. Anywhere. Including marketing copy.
- Tabular numerals everywhere there's a number. Money, time, percentages, runway. Set
font-feature-settings: 'tnum' 1on<body>(already done inglobals.css). - Sharp corners. Card radius is 2px. Buttons are 0. No capsule pills.
- No drop shadows. Lift via paper-2 surface or a 1px rule, never blur.
- Section numbers matter. Every card has a numbered eyebrow —
01 · TODAY'S CALENDAR. The page reads like a print artefact translated to glass.
2 · File layout
app/
layout.tsx ← <html>, fonts via next/font, sidebar shell
page.tsx ← redirects to /today
today/page.tsx ← Today screen (the daily driver)
tasks/page.tsx ← Covey quadrant view
[entity]/page.tsx ← /bright-connect, /solar-market, etc.
globals.css ← provided — DO NOT EDIT THE TOKEN BLOCK
components/
ui/ ← shadcn primitives
brand/
extensa-mark.tsx ← the wordmark + reach line
entity-badge.tsx ← BC / SM / TQC / TCE pills (3 variants)
status-dot.tsx ← green / amber / red square
eyebrow.tsx ← Plex Mono UC label
card.tsx ← Card · CardHeader · CardEyebrow · CardBody
reg-marks.tsx ← corner registration marks (decorative)
spark.tsx ← actual line + projection overlay
layout/
sidebar.tsx ← forest-deep, the cockpit nav
meta-strip.tsx ← top breadcrumb / "00 · TODAY · v1"
section-header.tsx ← eyebrow + h1 + lede pattern
today/
calendar-strip.tsx ← the 7am-7pm hour ruler with meeting blocks
cash-tile.tsx ← entity balance card
waiting-on-list.tsx
changed-feed.tsx
tasks/
quadrant-card.tsx
lib/
mock-data.ts ← provided
fmt.ts ← fmtAUD, fmtK, fmtSign, etc.
3 · Token reference (already in tailwind.config.ts)
| Concept | Tailwind class |
|---|---|
| Page background | bg-bg |
| Card surface | bg-paper (default), bg-paper-2 (raised) |
| Sidebar | bg-forest-deep text text-fg-inverse |
| Forest type | text-forest, text-forest-deep |
| Copper accent | text-copper |
| Copper hover | text-copper-2 |
| Body text | text-fg-1 (primary), text-fg-2, text-fg-3 (muted) |
| Quiet meta | text-fg-4 |
| Card divider | border-rule-paper |
| Page divider | border-rule |
| Display family | font-display |
| Body family | font-body |
| Mono family | font-mono |
| Entity colours | text-ent-bc, bg-ent-bc, etc. |
4 · The five primitives
4.1 <ExtensaMark>
Newsreader 300 wordmark with italic copper terminal a, line + node above. Props: size (number), reverse (boolean), withTag (boolean).
4.2 <Card> + <CardHeader> + <CardEyebrow>
The single canonical container. Header has number eyebrow on left, optional meta on right. 1px border-rule-paper, 2px radius, no shadow.
4.3 <EntityBadge entity="bc" variant="soft" />
Three variants: soft (default — tinted background), solid (entity colour fill, ivory text), dot (just a square + caps short code). Reads colour from --ent-{key}.
4.4 <StatusDot status="amber" />
8px square (NOT a circle). Maps to positive/warning/negative tokens. Use sparingly.
4.5 <Eyebrow>
Plex Mono 10px / 0.22em / uppercase / copper. Sometimes prefixed with a section number ("03 · ").
5 · Iconography
- lucide-react only, stroke 1.5px, never filled.
- Icons are earned, not decorative. A search icon next to the search input — yes. An icon on every nav item — no.
- Never combine an icon with an entity badge in the same chip.
6 · Voice & copy
| Do | Don't |
|---|---|
| "Aidan, here is your Sunday." | "Welcome back!" |
| "Six meetings, two reds, one signature blocking payroll." | "You have a busy day! 📅" |
| "Heavy until 14:00; breathable after." | "Stay productive!" |
| "Sort by importance, act by urgency." | "Boost your efficiency" |
| "Chase" / "Approve" / "Sign" / "Snooze 1d" | "Click here" / "Learn more" |
Numbers: always currency-formatted ($612,480), always tabular-numeral'd, always Newsreader 300 if they're the focal element. Money in Inter is wrong.
Time: 24-hour, always. 13:42, never 1:42 PM. Plex Mono.
Dates: long form for the human reading — "Sunday, 3 May 2026" — and short Plex Mono for meta — "MON 4 MAY".
7 · The screens to build (in order)
/today— the daily driver. Hero greeting, calendar strip, priority tasks, 4 cash tiles, "since yesterday" feed, "waiting on" list, 7-day events. SeeA_Todayinoption-a.jsxand theToday desktopartboard./tasks— Covey 2×2 quadrant. SeeA_Tasks./[entity]— start with/bright-connect. Hero with logo + balance, balance/projection chart, OKRs, HubSpot rep + pipeline tables, 30-day events. SeeA_BC.- Mobile breakpoint — 390px. The desktop layout collapses to a single column; cash tiles become a horizontal scroller; calendar becomes a vertical list.
- Cmd+K search — Dialog with global fuzzy search across tasks, meetings, entities, contacts.
8 · What to ship in the first PR
app/layout.tsxwith sidebar shell + meta strip + fonts loadedcomponents/brand/*— all five primitives, Storybook-style demo at/_brandapp/today/page.tsxrendering againstmock-data.ts- Mobile responsive on
/today
After that lands, we'll iterate. Don't try to ship all three screens at once.
9 · What NOT to do
- Don't add a marketing landing page, sign-up flow, or auth UI. This is an internal tool.
- Don't introduce a dark mode toggle yet. (Plan exists for an evening theme — Direction C in the mockup file — but not in this PR.)
- Don't add icons to nav items unless the spec shows them.
- Don't replace Newsreader with a fallback "modern" serif (Tiempos, Lyon, etc.) — the type is the brand.
- Don't use shadcn's default
rounded-mdorrounded-lg— override every primitive torounded-card(2px).
10 · Acceptance criteria for "Direction A · Today" PR
- Sidebar matches mockup: forest-deep #04161A, ExtensaMark reversed, sub-brand tile row, section nav with copper active rail
- Top meta strip:
00 · TODAY · v1 · Sun 3 May - Hero: 48px Newsreader 300 greeting with italic copper "Aidan."
- Calendar strip: 7→19 hour ruler, 6 meeting blocks coloured by entity, NOW indicator in copper
- Cash tiles: 4 entities, money in Newsreader 300 / 30px, status dot, runway in Plex Mono UC
- Priority list: quadrant chip + entity badge + title + due date
- No emoji anywhere. No exclamation marks anywhere.
- Mobile breakpoint at 390px doesn't break.
- Lighthouse a11y ≥ 95.