joel.design/system← Back to site
Patterns

How the pieces compose.

Patterns are the assembled answers. Each shows components living together as a real page section. The same markup that ships on joel.design. Inspect any page on the live site to see them in their actual habitat.

Hero.

The opening pattern. Eyebrow with orange rule, oversized Calibre Black headline, Tiempos Headline subhead, three service tags, primary + ghost CTA pair. The same structure used on the homepage and adapted for case studies.

Formerly at Dyson · Milwaukee, WI
Reduce the noise.

Brand strategy, web design, and automation from a one-person studio. I design it. I build it. It works.

BrandingWeb & AppsAutomations
See the work
Composes
section-label, h1, hero-sub, hero-tag (×3), cta-primary, cta-ghost
Background
--dark with subtle noise overlay (.noise-overlay)
Padding
160px top / 80px bottom on desktop, asymmetric for hero presence
Reveal
Each child has class="reveal" with cascading transition-delay 0.1–0.4s

FAQ.

Accordion list with cycling color accents per item. Each open item gets a 3px colored left border (orange/teal/olive/mustard/terracotta in rotation). Click to expand; the icon rotates from + to ×.

How long does a website take?+
Most websites take 4-8 weeks from kickoff to launch. I handle design and development myself, which cuts out the handoff delays you’d get at an agency.
Will I be able to update the site myself?+
What if I only need help with one thing?+
Composes
faq-item × N, faq-q (button), faq-icon (animated +→×), faq-a
Color cycle
nth-child(5n+1..5) → orange, teal, olive, mustard, terracotta
Open transition
max-height 0→300px, padding-left 0→16px, 350ms Out Expo
Schema
JSON-LD FAQPage emitted for SEO People Also Ask
← ComponentsOverview ↑