winkyface-studio
Warm, restrained editorial design infused with lighthearted character. Generous off-white canvas and a single clean grotesque font give centre stage to tactile photography and playful oversized brand marks. A grounding forest green footer anchors the extensive index of work.
Visit siteRated
6.9/ 10
From 10 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.
- AI scorejudged
- 9.4
- Systemmeasured
- 4.3
- Distinctionmeasured
- 6.6
- on the grid
- 36%
- vertical rhythm
- 20%
- type on a scale
- 75%
- contrast passing AA
- 40%
- unlike the library
- 0.25
- model craft
- 7.9/10
- model deviation
- 5.3/10
Colour
Background#fdfbf5
Text#000000
Accent#358c3c
Surface#fefdf2
Muted#cac9c5
Typefaces
- Display
- mabry
- Body
- mabry
- Mono
- —
- Source
- self_hosted
- Scale
- 10 · 15 · 20 · 30
Layout
- Grid
- —
- Container
- —
- Spacing base
- 5px
- Radius
- 0px
Capture
- Category
- studio
- Sections
- 10
- Captured
- 2026-08-30
- Rhythm
- warm off-white x3 → mixed image → warm off-white x2 → mixed image → warm off-white → forest green x2
Type rules
- single grotesque typeface spans all weights, headers, and body copy
- body text set at 20px with 1.25 line-height and 0.02em tracking
Colour rules
- warm off-white #fdfbf5 forms the primary canvas across all portfolio content
- forest green #358c3c is reserved exclusively for the closing contact and footer block
Voice rules
- two-digit zero-padded numbering on all showcase items
- append an upward-right arrow to all external and navigable text links
Holds it together
- number all portfolio case studies sequentially with a 2-digit zero-padded index
- pair every project card with a structured caption block of client name, summary, and service tags below the media
- anchor interactive text navigation items with trailing upward-right arrows (↗)
Contrast
text on background20.3:1 AAA
muted text on background1.6:1 fail
text on surface20.6:1 AAA
accent on background4.1:1 AA Large
background on accent4.1:1 AA Large
Type, measured
- Body
- 20px / 1.25
- Measure
- 146 characters
- Display
- 30px / 1.33
- Tracking
- 0em display
- Scale ratio
- 1.11
Voice
- Tone
- editorial, considered, playful
- Sentences
- medium
- Person
- first
- Vocabulary
- plain
- Calls to action
- read, get in touch
Built with
- Builder
- —
- Framework
- —
- Motion
- gsap
- WebGL
- —
- Nav
- top_bar, 3 items
- Length
- 7.9 screens
Sections in page order
3 marked strong · 10- 00
nav
StrongA massive playful typographic wordmark spans across a warm off-white header anchored by sparse minimal navigation links.
- Mood
- bold + playful
- Layout
- 6 col · stacked · airy
- 01
hero
Warm, tactile studio hero pairing backlit citrus photography with a playful minimalist graphic mark and clean editorial copy.
- Mood
- warm + playful
- Layout
- 16 col · split · balanced
- 02
statement
An expanse of warm white space punctuated only by a solitary, understated project index marker in the corner.
- Mood
- quiet
- Layout
- 2 col · split · airy
- 03
showcase
An editorial portfolio grid presenting project case studies with bold photographic covers and restrained metadata beneath.
- Mood
- editorial + bold
- Layout
- 3 col · grid · balanced
- 04
showcase
StrongEditorial fashion showcase featuring high-impact photography layered beneath bold display typography and understated project metadata.
- Mood
- luxurious + editorial
- Layout
- 2 col · stacked · airy
- 05
showcase
Refined studio portfolio grid pairing tall editorial imagery with structured index numbering and subtle project notes.
- Mood
- editorial + quiet
- Layout
- 3 col · grid · balanced
- 06
showcase
A refined studio work showcase presenting client projects through a balanced three-column grid of rich imagery and quiet editorial captions.
- Mood
- editorial + quiet
- Layout
- 1 col · grid · balanced
- 07
showcase
StrongRetro-modern case study showcase featuring an oversized concentric racetrack logo overlaid on interior photography with quiet catalog captions below.
- Mood
- playful + nostalgic
- Layout
- 8 col · stacked · airy
- 08
showcase
A quiet, meticulous studio index showcasing editorial print projects above a saturated green outreach strip.
- Mood
- editorial + quiet
- Layout
- 1 col · grid · balanced
- 09
footer
Utilitarian green studio footer structured as a precise multi-column index of clients, contact info, and colophon.
- Mood
- quiet + raw
- Layout
- 6 col · grid · airy
