Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Visitors Security Settings
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Visitors
- **Category:** Settings
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/697b75cd84049b42b20dbc98_vhA3SrS1q_quEnQy10RHzCtRActWr91nTNmauNoMY4o.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 analytics security-settings page with narrow navigation, rounded rule cards and muted controls.
### Page composition
- **Capture:** 2940 ร 2460 screenshot pixels; estimated 2ร CSS scale.
- **Structure:** Centered app header and Settings title, small left section navigation, four stacked cards for hostnames, blocked IPs, blocked pages and masked paths.
### Information hierarchy
- **Priority:** Card titles identify each rule type; helper copy, input/action pair and existing/empty state follow.
### Typography
- **Family:** Sans serif; exact family unverified.
- **Estimated CSS sizes:** Page heading 24px, card titles 16px, body 14px and tips 12px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, input #F5F5F5, near-white #FEFEFE, rules #E8E8E8, muted #999999 and navy #181925.
### Components
- **Elements:** Project switcher, selected Security link, input-embedded pill actions, hostname chip, wildcard tips and small bottom utility dock.
- **Estimated geometry:** Rule column approximately 480px wide, 16px radii, 16px padding, 40px inputs and 16px card gaps.
### Visual rhythm
- **Spacing:** Compact repeated cards sit inside broad white margins; footer strips keep usage tips attached to the right rule.
### Responsive
- **Suggested adaptation:** Move section navigation above cards and keep inputs/actions fluid. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve rule-type separation and precise pattern examples; show actual empty and disabled states.
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.