Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Folk Templates Library
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Folk
- **Category:** Templates Library
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbca438313d4c6c0cc41e4_6acbc8de39e7f22db4056e94_cms-0df73da6059f0e3c80c1120a.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:** Minimal template directory with black typography, white space and small illustrated folder/emoji motifs.
- **Character:** A restrained editorial layout gains personality through colorful template symbols and a large geometric yellow-and-pink closing illustration.
- **Capture:** The screenshot measures 1440 ร 5467 pixels. CSS estimates assume approximately 1:1 capture scale; browser scale and font identity are unverified.
### Page composition
- **Header:** A small wordmark and three navigation links sit left; login, outlined demo and black trial pills align right.
- **Hero:** A centered title and short multi-line explanation are flanked by rows of illustrated folders cropped at the viewport edges.
- **Directory split:** A left category list occupies roughly 256 pixels, while a wider content region begins around x430.
- **Directory header:** A bold selection heading aligns with a compact search field at the upper right.
- **Grouped catalog:** Eleven visible category sections use thin rules and three-column grids of compact template entries.
- **Closing conversion:** A full-width rule introduces a centered relationship-workspace message, black signup pill and large overlapping semicircle artwork.
- **Footer:** A brand column and five compact link groups sit above a separate legal/social baseline, with a circular chat launcher at lower right.
### Information hierarchy
- **Page identity:** The large template heading leads the hero; the subtitle explains the library's relationship use cases.
- **Category selection:** Most Popular is highlighted in black in the left navigation; category counts align at the right of each row.
- **Catalog groups:** Small category headings and thin rules separate each group without enclosing cards.
- **Template entries:** Each item pairs a folder/emoji tile with a dark title and smaller creator attribution.
- **Creator identity:** Small logos or portraits distinguish community creators from the product's own entries.
- **Conversion:** The closing statement and black signup action regain prominence after the dense catalog.
- **Footer:** Uppercase group labels organize product, use cases, resources, comparisons and company links.
### Typography
- **Family:** A clean, compact sans-serif is visible; exact font identity is unverified.
- **Hero title:** Approximately 68โ72-pixel CSS size, bold, with tight tracking.
- **Hero explanation:** Approximately 22 pixels with 30-pixel line height, centered.
- **Directory heading:** Approximately 30 pixels and bold.
- **Category navigation:** Approximately 18 pixels; counts are smaller and muted.
- **Group headings:** Approximately 18 pixels, regular-to-medium weight.
- **Template titles:** Approximately 14 pixels; creator labels approximately 12โ13 pixels.
- **Closing message:** Approximately 34 pixels, medium weight, across two centered lines.
- **Footer:** Approximately 14 pixels, with compact uppercase labels and relaxed link spacing.
### Colors & surfaces
- **Measured base:** White #FFFFFF fills nearly the entire page; black #000000 carries major type and actions.
- **Measured illustration:** Yellow #F0BC47 and #EDB447, with pale pink #FAEFEC, support the large closing geometry.
- **Measured neutrals:** #EBEBEC and #C2C3C4 occur among thin outlines and supporting details.
- **Template accents:** Emoji and creator marks introduce varied local colors within an otherwise monochrome catalog.
- **Surfaces:** Template entries remain unboxed apart from their small illustrated icon tiles.
- **Depth:** Folder tiles have subtle layered outlines and light shadows; the broader page stays flat.
### Components
- **Header actions:** Book a demo uses a thin black outline; Try for free is a solid black pill.
- **Hero folders:** Repeated outlined folder stacks contain simple colored person-like geometric symbols.
- **Category rows:** Emoji-led labels pair with right-aligned counts; the active row uses a rounded black fill and white text.
- **Suggestion route:** A plus-prefixed template-suggestion link sits below the category list.
- **Search:** A compact outlined field includes a magnifier and small clear icon.
- **Template tile:** A roughly 56-pixel folder illustration sits beside a two-line name/creator block.
- **Catalog content:** Visible groups include popular, consulting, partnerships, media, sales, recruiting, investing, real estate, fundraising, community and personal CRM.
- **Group rules:** Thin gray lines extend across the content area beneath each category heading.
- **Signup action:** A black rounded pill with a white directional arrow sits below the closing statement.
- **Geometric artwork:** Two overlapping downward semicircles in pale pink and yellow sit beneath a small black circle.
- **Footer utilities:** Legal links align left, social icons right and a dark chat bubble overlays the lower-right edge.
- **State scope:** No search results, selected template detail or category-transition behavior is shown.
### Visual rhythm
- **Container:** Approximately 84-pixel desktop gutters align header, sidebar and footer.
- **Hero spacing:** Large open gaps separate header, hero and directory.
- **Grid cadence:** Three template columns use consistent icon sizes and approximately 80-pixel row spacing.
- **Category pacing:** Group sections have larger vertical breaks than individual rows, supporting scanning through the long catalog.
- **Density contrast:** A dense directory transitions into a spacious conversion region and large simple artwork.
- **Footer separation:** Full-width hairline rules establish clear boundaries around conversion and legal regions.
### Responsive
- **Recommendation โ category list:** Move categories into an accessible selector or horizontal navigation on narrow screens.
- **Recommendation โ catalog:** Reduce three columns to two and then one while preserving creator attribution.
- **Recommendation โ search:** Keep search visible above the results when the directory split collapses.
- **Recommendation โ artwork:** Scale/crop decorative folders and closing geometry without forcing horizontal scrolling.
- **Recommendation โ footer:** Wrap link groups and legal/social controls. No mobile state is evidenced.
### Adaptation guidance
- **Preserve browsing structure:** Keep category names, counts, search and grouped entries as a coherent library system.
- **Reuse compact entries:** Standardize folder icon size, title baseline and creator metadata.
- **Keep grouping lightweight:** Use headings and rules rather than adding heavy card frames around every template.
- **Maintain personality selectively:** Reserve colorful emoji/folders and large geometric art for identity while keeping catalog text neutral.
- **Define discovery states:** Implement filtering, empty search, active category and template-detail behavior separately.
- **Avoid inferring sticky navigation:** The static capture does not establish whether the left category list remains fixed during scrolling.
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.