---
version: "alpha"
name: "Range Field Guide"
colors:
  surface-canvas: "#f2f4ef"
  surface-raised: "#ffffff"
  surface-raised-foreground: "#f2f4ef"
  accent-1: "#c8f55b"
typography:
  body:
    fontFamily: "Arial,sans-serif"
    fontSize: "15px"
    lineHeight: "1.45"
  display:
    fontFamily: "Arial,sans-serif"
    lineHeight: ".9"
    letterSpacing: "-.06em"
components:
  main-content:
    backgroundColor: "{colors.surface-canvas}"
    textColor: "#172019"
    padding: "24px"
  main-content-viewport-width-at-most-760px:
    padding: "14px"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/bento-field-guide/source/index.html`.

Each component group lists its common rules once. Choose one observed alternative together with those common rules; its theme, interaction and responsive changes stay with that alternative.

## Colors

- **surface-canvas:** `#f2f4ef`
- **surface-raised:** `#ffffff`
- **surface-raised-foreground:** `#f2f4ef`
- **accent-1:** `#c8f55b`

## Typography

- **body:** fontFamily `Arial,sans-serif`, fontSize `15px`, lineHeight `1.45`
- **display:** fontFamily `Arial,sans-serif`, lineHeight `.9`, letterSpacing `-.06em`
- Level 1 heading: Use background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.
- Level 2 heading: Use background `#fff`; color `#172019`; font-family `Arial,sans-serif`.
- Page: Use font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.45`.
- Paragraph: Use font-family `Arial,sans-serif`. Observed alternatives:
  - Use background `#172019`; color `#f2f4ef`.
  - Use background `#c8f55b`; color `#172019`.
  - Use background `#fff`; color `#172019`.
- Strong text: Use color `#172019`; font-family `Arial,sans-serif`. Observed alternatives:
  - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`.
  - Use background `#fff`; font-size `42px`.

## Layout

- Article: Use border `1px solid #d4d9d1`; border-radius `18px`; font-family `Arial,sans-serif`; overflow `hidden`; padding `24px`. When viewport width <= 760px, use grid-column `1`; grid-row `auto`. Observed alternatives:
  - Use background `#172019`; color `#f2f4ef`; display `flex`; flex-direction `column`; grid-column `span 8`; grid-row `span 2`; justify-content `space-between`. When viewport width <= 760px, use min-height `430px`.
  - Use background `#c8f55b`; color `#172019`; grid-column `span 4`.
  - Use background `#fff`; color `#172019`; display `grid`; gap `30px`; grid-column `span 8`; grid-template-columns `1fr 1fr`. When viewport width <= 760px, use grid-template-columns `1fr`.
  - Use background `#fff`; color `#172019`; grid-column `span 4`.
  - Use background `linear-gradient(135deg,transparent 48%,#d4d9d1 49% 51%,transparent 52%),#fff`; color `#172019`; grid-column `span 4`; grid-row `span 2`. When viewport width <= 760px, use min-height `280px`.
- Flex container: Use color `#172019`; display `flex`; font-family `Arial,sans-serif`. Observed alternatives:
  - Use align-items `center`; gap `20px`.
  - Use border-top `1px solid #d4d9d1`; justify-content `space-between`; padding `12px 0`.
- Header: Use align-items `center`; color `#172019`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; margin `auto`; max-width `1280px`; padding-bottom `22px`.
- Main content: Use background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
- Page: Use margin `0`.
- Section: Use color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.

## Components

- Checkbox: Use color `#172019`; font `inherit`; font-family `Arial,sans-serif`.

### Extraction limits

Missing facts and unresolved conditions:
- The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
- Some page-specific relationships and generated decorations could not be summarized as reusable element styles. Use the accompanying source project for those details.