Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Matter 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:** Matter
- **Category:** About Page
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/62eca4338ef108ee220f966f_1659674661614-62ec9c97f0eb3d1ded7f2b18_screenshot-device-991a71540c704c2dd5061439028f036a-1659614822228.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:** Cheerful company page with oversized rounded type, pastel surfaces and glossy three-dimensional illustrations.
### Page composition
- **Capture:** 1440 ร 6803 screenshot pixels; estimated CSS scale approximately 1ร.
- **Structure:** Navigation, hero illustration, split history section, six-value grid, four-column team grid, alternating mission/vision illustrations and multi-column footer.
### Information hierarchy
- **Priority:** Large mission headline and celebratory illustration lead; history/values explain culture before team portraits and broader purpose.
### Typography
- **Family:** Heavy rounded sans-serif headings with regular body; exact family unverified.
- **Estimated CSS sizes:** Hero 68px, section titles 56px, value titles 30px, body 20px and footer 14px.
### Colors & surfaces
- **Measured palette:** White #FFFFFF, lavender #F3F4FB, mint #E2FAF4, blush #FFF3F7 and subtle #F5F2F5/#F6F3F9.
- **Illustration:** Glossy purple/blue objects, yellow smiling faces, pink hearts and green accents.
### Components
- **Elements:** Large 3D product/emoji scenes, circular value icons, circular team portraits and small purple footer CTA.
- **Estimated geometry:** Content 1180px wide, 160px portrait circles, 48px grid gutters and broad 120px section gaps.
### Visual rhythm
- **Spacing:** Large alternating text/artwork sections and generous value/team gutters create a slow narrative rhythm. Some lower text appears unusually pale in the capture.
### Responsive
- **Suggested adaptation:** Stack narrative columns, reduce value/team grids and scale illustrations without covering text. Mobile behavior is not shown.
### Adaptation guidance
- **Transfer:** Preserve the celebratory illustration system and human team narrative. Use sufficient text contrast rather than reproducing faint captured text blindly.
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.