Components

The primitives.

Four reusable elements compose most of joel.design. Buttons in two flavors, a card with a colored accent rule, tags borrowed from the service pills, and a section wrapper. Each is shown as it ships.

Inspect any of these on the live site

Press i on any joel.design page to inspect the components in their actual context. The previews below are isolated specimens. The inspector shows them in living habitat.

Button.

Two variants. Primary is the dark/orange action button used for conversion moments (Start a Project, Send it Over). Ghost is the underlined link-style action used for secondary moves (See the work, View case study).

See the work

Token: .cta-primary, .cta-ghost
Font: Calibre Bold 700, 13px, line-height 1, letter-spacing 0.12em, uppercase
Padding: 20px 36px 19px (asymmetric for Calibre metrics)
Hover: Wipes orange across dark bg via ::before scaleX, arrow line grows 20→36px
Magnetic: Optional .magnetic class adds cursor-pull on hover

Card.

The service card pattern. A colored accent rule on the left identifies the service family (orange/teal/olive). Numeric label, title, supporting description. Composes on cream backgrounds.

01 · Service

Brand System

Identity, type, and the rules that hold them together across every surface. Logos that work at 16px and 16 feet.

Token: .svc-card
Accent rule: 4px left border, color matches service family
Background: --cream-warm (var(--cream-warm))
Title: Calibre Medium 500, 22px, letter-spacing -0.012em
Description: Tiempos Headline 14px, line-height 1.55

Tag.

The hero service pills. Three color variants (orange/teal/olive). Outline style on dark backgrounds. Used to anchor the three service categories visually and to link to the matching service card below.

Branding Web & Apps Automations

Token: .hero-tag.t-orange, .hero-tag.t-teal, .hero-tag.t-olive
Font: Calibre Bold 700, 11px, letter-spacing 0.1em, uppercase
Padding: 10px 20px
Border: 1.5px solid (color matches text)
Hover: Background fills 50% of color, text inverts to white

Section.

The page section wrapper. Provides the consistent vertical rhythm and horizontal padding that gives joel.design its grid feel. Every page section uses .section-pad to inherit the same clamp-based padding.

Section Label

The section heading.

Token: .section-pad
Vertical padding: clamp(56px, 8vw, 80px)
Horizontal padding: clamp(24px, 4vw, 72px), handled via --section-padding-x
Section label: .section-label · 11px Calibre, 0.14em tracking, uppercase, with 24×2px orange rule prefix
Section h2: Calibre Black 900, terminated with orange period

← Voice Patterns →