Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Unkey Create New API
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:** Add & Edit
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/697b75eba727de5f927f499d_NsDS3meY8nu8kpldWhmnK7s7d7LcQMEsHtMK7tzPKSs.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:** Extremely restrained API dashboard with a compact creation dialog and neutral monochrome controls.
### Page composition
- **Canvas:** 2940 ร 1664 screenshot px; CSS estimates assume approximately 2ร capture.
- **Structure:** Left workspace navigation, top APIs header/create action, search/time/refresh row and single API card. Centered dialog contains title/close, one Name field/helper, disabled action and redirect note.
### Information hierarchy
- **Priority:** Name field is the only required decision. Disabled Create API button follows directly; surrounding dashboard remains visible without a strong scrim.
### Typography
- **Family:** Neutral interface sans serif, exact font unverified.
- **Scale:** Estimated CSS dialog heading 16 px, inputs/body 14 px, helper 12 px and navigation 13โ14 px.
### Colors & surfaces
- **Sampled palette:** White #FFFFFF, near-white #FDFDFD/#FAFAFC/#FAFAFA and inactive action gray #D9D9E0.
### Components
- **Dialog:** Rounded white panel with broad shadow, horizontal separators and pale form body; estimated CSS width 585 px, 16 px corners and 24 px padding.
- **Dashboard:** Fine outlined API card with empty chart area, compact validity counts, monochrome sidebar icons and selected pale nav row.
- **Controls:** Outlined name field, full-width muted action, small close icon and explanatory info symbol.
### Visual rhythm
- **Spacing:** Compact dialog groups contrast with a sparse dashboard; approximately 20โ24 CSS px between field and action regions.
### Responsive
- **Observed:** Desktop only.
- **Adaptation:** Fit dialog inside 16โ20 px gutters and preserve helper text; collapse sidebar without reducing input tap area.
### Adaptation guidance
- **Preserve:** Single-field creation task and quiet developer-tool styling.
- **Replace:** Use actual API naming requirements and current dashboard state; do not reproduce API IDs.
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.