# How garriock.com is designed

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

Last updated: 2026-07-28

## Design character

Garriock & Co. is an **ultra-minimal luxury studio/brand site**: vast whitespace or quiet neutral fields, enormous light display (~72–78px weight 300), micro labels at 12px, and side padding locked around **60px**. It feels couture and architectural — more brand film titles than website chrome. Photography or large typographic statements occupy the stage; UI is nearly absent.

What should survive adaptation:

- Extreme type contrast: **12px micro vs ~78px light display**.
- Horizontal inset ~**60px** as a steady frame.
- Minimal color, minimal components.
- Editorial pacing; one idea per viewport.
- Weight 300 display for elegance, not bold impact fonts.

## Foundations

### Color

No structured roles. Visual monochrome:

| Role | Approx | Use |
|------|--------|-----|
| Canvas | `#f5f5f5` / `#ffffff` / soft black depending on chapter | Stages |
| Ink | `#111111` or white on dark chapters | Display |
| Micro | muted gray | Labels |

### Typography

| Role | Size | Weight | LH |
|------|------|--------|-----|
| Micro | 12px | 400 | tight |
| Mid | 20–36px | 300 | ~25–43px |
| Display | 72–78px | 300 | ~83px |

### Spacing and layout

- Persistent **60px** left/right padding.
- Tiny 2px bottom paddings on some micro rows; larger 20–52px on editorial blocks.
- Full-viewport chapters rather than card grids.

## Visual language

- No meaningful radius language (square, image-led).
- Hairline or no borders.
- Photography and giant type only.

## Components and states

1. Barely-there identity/nav.
2. Full-bleed or large-type hero chapters.
3. Project/story sequences.
4. Micro captions.

## Responsive behavior

All primary captures 2048×1194. The 60px frame and light display should scale fluidly; avoid introducing cards when narrowing.

## Practical guidance

**Preserve** 12 vs 78 type polarity, 60px frame, weight 300 elegance, chapter pacing.  
**Avoid** SaaS nav megamenus, colored button stacks, dense marketing sections.

## Scope note

Seven home captures at wide desktop. Structured colors/radii unsupported; system is type and padding first. Inner project templates not separately captured.

## Captured pages

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

[Display chapter](https://design.withfudge.com/share/pin-7365)

[![Wide home frame A](https://pin.fontofweb.com/7367?format=jpg)](https://design.withfudge.com/share/pin-7367)

[Wide home frame A](https://design.withfudge.com/share/pin-7367)

[![Wide home frame B](https://pin.fontofweb.com/7366?format=jpg)](https://design.withfudge.com/share/pin-7366)

[Wide home frame B](https://design.withfudge.com/share/pin-7366)

[![Display + mid type](https://pin.fontofweb.com/7364?format=jpg)](https://design.withfudge.com/share/pin-7364)

[Display + mid type](https://design.withfudge.com/share/pin-7364)

## Colors

- `#ffffff`
- `#f5f5f5`
- `#111111`
- `#888888`
- `#000000`