---
version: "alpha"
name: "Orbit Desk"
colors:
  surface-canvas: "#adf1df"
  surface-raised: "rgba(255,255,255,.72)"
  surface-raised-foreground: "#66728a"
  accent-1: "#10203d"
  accent-2: "#2356d8"
  accent-3: "#66dcb5"
typography:
  body:
    fontFamily: "Arial,sans-serif"
    fontSize: "14px"
    lineHeight: "1.45"
  display:
    fontFamily: "Arial,sans-serif"
    lineHeight: ".9"
    letterSpacing: "-.06em"
spacing:
  step-1: "8px"
  step-2: "12px"
  step-3: "20px"
  step-4: "24px"
components:
  field-label:
    backgroundColor: "{colors.surface-raised}"
    rounded: "99px"
  main-content:
    textColor: "{colors.accent-1}"
    padding: "20px"
  complementary-content:
    backgroundColor: "{colors.surface-raised}"
    rounded: "20px"
    padding: "18px"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/aurora-operations/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:** `#adf1df`
- **surface-raised:** `rgba(255,255,255,.72)`
- **surface-raised-foreground:** `#66728a`
- **accent-1:** `#10203d`
- **accent-2:** `#2356d8`
- **accent-3:** `#66dcb5`

## Typography

- **body:** fontFamily `Arial,sans-serif`, fontSize `14px`, lineHeight `1.45`
- **display:** fontFamily `Arial,sans-serif`, lineHeight `.9`, letterSpacing `-.06em`
- Level 1 heading: Use color `#10203d`; font-family `Arial,sans-serif`; font-size `clamp(34px,5vw,72px)`; letter-spacing `-.06em`; line-height `.9`; margin `12px 0`.
- Level 2 heading: Use color `#10203d`; font-family `Arial,sans-serif`.
- Page: Use font-family `Arial,sans-serif`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.45`.
- Paragraph: Use color `#10203d`; font-family `Arial,sans-serif`. When viewport width <= 700px, use display `none`.
- Strong text: Use color `#10203d`; display `block`; font-family `Arial,sans-serif`; font-size `36px`; margin-top `15px`.

## Layout

Observed spacing scale: `8px`, `12px`, `20px`, `24px`.
- Article: Use background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `20px`; color `#10203d`; font-family `Arial,sans-serif`. Observed alternatives:
  - Use min-height `300px`; padding `24px`. When viewport width <= 700px, use min-height `250px`.
  - Use padding `20px`.
- Complementary content: Use align-content `start`; background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `20px`; color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `8px`; padding `18px`. When viewport width <= 700px, use display `flex`; overflow `auto`.
- Flex container: Use color `#10203d`; display `flex`; font-family `Arial,sans-serif`. Observed alternatives:
  - Use align-items `end`; border-bottom `1px solid #cbd7ef`; gap `12px`; height `180px`.
  - Use align-items `end`; justify-content `space-between`. When viewport width <= 700px, use align-items `start`.
  - Use border-top `1px solid #cbd7ef`; justify-content `space-between`; padding `13px 0`.
- Grid container: Use color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `18px`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives:
  - Use grid-template-columns `1fr 1fr`.
  - Use grid-template-columns `220px 1fr`.
  - Use grid-template-columns `repeat(3,1fr)`.
- Header: Use align-items `center`; color `#10203d`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; margin-bottom `20px`.
- Main content: Use background `radial-gradient(circle at 70% 0,#adf1df 0,transparent 30%),radial-gradient(circle at 10% 40%,#cbbdff 0,transparent 35%),#eef3ff`; color `#10203d`; font-family `Arial,sans-serif`; min-height `100vh`; padding `20px`.
- Page: Use margin `0`.
- Section: Use color `#10203d`; display `grid`; font-family `Arial,sans-serif`; gap `18px`.

## Components

- Checkbox: Use color `#10203d`; font `inherit`; font-family `Arial,sans-serif`.
- Field label: Use align-items `center`; background `rgba(255,255,255,.72)`; border `1px solid #cbd7ef`; border-radius `99px`; color `#10203d`; display `flex`; font-family `Arial,sans-serif`; gap `8px`; padding `10px 14px`.

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