---
version: "alpha"
name: "North Index"
colors:
  border-default: "#e33b2e"
  surface-canvas: "#f3f1eb"
  text-body: "#111111"
typography:
  body:
    fontFamily: "Arial,sans-serif"
    fontSize: "15px"
    lineHeight: "1.4"
  display:
    fontFamily: "Arial,sans-serif"
    lineHeight: ".82"
    letterSpacing: "-.075em"
  body-text:
    fontFamily: "Arial,sans-serif"
    fontSize: "11px"
    lineHeight: "1.4"
    letterSpacing: ".1em"
  body-text-2:
    fontFamily: "Arial,sans-serif"
    fontSize: "20px"
    lineHeight: "1.4"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/swiss-research/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

- **border-default:** `#e33b2e`
- **surface-canvas:** `#f3f1eb`
- **text-body:** `#111111`
- Page: Use background `#f3f1eb`; color `#111`.

## Typography

- **body:** fontFamily `Arial,sans-serif`, fontSize `15px`, lineHeight `1.4`
- **display:** fontFamily `Arial,sans-serif`, lineHeight `.82`, letterSpacing `-.075em`
- **body-text:** fontFamily `Arial,sans-serif`, fontSize `11px`, lineHeight `1.4`, letterSpacing `.1em`
- **body-text-2:** fontFamily `Arial,sans-serif`, fontSize `20px`, lineHeight `1.4`
- Level 1 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(54px,8vw,128px)`; letter-spacing `-.075em`; line-height `.82`; margin `18px 0`. When viewport width <= 700px, use font-size `58px`.
- Level 2 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(24px,3vw,48px)`; line-height `1`; margin `12px 0`.
- 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.4`.
- Paragraph: Use background `#f3f1eb`; font-family `Arial,sans-serif`. Observed alternatives:
  - Use only the common rules above.
  - Use font-size `11px`; letter-spacing `.1em`; text-transform `uppercase`.
  - Use font-size `20px`; max-width `52ch`.

## Layout

- Article: Use padding-top `16px`. Observed alternatives:
  - Use border-top `6px solid`; font-family `Arial,sans-serif`.
  - When sibling position 2, use border-color `#e33b2e`; border-top `6px solid`; color `#111`; font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`; padding-top `16px`.
- Flex container: Use border-top `1px solid`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; padding `14px 0`.
- Grid container: Use align-content `end`; display `grid`; font-family `Arial,sans-serif`.
- Header: Use align-items `end`; border-bottom `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `1fr 2fr auto`; padding-bottom `18px`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
- Main content: Use font-family `Arial,sans-serif`; min-height `100vh`; padding `24px 4vw`.
- Navigation: Use display `flex`; font-family `Arial,sans-serif`; gap `20px`. When viewport width <= 700px, use font-size `12px`; gap `10px`.
- Page: Use margin `0`.
- Section: Use display `grid`; font-family `Arial,sans-serif`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives:
  - Use border-bottom `1px solid #bbb8b0`; gap `5vw`; grid-template-columns `1.55fr .75fr`; padding `70px 0`. When viewport width <= 700px, use padding `40px 0`.
  - Use gap `24px`; grid-template-columns `2fr 1fr 1fr`; padding `30px 0`.

### Extraction limits

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