Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Teta 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:** Teta
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ee97d569290515dd129f88_1659802900268-screenshot-device-414ad9bd7798bf659f147cd625c1fa2d-1659802846408.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:** Stark monochrome pricing page with large typography and three dark plan cards.
### Page composition
- **Canvas:** 1440 ร 2755 screenshot pixels; CSS estimates are near screenshot scale, with capture scale unverified.
- **Sequence:** Sparse navigation; centered pricing title/introduction; three plans; inverted white enterprise band; comparison explanation; black footer.
### Information hierarchy
- **Priority:** Large title leads to plan names, prices and bottom-aligned white actions. Enterprise contact receives a broad contrasting white panel.
### Typography
- **Family:** Clean rounded sans-serif; exact font is unverified.
- **Scale:** Estimated CSS main title 84px, plan names 32px, prices 48px, enterprise headline 68px and body 16โ20px.
### Colors & surfaces
- **Sampled palette:** Black #000000; card charcoal #222222; white #FFFFFF.
- **Accent:** Small multicolor logo mark and service/social icons; supporting text uses medium gray.
### Components
- **Plan cards:** Equal tall columns, approximately 16px radius, 40px padding and evenly spaced feature lines.
- **Actions:** White pill buttons roughly 60px CSS high; enterprise uses a black pill on white.
- **Footer:** Brand/social/launch badge beside Resources and Company groups.
### Visual rhythm
- **Spacing:** Broad card gutters around 16px and large 96โ120px section gaps; dense pricing lists remain balanced.
### Responsive
- **Guidance:** Mobile is not shown. Stack plan cards and enterprise columns, reducing display size while preserving prices/actions.
### Adaptation guidance
- **Transfer:** Retain simple high-contrast plan comparison. Replace rates, limits and enterprise promises with verified target content.
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.