---
version: "alpha"
name: "Tide Ledger"
colors:
  action-background: "#f1f2f4"
  action-background-dark: "#242831"
  action-foreground: "#17181b"
  action-foreground-dark: "#f4f6f8"
  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"
  accent-3: "#16885c"
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: "19px"
  h2:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "15px"
rounded:
  step-1: "8px"
  step-2: "9px"
  step-3: "10px"
  step-4: "11px"
  step-5: "12px"
  step-6: "14px"
spacing:
  step-1: "8px"
  step-2: "12px"
  step-3: "16px"
  step-4: "20px"
components:
  link:
    rounded: "{rounded.step-2}"
  rounded-surface:
    rounded: "{rounded.step-3}"
    height: "230px"
  header:
    backgroundColor: "rgba(255, 255, 255, 0.94)"
  header-dark-mode:
    backgroundColor: "rgba(25, 28, 34, 0.94)"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/tide-ledger/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:** `#f1f2f4`
- **action-background-dark:** `#242831`
- **action-foreground:** `#17181b`
- **action-foreground-dark:** `#f4f6f8`
- **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`
- **accent-3:** `#16885c`
- 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 `19px`
- **h2:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `15px`
- Level 1 heading: Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`.
- Level 2 heading: Use font-size `15px`; margin `0px`. When dark mode, use background `#191c22`.
- Page: Use font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`.
- Strong text: Observed alternatives:
  - Use color `#16885c`; font-size `11px`; font-weight `700`. When dark mode, use background `#191c22`; color `#55c995`.
  - When dark mode, use background `#191c22`.
  - When dark mode, use background `#242831`.

## Layout

Observed spacing scale: `8px`, `12px`, `16px`, `20px`.
- Article: Use border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px`. Observed alternatives:
  - Use background `#fff`; min-width `0px`; padding `18px`. When dark mode, use background `#191c22`. When viewport width <= 520px, use padding `14px`.
  - Use background `rgb(16, 18, 22)`; color `rgb(255, 255, 255)`; padding `22px`.
- Complementary content: Use background `#fff`; border-right `1px solid #e3e4e8`; display `flex`; flex-direction `column`; gap `22px`; padding `18px 14px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use display `none`.
- Flex container: Use display `flex`. Observed alternatives:
  - Use align-items `center`; background `#f1f2f4`; border-radius `10px`; justify-content `space-between`; padding `12px`. When dark mode, use background `#242831`.
  - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`.
  - Use align-items `center`; gap `10px`.
  - Use align-items `center`; gap `12px`; justify-content `space-between`; margin-bottom `16px`.
  - Use align-items `center`; gap `8px`; margin-left `auto`.
  - Use align-items `end`; gap `8px`; height `170px`; padding-top `20px`.
  - Use color `rgb(255, 255, 255)`; gap `8px`.
- Grid container: Use display `grid`. Observed alternatives:
  - Use only the common rules above.
  - Use align-items `center`; border-top `1px solid #e3e4e8`; gap `11px`; grid-template-columns `40px 1fr auto`; padding `13px 0px`.
  - Use gap `10px`.
  - Use grid-template-columns `232px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
- Header: Use align-items `center`; background `rgba(255, 255, 255, 0.94)`; border-bottom `1px solid #e3e4e8`; display `flex`; gap `12px`; min-height `66px`; padding `12px 24px`; position `sticky`; top `0px`; z-index `2`. When dark mode, use background `rgba(25, 28, 34, 0.94)`. When viewport width <= 900px, use padding `11px 16px`.
- Main content: Use display `grid`; gap `16px`; margin `0px auto`; padding `18px 24px 40px`; width `min(100%, 1280px)`. When viewport width <= 900px, use padding `14px 16px 32px`.
- Navigation: Use display `grid`; gap `5px`.
- Page root: Use margin `0px`; min-height `100%`.
- Page: Use margin `0`; min-height `100%`.
- Section: Observed alternatives:
  - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px`; min-width `0px`; padding `18px`. When dark mode, use background `#191c22`. When viewport width <= 520px, use padding `14px`.
  - Use display `grid`; gap `16px`; grid-template-columns `1.2fr 0.8fr`. When viewport width <= 900px, use grid-template-columns `1fr`.
  - Use display `grid`; gap `16px`; grid-template-columns `minmax(0px, 1.55fr) minmax(280px, 0.7fr)`. When viewport width <= 520px, use gap `12px`. When viewport width <= 900px, use grid-template-columns `1fr`.

## Elevation & Depth

- `rgba(0, 0, 0, 0.03) 0px 1px 2px`
- `rgba(0, 0, 0, 0.2) 0px 8px 24px`

## Shapes

Observed corner-radius scale: `8px`, `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`. When viewport width <= 520px, use padding `0px 10px`.
  - 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 `#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`. When viewport width <= 900px, use display `none`.
  - Use background `#f1f2f4`; border `0px`; border-radius `10px`; 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`; width `34px`. When dark mode, use background `#242831`.
  - 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`.
  - Use background `rgb(239, 239, 239)`; border `0px`; border-radius `10px`; color `rgb(0, 0, 0)`; 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 `700`; line-height `inherit`; padding `9px 13px`.
- Link: Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. When dark mode, use background `#191c22`.
- Navigation link: Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. Observed alternatives:
  - Use background `#f1f2f4`; font-weight `700`. When dark mode, use background `#242831`.
  - When dark mode, use background `#191c22`.
- Rounded surface: Use background `linear-gradient(rgb(234, 245, 255), transparent), repeating-linear-gradient(0deg, transparent 0px, transparent 45px, rgb(233, 234, 238) 46px)`; border-radius `10px`; height `230px`. When dark mode, use background `linear-gradient(180deg,#242831,transparent),repeating-linear-gradient(0deg,transparent 0 45px,#e3e4e8 46px)`.

### 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.