Develop · Build
How it came together.
- 01
A grid of project cards
The home view is a grid of project cards, not a dashboard of KPIs: each card holds status, category, and a short description, with filtering and sorting at the card level so every project is one click in.
Product Strategy - 02
One shared-password gate, deliberately
A single HMAC-signed cookie gates every route in middleware; no role tiers. For ten trusted people on one office network, per-role policy would have been access-control theatre with a real failure mode: a mis-set role showing someone an unannounced project. Machine writes (git-log ingest, webhooks) authenticate separately with a timing-safe API key, so automation never rides the human session.
Backend Engineering - 03
Recharts in-app rather than a BI tool bolted on
A dozen dense analytics panels over the portal's own data. Recharts in the same React tree keeps them inside the auth shell - no second service, certificate, or login to operate, reading the same Prisma queries as the rest of the app.
Frontend Engineering - 04
Timeline as a shared story
Every project's commits, deploys, and milestones land on one chronological timeline, auto-ingested from
Product Strategygit logand the CRM so it's never stale. Stakeholders read it as the programme's story; project leads use it as their activity feed. - 05
CRM Copilot: conversational triage on the shadow CRM
The team mirrors Salesforce and HubSpot into a shadow log for audit and reporting. CRM Copilot puts a tool-calling AI assistant on top of it, built against both REST APIs, so "which CRM syncs failed today and why" is a chat question instead of grepping JSONL by hand. Read-only today; any future write-back is gated behind an explicit proposal-and-confirm step.
Backend Engineering
Develop · Forks
Decisions on the record.
The few calls worth defending. Each one is a fork; the other branch would have been a different project.
Decision · 01
Server-rendered Next.js for the auth-gated cockpit
A dense data UI for no more than ten people, mostly on Dubai office desktops. Server-rendered Next.js puts the auth check and first paint in the same round-trip, so /projects loads in under a second - an SPA would have pushed auth to the client and shown a flash of empty state on every navigation.
Decision · 02
One TLS proxy on :8443 for every tool
Every tool lives under one TLS-terminated proxy - one cert, one auth surface, one host to type. Sub-domain-per-tool would have multiplied the cookie and CSP surface for no separation an internal product needed.
Develop · System
The design system.
Tokens and treatments as they exist in the repo - values verbatim, nothing aspirational.
Carbon and ink, built for a dense internal cockpit rather than a brand surface. The accent is not a colour, it is ink itself: near-white on the dark theme, near-black on the light one, so an active state is a solid pill rather than a coloured highlight. Gold survives only as a pinpoint on the wordmark, which is a reversal from where the portal started.
Colour
--bg-dark / --bg-surface / --bg-elevated#0D0B09 / #17140F / #1E1A15- The three dark-theme planes: base, panel, raised. Warm-shifted near-black rather than neutral grey, which keeps it from reading as a generic dev tool.
--accent#F2ECE0- The monochrome ink accent. Active nav pills, primary buttons and focus states are filled with it, with --accent-text (#17130E) as the foreground on top.
--gold#C8A96E- Kept only for the wordmark monogram and brand assets. It used to be the whole accent system; the Glass Bento reskin demoted it to a pinpoint.
--text-primary / -secondary / -dim#E5E5E5, then 80% and 66% of it- One text colour at three opacities rather than three greys, so contrast ratios stay predictable when the surface underneath changes.
--border / --border-hover / --border-activergba(255,255,255, 0.09 / 0.16 / 0.24)- Hairlines that brighten on interaction instead of changing hue, the same move as the text ramp.
Light theme#E7E2D9 base, #EEE9DF surface, #FFFFFF elevated- Grege rather than white, taken from the BARNES 2024 brandbook's stone colour, so the light theme is not just the dark one inverted.
Type
- UI and body
AaBb Handgloves 0123
Hanken Grotesk, then system-uiBody text sits at 0.8125rem with captions at 0.6875rem and a 0.625rem micro size. Small on purpose: the brief was absorbing a project's status in about two seconds, which means fitting more on screen, not bigger type.
- Display
AaBb Handgloves 0123
Cormorant GaramondThe canonical BARNES display serif, carried in from the wider design system so an internal tool still reads as part of the house.
- Data and labels
AaBb Handgloves 0123
JetBrains MonoTest counts, milestone tallies and status chips, where tabular figures stop numbers jittering as they update.
Implementation
Plain CSS custom properties in app/globals.css, layered under Tailwind, with both themes declared as full token sets rather than one theme plus overrides. Scales are fixed rather than ad hoc: radius runs 2/4/8/12/16/24px plus a pill, elevation runs five steps plus a glow, and motion has five durations (100ms to 800ms) against named easings including a spring at cubic-bezier(0.16, 1, 0.3, 1). NOTE for anyone updating this: the repo's DESIGN.md contradicts globals.css on the accent and is out of date. Trust the CSS.
Elements
- Glass bento panels
Frosted cards over the base plane: a barely-there white fill at 4.5% opacity, a hairline border, and backdrop blur, used across 26 separate rules in the stylesheet.
A dashboard this dense needs the panels to sit above the background without becoming opaque boxes that fragment the page into unrelated rectangles.
- Ink-filled active states
The active nav item is a solid ink pill with the near-black --accent-text on top, rather than a coloured underline or tint.
With no colour accent left to lean on, weight has to carry the state. A filled pill is unambiguous at a glance in a UI where several things can be selected at once.
Process · 01
Trying BARNES Red, and putting it back
The portal ran on gold, which never actually appears in the real 2024 corporate brandbook. So in July it was recoloured to BARNES Red (#C70A33), the genuine brandbook value, on the reasoning that matching the company's own book beats matching a habit. That lasted a day. Red on a dense dark cockpit read as alarm rather than brand, every status colour now had to compete with it, and it went back. The token names still say gold because gold was, at that point, once again correct.
Process · 02
Then removing the accent colour altogether
The reskin that stuck went further than the red experiment: it took the accent off colour entirely and made it ink. On a screen that is mostly status (green passing, amber pending, red failing), a decorative brand colour is one more thing competing with the colours that carry meaning. Ink for chrome, colour reserved for state. Gold stayed on the wordmark, which is the one place it is decoration and nothing else.