We architect expertise
into digital moats.
Noocleus is an Innovation and Venture Engine. We partner with domain experts to turn tacit knowledge into scaled operations and new ventures. This system defines the architectural substrate of our brand.
Calm, precise,
rooted in craft.
The system is light-first because most of our work lives in documentation, decks, and writing. The hexagon and the green mark carry the energy — everything else stays out of the way.
Discovery before shipping
Nothing leaves the studio until the problem is known cold. The visual system reinforces that discipline — space to think, space to read.
Startup speed, studio standards
We move fast, but nothing looks rushed. Typography, spacing and the hex motif give docs a consistent, confident rhythm.
Organic & technical
Honeycomb geometry and a living green. Precision you can trust, warmth you want to work inside. Never sterile, never decorative.
One green.
Everything else earthy.
Noocleus Green is the only saturated color in the system. Neutrals are warm, running from a near-black ink to an absolute white — never pure black. No gradients except in print collateral.
Brand
Neutrals — warm earth ramp
Approved pairings
Two pairings.
Pick one and commit.
We're exploring a technical pairing (Space Grotesk + JetBrains Mono) and an editorial pairing (Inter Tight + Fraunces italic). The whole page updates when you switch. Use the Tweaks panel to compare.
We ship solutions
to well-discovered problems.
Space Grotesk carries both display and body. Its open apertures and subtle geometry feel modern without leaning cold. JetBrains Mono does all of the UPPERCASE metadata, labels, and code. Technical, deliberate, a little futuristic.
Built for the room,
not just the reader.
Lexend is our presentation workhorse. Maximum scannability for slides while keeping the modern aesthetic. Fraunces italic for boutique emphasis, JetBrains Mono for mechanics and metadata.
Scale
Rhythm & Measure
Snapping to the baseline.
Every line of text and every gap between paragraphs snaps to a multiple of our 4px baseline. This metronomic rhythm creates architectural integrity in long-form briefs.
This container uses calc(var(--p-baseline) * 8) = 32px of internal padding. The geometry locks to the grid.
The "Measure" is the optimal line length. We strictly constrain prose to 65ch. This reduces reading fatigue and ensures your expertise is consumed with clarity, not just scanned.
The honeycomb
is the system.
The hex is a primitive, not decoration. It's an icon frame, a section tick, a background grid, a divider, a badge. One shape, used at five sizes, with three fills.
Four core glyphs.
Housed in hexagons.
The icon set is small on purpose — bulb, wrench, plant, and the Noocleus N. Each one lives inside a hex container when used at feature-size; stroke-only when used inline next to type.
Primitive 01 — Hexagon
The hexagon is a single colorable shape. Fill with any brand color. Use alone as a graphic element or compose with a glyph.
Primitive 02 — Glyphs
Normalized icon set. Each lives inside a logical square for perfect alignment. Monochrome and colorable via currentColor.
Component — Factory Composition
The hex+glyph pairing is a deliberate choice, not a default. Use it at feature-size to anchor a section, card, or service tile — not as a bullet point replacement.
Icon placement with titles
Engineering handoff
A clean contract between design and engineering. Specs, tokens, and edge cases all in one place.
Discovery artifact
Before code: the problem brief, user map, and the constraints we agreed on.
Honeycomb
backgrounds.
Two canonical backgrounds: a dark Ink canvas with a faint honeycomb and a single green mark; a light White canvas with the same honeycomb and a glowing centered mark. Use for slide openers, social squares, and section dividers.