---
version: "alpha"
name: "Fieldnote Assistant"
colors:
  action-background: "#17181b"
  action-background-dark: "#f4f6f8"
  action-foreground: "rgb(255, 255, 255)"
  action-foreground-dark: "#f4f6f8"
  control-background: "#ffffff"
  control-background-dark: "#191c22"
  surface-canvas: "#f7f7f8"
  surface-canvas-dark: "#111318"
  surface-raised: "#ffffff"
  surface-raised-dark: "#191c22"
  surface-raised-foreground: "#747780"
  surface-raised-foreground-dark: "#9ca3af"
  text-body: "#17181b"
  text-body-dark: "#f4f6f8"
  accent-1: "#087cf0"
  accent-2: "#55a7ff"
typography:
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "14px"
  display:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "18px"
  body-text:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "14px"
    lineHeight: "1.65"
  h2:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "18px"
    lineHeight: "1.65"
rounded:
  step-1: "9px"
  step-2: "10px"
  step-3: "11px"
  step-4: "12px"
  step-5: "14px"
spacing:
  step-1: "12px"
  step-2: "20px"
  step-3: "28px"
components:
  form:
    rounded: "{rounded.step-5}"
    padding: "10px"
---

# DESIGN.md

## Overview

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

- **action-background:** `#17181b`
- **action-background-dark:** `#f4f6f8`
- **action-foreground:** `rgb(255, 255, 255)`
- **action-foreground-dark:** `#f4f6f8`
- **control-background:** `#ffffff`
- **control-background-dark:** `#191c22`
- **surface-canvas:** `#f7f7f8`
- **surface-canvas-dark:** `#111318`
- **surface-raised:** `#ffffff`
- **surface-raised-dark:** `#191c22`
- **surface-raised-foreground:** `#747780`
- **surface-raised-foreground-dark:** `#9ca3af`
- **text-body:** `#17181b`
- **text-body-dark:** `#f4f6f8`
- **accent-1:** `#087cf0`
- **accent-2:** `#55a7ff`
- Page: Use color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`.

## Typography

- **body:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `14px`
- **display:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `18px`
- **body-text:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `14px`, lineHeight `1.65`
- **h2:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `18px`, lineHeight `1.65`
- Level 1 heading: Use font-size `18px`; margin `0px`. When dark mode, use background `#191c22`.
- Level 2 heading: Observed alternatives:
  - Use font-size `14px`. When dark mode, use background `#191c22`.
  - Use font-size `18px`; line-height `1.65`; margin `0px 0px 10px`. When dark mode, use background `#111318`.
- Page: Use font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`.
- Paragraph: Use line-height `1.65`; margin `0px 0px 12px`. Observed alternatives:
  - When dark mode, use background `#111318`.
  - When dark mode, use background `#242831`.
- Strong text: Observed alternatives:
  - Use color `inherit`. When dark mode, use background `#191c22`.
  - Use color `inherit`. When dark mode, use background `#242831`.
  - Use display `block`; margin-bottom `5px`. When dark mode, use background `#191c22`.
  - Use line-height `1.65`. When dark mode, use background `#111318`.
  - Use line-height `1.65`. When dark mode, use background `#242831`.

## Layout

Observed spacing scale: `12px`, `20px`, `28px`.
- Article: Observed alternatives:
  - Use border `1px solid #e3e4e8`; border-radius `10px`; margin-top `10px`; padding `12px`.
  - Use display `grid`; gap `12px`; grid-template-columns `36px minmax(0px, 1fr)`; margin-bottom `28px`.
- Complementary content: Use background `#fff`; padding `18px 14px`. When dark mode, use background `#191c22`. Observed alternatives:
  - Use border-left `1px solid #e3e4e8`; border-right `0px`. When viewport width <= 900px, use display `none`.
  - Use border-right `1px solid #e3e4e8`.
- Flex container: Use display `flex`. Observed alternatives:
  - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`.
  - Use align-items `center`; line-height `1.65`.
  - Use justify-content `space-between`.
- Grid container: Use display `grid`; grid-template-columns `220px minmax(0px, 1fr) 292px`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
- Header: Use background `#fff`; border-bottom `1px solid #e3e4e8`; padding `16px 24px`. When dark mode, use background `#191c22`.
- Main content: Use display `grid`; grid-template-rows `auto 1fr auto`; height `100vh`; min-width `0px`. When viewport width <= 900px, use height `100vh`.
- Navigation: Use display `grid`; gap `5px`; margin-top `20px`.
- Page root: Use margin `0px`; min-height `100%`.
- Page: Use margin `0`; min-height `100%`.
- Section: Use overflow `auto`; padding `28px max(24px, 8vw)`. When viewport width <= 900px, use padding `22px 18px`.

## Elevation & Depth

- `rgba(0, 0, 0, 0.2) 0px 8px 24px`
- `rgba(25, 29, 41, 0.125) 0px 12px 35px`

## Shapes

Observed corner-radius scale: `9px`, `10px`, `11px`, `12px`, `14px`.

## Components

- Button: Use font `inherit`. Observed alternatives:
  - Use background `#087cf0`; border `0px`; border-radius `10px`; color `white`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 14px`. When dark mode, use background `#55a7ff`.
  - Use background `#17181b`; border `0px`; border-radius `11px`; color `rgb(255, 255, 255)`; font-weight `750`; margin `18px 0px`; padding `11px`; width `100%`. When dark mode, use background `#f4f6f8`.
  - Use background `#f1f2f4`; border `0px`; border-radius `10px`; color `#17181b`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 12px`. When dark mode, use background `#242831`; color `#f4f6f8`.
  - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `999px`; bottom `14px`; box-shadow `rgba(0, 0, 0, 0.2) 0px 8px 24px`; color `#17181b`; display `grid`; height `36px`; place-items `center`; position `fixed`; right `14px`; width `36px`; z-index `20`. When dark mode, use background `#191c22`; color `#f4f6f8`.
- Form: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(25, 29, 41, 0.125) 0px 12px 35px`; margin `0px max(20px, 8vw) 22px`; padding `10px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use margin `0px 16px 16px`.
- Multiline input: Use background `#fff`; border `0px`; color `#17181b`; display `block`; font `inherit`; min-height `62px`; width `100%`. When dark mode, use background `#191c22`; color `#f4f6f8`.
- Navigation link: Use border-radius `9px`; color `inherit`; display `grid`; gap `3px`; padding `10px`. Observed alternatives:
  - Use only the common rules above.
  - Use background `#f1f2f4`. When dark mode, use background `#242831`.

### 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 combinations of layout, theme and interaction states could not be established from this capture.
- Some conditional styles are not described because their affected elements could not be established.
- Some page-specific relationships and generated decorations could not be summarized as reusable element styles. Use the accompanying source project for those details.