# How frankchimero.com is designed

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

Last updated: 2026-07-28

## Design character

frankchimero.com is a **quiet personal studio site**: generous padding, bookish pacing, and almost no chrome. The system reads as essay-first design — light paper canvas, single-column reading measure, restrained sans at 14–18px, and large breathing room (often 64px padding). It feels human, slow, and intentionally under-designed compared to SaaS landings.

What should survive adaptation:

- Paper-light canvas and long vertical rhythm.
- Body-first type (14–16px/1.5) with occasional 18–24px titles.
- **64px** padding as a signature spacious inset.
- Minimal navigation; content is the interface.
- No loud accents, cards, or growth-hack CTAs.

## Foundations

### Color

No structured colors. Visual system is near-monochrome:

| Role | Approx | Use |
|------|--------|-----|
| Canvas | `#f7f4ef` – `#ffffff` | Page |
| Ink | `#1a1a1a` | Body/titles |
| Muted | `#666666` | Meta, secondary |
| Rule | `#e5e5e5` | Rare dividers |

### Typography

| Role | Size | Weight | LH |
|------|------|--------|-----|
| Body | 16px | 400 | 24px |
| Small / meta | 14px | 400 | 21–24px |
| Lead / title | 18–24px | 400 | ~27–29px |

No black display shouting — hierarchy is subtle size and space.

### Spacing and layout

- Signature **64px** padding on major containers.
- Secondary 12px vertical padding on tighter stacks; 18px margins between blocks.
- Single reading column; home is a vertical index of writing/work.

## Visual language

- Essentially borderless and shadowless.
- Photography or project stills appear as simple blocks when present.
- Empty space is a material.

## Components and states

1. Sparse header identity.
2. Linked list / index of essays and projects.
3. Long-form text blocks.
4. Quiet footer.

No complex interactive components in captures.

## Responsive behavior

Desktop captures ~960–1712px. The 64px inset should reduce on narrow viewports but keep the airy single-column feel.

## Practical guidance

**Preserve** paper calm, 64px breath, body-size honesty, minimal chrome.  
**Avoid** card grids, gradient heroes, sticky conversion bars, oversized marketing display.

## Scope note

Five home captures at different scrolls/widths. Color roles and radii largely unsupported — character is screenshot-evident whitespace and type.

## Captured pages

[![Home reading index](https://pin.fontofweb.com/7426?format=jpg)](https://design.withfudge.com/share/pin-7426)

[Home reading index](https://design.withfudge.com/share/pin-7426)

[![Home alternate scroll](https://pin.fontofweb.com/7425?format=jpg)](https://design.withfudge.com/share/pin-7425)

[Home alternate scroll](https://design.withfudge.com/share/pin-7425)

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

[Shorter crop](https://design.withfudge.com/share/pin-7427)

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

[Narrower frame](https://design.withfudge.com/share/pin-7424)

## Colors

- `#f7f4ef`
- `#ffffff`
- `#1a1a1a`
- `#666666`
- `#e5e5e5`