Lu Yu
Luxurious and deeply editorial. High-contrast display serifs pair with restrained grotesque body copy over dark charcoal canvases. Delicate lavender accents and archival index numbering give the portfolio an auteur-level refinement.
Visit siteColour
Background#2c2c30
Text#ffffff
Accent#cba5ea
Surface#090809
Muted#717073
Typefaces
- Display
- CosiAzure-Bold
- Body
- patron
- Mono
- —
- Source
- adobe
- Scale
- 12 · 13 · 16 · 18 · 24 · 26
Layout
- Grid
- —
- Container
- —
- Spacing base
- 10px
- Radius
- 0px
Capture
- Category
- portfolio
- Sections
- 20
- Captured
- 2026-08-30
- Rhythm
- dark x11 → light → dark x8
Type rules
- display headlines set in high-contrast serif Cosi Azure in uppercase
- body text set in Patron at generous 1.89 line-height with ~50 character line measure
- project numbers formatted as fractional indices in high-contrast serif
Colour rules
- backgrounds strictly maintained in deep charcoal (#2c2c30) and black (#090809)
- accent lavender (#cba5ea) reserved exclusively for hero type emphasis and key display moments
Voice rules
- biographical copy written in first person and kept concise
- projects presented with structured index metadata numbering
Holds it together
- format project entries with index fractionals (e.g. 1/11) alongside date ranges and service tags
- anchor full-bleed dark media blocks beneath multi-column typography headers
- use soft lavender accents on display typography against deep charcoal backdrops
Contrast
text on background13.9:1 AAA
muted text on background2.8:1 fail
text on surface20.0:1 AAA
accent on background6.7:1 AA
background on accent6.7:1 AA
Type, measured
- Body
- 18px / 1.89
- Measure
- 50 characters
- Display
- 140px / 1
- Tracking
- 0em display
- Scale ratio
- 1.67
Voice
- Tone
- understated, authoritative, refined
- Sentences
- medium
- Person
- first
- Vocabulary
- curated
- Calls to action
- read, check
Built with
- Builder
- —
- Framework
- —
- Motion
- gsap
- WebGL
- —
- Nav
- —
- Length
- 17 screens
Sections in page order
3 marked strong · 20- 00
hero
Dark, atmospheric hero section anchored by oversized high-contrast display typography with subtle lavender hues.
- Mood
- luxurious + editorial
- Layout
- 1 col · asymmetric · airy
- 01
team
StrongQuiet and restrained portfolio bio pairing a soft-lit portrait with delicate editorial typography against a deep dark background.
- Mood
- quiet + editorial
- Layout
- 1 col · split · airy
- 02
showcase
StrongHigh-contrast portfolio showcase combining intense neon graphic identity assets with structured editorial index typography.
- Mood
- bold + editorial
- Layout
- 3 col · grid · balanced
- 03
showcase
Vibrant product UI mockup layered with a playful 3D cursor transitions into a dark, refined editorial portfolio metadata grid.
- Mood
- editorial + playful
- Layout
- 12 col · stacked · balanced
- 04
showcase
Vibrant yellow product showcase framing the editing interface with rich color and punchy contrast.
- Mood
- bold + playful
- Layout
- 1 col · centered · airy
- 05
showcase
Quiet editorial case study header pairing refined serif indices with a bold sans title across an airy dark grid.
- Mood
- editorial + quiet
- Layout
- 12 col · asymmetric · airy
- 06
showcase
Sleek and moody mobile app mockup emerging from pitch black darkness with high-contrast electric accents.
- Mood
- bold + quiet
- Layout
- 2 col · centered · airy
- 07
showcase
Minimal dark portfolio showcase presenting work side-by-side with crisp typography and understated metadata captions.
- Mood
- quiet + editorial
- Layout
- 8 col · grid · balanced
- 08
showcase
A refined dark portfolio case study header combining crisp modern typography with high-contrast serif numerals across a balanced grid.
- Mood
- editorial + quiet
- Layout
- 1 col · grid · airy
- 09
showcase
A moody, close-up product showcase revealing precise matte black hardware textures and subtle industrial curves under dramatic rim lighting.
- Mood
- luxurious + quiet
- Layout
- 1 col · full bleed · airy
- 10
showcase
Minimal, dark portfolio index entry framing project metadata and a central title with high-contrast serif corner numerals.
- Mood
- editorial + quiet
- Layout
- 12 col · grid · airy
- 11
showcase
A curated trio of pastel editorial cards showcasing expressive display typography against layered artistic textures.
- Mood
- editorial + quiet
- Layout
- 3 col · grid · airy
- 12
showcase
Quiet, dark editorial project header juxtaposing high-contrast serif numerals against a clean modernist grotesque title and metadata.
- Mood
- editorial + quiet
- Layout
- 1 col · grid · airy
- 13
showcase
StrongAn atmospheric dark space visual featuring a glowing dotted globe paired with sharp high-contrast editorial serif typography.
- Mood
- editorial + dreamy
- Layout
- 2 col · centered · airy
- 14
showcase
Restrained dark portfolio grid showcasing graphic design and digital product work with crisp typography and ample breathing room.
- Mood
- quiet + editorial
- Layout
- 2 col · grid · balanced
- 15
other
An empty dark slate spacer band providing functional breathing room between content sections.
- Mood
- quiet
- Layout
- 2 col · full bleed · airy
- 16
statement
Minimalist dark transitional block featuring high-contrast lavender display serif lettering set against deep charcoal.
- Mood
- editorial + bold
- Layout
- 8 col · asymmetric · airy
- 17
gallery
A dense portfolio showcase grid presenting diverse graphic experiments, digital products, and UI mockups over a dark charcoal background.
- Mood
- editorial + bold
- Layout
- 3 col · grid · balanced
- 18
other
An empty dark grey spacer strip serving as structural breathing room between content blocks.
- Mood
- quiet
- Layout
- 1 col · full bleed · airy
- 19
footer
A muted, dark portfolio footer with understated bio copy, minimal social links, and a sculptural metallic emblem.
- Mood
- quiet + editorial
- Layout
- 16 col · asymmetric · airy
More like this
by shared mood