Colour
Background#ffffff
Text#080707
Accent#ebff00
Surface#ebff00
Muted#cccccc
Typefaces
- Display
- FK Raster Grotesk Compact Trial Sharp
- Body
- Be Vietnam Pro
- Mono
- IBM Plex Mono
- Source
- Scale
- 10 · 11 · 14 · 16 · 18 · 32
Layout
- Grid
- —
- Container
- —
- Spacing base
- 8px
- Radius
- 0px · 999px
Capture
- Category
- other
- Sections
- 9
- Captured
- 2026-08-30
- Rhythm
- white → neutral grey → white → acid yellow x5 → dark
Type rules
- pixelated raster display face reserved strictly for oversized section headers
- all navigation, status indicators, and metadata rendered in uppercase monospace
- body text set at 16px with 1.4 line-height for clean readable descriptions
Colour rules
- acid yellow #ebff00 used for high-visibility UI pill tags and full-bleed bio sections
- stark black #080707 on white #ffffff dominates the primary case study layout
- pitch black #080707 anchors the bottom contact footer with high-contrast yellow CTA
Voice rules
- wrap metadata, names, and actions in uppercase square brackets
- keep case study summaries to one direct sentence
Holds it together
- enclose metadata labels and interactive actions in uppercase square brackets
- use acid yellow #ebff00 as the sole accent color on tag pills and major section backdrops
- center tactile 3D matte-black assets to anchor open white or black sections
Contrast
text on background20.1:1 AAA
muted text on background1.6:1 fail
text on surface18.1:1 AAA
accent on background1.1:1 fail
background on accent1.1:1 fail
Type, measured
- Body
- 16px / 1.4
- Measure
- 104 characters
- Display
- 48px / 1
- Tracking
- 0.042em display
- Scale ratio
- 1.32
Voice
- Tone
- declarative, technical, confident
- Sentences
- short
- Person
- first
- Vocabulary
- technical
- Calls to action
- read, book, watch, reach out
Built with
- Builder
- framer
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- —
- Length
- 9.6 screens
Sections in page order
9- 00
hero
Technical brutalist portfolio hero centered around a matte black 3D monogram against a precise dot grid.
- Mood
- clinical + raw
- Layout
- 1 col · centered · airy
- 01
showcase
Minimalist case study showcase pairing a detailed 3D mobile mockup with detached UI components on a neutral grey background.
- Mood
- clinical + quiet
- Layout
- 1 col · asymmetric · airy
- 02
showcase
Crisp case study feature with fine hairline borders, fluorescent yellow pill tags, and precision mono metadata framing olive product mockups.
- Mood
- editorial + clinical
- Layout
- 1 col · stacked · balanced
- 03
showcase
An airy portfolio project showcase floating a luxury website mockup over a muted gradient blur with sharp neon taxonomy tags below.
- Mood
- quiet + clinical
- Layout
- 1 col · stacked · airy
- 04
showcase
An electric neon backdrop frames a fanned interactive booklet flanked by sharp pixelated display typography.
- Mood
- bold + raw
- Layout
- 1 col · centered · airy
- 05
statement
High-voltage acid yellow bio section dominated by massive pixelated raster typography anchored over a clean editorial grid.
- Mood
- raw + bold
- Layout
- 4 col · stacked · airy
- 06
team
A high-voltage neon yellow frame enclosing a centered portrait, flanked symmetrically by stark monospace typography.
- Mood
- bold + raw
- Layout
- 4 col · centered · airy
- 07
showcase
High-voltage neon yellow portfolio credentials section organized with rigid tabular precision and stark brutalist typography.
- Mood
- raw + bold
- Layout
- 1 col · stacked · dense
- 08
footer
Monolithic, pitch-black contact footer anchored by a central matte-black 3D monogram and an electric yellow action pill.
- Mood
- raw + bold
- Layout
- 1 col · stacked · airy
