Prompt 1,170 words Copy
# Design from Reference: Twingate Customer Stories
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Twingate
- **Category:** Customer Stories
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/15896aa70e2cbe13d8c2-1600.webp)
- **Source:** https://www.twingate.com/customers/blend
Analyze the attached screenshot first. If no image is attached, open the screenshot link; if neither is accessible, ask for it rather than guessing.
## Visual Design Context
### Overall aesthetic
- **Character:** A dark editorial customer story using light-weight white headings, muted gray reading text and a small acid-yellow accent. Fine outlines and broad margins keep the long article sober and technical.
- **Image basis:** The 2640 × 9467 source was inspected throughout at 1400 px wide in four crops. Dimensions below are inspection-pixel estimates; CSS scale, pixel ratio and font identity are unverified.
### Page composition
- **Header:** A centered roughly 1027 px navigation area contains the brand and product links left, demo/free-trial/sign-in actions right.
- **Opening:** A small breadcrumb precedes a large three-line story title and a short gray summary, all left aligned.
- **Brand banner:** A full-width roughly 282 px high band centers the customer's white logo over faint grid lines and a subdued yellow-green glow.
- **Article:** A roughly 613 px reading column begins with a quotation and attribution. A roughly 354 px outlined facts panel sits to its right near the article start; later paragraphs continue with open space to the right.
- **Related content:** Two equal bordered story tiles follow the article, with logos at the top and large muted titles toward the bottom.
- **Closing/footer:** A large two-line CTA and yellow trial pill precede a footer with certification artwork, brand/social area, four navigation columns and a lower system-status/platform-download row.
### Information hierarchy
- **Title:** The large light-weight heading establishes the story; the summary is quieter and smaller.
- **Reading:** A prominent opening quotation leads into modest section headings, paragraphs and a numbered list.
- **Facts:** Short labels and muted values in the right panel provide quick company context; a yellow website link stands out.
- **Related stories:** Logos identify each tile before its large title. The closing trial action is the strongest colored control.
- **State evidence:** No menus, expanded controls or active interaction state is visible.
### Typography
- **Display:** Opening and closing headings are approximately 46 px, light/regular sans-serif with about 55 px line-height and tight tracking.
- **Article:** Body text is around 16 px with roughly 28 px line-height. Section headings are approximately 23 px regular.
- **Quote:** Around 20 px with 29 px line-height; attribution is smaller, around 14–15 px.
- **Cards and utility:** Related-story titles are around 32 px light. Navigation, facts and footer links are around 14–15 px. Exact typeface identity remains unverified.
### Colors & surfaces
- **Measured base:** Near-black #0E0F11 dominates, with nearby #0E0F13 and #0F1012 variations.
- **Measured text:** White #FFFFFF, pale gray #CFCFD3 and muted #A1A1AB establish hierarchy.
- **Measured artwork:** Dark olive #222307 appears in the customer-logo glow region.
- **Accent:** Acid yellow marks breadcrumb/link/trial emphasis. Dark fine borders define panels with little shadow.
### Components
- **Header actions:** Small fully rounded free-trial and sign-in pills contrast white and charcoal; the demo action remains plain text.
- **Facts panel:** Approximately 354 × 480 px, thin border, roughly 15 px corners and about 24 px padding. Label/value pairs use generous vertical gaps.
- **Rich text:** Paragraphs, simple headings, quotation attribution and a three-item numbered list share consistent reading alignment.
- **Related tiles:** Two approximately 513 × 375 px flat bordered panels meet at a central rule, with about 40 px padding.
- **Trial action:** A compact yellow pill includes a trailing chevron; a neighboring demo link uses a similar arrow.
- **Footer controls:** Six outlined platform badges sit along the bottom beside a small green-dot system indicator. Social icons and certification artwork remain secondary.
- **State limits:** Borders and fills are observed resting appearances; hover and keyboard focus are not shown.
### Visual rhythm
- **Alignment:** Header, article start, related content and footer share a common left edge around x186 at inspection scale.
- **Article measure:** The narrow reading column and generous line-height support the lengthy story while the facts panel occupies only its opening portion.
- **Spacing:** Large gaps separate title, banner, article, related stories and CTA. Fine rules mark smaller transitions.
- **Contrast:** A single glowing logo band and yellow actions punctuate an otherwise nearly uniform dark page.
### Responsive
- **Evidence limit:** Only the wide layout is visible.
- **Recommended article:** Move the facts panel above or below the reading column and reduce side gutters.
- **Recommended cards:** Stack related stories and allow titles to wrap without fixed-height clipping.
- **Recommended footer:** Wrap platform badges and collapse navigation groups while retaining accessible trial and download links.
- **Recommended type:** Scale display headings fluidly and preserve body line-height.
### Adaptation guidance
- **Preserve:** Keep the restrained dark palette, light display typography, compact company facts and clear related-story transition.
- **Build:** Reuse rich-text, company-facts, story-tile and platform-badge components.
- **Content integrity:** Treat customer/security statements as screenshot content and use validated claims in implementation.
- **Validate:** Confirm fonts, gray-text contrast, small-screen reading width and action focus styles.
## Content
**Instructions:**
Generate realistic example content that fits the selected design reference.
Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.
If a product or business description is provided, use it to guide the content.
Otherwise, invent a plausible fictional SaaS product appropriate for the reference.
Keep the content concise, coherent, and visually balanced.
Do not present fictional statistics, customer names, or testimonials as verified facts.
## Design Direction
**Instructions:**
Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.
Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.
Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.
Introduce original design decisions where they improve usability, composition, or brand consistency.
The result should clearly reflect the reference's visual language without looking like a direct reproduction.
Follow the visual identity of the reference design.
Use its typography, color palette, component styling, and overall aesthetic as the primary design direction.
Do not introduce an unrelated visual identity.
## Output
**Instructions:**
Generate a high-fidelity visual mockup of the requested interface.
Present the design as a polished, realistic website or product UI screenshot.
Prioritize visual composition, typography, spacing, colors, alignment, and component details.
Use the available image-generation or visual-design capabilities.
Do not replace the mockup with source code, a written design specification, or a textual description.
If direct visual generation is unavailable, clearly explain the limitation.
## Constraints
- Use the actual screenshot as the primary visual reference.
- Preserve essential messaging and factual accuracy.
- Prioritize visual quality and consistency.
- Do not invent unsupported product claims.
- Adapt structure and copy length for visual balance. Reference image Attach it to your message: assistants can’t open image links. Open in ChatGPT ↗ Open in Claude ↗
Build it in Lovable ↗ v0 ↗ Figma Make ↗
Opening a tool copies the screenshot so you can paste it with your prompt.
SaaSFrame
