Brand Kit
The complete visual identity system for emanuelmallia.com, covering colours, typography, spacing, components, shadows, and motion tokens.
Color Palette
A clean off-white surface in light theme and a near-black ink stage in dark theme, both carried by a single hot ember accent. All colors are CSS custom properties using RGB channels for Tailwind alpha support.
Light Mode
Default theme -- warm, grounded, professional.
Dark Mode
Near-black ink base with a hotter ember accent for contrast.
Typography
Three carefully paired typefaces — Archivo for headings, Hanken Grotesk for body, and Spline Sans Mono for code and data labels — tuned with custom tracking and line-height values.
Headings -- Archivo
Applied automatically to all h1-h6 elements via CSS. Use font-heading for non-heading elements.
The quick brown fox
Jumps over the lazy dog
Pack my box with five
Dozen liquor jugs quickly
How vexingly quick daft
Zebras jump in the fog
Body -- Hanken Grotesk
Default sans-serif for all body copy. Optimised for long-form readability at 16px base.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Code -- Spline Sans Mono
Monospace for inline code fragments and fenced code blocks.
Inline Code
Use the cn() utility to merge clsx and tailwind-merge class names.
Code Block
import { cn } from '@/lib/utils'
export function Card({ className, ...props }) {
return (
<div
className={cn(
'rounded-xl border border-border bg-background-alt p-6',
className
)}
{...props}
/>
)
}Emphasis — Hanken Italic
Used sparingly to emphasise focal words and proper nouns. Applied via font-display-serif italic, which now renders Hanken Grotesk italic — a humanist-grotesque italic that leans into the word rather than away from the sans system.
Display Accent
Data & AI Expertise
Pattern: sans bold + Hanken italic emphasis on one focal word
Display Numeral Suffix
50% revenue
Pattern: sans-bold numeral with Hanken italic unit at 0.55em
Inline Body Accent
Data platforms and AI systems that actually ship. From architecture to production.
Pattern: Hanken italic on one verb at 1.08em — rare, one per paragraph max
Spacing & Layout
A 4px base unit spacing scale and three container widths that enforce consistent rhythm across every page.
Spacing Scale
Container Widths
Article container, forms
Prose content, optimal reading width
Page container, full-width sections
Component Patterns
Reusable UI primitives that compose the entire interface -- buttons, badges, cards, and decorative elements.
Buttons
Primary (Accent CTA)
Secondary (Outline)
Ghost (Minimal)
Badges
Card
Standard Card
Rounded-xl with border-border, bg-background-alt, and a smooth hover lift with shadow-card-hover.
Static Card
Same base styling but with hover disabled. Used for informational content that is not interactive.
Accent Line
A 48px wide, 2px tall ember bar used above section headings as a visual anchor. Applied via the accent-line CSS class (pseudo-element) or inline.
Section Title
Supporting description text below.
Focus Ring
All focusable elements use a consistent double-ring style: 2px background gap + 2px accent ring via box-shadow.
Shadow System
Four depth levels from near-flat to prominently elevated, all using neutral black at low opacity for a natural feel.
Subtle
shadow-subtle
Code blocks, subtle depth
0 1px 2px 0 rgb(0 0 0 / 0.03)
Elevated
shadow-elevated
Dropdowns, tooltips
0 4px 6px -1px rgb(0 0 0 / 0.05), ...
Card
shadow-card
Card resting state
0 1px 3px 0 rgb(0 0 0 / 0.04), ...
Card Hover
shadow-card-hover
Card hover, focused elevation
0 10px 15px -3px rgb(0 0 0 / 0.05), ...
Animation Tokens
Entrance animations with stagger support. All animations honour the prefers-reduced-motion media query.
Keyframe Animations
Signature entrance — hero, inner-page headers, sections
Gentle entrance for inline elements
Section reveals on scroll
Horizontal entrance from the right
Stagger Delays
80ms increments applied via CSS utility classes for sequential entrance choreography.
Standard Easing
Used across all Framer Motion transitions. A slightly accelerated ease-out curve that feels responsive on entrance and gentle on settle.
Logo & Identity
The wordmark, avatar, and brand elements that form the visual identity of emanuelmallia.com.
Wordmark
The brand name rendered in Archivo. No separate logomark -- the wordmark is the primary identifier.
Foreground
Emanuel Mallia
Accent
Emanuel Mallia
White on Dark
Emanuel Mallia
Avatar
Circular photo used in headers, about pages, and social contexts. Always rendered with a subtle border.
Brand Elements
Accent Line Pattern
w-12 h-0.5 bg-accent -- used before section headings as a visual anchor
Tagline
Data & AI Architect
Icon System
Stroke-based SVG icons at consistent weights. All icons use currentColor for seamless theme adaptation.
Arrow
CTA buttons, navigation links
External Link
Outbound links, references
Clock
Reading time, timestamps
Social links, footer
Do's and Don'ts
Quick reference guidelines for maintaining visual consistency across all brand touchpoints.
Do
Use semantic color tokens (text-foreground, bg-accent) for all color references
Use Archivo (font-heading) for all headings and display text
Use Hanken italic emphasis (font-display-serif italic) sparingly — proper nouns, focal verbs, oversized numeral units. One accent per paragraph, max.
Use blur-fade for hero and section entrances (opacity + y:20 + blur:12, expo-out, 0.6s). It is the signature motion.
Keep layouts clean with generous whitespace and consistent spacing
Use the accent line (w-12 h-0.5 bg-accent) before section headings
Maintain minimum 4.5:1 contrast ratio for all text elements
Don't
Use hardcoded hex values instead of CSS custom properties
Use emojis as icons — use the SVG icon system instead
Mix font families randomly — stick to the three-font system (Archivo, Hanken Grotesk, Spline Sans Mono)
Overuse Hanken italic emphasis — it loses signal if applied broadly. Reserve for hero headlines, numeral units, and single-word body accents.
Use heavy background effects like gradients or complex patterns
Use low-contrast text that fails accessibility standards
Download & Export
Download brand assets or reference this page for design consistency.
Copy the full CSS custom properties block to use in external projects or design tools.
:root {
--color-background: 248 247 245;
--color-foreground: 23 22 20;
--color-accent: 192 51 28;
--color-accent-hover: 162 40 21;
--color-muted: 92 88 83;
--color-border: 229 227 224;
}
.dark {
--color-background: 12 10 9;
--color-foreground: 250 250 249;
--color-accent: 255 77 46;
--color-accent-hover: 255 112 74;
--color-muted: 166 160 154;
--color-border: 40 35 31;
}