natureofthings

# natureofthings — Style Reference
> Minimalist gallery canvas

**Theme:** light

natureofthings uses a quiet luxury aesthetic, built on a foundation of clean achromatic grays and whites. Typography is compact and precise, using Founders Grotesk for most content, often with elevated letter-spacing. Interaction is primarily driven by subtle outline changes and text underlines, with a single muted blue providing unobtrusive functional contrast without disrupting the monochrome canvas.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, elevated card surfaces, primary input fields |
| Ink | `#000000` | `--color-ink` | Primary text, headings, strong borders, interactive elements |
| Muted Stone | `#696159` | `--color-muted-stone` | Subtle background for footer sections |
| Soft Gray | `#746c6c` | `--color-soft-gray` | Placeholder text in input fields, secondary body text |
| Interaction Azure | `#0066cc` | `--color-interaction-azure` | Links, outlined interactive elements — provides functional distinction without strong visual hierarchy |

## Tokens — Typography

### Founders Grotesk — Primary typeface for all headings, body text, navigation, and interface elements. Its neutrality allows content to take precedence, with varied letter-spacing adding subtle emphasis where needed. · `--font-founders-grotesk`
- **Substitute:** system-ui
- **Weights:** 400, 500, 700
- **Sizes:** 12px, 13px, 14px, 16px, 18px, 30px
- **Line height:** 1.10, 1.20, 1.30, 1.50
- **Letter spacing:** 0.01em-0.04em
- **Role:** Primary typeface for all headings, body text, navigation, and interface elements. Its neutrality allows content to take precedence, with varied letter-spacing adding subtle emphasis where needed.

### Arial — Used for specific body text scenarios, likely as a fallback or for specific small text applications where system fonts are preferred. · `--font-arial`
- **Substitute:** Arial, Helvetica, sans-serif
- **Weights:** 400
- **Sizes:** 14px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Role:** Used for specific body text scenarios, likely as a fallback or for specific small text applications where system fonts are preferred.

### Atlas Grotesk — Specialized usage for specific labels or input fields, its varied weights provide granular control for small, technical text while maintaining overall typographic harmony. · `--font-atlas-grotesk`
- **Substitute:** system-ui
- **Weights:** 300, 700
- **Sizes:** 12px
- **Line height:** 1.20
- **Letter spacing:** normal
- **Role:** Specialized usage for specific labels or input fields, its varied weights provide granular control for small, technical text while maintaining overall typographic harmony.

### GTStandard-M — Likely used for specific informational text blocks or decorative elements, providing a consistent body text size. · `--font-gtstandard-m`
- **Substitute:** system-ui
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.50
- **Letter spacing:** normal
- **Role:** Likely used for specific informational text blocks or decorative elements, providing a consistent body text size.

### Poppins — Used for standout button text, its strong weight and larger size draw attention to calls to action within a generally understated typographic landscape. · `--font-poppins`
- **Substitute:** system-ui
- **Weights:** 700
- **Sizes:** 24px
- **Line height:** 1.00
- **Letter spacing:** normal
- **Role:** Used for standout button text, its strong weight and larger size draw attention to calls to action within a generally understated typographic landscape.

### Founder’s Grotesk — Founder’s Grotesk — detected in extracted data but not described by AI · `--font-founders-grotesk`
- **Weights:** 400, 500
- **Sizes:** 12px, 13px
- **Line height:** 1.2
- **Role:** Founder’s Grotesk — detected in extracted data but not described by AI

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.1 | 0.12px | `--text-caption` |
| body | 14px | 1.3 | — | `--text-body` |
| heading | 18px | 1.2 | 0.18px | `--text-heading` |
| display | 30px | 1.1 | 0.3px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 56 | 56px | `--spacing-56` |
| 80 | 80px | `--spacing-80` |
| 100 | 100px | `--spacing-100` |

### Border Radius

| Element | Value |
|---------|-------|
| buttons | 0px |
| default | 2px |

### Layout

- **Section gap:** 40px
- **Card padding:** 16px
- **Element gap:** 8px

## Components

### Navigation Link (White)
**Role:** Ghost link

