Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Fullstory Demo Request
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:** Demo Request
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62ec9c7bc8eb835ee28d62f2_1659623074424-screenshot-device-f610ba389fdc2a00894143ddcf6fa8f9-1659603857743.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 sparse demo-request page uses strong black typography, extensive white space, conventional outlined form fields, and bright blue action buttons.
- **Brand contrast:** Customer wordmarks are monochrome. A saturated pink legal strip at the bottom supplies the only large colored background.
- **Observed scale:** The source measures 1440 ร 1837 pixels. Sizes below are approximate image pixels; CSS suggestions assume an unverified 1ร capture.
### Page composition
- **Header:** A black FullStory wordmark sits at left within a centered container about 1140 pixels wide. Five navigation links span the middle, followed by Log in and a compact blue Get a Demo control.
- **Two-column main region:** The content begins around y=200. A left column approximately 500 pixels wide contains a three-line headline, short supporting paragraph, trust label, and three customer logos. A right column around 470 pixels wide holds the form.
- **Form structure:** First and last name share one row. Business email, company, country, phone, and a short help textarea follow as full-width rows.
- **Form ending:** A small unchecked checkbox sits beside multiline consent copy and blue policy links. A full-width blue submission button appears below.
- **Footer:** After a large vertical gap, a second wordmark sits above a thin horizontal rule and five footer groups. A full-width pink strip contains copyright/location text and a Cookies Settings link.
### Information hierarchy
- **Primary message:** The heavy three-line headline establishes the invitation before the form. Its short line length creates a strong left-hand block.
- **Supporting promise:** A two-line paragraph explains the demo request and response expectation. This is historical screenshot copy, not a verified current service commitment.
- **Trust evidence:** A bold uppercase trust label precedes jetBlue, Peloton, and VMware logos in one row. Their presence is captured branding, not independently verified endorsement.
- **Form order:** Small uppercase labels precede each input, with asterisks indicating required fields. The name pair is the only split row.
- **Action emphasis:** Blue buttons in the header and form repeat the same conversion goal. The formโs button is much wider and visually stronger.
- **Secondary destinations:** Footer links use a quieter hierarchy and remain separated from the request task by substantial white space.
### Typography
- **Typeface appearance:** A practical sans-serif is used, with a heavier, slightly compact display treatment for the headline. Exact font family is unverified.
- **Main headline:** Approximately 40โ42 pixels, bold around 700โ800, with line-height near 52 pixels and tight to neutral tracking.
- **Body copy:** Approximately 16โ18 pixels, regular weight, with 25โ27-pixel line-height. The left paragraph is constrained to a moderate reading width.
- **Form labels:** Approximately 10โ11 pixels, uppercase, bold, with compact spacing above controls.
- **Input text and CTA:** Input/placeholder text is around 16 pixels. Buttons use approximately 14โ16-pixel medium or semibold uppercase text.
- **Footer roles:** Group headings are around 13โ14 pixels and bold uppercase; links are around 16 pixels and regular, sometimes wrapping into two lines.
- **Consent copy:** Around 14 pixels with compact 18โ20-pixel line-height, smaller than input text but still legible.
### Colors & surfaces
- **Measured base:** #FFFFFF dominates the page. #000000 appears in headings, logos, and primary navigation.
- **Measured action:** #0171EA supplies the strong blue button treatment. Policy links and Log in use related blue emphasis.
- **Measured footer:** #F7598A forms the saturated pink bottom strip.
- **Measured neutrals:** #EFEFEF appears in the country-select surface, and #888888 supports gray borders/text details.
- **Flat layout:** The page avoids card shadows and colored form containers. Inputs are defined by thin medium-gray borders on white.
- **Boundary treatment:** A single gray rule organizes the footer. Small button radii contrast with the otherwise rectangular page structure.
### Components
- **Header CTA:** A compact blue rectangle approximately 130 ร 42 pixels with slight corner rounding and white uppercase text.
- **Trust row:** Three black customer logos sit beneath the trust label, with balanced visual spacing despite different wordmark widths.
- **Name inputs:** Two equal-width fields around 230 pixels each, separated by a narrow gap. Their placeholders identify first and last name.
- **Full-width fields:** Approximately 470 pixels wide and 48 pixels high, with corner radii around 5โ6 pixels. Most are empty, so no validation or entered-data state is shown.
- **Country selector:** A pale gray select field shows a default prompt and a downward chevron at right. Its open menu is not visible.
- **Help textarea:** A shallow full-width multiline field has a visible resize affordance in its lower-right corner.
- **Consent block:** A small square checkbox is aligned to the first line of a four-line explanation. Policy and terms phrases are blue links.
- **Submit button:** Approximately 470 ร 56 pixels, filled blue, with small rounded corners and centered white label.
- **Footer navigation:** Social icons form the first group; Company, Legal, Ecosystem, and Contact form subsequent columns. The Legal list is the longest.
- **Bottom strip:** Copyright and city names align left; cookie settings align right within the main content width.
### Visual rhythm
- **Wide gutters:** The main and footer content share a centered container with roughly 150-pixel outer margins.
- **Asymmetric density:** The left column is concise and spacious; the form creates a denser vertical rhythm on the right.
- **Form cadence:** Labels sit close to inputs, while larger gaps separate field groups. The checkbox block has extra space before the submit button.
- **Long transition:** A broad blank interval separates form completion from the footer, keeping the conversion area uncluttered.
- **Consistent footer grid:** Group labels share a baseline and link columns maintain common spacing despite different content lengths.
### Responsive
- **Evidence limit:** Only a desktop page is shown. Mobile arrangement, validation, and menu behavior are unverified.
- **Recommended stacking:** Put the headline and short trust section above the form on narrow screens, preserving a clear reading order.
- **Recommended form:** Stack the name inputs if needed and make all controls fluid width. Keep visible labels and appropriate input types.
- **Recommended navigation:** Collapse the wide header links into an accessible menu while retaining the demo CTA.
- **Recommended footer:** Stack or wrap footer groups and allow the pink stripโs content to break into separate lines.
- **Recommended spacing:** Reduce oversized desktop gaps on short screens while preserving distinct heading, field, consent, and action groups.
### Adaptation guidance
- **Preserve task focus:** Use a clear invitation, concise expectation setting, relevant trust evidence, and a single coherent request form.
- **Use explicit form semantics:** Associate labels with fields, communicate required status accessibly, provide clear validation, and preserve keyboard focus.
- **Review consent independently:** Use approved current legal text and appropriate consent behavior. The captured checkbox copy is a design reference, not legal guidance.
- **Keep the visual system simple:** White canvas, strong black type, measured blue actions, thin gray field borders, and a distinct pink legal strip are sufficient.
- **Validate current claims:** Confirm response promises, customer-logo permissions, footer destinations, and company details before publication.
- **Design missing states:** Add submitting, error, success, disabled, and focused appearances; none is established by this static empty form.
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.