Cédric
Understated, personal, and focused. Elegant editorial serifs meet clean grotesque body text against a deep dark background with generous breathing room.
Visit siteColour
Background#141414
Text#f2f2f2
Accent#ff4d00
Surface#1a1a1a
Muted#878787
Typefaces
- Display
- —
- Body
- —
- Mono
- —
- Source
- —
- Scale
- 10 · 11 · 12 · 13 · 14 · 15
Layout
- Grid
- 16 columns
- Container
- 688px
- Spacing base
- 4px
- Radius
- 12px · 16px
Capture
- Category
- portfolio
- Sections
- 9
- Captured
- 2026-08-29
- Rhythm
- dark x9
Type rules
- section headings set in serif SuisseWorks
- body text set in grotesque SuisseIntl at ~78 characters per line
- subtle tight tracking on display headings
Colour rules
- consistent deep dark background (#141414) with subtle surface lifting (#1a1a1a)
- high-contrast light text (#f2f2f2) paired with muted grey (#878787) for body text
- sparing use of vibrant accent for small badges only
Voice rules
- conversational first-person narrative
- actionable, brief CTA copy
Holds it together
- keep container width narrow (around 688px) centered on screen
- introduce sections with compact serif category titles
- use dark surfaces (#1a1a1a) with rounded corners for grouped content cards
Contrast
text on background16.5:1 AAA
muted text on background5.1:1 AA
text on surface15.6:1 AAA
accent on background5.5:1 AA
background on accent5.5:1 AA
Type, measured
- Body
- 15px / 1.6
- Measure
- 78 characters
- Display
- 17px / 1.29
- Tracking
- -0.03em display
- Scale ratio
- 1.03
Voice
- Tone
- conversational, candid, pragmatic
- Sentences
- short
- Person
- first
- Vocabulary
- plain
- Calls to action
- join, buy, learn, view
Built with
- Builder
- framer
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- —
- Length
- 2.9 screens
Sections in page order
3 marked strong · 9- 00
hero
StrongAn intimate, dark-mode personal portfolio hero pairing warm conversational copy with elegant serif display typography and generous breathing room.
- Mood
- quiet + editorial
- Layout
- 16 col · stacked · airy
- 01
showcase
StrongQuiet, dark curation grid introduced by an understated serif section label above polished software icons.
- Mood
- quiet + editorial
- Layout
- 9 col · grid · airy
- 02
showcase
StrongA dark, understated portfolio showcase pairing refined serif section headings with minimal rounded product UI cards.
- Mood
- quiet + luxurious
- Layout
- 15 col · grid · balanced
- 03
showcase
A restrained, dark-mode product showcase grid presenting digital templates with clean card containers and subtle pricing tags.
- Mood
- quiet + clinical
- Layout
- 2 col · grid · balanced
- 04
showcase
Quiet, understated dark-mode blog index pairing a classic serif section title with clean tabular post rows.
- Mood
- quiet + editorial
- Layout
- 16 col · stacked · airy
- 05
showcase
A quiet, deeply restrained dark-mode index of articles with subtle timestamps and an elegant serif section header.
- Mood
- quiet + editorial
- Layout
- 14 col · stacked · airy
- 06
cta
A compact, understated dark card offering brand collaboration packages with a discreet illustrated mascot.
- Mood
- quiet + playful
- Layout
- 16 col · split · dense
- 07
feature
Dark, refined agency feature card pairing crisp grotesque typography with an interactive avatar graphic and subdued dark background.
- Mood
- quiet + editorial
- Layout
- 6 col · split · balanced
- 08
footer
Quiet and hyper-minimal dark footer with subtle muted metadata tags and social links against an expansive near-black background.
- Mood
- quiet + clinical
- Layout
- 15 col · stacked · airy
