The nuucleo design system.
This is the working manual for nuucleo's brand. It documents the visual language, the components, and the voice. The document is itself built in the system it describes — what you see on this page is what the system can produce.
What nuucleo is.
nuucleo is an operator-led investment house. The brand expression is the operational expression: substance over signal, position by position, by introduction only. Every design choice below traces back to that posture.
Eight arrows, radial.
The logomark is eight arrows arranged in radial symmetry, monoline. Each arrow points outward from a central position. The mark expresses both concentration (centre) and distribution (outward direction) — the operating logic of an investment house.
Construction
The mark is built on a 160×160 viewBox with the centre at (80, 80). Each arrow rotates from the canonical "north" position in 45° increments. Stroke width is 6 units with round line caps and round line joins. The arrow length runs from radius 22 to radius 58, with arrowheads at offset (±8, -30) from the tip.
Schutzzonen
The mark requires a clear space equal to the arrow length on all sides — roughly 35% of the mark's diameter. Do not place text, lines, or other elements inside this margin. The mark must never appear smaller than 16×16 pixels; below that scale, the arrow geometry collapses.
The toggle exception
The theme toggle in the page header uses abstract circles, deliberately not radial symbols. Sun or moon icons would compete with the logomark's eight-fold radiality. Outline = Light, Filled = Dark. This is the only circular form in the system that has nothing to do with the logomark.
Five colours, two themes.
The brand palette is five named colours. The Dark theme is the signature expression; the Light theme is its daylight companion. Both themes draw from the same five-colour fan; only the role each colour plays changes.
Brand palette
Semantic tokens (dark theme)
The CSS uses two tiers: brand colours (above) and semantic tokens (below). Components reference semantic tokens, never brand colours directly. This is the architecture that makes the theme toggle work without per-component rewrites.
Switch between themes using the toggle in the top right of this page. Every component below — and every page in the nuucleo system — adapts automatically because they all use the semantic tokens.
Three typefaces, three roles.
Each typeface plays one role and one role only: Inter for structure, Source Serif 4 Italic for accent, JetBrains Mono for labels. The roles never overlap. This restraint is what makes the system identifiable.
Why three typefaces, not one?
Single-typeface brand systems tend toward two failure modes: either they are too austere (only Inter would look like a generic Swiss-style template) or too decorative (only Serif would look like a literary magazine, not an investment house). The three roles divide the work — structure, accent, label — and the brand reads as kuratorisch precisely because each typeface stays in its lane.
Generous gutters, thin rules.
The layout system is built around three constants: a wide page gutter, a maximum content width, and a hairline rule that subdivides everything. No shadows, no rounded corners, no gradients beyond a single accent wash.
The hairline system
Hairlines are the connective tissue of the layout. They appear between sections, around stamps, between rows of metadata, under active navigation items. The 0.5px width is below the threshold of "decoration" — it is structural. In the dark theme: Bone at 10% opacity. In the light theme: Onyx at 12%.
↑ A standard --rule hairline. It does not announce itself, but the page would feel formless without it.
No shadows. No rounded corners. No gradients.
These three prohibitions are the strongest layout rules in the system. Shadows make the page feel ad-driven; rounded corners make it feel SaaS-y; gradients make it feel like a 2018 startup. The nuucleo aesthetic is the inverse: flat surfaces, sharp edges, single tones.
The single exception is the --accent-wash gradient, used in the CTA card to mark a moment of warmth. It runs from Sage 4% to transparent. Use sparingly.
Live components.
The five most-used components in the nuucleo system. Each is shown as it would appear on a real page — not as a screenshot but as the actual component, rendered live in the current theme.
The eyebrow is a Mono 10px label in Sage, preceded by a 32px hairline of the same colour. Format: — SECTION 01 · DESCRIPTION with em-dash, two-digit number, middle dot separator. Letter-spacing 0.2em, uppercase.
The stamp uses Brass as its colour token (the only consistent use of Brass in the system). Border 0.5px, padding 6×12px, font Mono 9px uppercase. Optional variants: "INTERNAL · IP-RESTRICTED", "BRIEF V1.0", "DRAFT".
A 2×2 (or 2×N) grid of substance points. Each pillar has a Mono number, an italic-anchored title ("Rapid construction"), and a one-to-two-sentence description. Used in briefs to make "four reasons this works" without bullet points.
Two abstract circles, deliberately not sun/moon icons (those would conflict with the logomark's radial symmetry). Outline = Light Mode, Filled = Dark Mode. Active state: Sage colour + 1px Sage underline. Default placement: top right of header.
We do not project a pipeline. New positions appear here only once entered into. Substance over signal.
The editorial callout is a 2px left-border Sage rule with a subtle Sage wash background. Inside: prose with one italic-Sage accent, plus an attribution line in Mono. Used to highlight brand-defining statements.
How nuucleo speaks.
The voice is the system's most reproducible asset. Three patterns recur across every page, every brief, every email. They are not stylistic flourishes — they are structural.
The italic-Sage accent
Every major headline contains exactly one italic-Sage word or phrase. It is the moment of intimacy in an otherwise structural sentence. The italic-Sage word is what the reader remembers.
One position, currently active.
Sovereign compute. Carbon-positive.
A staged build-out.
The pattern is consistent: structural lead-in (Inter Display), then italic-Sage punctuation (Source Serif). Never two italic phrases in the same sentence. Never an italic phrase without something structural before it.
Section eyebrows
Every section opens with a Mono eyebrow that names what kind of section the reader is about to enter. The format is precise: em-dash, two-digit number, middle dot, descriptor. Examples:
The descriptor is always uppercase, always Mono, always Sage. It is the structural skeleton of the page made visible.
What nuucleo never says
Some words have been retired from the brand vocabulary because they belong to other markets. "Innovative" is for SaaS. "Disruptive" is for Silicon Valley. "Game-changing" is for pitch decks. The nuucleo voice uses concrete, structural, operating — words that describe what is, not what is claimed.
The operating rules.
Twelve rules, six pairs. Each pair contrasts a brand-consistent move with the most common temptation that violates it. These are not preferences — they are the system's boundary conditions.