# Design Reference - Chester's Garden
> Digital garden journal: crisp pages, intimate handwriting, and colorful bookmarks.

## Source
- Original site: https://chester.how
- Captured: 2026-04-11T16:39:40.393Z

## Tags
- personal blog
- digital garden
- minimalist
- typographic focus
- clean
- journal-like
- subtle accents
- content-driven
- muted colors

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Canvas White | `#fafafa` | neutral | Major surface background, card backgrounds. |
| Paper Gray | `#e5e7eb` | neutral | Default borders, subtle separators, background for non-interactive elements. |
| Charcoal Text | `#171717` | neutral | Primary text color for headings and prominent links. |
| Ink Black | `#000000` | neutral | Strongest text contrast, used for body text and navigation links. |
| Subtle Gray | `#a3a3a3` | neutral | Secondary text, disabled states, supporting icons. |
| Accent Orange | `#7c2d12` | brand | Used for 'READ' tags, indicating intellectual content — a warm, inviting educational cue. |
| Highlight Orange | `#fdd3b1` | brand | Soft background for 'READ' tags, providing gentle visual emphasis. |
| Accent Violet | `#581c87` | brand | Specific content type indicators like 'Writing' or 'Projects'. |
| Highlight Violet | `#e6cefe` | brand | Soft background wash for 'Writing' or 'Projects' tags. |
| Accent Blue | `#0c4a6` | brand | Specific content type indicators, e.g., 'Projects' or 'Hobbies'. |
| Highlight Blue | `#afe5fc` | brand | Soft background wash for 'Hobbies' tags. |
| Accent Green | `#365314` | brand | Specific content type indicators, e.g., 'Plants' or active states. |
| Highlight Green | `#daf5ae` | brand | Soft background wash for 'Plants' tags. |

## Typography
- role: Workhorse sans-serif for body text, navigation, and detailed information. Its subtle negative letter-spacing keeps text feeling grounded and compact, fitting the 'notebook' analogy.; sizes: 14px, 16px; family: Inter; weight: 400; lineHeight: 1.43, 1.50, 1.63; substitute: system-ui, sans-serif; letterSpacing: -0.4
- role: Signature serif for all headings and key narrative elements. Its light weight (300) at larger display sizes (60px) sets a tone of quiet confidence, conveying authority through elegance rather than boldness. The generous negative letter-spacing maintains a polished, traditional feel.; sizes: 30px, 36px, 60px; family: Fraunces; weight: 300; lineHeight: 1.00, 1.11, 1.20, 1.25; substitute: Georgia, serif; letterSpacing: -0.9
- role: Used for code snippets or technical details, providing a clear distinction from the main narrative while maintaining legibility with tight letter-spacing.; sizes: 14px; family: ui-monospace; weight: 400; lineHeight: 1.43; substitute: monospace; letterSpacing: -0.35

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "tags": "4px",
      "cards": "8px",
      "images": "4px",
      "buttons": "9999px"
    },
    "elementGap": "8px",
    "sectionGap": "40px",
    "cardPadding": "16px",
    "pageMaxWidth": "1536px"
  },
  "radius": {
    "tags": "4px",
    "cards": "8px",
    "images": "4px",
    "buttons": "9999px"
  }
}
```

## Component Patterns
- name: Content Tag Collection
- name: Book Card — Reading
- name: Coffee Brew Card — Hobbies
- name: Primary Navigation Link; role: Top-level navigation items
- name: Navigation Tab Active; role: Currently active category indicator
- name: Card Container; role: Content grouping element
- name: Inline Text Link; role: Interactive text embedded within body copy
- name: Content Tag (Primary); role: Categorization of content, e.g. 'Reading', 'Projects'
- name: Content Tag (Secondary); role: More granular content tags, e.g. 'Plants'
- name: Image Card; role: Card containing an image
- name: Footer Link; role: Navigational links in the footer

## Do
- Prioritize 'Fraunces' for all headings and short, impactful statements to leverage its elegant, light-weight character.
- Use 'Inter' 16px weight 400 for all paragraph text, maintaining a consistent, highly readable, and unobtrusive voice.
- Apply #fafafa as the primary background color for all main content areas to create a bright, airy canvas.
- Utilize #e5e7eb for subtle borders and background for non-interactive list items or dividers, maintaining visual softness.
- Employ 8px border-radius for all content cards and larger UI elements, balancing subtle softness with structure.
- Apply 9999px border-radius to all interactive tags and buttons, creating a distinct pill shape that signals interactivity.
- Use accent colors (e.g., #7c2d12, #581c87, #0c4a6, #365314) and their light background variants consistently for content categorization, acting as visual cues like colored labels.
- Apply minimal inset shadow rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px -2px 0px 1px inset to card backgrounds, giving them a subtle definition without heavy lifting.

## Don't
- Avoid bolding or using heavier weights for 'Fraunces'; its impact comes from its lightness (weight 300).
- Do not use highly saturated colors for large blocks of content; reserve them for small, intentional accents only.
- Refrain from introducing strong drop shadows; the design relies on subtle inset shadows for depth or light elevation for images (rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px).
- Avoid using multiple border-radii values for a single component type; maintain consistency (e.g., tags are always 9999px).
- Do not use #000000 for body text unless higher contrast is explicitly required, #171717 or #a3a3a3 are preferred for a softer read.
- Do not vary letter spacing from the defined values; 'Inter' at -0.4px and 'Fraunces' at -0.9px letter-spacing are critical to the typographic feel.
- Avoid generic hover states like simple color changes for interactive elements; opt for underlines on links or distinct background changes for buttons/tags.