Clone comparison
Orbit Desk · Theme switch DESIGN.md
A space-operations console with light and dark themes, dense system readings, and navigation that contracts cleanly on smaller screens.
Updated:
What this example demonstrates
- Theme switch
- Data layout
- Responsive navigation
DESIGN.md
The design rules extracted from the same page as this preview.
YAML contains exact design values · Markdown explains how to use them
Foundations
The palette, type hierarchy, spacing, corners, and depth recorded in this file.
Colors
6#adf1dfrgba(255,255,255,.72)#66728a#10203d#2356d8#66dcb5Typography
2Build from the page's own design language
Arial,sans-serif
Build from the page's own design language
Arial,sans-serif
Samples use fonts available in your browser. Exact values remain in the file.
Typography by region
5| Pattern | Guidance |
|---|---|
| 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`. |
Spacing
48px12px20px24pxLayout and responsive
Layout and viewport rules appear here only when the DESIGN.md contains matching evidence.
| Pattern | Guidance |
|---|---|
| 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 and states
Component facts group the properties and states that were traced to the same page capture.
Components
3Field 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
| Pattern | Guidance |
|---|---|
| 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`. |
What is included
See which parts of the website style are included in this file.
What could not be captured
- 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.
Recreation challenge
Theme relationships and status colors must remain coherent in both modes while dense controls still fit a responsive shell.
Limits of this example
The safe first-party theme switch is retained, but operational controls and telemetry are not connected to live systems.
DESIGN.md
Design facts from the same capture
Download DESIGN.md- 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)`.
- 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`.
- Paragraph: Use color `#10203d`; font-family `Arial,sans-serif`. When viewport width <= 700px, use display `none`.
- Checkbox: Use color `#10203d`; font `inherit`; font-family `Arial,sans-serif`.
- Surface Canvas: #adf1df
- Spacing: 8px · 12px · 20px · 24px
Use this workflow for your own page
Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.
More from Gallery
Extract your own webpage
Enter a public page you own or have permission to use. Get a Tailwind CSS v4 project and DESIGN.md. Your URL is kept when you sign in.