Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Equals About 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:** Equals
- **Category:** About Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62f3ccdd50d801d3845de68d_1660143322635--1660142937092.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:** Graphic company-about page with a spreadsheet-inspired frame and vivid pale-yellow introduction.
- **Character:** Large black type, pixel artwork, colorful cell-like strips, and a simple white team section.
### Page composition
- **Canvas:** 1440 × 2812 screenshot px; measurements refer to image coordinates, not verified CSS.
- **Frame:** Thin black vertical rules approximately 40px from each edge.
- **Header:** White navigation bar with logo left, links center, and black request-access action right.
- **Introduction:** Full-width pale-yellow section; two-line statement above a two-column story layout with pixel magnifier left and prose right.
- **Team:** Centered heading, ten portraits arranged in two rows of five.
- **Investors:** Three centered logos beneath a smaller heading; black legal footer closes the page.
### Information hierarchy
- **Primary:** Large mission statement at the top.
- **Story:** Right-aligned prose column explains the company while the black pixel icon anchors the left.
- **Team:** Large centered heading precedes evenly weighted individual profiles.
- **Proof:** Investor logos form the final content group.
### Typography
- **Family:** Geometric-looking sans serif with some monospaced character in large headings; exact family unverified.
- **Hero:** Approximately 72 screenshot px, regular weight, line-height around 80px.
- **Body:** Approximately 24px with 32px line-height.
- **Team heading:** Approximately 72px.
- **Investor heading:** Approximately 40px.
- **Portrait labels:** Approximately 12–14px, centered.
- **Precision:** All sizes and weights are visual estimates.
### Colors & surfaces
- **Introduction:** #FCFE9D.
- **Team surface:** #FFFFFF.
- **Text, frame, and footer:** #000000.
- **Cell decoration accents:** Samples include #E7CAFD, #BBD2FA, #FF6B56, and #0000BA.
- **Portrait badges:** Small differently colored name tags.
- **Precision:** Artwork colors are image-specific; WebP compression introduces adjacent shades.
### Components
- **Pixel icon:** Black magnifying-glass symbol with plus mark and hard stepped edges.
- **Decorative divider:** Irregular rows of colored spreadsheet-like rectangles across the yellow/white transition.
- **Portraits:** Approximately 145px square with thin dark outline, varied crops, and small floating name badge.
- **Header action:** Rectangular black button, no pill rounding.
- **Help control:** Small cyan circular chat launcher at lower right.
### Visual rhythm
- **Margins:** Broad inset around headline and body, with whitespace between story and team.
- **Team grid:** Equal column spacing, generous row gaps, aligned portraits and captions.
- **Contrast:** Hard rectangular artwork and thin frame balance the organic portrait imagery.
- **Investors:** Generous empty space separates proof from the team grid.
### Responsive
- **Observed:** Desktop only.
- **Recommendation:** Stack story icon and copy, reduce headline size, and change portraits from five columns to fewer columns.
- **Decoration:** Allow spreadsheet strips to crop without causing horizontal overflow.
- **Navigation:** Collapse links while retaining the primary action.
### Adaptation guidance
- **Preserve:** Thin spreadsheet frame, pale-yellow story area, bold mission statement, and colorful rectangular motifs.
- **Content:** Replace team identities and investor marks with authorized supplied assets.
- **Structure:** Keep company story, people, and proof as separate groups.
- **Scale:** Use screenshot ratios as guidance rather than asserting CSS values.
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.