Back to Hub
CA • task_1 task_2 task_3 +
>_ Start New Task

A style inspired by modern code editors and IDE interfaces. Layered dark panels, tab navigation, and keycap-style UI elements create a focused, tool-like atmosphere suited for developer products and dashboards.

STYLE GUIDE

Dual-font pairing: monospace for structure, sans-serif for readability.

Single accent color on a deep layered dark base keeps the interface calm and focused.

Layered panels Keycap tags Tab nav Status bar

AI Request Prompt

Design a SaaS dashboard or developer tool landing page in IDE/console aesthetic.

Style rules:
- Background: Deep navy-black (#05070c), panels layered from #0c111a to #181c25 for depth
- Typography: Dual-font system — JetBrains Mono for headings/labels/code, IBM Plex Sans for body text
- Structure: Tab bar navigation at top, workspace-style content area with nested panels
- Components: Keycap-style tags (inset shadow + mono font), status bar footer, nested card hierarchy
- Colors: Muted base (#d7dbe6 text, #8890a2 secondary), single accent green (#1ece79) for interactive elements
- Details: Blinking block cursor on key headings, pill-shaped action buttons with green border

Responsive:
- Mobile: Tab/tag sizes reduced, panels stack vertically, 92vw content width
- Desktop: max-width 1280px, workspace area with generous padding

Restrictions:
- No light or white backgrounds
- Single accent color only (green) — no multi-color palettes
- No heavy gradients or blur effects — keep surfaces flat and layered
- Minimal motion — cursor blink is the only animation

Output:
1) Design tokens (color palette / typography scale / spacing / border)
2) Layout structure (tab bar / workspace / content panels / footer)
3) HTML/CSS code with responsive support
mode: balance status: ready

Go to Hub