Generate a new design based on this screen, using your own content.
Preview the prompt
# Design from Reference: Cycle 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:** Cycle
- **Category:** Pricing Page
- **Screenshot:** https://media.saasframe.io/o/b4127e344d2a674a6ffc.webp
Analyze the screenshot first. If you can’t access it, ask me for it rather than guessing.
## Content
Write realistic placeholder content for a fictional SaaS product in the same category (no lorem ipsum).
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.
### Overall aesthetic
- **Character:** Bright, friendly pricing with bold typography, pastel plan identities, and vivid blue actions.
### Page composition
- **Canvas:** 1440 × 5128 screenshot px. Rounded navigation, large centered headline, billing switch, three plan cards, extensive comparison groups, blue closing CTA, and rounded gray footer.
### Information hierarchy
- **Priority:** Oversized headline leads to price and plan summaries; usage, collaboration, features, administration/security, and support tables supply detail.
### Typography
- **Scale:** Approximately 72 screenshot px hero, 30 px prices, 20 px plan names, 16 px body, and 14 px table copy. Sans serif family and CSS scale unverified.
### Colors & surfaces
- **Palette:** Sampled sRGB #FFFFFF, action blue #115BE4, footer #F7F7F7, and pale #F6F7FE. Plan headers are pale mint, pink, and periwinkle with matching checkmarks.
### Components
- **Details:** Three equal cards with roughly 16 px corners, 24 px padding, aligned pill actions, and thin borders. Comparison uses hairline row separators, small info icons, and status badges.
### Visual rhythm
- **Spacing:** About 80 screenshot px outer margins, 32 px card gaps, and generous separation before the dense table. Decorative outlined shapes and dashed paths enliven the closing CTA.
### Responsive
- **Adaptation:** Mobile is not shown. Stack plan cards and scroll comparison columns horizontally; retain colored plan identification.
### Adaptation guidance
- **Transfer:** Keep pastel differentiation and blue action hierarchy. Replace prices, limits, forthcoming features, and savings with verified content.
## Direction
Keep the reference’s visual language (type, color, spacing, radii) but adapt the layout freely to the content.
## Output
Produce a high-fidelity static visual mockup of the full screen.
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.
SaaSFrame
