---
version: "alpha"
name: "Relay Mailroom"
colors:
  action-background: "#f1f2f4"
  action-background-dark: "#242831"
  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: "rgb(52, 65, 86)"
  accent-2: "#16885c"
  accent-3: "#55c995"
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: "20px"
  h2:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "26px"
  body-text:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
    fontSize: "14px"
    lineHeight: "1.7"
rounded:
  step-1: "8px"
  step-2: "9px"
  step-3: "10px"
  step-4: "11px"
  step-5: "12px"
  step-6: "14px"
spacing:
  step-1: "4px"
  step-2: "8px"
  step-3: "12px"
  step-4: "20px"
  step-5: "28px"
components:
  paragraph:
    textColor: "rgb(66, 69, 77)"
  paragraph-dark-mode:
    textColor: "{colors.action-foreground-dark}"
  section:
    backgroundColor: "rgb(251, 251, 252)"
  section-dark-mode:
    backgroundColor: "{colors.surface-canvas-dark}"
  header:
    padding: "18px"
  text-input:
    rounded: "{rounded.step-3}"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/relay-mailroom/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:** `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:** `rgb(52, 65, 86)`
- **accent-2:** `#16885c`
- **accent-3:** `#55c995`
- 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 `20px`
- **h2:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `26px`
- **body-text:** fontFamily `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`, fontSize `14px`, lineHeight `1.7`
- Level 1 heading: Use font-size `20px`; margin `0px 0px 12px`. When dark mode, use background `#111318`.
- Level 2 heading: Use font-size `26px`; margin `0px 0px 16px`. 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`.
- Paragraph: Use color `rgb(66, 69, 77)`; line-height `1.7`. When dark mode, use background `#191c22`; color `#f4f6f8`.
- Strong text: Observed alternatives:
  - Use color `inherit`. When dark mode, use background `#111318`.
  - Use color `inherit`. When dark mode, use background `#191c22`.
  - When dark mode, use background `#111318`.
  - When dark mode, use background `#191c22`.

## Layout

Observed spacing scale: `4px`, `8px`, `12px`, `20px`, `28px`.
- Article: Use max-width `760px`; padding `38px 42px`. When viewport width <= 900px, use padding `28px 22px`.
- Complementary content: Use background `#fff`; border-right `1px solid #e3e4e8`; padding `18px 12px`. 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 `#f7f7f8`; border `1px solid #e3e4e8`; border-radius `12px`; justify-content `space-between`; margin-top `28px`; padding `14px`. When dark mode, use background `#111318`.
  - Use align-items `center`; color `inherit`; gap `9px`.
  - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`.
  - Use align-items `center`; gap `11px`; margin `22px 0px`.
  - Use align-items `center`; gap `8px`; margin-left `auto`.
  - Use border-bottom `1px solid #e3e4e8`; gap `8px`; padding `16px 22px`.
- Grid container: Use display `grid`; grid-template-columns `208px 330px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
- Header: Use border-bottom `1px solid #e3e4e8`; padding `18px`.
- Main content: Use background `#fff`; min-width `0px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use min-height `100vh`.
- Navigation: Use display `grid`. Observed alternatives:
  - Use only the common rules above.
  - Use gap `4px`.
- Page root: Use margin `0px`; min-height `100%`.
- Page: Use margin `0`; min-height `100%`.
- Section: Use background `rgb(251, 251, 252)`; border-right `1px solid #e3e4e8`; min-width `0px`. When dark mode, use background `#111318`. When viewport width <= 900px, use display `none`.

## Elevation & Depth

- `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 `#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 `#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`.
- Navigation link: Use color `inherit`. Observed alternatives:
  - Use background `#f1f2f4`; border-radius `8px`; display `flex`; font-weight `700`; justify-content `space-between`; padding `9px 10px`. When dark mode, use background `#242831`.
  - Use background `#fff`; border-bottom `1px solid #e3e4e8`; box-shadow `inset 3px 0 #087cf0`; display `grid`; gap `7px`; padding `15px 18px`. When dark mode, use background `#191c22`; box-shadow `inset 3px 0 #55a7ff`.
  - Use border-bottom `1px solid #e3e4e8`; display `grid`; gap `7px`; padding `15px 18px`.
  - Use border-radius `8px`; display `flex`; justify-content `space-between`; padding `9px 10px`.
- Text input: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `10px`; font `inherit`; padding `10px 12px`; width `100%`. When dark mode, use background `#191c22`.

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