Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Unkey Dashboard
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Unkey
- **Category:** Dashboard
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/697b76d42b0f7d9edacfc7b6_0mvc74at6d5gcd39083jypjdjzfa11mm.avif
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
### Overall aesthetic
- **Character:** Sparse API-management dashboard with white surfaces, subtle navigation selection and a single summary card.
### Page composition
- **Capture:** 2940 ร 1664 screenshot pixels; estimated 2ร CSS scale.
- **Structure:** Narrow sidebar, APIs header with Create new API, search/time-range toolbar and one card near the top left; result count sits below.
### Information hierarchy
- **Priority:** API name anchors the card, followed by muted identifier, valid/invalid counters and key count. Creation remains the strongest global action.
### Typography
- **Family:** Sans serif; exact family unverified.
- **Estimated CSS sizes:** Card name 16px, navigation/body 14px, identifier/counters 11โ12px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, near-white #FDFDFD, rules #EEEEF1, dark action #1D2125 and neutral grays #E8E8E8/#D9D9D9.
### Components
- **Elements:** Organization switcher, nested APIs navigation, search, time range, Refresh, dark create button and outlined card with empty chart region.
- **Estimated geometry:** Sidebar 256px, card approximately 380ร264px, 12px radius and 24px inner padding.
### Visual rhythm
- **Spacing:** Compact top controls and isolated card leave a large blank workspace; fine separators define navigation and toolbar boundaries.
### Responsive
- **Suggested adaptation:** Collapse sidebar and let the summary card fill available width. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve the lightweight API summary and clear create/search actions. Use meaningful empty-chart treatment and masked identifiers.
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.