Generate a new design based on this screen using your own content.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
# Design from Reference: Unkey Edit External ID
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/697b7601072dc050f684ead4_-wdUFyLJ3kmgiQ7AQ3PW6HTkRyMSgBlaupVaQHPqI60.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
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.
First thing you notice is that modal. It sits right in the center with a soft shadow and just enough contrast against the dimmed background to pull focus without feeling heavy. The "Edit External ID" dialog is dead simple. Label, dropdown, button, done. No clutter.
Typography That Knows Its Place
The type hierarchy here is tight. "key_5X52b5EgUsdt5aHA" in monospace feels right for a technical product like Unkey. Body text stays small and gray, headers are bold but not screaming. Everything breathes.
Restrained Color Palette Does the Heavy Lifting
Almost everything is grayscale except that green "Operational" status badge and the subtle teal accent on the key icon inside the modal. Those two pops of color guide your eye exactly where it matters. The left sidebar uses a muted palette that stays out of the way.
What Makes It Stand Out
That info line under the dropdown with the circle-i icon is a smart touch. Contextual help right where you need it, not buried in docs. The CTA button being grayed out until action is taken prevents errors. Functional design at its best.