# How almost-pearfect.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/almost-pearfect.com-design)

Last updated: 2026-07-28

## Design character

Almost Pearfect is **poster-first art direction**, not conventional web UI. Screens behave like full-bleed graphic statements: saturated solid fields (notably a fierce pure red menu), oversized hand-drawn black lettering, and a stacked editorial wordmark (“Almost / Perfect / PEAR”). Navigation feels like walking into a gallery vinyl rather than a Bootstrap header. The shop and information surfaces continue that art-object attitude—type and color do the identity work before components do.

What should survive adaptation:
- Courageous full-field color blocks
- Irregular, human display lettering at extreme scale
- Minimal chrome; layout as composition
- Wordmark treated as a graphic device, not a polite logo in a 32px header

## Foundations

### Color

No stable measured palette roles were retained across these pages; rely on the visual description. The memorable measured/visual anchor is **signal red filling the entire menu plane** with pure black type and a small black wordmark lockup. Other pages can flip to contrasting solids or photo grounds, but the system’s signature is high-chroma fields and stark black/white type—not soft pastels or corporate blues.

### Typography

Observed text styles:
- **text**: unknown, weight 400, 16px, lh 16px
- **text**: unknown, weight 400, 16px, lh 16px
- **text**: unknown, weight 500, 33px, lh 94px
- **text**: unknown, weight 500, 33px, lh 94px
- **text**: unknown, weight 500, 12px, lh 20px
- **text**: unknown, weight 400, 8px, lh 11px
- **text**: unknown, weight 400, 8px, lh 11px
- **text**: unknown, weight 400, 16px, lh 16px
- **text**: unknown, weight 400, 11px, lh 15px
- **text**: unknown, weight 400, 18px, lh 19px
- **text**: unknown, weight 400, 49px, lh 50px
- **text**: unknown, weight 400, 16px, lh 16px

Display type is intentionally imperfect and huge—marker/brush energy for menu words (HOME, MORE INFORMATION, SHOP). The wordmark stacks with mixed sizes and tight leading. Body/UI type, when it appears, should stay subordinate so the display voice remains the brand. Do not “fix” the lettering into a geometric UI sans.

### Spacing and layout

Recurring spacing measurements include 1px. Composition uses massive negative space as a design element. Menu items sit as a left-weighted vertical list with a corner close control and corner wordmark. Shop views may stretch wide with sparse product presence. Corner radii are modest where present; prefer screenshot judgment over inventing a scale. This is not an 8px-grid marketing site; optical balance beats token obedience.

## Visual language

Think print studio and fashion lookbook crossovers: flat ink, abrupt crops, playful asymmetry. Borders and shadows are mostly unnecessary. Motion, if any, should feel like print flipping—not SaaS micro-interactions. Imagery (when used) should be curated art pieces, not stock lifestyle.

## Components and states

- **Fullscreen menu overlay**: red field, huge black nav words, × close, corner brand mark
- **Sparse header** on content pages that yields to art direction
- **Shop listings** that still feel designed rather than filter-heavy ecommerce
- **Typographic hero moments** as primary “components”

## Responsive behavior

Captures range from compact (~924px) to wide (~1712px). The menu concept scales by keeping type monumental and reflowing the vertical list; resist shrinking display type into ordinary mobile nav sizes that kill the joke/impact.

## Practical guidance

**Preserve**
- Full-bleed color fields and gigantic human display type
- Wordmark as composition, gallery-like emptiness
- High contrast black on chroma

**Avoid**
- Generic center-nav startup headers
- Soft UI shadows and purple AI gradients
- Normalizing the brand into safe beige ecommerce

## Scope note

Studied 8 page captures on paths /, /menu/, /shop/, /shopen/. Some structural families were incomplete on these pages. Home, menu overlay, and shop paths inform the system; checkout detail is not covered.

## Captured pages

[![PEARFECT](https://pin.fontofweb.com/8639?format=jpg)](https://design.withfudge.com/share/pin-8639)

[PEARFECT](https://design.withfudge.com/share/pin-8639)

[![PEARFECT — menu](https://pin.fontofweb.com/8638?format=jpg)](https://design.withfudge.com/share/pin-8638)

[PEARFECT — menu](https://design.withfudge.com/share/pin-8638)

[![PEARFECT — shop](https://pin.fontofweb.com/8637?format=jpg)](https://design.withfudge.com/share/pin-8637)

[PEARFECT — shop](https://design.withfudge.com/share/pin-8637)

[![PEARFECT — shop](https://pin.fontofweb.com/8625?format=jpg)](https://design.withfudge.com/share/pin-8625)

[PEARFECT — shop](https://design.withfudge.com/share/pin-8625)

[![PEARFECT](https://pin.fontofweb.com/8634?format=jpg)](https://design.withfudge.com/share/pin-8634)

[PEARFECT](https://design.withfudge.com/share/pin-8634)

[![PEARFECT — shop](https://pin.fontofweb.com/8636?format=jpg)](https://design.withfudge.com/share/pin-8636)

[PEARFECT — shop](https://design.withfudge.com/share/pin-8636)

[![PEARFECT](https://pin.fontofweb.com/8626?format=jpg)](https://design.withfudge.com/share/pin-8626)

[PEARFECT](https://design.withfudge.com/share/pin-8626)

[![PEARFECT — shop](https://pin.fontofweb.com/8635?format=jpg)](https://design.withfudge.com/share/pin-8635)

[PEARFECT — shop](https://design.withfudge.com/share/pin-8635)

## Colors

- `#ff0000`
- `#000000`
- `#ffffff`