Craft

Design Principles

• Illustration as differentiator — paper-craft textures create tactile warmth
• Contrast serif headlines with sans-serif interface for personality without sacrificing usability
• Use sky/nature metaphors to suggest openness and creative freedom
• Color-coded cards within product UI to show organization without complexity

Signature Moves

Key Strengths

• Paper-craft illustration creates memorable visual identity
• Serif typography differentiates from competitors
• Product screenshot integrated into hero shows real value immediately
• Color-coded cards demonstrate organization capability at a glance
• Single clear CTA reduces decision fatigue

Steps

1. 01Start with a soft blue-to-white gradient background
2. 02Choose a rounded serif for headlines (Recoleta, Freight Display, or similar)
3. 03Pair with a clean sans-serif for UI and body text
4. 04Create paper-craft style illustrations with torn edges and layered depth
5. 05Add subtle shadow and depth to illustration elements
6. 06Place product screenshot within the illustrated scene
7. 07Use a single prominent CTA button with rounded corners
8. 08Implement generous padding throughout, especially in hero section

Key Decisions

• Choosing serif over sans-serif for headlines — adds warmth
• Paper-craft illustration style — creates tactile, creative association
• Product UI visible in hero — demonstrates value immediately
• Soft gradient rather than flat color — adds depth without complexity

Pitfalls to Avoid

• ✕Don't over-illustrate — maintain balance with clean UI elements
• ✕Avoid making the serif too decorative — keep it readable
• ✕Don't let colorful cards compete with primary content
• ✕Resist adding multiple CTAs — keep focus singular

CSS Variables

:root {
  --primary: #000000;
  --bg: #f5f7fa;
  --sky-blue: #7ac4e8;
  --accent-yellow: #f5e55a;
  --radius: ~12px;
  --radius-lg: ~24px;
  --font-heading: Recoleta, Georgia, serif;
  --font-body: Inter, system-ui, sans-serif;
}

Key Techniques

• CSS gradient backgrounds with subtle color stops
• SVG or PNG illustrations with careful layering
• Box-shadow for depth on product screenshots
• Rounded corners on buttons and cards
• Centered flex or grid layout for hero