Brand Kit
Colour
Token
Light
Dark
Background
The page surface. One per theme.
Light
Dark
Background alt
Raised surface, only where elevation is genuinely needed.
Light
Dark
Foreground
Headings and primary text.
Light
Dark
Prose
Long-form article text, a step softer than headings.
Light
Dark
Foreground muted
Ledes and secondary copy.
Light
Dark
Muted
Labels and metadata.
Light
Dark
Border
Hairlines between sections and rows.
Light
Dark
Border strong
Control outlines.
Light
Dark
Accent
Ember. Ember-deep on light clears AA at 5.26:1; hot ember on ink.
Light
Dark
Accent hover
Hover state of accent links.
Light
Dark
The One Signal Rule
Ember marks the surname, in-copy links, focus rings, list markers and at most one deliberate signal per fold. Primary buttons are ink and turn ember on hover.
One surface per theme
Sections are separated by hairlines and spacing. No alternating background fills, no forced-dark bands inside a light page.
Semantic colours
Success, warning and error stay out of brand surfaces. Article callouts use the neutral surface with a labelled rule.
Typography
Archivo
Display and headings
Hanken Grotesk
Text
Spline Sans Mono
Labels and data
Display
The homepage name. Once on the site.
Emanuel Mallia
Page title
The single H1 of every inner page.
Let's Collaborate
Article title
Article H1s, long headlines.
Permission-Aware RAG: Propagating ACLs into a Vector Index
Section heading
Section H2s.
Latest Insights
Sub-section
Entries, role titles, list items with a heading.
Data & Database Architecture
Compact title
Index rows, small entries.
Building the Work Brain
Statement
A positioning sentence in the display face.
Leading enterprise Data & AI mandates from strategy through production.
Manifesto
The homepage principle. Once on the site.
Working systems over presentations.
Evidence value
Key figures.
4
Functions Led
Lede
The paragraph under a title. Muted.
Thoughts on AI delivery, data architecture, and technical leadership.
Body
UI copy.
Data platforms, governance and AI systems built for regulated businesses in fintech, telecoms, iGaming and payments.
Small
Secondary copy, lists.
Connect professionally and follow updates.
Label
Labels inside a section. Never above every H2.
Working stack
Meta
Dates, reading time, periods, counts.
Long-form
Article body, on a 42rem measure.
Article body is set at 17px, stepping up to 19px from tablet, on a 1.72 leading and a 42rem measure. Links read in ember with a hairline underline that firms up on hover.
- Emphasis
- Inside a headline, emphasis is colour (ember) in the same face, used sparingly. Never a second family, never Hanken italic dropped into an Archivo headline.
- Kickers
- A label above a title appears only when it carries information the title does not: a status, a series, a count. A kicker that restates the H1 is deleted.
Shape
Surfaces and controls
2px corners. Where elevation is genuinely needed: a 1px hairline, no resting shadow.
Hairlines
Rules sit inside the container, on the grid, never edge to edge.
The exception
A 6px circle on the footer clock, and portraits. Nothing else is round.
Components
Button
primary
Ink fill, bone in dark. Turns ember on hover: the accent is the response, not the resting state.
secondary
Hairline outline on the page surface.
ghost
Text only, for low-emphasis actions inside dense UI.
Sizes sm, md, lg. arrow appends a nudging arrow; external links get the diagonal arrow automatically. Labels are Title Case, one label per intent per page.
Links and focus
- In copy, links read in ember with a hairline underline that firms up on hover, like this one to the Insights index.
- All insightsLinkedInStandalone navigation, sentence case. The arrow nudges 3px on hover.
- A 2px ember ring, offset 2px from whatever surface the control sits on.
Icons
Phosphor, imported only through components/ui/icons.tsx. Regular weight by default, bold where a glyph has to hold up at 12 to 14px. No hand-drawn paths, no icons in tinted squares.
Layout
The split and the heading rail, live. Below 1024px both stack to a single column.
- Max 80rem. Gutters 20 / 32 / 40px. Every page's left edge lines up with the wordmark.
- 12 columns, gap 20 / 32 / 40px. Children opt into explicit spans and state their below-lg fallback.
- clamp(4rem, 2.6rem + 4.6vw, 7rem) top and bottom. The vertical rhythm of a section band.
- Patterns
- Each at most once per page: masthead, evidence ledger, heading rail, statement, front page, index, chronology, closing split.
Motion
- A display line rising out of its own line box. Transform only, so the text paints at full opacity and LCP is never gated. 1.05s.
- A fade and 14px rise for supporting copy above the fold, staggered with an inline --d delay. 0.9s.
- Scroll reveal, played with Web Animations by the head script, optional delay in ms. Below the fold only, never nested.
- cubic-bezier(0.16, 1, 0.3, 1), expo-out, for every entrance, reveal and hover.
- Colour and a 3px arrow nudge over 200 to 350ms. Buttons press down 1px.
- Every entrance and reveal collapses to its end state.
- The one perpetual animation on the site, on the footer clock, because it marks a genuinely live value.
Entrance
Kicker
Working systems over presentations.
Supporting copy follows the line on a short stagger.
Not used: parallax, scroll-linked fades of content, pointer physics, cursor effects, floating particles, marquees, and counters that count up to single digits.
Do and don't
Do
- Use the type roles.
- Align to the grid.
- Let hairlines organise content.
- Keep ember rare.
- Verify both themes at 375, 768 and 1440 widths.
- Keep content server-rendered and visible without JavaScript.
Don't
- Add cards to group text.
- Put an eyebrow above every heading.
- Mix type families inside a headline.
- Use em-dashes or bold in body copy.
- Reintroduce cream backgrounds, aurora, glass or WebGL.