Design References Library

Purpose

This library contains analyzed reference landing pages that demonstrate distinct design character and premium execution. Use these as benchmarks when evaluating design quality and developing brand identity directions.

Inputs

• Reference URLs to analyze
• Screenshots (hero + key sections)

Outputs

• Updated reference entries with analysis and screenshots
• Comparison matrix and pattern extraction notes
• Local assets stored under .agent/skills/design-references-library/assets/

Prerequisites

• Ability to capture screenshots (manual or tool-based)

Tools & Availability

• browser_subagent for screenshots (if unavailable, capture manually)

Snapshot Policy

• Store all screenshots under .agent/skills/design-references-library/assets/
• Add a Captured date (YYYY-MM-DD) for each reference
• Record local asset paths next to each entry

Reference 1: Hoox

URL: https://www.landingfolio.com/inspiration/post/hoox Category: High-Performance Authority Best For: Premium SaaS, Performance tools, Agency services Captured: 2026-01-20 (UTC) Local assets:

• .agent/skills/design-references-library/assets/hooxherooverview_1768926645345.png
• .agent/skills/design-references-library/assets/hooxfeaturesfounder_1768926686645.png

Screenshots

• Hero: hooxherooverview_1768926645345.png
• Features: hooxfeaturesfounder_1768926686645.png

Design DNA

Key Patterns to Borrow

✅ Dark Mode Premium: Black backgrounds with strategic accent = luxury perception ✅ Massive Typography: Scale creates authority and confidence ✅ Numbered Sections: Large numbers as visual design elements, not just utility ✅ Founder Integration: Real people create trust and differentiation ✅ Single Bold Accent: One electrifying color beats timid multi-color palettes

When to Use This Reference

• Client wants "premium" or "high-end" positioning
• Need maximum authority and credibility signals
• Target audience is performance-focused professionals
• Dark mode aligns with brand (tech, agency, creative)

Implementation Notes

Typography Scale:

h1 { font-size: clamp(48px, 8vw, 96px); }
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;

Color System:

--bg-primary: #000000;
--text-primary: #FFFFFF;
--accent-electric: #BFFF00;

Reference 2: ToBeHonest

URL: https://www.landingfolio.com/inspiration/post/tobehonest Category: Human Connection / Warmth Best For: Health/wellness, Education, Community platforms Captured: 2026-01-20 (UTC) Local assets:

• .agent/skills/design-references-library/assets/tobehonesthero1768926891253.png
• .agent/skills/design-references-library/assets/tobehonestfeatures1768926929264.png

Screenshots

• Hero: tobehonesthero1768926891253.png
• Features: tobehonestfeatures1768926929264.png

Design DNA

Key Patterns to Borrow

✅ Cream Over White: #FDF9F3 feels warmer than clinical #FFFFFF ✅ Handwritten Accents: Script fonts for key words adds personality without overwhelming ✅ Organic Shapes: Blob backgrounds and speech bubbles = friendly, approachable ✅ Playful Annotations: Hand-drawn arrows and stars guide attention warmly ✅ Slanted Dividers: Organic section transitions, not straight lines

When to Use This Reference

• Emotional connection is top priority
• Targeting people-focused services (health, education, community)
• Need to reduce intimidation (tech-averse audience)
• Brand personality is friendly, honest, empathetic

Implementation Notes

Organic Blob Shapes (SVG):

<svg viewBox="0 0 200 200">
  <path d="M45,-50C58,-40,68,-25,70,-10C72,5,66,20,55,30C44,40,28,45,10,48C-8,51,-26,52,-40,45C-54,38,-64,23,-68,5C-72,-13,-70,-34,-60,-45C-50,-56,-32,-57,-15,-55C2,-53,15,-48,28,-40Z" 
  transform="translate(100 100)" fill="#F5DEB3" />
</svg>

Handwritten Annotation Component:

<span className="handwritten text-lg text-orange-500 rotate-[-2deg]">
  Save 40 hours!
</span>

Reference 3: Parallel (useparallel.com)

