Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Fullstory 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:** Fullstory
- **Category:** Pricing Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca43ea4f21f542ea2b853_1659674886280-62ec9c9edf1bb87e0af89fab_screenshot-device-333ff77695c1e2840053d15fdc3441ff-1659617455406.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
- **Style:** A substantial enterprise pricing page with bold black typography, blue actions, comparison tables, and broad blue-gradient feature regions.
- **Character:** Practical and evidence-led, alternating dense comparison content with service cards, a research promotion, FAQ, and conversion sections.
### Page composition
- **Capture and scale:** The image measures 1440 × 6878 pixels. Following dimensions are approximate screenshot pixels; CSS scale is unverified.
- **Opening:** A white navigation header precedes a left-aligned two-line heading and compact explanatory paragraph on near-white. A three-column comparison aligns feature labels left and Enterprise/Business plans in two white columns.
- **Services:** A dark-blue gradient region contains a centered heading, one wide mobile-product panel with copy and device/data artwork, and three service/customer panels below.
- **Full comparison:** A centered white free-plan section separates the first gradient region from a second blue-to-cyan comparison area. Category bars divide expandable feature groups; two groups are expanded in the screenshot.
- **Closing regions:** A split research promotion pairs teal metrics/report artwork with a large angular-cropped photograph. Four FAQ rows, a trial banner, a multicolumn footer, a pink copyright strip, and a small chat prompt finish the page.
### Information hierarchy
- **Plan decision:** The opening comparison foregrounds plan names, descriptions, demo actions, and checkmark-based inclusions rather than public numeric prices.
- **Detail levels:** A compact key-capabilities table introduces the plans; the later grouped comparison supplies more detailed feature coverage.
- **Conversion and proof:** Demo, free-plan, research, and trial actions form distinct secondary paths, supported by service explanations and the study illustration.
### Typography
- **Family:** A neutral sans serif with heavy headings and lighter body text is visible; exact font identity is unverified.
- **Display:** The opening headline is approximately 52–56 px, weight 750–800, with 1.15 line-height.
- **Section headings:** Major subsection headings are around 28 px bold; plan/service titles approximately 18–20 px bold.
- **Body and labels:** Body copy and table descriptions are roughly 16–17 px with 25–27 px line-height. Buttons use compact 13–14 px uppercase labels. Table category bars use about 18 px bold text.
- **Evidence figures:** Research metrics use large bold teal figures with smaller explanatory labels beneath.
### Colors & surfaces
- **Foundation:** Sampled sRGB #FAFAFA and #FFFFFF form the light page and comparison panels.
- **Blue system:** Sampled action blue #0171EA contrasts with dark blue #004085 and #00336A in gradient regions. The lower comparison transitions toward cyan; exact gradient endpoints are unverified.
- **Research:** Sampled pale blue-gray #CDD8D9 and #CDDFE0 support the research artwork, with deeper teal photography framing.
- **Closing accent:** Sampled pink #F7598A defines the lower copyright band and appears as a small customer-service accent.
- **Text contrast:** Use near-black on light regions, white headings on blue, and softer light-blue body copy within dark panels.
### Components
- **Plan comparison:** A roughly 1135 px-wide frame uses three near-equal columns. Thin horizontal lines divide capability rows, with blue checks centered under the two plans. White plan panels have square corners and full-width blue actions.
- **Service panels:** Fine outlined rectangular cards use generous padding and bottom-positioned links. The wide mobile panel pairs text left with layered smartphone/analytics imagery right.
- **Detailed comparison:** White full-width category bars carry dark-blue labels and right chevrons. Expanded rows show feature text and small information icons left, with checkmarks in fixed plan columns.
- **Research feature:** A full-width split composition combines text, two large numeric highlights, a report cover, and a large photograph inside a teal geometric frame.
- **FAQ and CTA:** Four pale rectangular FAQ rows use blue bold questions and right chevrons. A separate pale trial banner pairs a multiline heading left with a blue action right.
- **Footer:** Compact link columns sit below a brand lockup and thin rule. The chat prompt overlaps the lower-right edge.
### Visual rhythm
- **Vertical rhythm:** Use approximately 90–130 px between broad regions, while table rows maintain a steady 60–70 px pitch.
- **Grid alignment:** Keep comparison checks aligned under persistent plan headings. Match service-card heights and bottom-link positions.
- **Contrast pacing:** Alternate white/near-white reading areas with blue comparison fields and the teal research image region; avoid additional decorative surface changes.
### Responsive
- **Observed state:** Only desktop is provided. Expanded and collapsed comparison groups coexist in the captured state.
- **Recommended reflow:** Stack service cards and the research split; let comparison tables scroll horizontally or offer a plan-by-plan mode with visible row labels.
- **Small-screen controls:** Wrap long FAQ questions, preserve chevron space, and stack the trial banner. Keep chat from covering key actions.
### Adaptation guidance
- **Preserve:** Retain the two-level plan comparison, strong blue actions, grouped feature details, service-grid support, research proof, and FAQ-to-trial close.
- **Adapt:** Use verified plan inclusions, service descriptions, research evidence, and trial terms for the new product. Remove unsupported metrics and claims.
- **Avoid:** Do not invent public prices or hidden accordion content. Keep detailed comparison structure proportional to the actual number of features.
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.