Typography
Fraunces variable serif (display + body) + DM Mono (all metadata). Never uses Signal's Outfit or Space Mono.
Live portfolio template
Nimbus Portfolio Template: Nimbus is built for full-stack and frontend developers.
A brutalist-editorial portfolio — the broadsheet to Signal's product UI. Type is the interface.
GSAP animationsBento mouse-glowReal local time tracking
Visual system
Near-black / near-white with a single electric-amber accent. No glass, no blur, no shadow. Depth from contrast and whitespace alone.
SEO structure
Clear headings, project sections, metadata controls, and a public preview path make this template easier to understand and share.
Template style guide
The design system behind Nimbus.
Use this guide to decide whether the template matches your work before you publish.
Near-Black
oklch(0.10 0 0)
Near-White
oklch(0.97 0.005 90)
Electric Amber
oklch(0.88 0.2 85)
Amber Deep
oklch(0.72 0.22 60)
Layout rhythm
Full-bleed sections divided by hairline rules. Oversized index numbers. No asymmetric label column — typographic hierarchy does that job.
Component language
Accordion project rows, a stat band, a free-flowing skills cloud, a table-style experience list, a full-width amber contact band.
Best content to prepare
One-line availability status + headline
Hero split column (oversized name & bio)
Full-bleed skills marquee ticker
Accordion project list with ambient numbers
Table experience & education timeline
Free-flowing tag cloud for skills
Full-width amber contact band
Technical Spec Sheet
Engineering blueprint.
Developer specifications, design tokens, responsive thresholds, and structural rules powering this template.
Visual Strategy
Nimbus treats the portfolio as a printed broadsheet. Type is large, contrast is absolute, and every interaction happens to the text itself rather than to decorative containers.
brutalist-editorialHue: electric amber (oklch(0.88 0.2 85)) — perceptually opposite to Signal's mint-emerald
The Floor
The page canvas operates with Near-black (#191919) switchable to warm near-white (#f7f5f0). Layout transitions handle values cleanly across dark and light palettes.
Dark Canvasoklch(0.10 0 0)
Light Canvasoklch(0.97 0.005 90)
03 / BRAND COLOR MATRIX
Accent & Surface Hues
Accent (Dark)
oklch(0.88 0.2 85)
Accent (Light)
oklch(0.72 0.22 60)
Obsidian Paper
oklch(0.10 0 0)
Chalk Paper
oklch(0.97 0.005 90)
04 / TYPOGRAPHIC HIERARCHY
Text Tokens
| Token | Size | Weight | Purpose / Use Case |
|---|---|---|---|
| display-hero | clamp(4rem, 11vw, 10rem) | 900 | Hero name, oversized project index numbers |
| display-xl | clamp(2.8rem, 6vw, 5.6rem) | 900 | Section titles |
| display-lg | clamp(1.8rem, 3.5vw, 3rem) | 700 | Project titles, contact header |
| body-serif | 1.1rem | 400 | Bio, descriptions, paragraphs |
| label-mono | 11–12px | 500–700 | Dates, index counts, tags, nav links |
| ticker | clamp(1.1rem, 2.5vw, 1.8rem) | 700 | Hero marquee ticker |
Developer Spec Sheet
Building or customizing this template?
Turn on Developer Mode to inspect styling tokens, layout padding values, shape border-radii, responsive queries, and the raw specs JSON.
Best fit
Use Nimbus when the portfolio needs this kind of reader.
Developers who want to stand out from glass-morphism portfolios
Designers who appreciate typography as a first-class design material
Anyone applying to editorial, creative-tech, or high-craft studios
Motion direction: Trailing cursor ring, per-character text scramble on nav/project hover, magnetic CTA buttons, split-section entrance reveals, full-bleed CSS marquee ticker.
Ready to build