This document is the single source of truth for Nullshift's visual identity. It defines the typography, colour palette, logo usage, and design principles that keep every touchpoint consistent, recognisable, and intentional.
// 01 — TYPOGRAPHY
TYPE SYSTEM
Display / Headings
Inter
600 (semibold) — max weight var(--font-sans)
All headings — sentence case, weight 600, -0.03em tracking, 1.04 line-height. Never weight 900.
Icosphere node network in a glass cage — systems, intelligence, connection.
// 05 — DESIGN PRINCIPLES
CORE PRINCIPLES
01
Dark architectural system
Three surface tiers: background → surface → elevated. Components live at their tier. No arbitrary depth or shadow stacking — only modals get drop shadows.
02
One brand colour, used precisely
Emerald #10b981 is reserved for actions: CTAs, focus rings, active states, the brand dot. Signal colours (danger, warning, success) are for status only — never as decoration.
03
Typography as structure
Inter 600 for all headings — sentence case, -0.03em tracking, 1.04 line-height. Hairline 1px borders define geometry. Layout communicates hierarchy before colour does.
The single source of truth for Nullshift's visual identity — typography, colour, logo usage, and the principles that keep every touchpoint consistent and intentional.
// 01 — Typography
Type System
Display / Headings
Inter
600 (semibold) — max weight
var(--font-sans)
All headings — sentence case, weight 600, -0.03em tracking, 1.04 line-height. Never weight 900.
Code, admin labels, reference IDs, system markers. Never used on public-facing buttons.
// 02 — Colour Palette
Colour
The emerald #10b981 is the single accent — reserved for the logo dot, CTAs, the headline glow, hover states, and active nav. Everything else stays in the near-black → white → grey range.
// 03 — Logo & Mark
The Mark
Two staggered, rounded pills — one light, one emerald, offset to suggest a shift — paired with the NULLSHIFT wordmark. One consistent signature across every surface.
Primary lockup
NULLSHIFT
Mark
App icon
Do
•Maintain clear space of at least the mark's width on all sides
•Minimum lockup width: 120px · minimum mark: 18px
•Use on the near-black background (or the dark app-icon tile)
•Keep the light pill / emerald pill colour relationship intact
Don't
✕Don't rotate, stretch or distort the mark or pills
✕Don't change the colour scheme or recolour the pills
✕Don't add effects except the approved hero-glow
✕Don't place on busy or light backgrounds
✕Don't recreate or re-letter the wordmark
// 04 — Signature Graphics
Visual Language
Our signature graphics share one system — “Glass & Metal Relight”: emerald glass and gunmetal rendered on near-black with filmic tone-mapping. They animate and crossfade on scroll across the homepage.
Gyroscope
Three gimbal rings, a glass band and a mirror core — craft, precision, motion. Anchors the “websites built from scratch” and “custom systems” chapters.
Neural Sphere
An icosphere network of pulsing nodes inside a glass cage — systems, intelligence, connection. Resolves in for the “one team, end to end” chapter.
// 05 — Design Principles
Core Principles
01
Dark architectural system
Three surface tiers: background → surface → elevated. Components live at their tier. No arbitrary depth or shadow stacking — only modals get drop shadows.
02
One brand colour, used precisely
Emerald #10b981 is reserved for actions: CTAs, focus rings, active states, the brand dot. Signal colours (danger, warning, success) are for status only — never as decoration.
03
Typography as structure
Inter 600 for all headings — sentence case, -0.03em tracking, 1.04 line-height. Hairline 1px borders define geometry. Layout communicates hierarchy before colour does.
// 06 — UI System
Halo UI System
Every interface is built on three surface tiers, a single brand signal, and typography that carries hierarchy without colour.
Surface tiers
BackgroundT.bg
Page canvas. Nothing sits below this tier.
SurfaceT.surface
Cards, panels, nav, and inputs live here.
ElevatedT.elevated
Modals, dropdowns, and active tabs rise to this tier.
Eyebrow pattern
Section label
—8px dot in T.primary + T.primarySoft ring
—label-sm: 0.75rem · weight 500 · 0.08em tracking
—Uppercase · T.sans (not mono)
—Used once per section to name the topic
Radius scale
sm — 6pxBadges, inline tags
md — 10pxInputs, buttons, chips
lg — 16pxCards, modals, panels
xl — 24pxHero cards, large containers
Button anatomy
·T.sans — never mono on buttons
·40–48px height
·T.r.md radius (10px)
·inset 0 1px 0 rgba(255,255,255,0.18) top-light
·One brand colour for primary; no outlines or glows
// 07 — Downloads
Brand assets
Take the logo files and the animated intro with you — for slides, socials, email signatures, partner sites, or anywhere the brand needs to show up. High-resolution transparent PNGs, plus the logo opener as an MP4.
A 1080p brand reveal you can drop into videos, socials or presentations. Download the MP4, or open the full interactive version (with sound) that greets first-time visitors.