Used in header and navigation. Text color Ink (#000000), transparent background with no border. Text is typically 12-14px Founders Grotesk, weight 400.

### Navigation Link (Dark)
**Role:** Ghost link

Used in header/footer on dark backgrounds. Text color Canvas White (#ffffff), transparent background. Text is typically 12-14px Founders Grotesk, weight 400.

### Input Field (Ghost)
**Role:** Data entry

Minimalist input field, transparent background, text color Canvas White (#ffffff), with a bottom border of Canvas White (#ffffff). Padding is 11px vertical. Placeholder text is Muted Stone (#696159).

### Inline Text Link
**Role:** Navigation

Text in Interaction Azure (#0066cc), with a matching 1px bottom border. Used for discrete internal links like 'Privacy Policy'.

### Search Button
**Role:** Icon button

Circular button with Ink (#000000) text on a transparent background, radius 50% for a perfect circle. Used for search or similar icons.

### Shop All Button
**Role:** Ghost button with padding

Text in Ink (#000000) on Canvas White (#ffffff) background, with 10px horizontal padding. No border and 0px radius, indicating an interactive element within a card or section.

### Privacy Policy Link
**Role:** Underlined link

Text in Interaction Azure (#0066cc) with a matching 1px solid border bottom. Provides navigational emphasis without a full button shape.

## Do's and Don'ts

### Do
- Prioritize Ink (#000000) for all primary text and Canvas White (#ffffff) for backgrounds to maintain a clean, high-contrast aesthetic.
- Use Founders Grotesk for all primary typographic elements, adjusting letter-spacing by 0.01em or 0.04em to create subtle variations in emphasis.
- Apply 0px border-radius to interactive buttons unless a perfect circle is intended, favoring sharp edges for UI elements.
- Utilize 40px as the standard vertical separation between major content sections.
- When a distinct call to action is required, use Interaction Azure (#0066cc) for text and outline, avoiding solid colored backgrounds for interactive elements.
- Maintain comfortable density using 8px as the base unit for element gaps, ensuring consistent spacing between components.
- Employ Soft Gray (#746c6c) exclusively for placeholder text within input fields, differentiating it from active input.

### Don't
- Avoid arbitrary color usage; retain the minimalist achromatic palette with Interaction Azure (#0066cc) as the sole accent color.
- Do not use heavy shadows or gradients; rely on contrast and spacing to define UI hierarchy.
- Refrain from mixing fonts excessively; Founders Grotesk should dominate, with highly limited use of others for specific technical purposes.
- Do not break the 0px radius rule for primary buttons; rounded corners are a specific stylistic departure from this system.
- Avoid dense, information-heavy blocks; ensure generous use of whitespace with a comfortable density strategy.
- Do not introduce strong visual metaphors or decorative elements that disrupt the clean, gallery-like canvas.
- Do not use filled buttons as primary actions; always prefer outlined or text links with Interaction Azure (#0066cc) for emphasis.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas White | `#ffffff` | Primary page background and default surface for most content. |
| 1 | Muted Stone | `#696159` | Used sparingly for distinct section backgrounds, notably the footer, to provide subtle visual separation. |

## Imagery

Imagery primarily features product shots or carefully composed art-direction photography. Product shots are typically clean, isolated items presented on a white or light gray background. Lifestyle photography embeds products or abstract elements within natural, often muted-tone, outdoor settings, offering a sense of calm and organic origin. Images are usually contained within rectangular bounds, without overlapping elements, and serve as decorative atmosphere or product showcase. Icons, when present, are simple, outlined, and monochromatic, maintaining the understated aesthetic. The overall image density is moderate, carefully balanced with text to create a feeling of spaciousness.

## Layout

The page maintains a centered, max-width contained layout, though specific sections may extend full-bleed. The hero section often features a centered headline over a background image or a clean product shot. Content proceeds with consistent vertical spacing, often alternating between text-left/image-right sections and centered text blocks. Card grids, like for product categories, are present but not overly dense. Navigation is handled by a discreet top bar that may become sticky, providing a minimalist browsing experience that prioritizes content.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #ffffff
border: #000000
accent: #0066cc
primary action: #0066cc (outlined action border)

Example Component Prompts:
1. Create an Outlined Primary Action: Transparent background, #0066cc border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.
2. Design a minimalist input field: 11px vertical padding, transparent background, Canvas White (#ffffff) text, Soft Gray (#746c6c) placeholder, with a 1px bottom border in Canvas White (#ffffff).
3. Generate a 'Shop All' button: Poppins, 24px, weight 700, Ink (#000000) text, Canvas White (#ffffff) background, 10px horizontal padding, 0px border-radius.
4. Create a footer section background: Muted Stone (#696159) background, Ink (#000000) text, with 40px top and bottom padding.

## Similar Brands

- **Aesop** — Shares a monochromatic aesthetic with precise typography and a focus on product presentation through clean photography and understated UI.
- **Glossier** — Similar emphasis on minimalist design, clean product shots, and a limited color palette that makes specific product packaging stand out.
- **Byredo** — Known for a sophisticated, restrained visual language, using high-quality photography and a refined typographic approach within a predominantly neutral UI.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink: #000000;
  --color-muted-stone: #696159;
  --color-soft-gray: #746c6c;
  --color-interaction-azure: #0066cc;

  /* Typography — Font Families */
  --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-atlas-grotesk: 'Atlas Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.1;
  --tracking-caption: 0.12px;
  --text-body: 14px;
  --leading-body: 1.3;
  --text-heading: 18px;
  --leading-heading: 1.2;
  --tracking-heading: 0.18px;
  --text-display: 30px;
  --leading-display: 1.1;
  --tracking-display: 0.3px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-100: 100px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 16px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-sm: 2px;

  /* Named Radii */
  --radius-buttons: 0px;
  --radius-default: 2px;

  /* Surfaces */
  --surface-canvas-white: #ffffff;
  --surface-muted-stone: #696159;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-ink: #000000;
  --color-muted-stone: #696159;
  --color-soft-gray: #746c6c;
  --color-interaction-azure: #0066cc;

  /* Typography */
  --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-atlas-grotesk: 'Atlas Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.1;
  --tracking-caption: 0.12px;
  --text-body: 14px;
  --leading-body: 1.3;
  --text-heading: 18px;
  --leading-heading: 1.2;
  --tracking-heading: 0.18px;
  --text-display: 30px;
  --leading-display: 1.1;
  --tracking-display: 0.3px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-100: 100px;

  /* Border Radius */
  --radius-sm: 2px;
}
```