Dyad
Pitch-black minimalist portfolio with an editorial split-screen layout. Crisp sans-serif type and saturated 3D renders provide texture against deep charcoal surfaces.
Visit siteColour
Typefaces
- Display
- Inter
- Body
- Inter
- Mono
- —
- Source
- self_hosted
- Scale
- 12 · 13 · 14 · 15 · 16 · 20
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 12px · 16px
Capture
- Category
- portfolio
- Sections
- 7
- Captured
- 2026-08-29
- Rhythm
- dark x7
Type rules
- display headlines in sentence case with negative tracking
- metadata tags and labels set in small muted sans-serif
Colour rules
- monochrome pitch-black base with deep charcoal card surfaces
- purple accent restricted strictly to primary interactive pills and links
Voice rules
- terse project metadata
- conversational bio in hero
Holds it together
- split layout with sticky intro bio on the left and scrolling showcase cards on the right
- render every project inside high-fidelity 3D device framing
- use muted pill tags for roles and tools above each project showcase
Contrast
Type, measured
- Body
- 13px / 1.54
- Measure
- 18 characters
- Display
- 36px / 1.33
- Tracking
- -0.028em display
- Scale ratio
- 1.29
Voice
- Tone
- understated, conversational, precise
- Sentences
- short
- Person
- first
- Vocabulary
- plain
- Calls to action
- get, buy
Built with
- Builder
- framer
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 5 items
- Length
- 4.1 screens
Sections in page order
3 marked strong · 7- 00
nav
A sparse pitch-black navigation header with crisp neutral typography and a single lilac accent action.
- Mood
- quiet + clinical
- Layout
- 12 col · split · airy
- 01
hero
An understated, pitch-black designer hero pairing a conversational statement on the left with a subtle project preview card on the right.
- Mood
- quiet
- Layout
- 16 col · split · airy
- 02
showcase
StrongA sleek, dark portfolio showcase pairing high-fidelity 3D device mockups with clean metadata pills and subtle monochrome card structures.
- Mood
- quiet + clinical
- Layout
- 11 col · asymmetric · balanced
- 03
showcase
Restrained dark portfolio card showcasing a vivid 3D laptop mockup paired with minimalist project metadata.
- Mood
- quiet + clinical
- Layout
- 16 col · asymmetric · balanced
- 04
showcase
A sleek, dark portfolio showcase card framing a tablet device mockup above clean metadata tags and tool icons.
- Mood
- quiet + clinical
- Layout
- 12 col · stacked · airy
- 05
showcase
StrongMinimal dark portfolio showcase card framing a high-contrast 3D tablet mockup with discreet project metadata.
- Mood
- quiet + clinical
- Layout
- 12 col · asymmetric · airy
- 06
footer
StrongA dark, moody composition pairing an off-center MacBook mockup bathed in cool blue light with a minimal bottom credit bar.
- Mood
- quiet + luxurious
- Layout
- 14 col · asymmetric · airy