URL: https://www.useparallel.com Category: Tech Luxury Brutalist Best For: AI tools, Tech products, Gen Z SaaS Captured: 2026-01-20 (UTC) Local assets:

• .agent/skills/design-references-library/assets/parallelhero1768926754058.png

Screenshots

• Hero: parallelhero1768926754058.png

Design DNA

Key Patterns to Borrow

✅ Visual Volume: Thick borders and massive type = confident, premium ✅ Container Breaking: Headlines that overflow boxes = disruptive, bold ✅ Circular Badges: Sticker-style elements add playfulness to severity ✅ Grid Texture: Subtle overlay adds tech precision feel ✅ Neon Accents: Electric purple/yellow on black = modern edge

When to Use This Reference

• Want maximum differentiation in conservative industry
• Targeting Gen Z or design-forward audience
• AI/Tech brand identity supersedes emotional warmth
• Comfortable with bold, potentially polarizing aesthetic

Implementation Notes

Thick Border System:

.card {
  border: 4px solid #000000;
  border-radius: 16px;
}

.badge {
  border: 3px solid #000000;
  border-radius: 50%;
}

Container-Breaking Typography:

h1 {
  font-size: clamp(60px, 12vw, 120px);
  font-weight: 900;
  line-height: 0.9;
  margin: -0.2em 0; /* Allow overflow */
}

Comparison Matrix

Pattern Extraction

What Creates "Premium" Feel

From all three references:

1. Visual Volume — Thick borders, bold weights, intentional scale (not timid)
2. Distinctive Typography — Never default system fonts or basic Google Fonts pairings
3. Confident Spacing — Generous whitespace, doesn't fear "empty" space
4. Signature Element — One unique visual hook (numbered cards, organic blobs, thick borders)
5. Texture/Depth — Never flat; always grain, shadow, overlap, or layering

What Creates "Cheap" Feel

Anti-patterns to avoid:

1. Template Layouts — Standard hero (left text, right image/mockup)
2. Predictable Colors — Industry cliché palettes (pink for beauty, blue for tech)
3. Thin Everything — 1px borders, light font weights, minimal padding
4. No Signature — Every element could be from a different site
5. Clinical White — Pure #FFFFFF without warmth or texture

Hybrid Strategies

Combining References

High-End Editorial (Hoox) + Human Touch (ToBeHonest):

• Base: Dark mode or cream warmth
• Typography: Editorial serif headlines + handwritten accents
• Signature: Numbered sections with organic annotation doodles
• Use Case: Premium yet approachable (luxury with soul)

Tech Brutalist (Parallel) + Human Touch (ToBeHonest):

• Base: Thick borders and massive type
• Softening: Organic shapes and warm colors
• Signature: Bold structure with playful elements
• Use Case: Modern tech that doesn't feel cold

Usage Guidelines

For New Projects

1. Start with references — Don't design in a vacuum
2. Identify the soul — What makes each reference memorable?
3. Extract patterns — Color, typography, layout, signature elements
4. Don't copy — Adapt patterns to your context
5. Combine strategically — Hybrid approaches usually win

For Existing Projects

1. Compare to references — Where does current design fall short?
2. Identify gaps — What patterns are missing?
3. Add signature element — Borrow one unique visual hook
4. Increase visual weight — Thicker, bolder, more confident
5. Add texture — Remove flat, clinical feel

Maintenance

Update this library when:

• User provides new reference sites
• New design patterns emerge in industry
• Additional analysis of existing references discovered

Storage: .agent/skills/design-references-library/SKILL.md

Verification

• Each reference has URL, Captured date, and local asset paths
• New references include at least hero + one supporting section
• Comparison matrix updated when new references are added

Pass/Fail: Pass only if all checks above are satisfied.

Risks & Mitigations

• IP/copying risk → extract patterns, do not replicate layouts or assets
• Reference rot → keep local screenshots + captured date
• Over-reliance on one aesthetic → keep cross-industry references

Related Skills

• Brand Identity Research — How to analyze references systematically
• Design Mockup Generation — How to use these patterns in mockups