Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Outerbase AI Page
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Outerbase
- **Category:** AI Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acad57586f1bee9c365080b_6acad4a5d8cd56d39f5aa254_cms-933eeaa1b22e29b3bbdbeb49.webp
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:** A near-black AI product page uses a sparse star-like background, silver gradient controls and understated outlined cards.
- **Brand contrast:** White serif wordmarks contrast with compact sans-serif interface copy. Soft gray glows at the hero badge and footer add depth without introducing saturated colors.
### Page composition
- **Capture scale:** The source measures 2880 × 3108 image pixels. CSS estimates below assume a 2× capture; device-pixel ratio is unverified.
- **Header:** A centered roughly 1150 px CSS container places the Outerbase wordmark at the left and three text links plus Log in and Sign up pills at the right.
- **Hero:** A small Private Beta badge, metallic-looking ob1 wordmark, two-line explanation and wide prompt-entry capsule form a centered vertical stack.
- **Template grid:** Nine example cards form a three-column, three-row grid beneath the prompt. The grid is narrower than the header container, around 1030 px CSS wide.
- **Footer:** A dotted horizontal rule precedes the repeated wordmark and a right-aligned cluster of product/community/legal links, with a broad soft glow below.
### Information hierarchy
- **Primary entry:** The bright silver prompt field is the strongest interactive focal point within the dark hero.
- **Product identity:** The ob1 wordmark is larger than the supporting copy; a small monospaced-looking beta badge sits above it.
- **Template browsing:** Bold card titles precede muted two-line descriptions, then creator/avatar and compact metric badges.
- **Secondary navigation:** Header and footer links remain small and quiet, while the light Sign up pill has greater visual emphasis than Log in.
### Typography
- **Families:** Wordmarks use a heavy serif style; body text and controls use sans serif. The beta label resembles a monospaced face. Exact identities are unverified.
- **Hero scale:** The ob1 mark appears approximately 58–64 px CSS. Supporting copy is around 14 px with 20 px line height.
- **Card roles:** Titles are approximately 20 px, bold; descriptions are around 13 px with 20 px leading and muted gray color.
- **Compact labels:** Creator names, counts, navigation and prompt text are approximately 14 px. The beta badge uses smaller type with expanded tracking.
### Colors & surfaces
- **Measured foundation:** ICC-aware sRGB sampling yields dominant #0A0A0A, with near-black variations #0B0B0B and #0C0C0C.
- **Measured separation:** Dark gray #171717 supports subtle card boundaries and tonal transitions. White #FFFFFF is present in primary text and highlights.
- **Metallic controls:** Prompt and sign-up surfaces transition vertically from bright silver/white to medium gray; their dark text and icons retain contrast.
- **Atmosphere:** Sparse gray dots and blurred gray light patches sit over the dark canvas. Creator avatars provide small incidental color accents.
### Components
- **Header actions:** Rounded Log in and Sign up pills are approximately 100–110 px CSS wide and 42 px high, with thin light outlines and opposite dark/light gradient fills.
- **Beta badge:** A compact outlined capsule has a near-black surface and faint outer glow.
- **Prompt field:** A roughly 520 × 40 px CSS capsule contains a paperclip icon, muted placeholder and right-arrow action; it uses a smooth silver vertical gradient.
- **Template cards:** Each is approximately 320 × 180 px CSS, with about 24 px padding, 16 px corners and a very subtle dark border. No large preview images appear.
- **Card footer:** A small circular avatar and creator label align left; two outlined metric capsules with counts and icons align right.
- **Footer separator:** A fine dotted rule stretches across the content width and establishes the final navigation region.
### Visual rhythm
- **Hero spacing:** Large blank intervals separate the header, beta badge, product identity, prompt and card grid, creating a deliberately spacious opening.
- **Grid cadence:** Equal card dimensions and roughly 32 px CSS gutters produce a consistent nine-card matrix.
- **Internal card spacing:** Titles sit near the top, descriptions occupy the middle and metadata anchors the bottom.
- **Closing space:** A generous gap follows the grid before the dotted divider and footer links.
### Responsive
- **Evidence boundary:** Only a desktop capture is available; the following behaviors are recommendations.
- **Grid collapse:** Reduce the template matrix to two columns and then one, preserving card padding and readable descriptions.
- **Prompt width:** Let the prompt capsule fill the available width with safe side gutters and clear attachment/submit targets.
- **Navigation:** Wrap or collapse secondary links, keeping authentication actions visible and footer links comfortably spaced.
### Adaptation guidance
- **Entry and examples:** Pair a prominent natural-language input with a small curated template grid to support both direct creation and exploration.
- **Dark theme tokens:** Preserve subtle surface differentiation, but validate border and muted-text contrast on actual displays rather than relying only on the screenshot.
- **Reusable cards:** Keep title, short description, creator identity and metrics in consistent positions; allow longer titles to wrap without displacing the footer.
- **Atmospheric restraint:** Use background dots and glows decoratively, with reduced-motion support if animated; no animation behavior is verified here.
- **Scale and states:** Calibrate the assumed 2× scale and define focus, hover, loading and submission feedback, which are not shown.
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.