Xhulia
Refined editorial elegance meets playful product craft. Expansive light whitespace and delicate serif typography are grounded by colorful pill tags and detailed UI showcases, culminating in an emphatic full-bleed dark footer.
Visit site ↗Colour
Background#fafafa
Text#18181b
Accent#5adba5
Surface#ffffff
Muted#71717a
Typefaces
- Display
- PP Editorial New Ultralight
- Body
- Geist
- Mono
- Geist Mono
- Source
- Scale
- 14 · 16 · 18 · 28 · 40 · 72
Layout
- Grid
- —
- Container
- —
- Spacing base
- 4px
- Radius
- 12px · 24px · 9999px
Capture
- Category
- portfolio
- Sections
- 8
- Captured
- 2026-08-27
- Rhythm
- light x7 → dark
Type rules
- display headlines set in ultra-light high-contrast serif with selective italics for emphasis
- metadata, project tags, and metric summaries set in clean sans-serif and mono uppercase
- massive oversized display nameplate anchoring the dark footer
Colour rules
- body and showcase canvas kept predominantly off-white (#fafafa and #ffffff)
- multi-color pastel accents reserved strictly for floating pill badges and sticker labels
- high-contrast pitch black (#09090b) exclusively anchors the final footer section
Voice rules
- lead case studies with metric-driven impact bullets separated by mid-dots
- use self-aware, jargon-poking labels in interactive sticker elements
Holds it together
- case study titles must pair project scope with quantified business results
- floating pill tags must use pastel background fills with uppercase monospace text and mono icons
- switch from light background to full-bleed black only in the final footer sign-off
Contrast
text on background17.0:1 AAA
muted text on background4.6:1 AA
text on surface17.7:1 AAA
accent on background1.7:1 fail
background on accent1.7:1 fail
Type, measured
- Body
- 16px / 1.5
- Measure
- 160 characters
- Display
- 234px / 1.1
- Tracking
- 0em display
- Scale ratio
- 1.96
Voice
- Tone
- candid, outcome-driven, understated
- Sentences
- medium
- Person
- first
- Vocabulary
- product-focused
- Calls to action
- view, connect
Built with
- Builder
- framer
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- —
- Length
- 6.7 screens
Colour, by area
accent on container#fafafa 0%#ffffff 0%#09090b 0%#f4f4f5 0%#a3d9ff 0%#fbcfe8 0%
Sections in page order
3 strongest marked · 8- 00
hero
An expansive sea of quiet whitespace framing an understated personal greeting with an inline circular portrait avatar.
- Mood
- quiet + warm
- Layout
- 4 col · centered · airy
- 01
hero
StrongestRefined portfolio hero pairing an elegant serif headline with a scattered, colorful cluster of self-deprecating design pill tags.
- Mood
- playful + editorial
- Layout
- 1 col · stacked · airy
- 02
showcase
StrongestA clean portfolio case study showcase displaying layered product UI design system components over a stark white backdrop.
- Mood
- clinical + quiet
- Layout
- 1 col · stacked · balanced
- 03
showcase
A polished portfolio case study preview featuring floating isometric product UI mockups with clean metrics and concise project metadata below.
- Mood
- clinical + quiet
- Layout
- 1 col · stacked · balanced
- 04
showcase
Clean product case study showcase featuring floating mobile app mockups above refined typography and structured project metadata.
- Mood
- quiet + clinical
- Layout
- 1 col · stacked · balanced
- 05
showcase
A warm, playful showcase card displaying mobile app mockups and floating feature pills across a peach-tinted container.
- Mood
- playful + warm
- Layout
- 1 col · centered · balanced
- 06
footer
StrongestUltra-minimal portfolio footer featuring a playful folder illustration between airy serif headings, transitioning smoothly into a dark contact bar.
- Mood
- quiet + playful
- Layout
- 14 col · stacked · airy
- 07
footer
Dramatic dark footer dominated by a massive, high-contrast serif nameplate with quiet credit details anchored beneath.
- Mood
- bold + editorial
- Layout
- 8 col · stacked · airy
