Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Cohere Pricing 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:** Cohere
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acb723b10423f7ec1f65240_6acb70c0994832179b58a481_cms-6ff79e57822c4566975f4394.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:** Distinctive AI pricing with soft gradient fields, rounded panels, and technical display typography.
### Page composition
- **Canvas:** 2880 × 10024 screenshot px. Segmented navigation, gradient introduction, Free strip, Production calculator, Enterprise strip, customer logos, testimonial, FAQ, account CTA, and dark oversized-brand footer.
### Information hierarchy
- **Priority:** Pricing proposition leads to usage-based Production details and calculator; FAQ resolves account/billing questions before signup.
### Typography
- **Scale:** Estimated CSS at assumed 2× capture: hero 48 px, FAQ heading 64 px, panel headings 24 px, body 16 px, uppercase labels 11–12 px. Rounded technical display family unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #FAFAFA, dark #212121, pale #EEF0EF/#F5F4F2, calculator blue #4B6EE4, and #EEEEEE. Blue/coral gradient spans hero and testimonial.
### Components
- **Details:** Approximately 20 CSS px panel corners, slanted segmented navigation/actions, vertical model tabs, numeric price display, horizontal slider, hairline FAQ rows with arrows, and abstract translucent CTA forms.
### Visual rhythm
- **Spacing:** Estimated 1220 CSS px main width, 32 px panel gaps, and broad 100 px section padding.
### Responsive
- **Adaptation:** Mobile is not shown. Stack Production description/calculator and convert model tabs into a horizontal selector.
### Adaptation guidance
- **Transfer:** Retain usage-calculator emphasis and distinctive panel geometry. Use current model units, prices, terms, and authentic testimonials.
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.