Back to Gallery

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

Code-driven rebuild

Reads the page structure and CSS directly, then builds a clean Tailwind CSS v4 project.

Complete page assets

Keeps layouts, variables, and assets in a safe static preview.

Responsive layouts

Light and dark themes

Change the device width or theme and both previews show the same state. Webpages scroll together, while each HTML pane scrolls on its own.

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

Range Field GuideA field guide organized as a bento grid with practical content blocks, environmental color cues, and an optional dark theme.Atlas DispatchA dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.

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.