ATX Impact · Living system

Rooted in purpose.
Built from shared parts.

A common visual language for the people, places and ideas shaping our community. These specimens use the same components and tokens as the website.

Appearance

System follows your device, including changes while this page is open.

01 · Foundations

One language. Two appearances.

Warm white and charcoal by day; deep charcoal surfaces at night. Amber marks the primary actions. Components choose a role, never a theme-specific hex color.

--background

--foreground

--card

--primary

--secondary

--muted

--muted-foreground

--accent

--border

--ring

--destructive

Typography

Geist for clarity. Georgia for editorial warmth.

A sense of place.

Clear, readable language connects our community.

Geist Mono · labels & technical references

Space & shape

A four-pixel foundation, with room to breathe.

4px

8px

12px

16px

24px

32px

48px

64px

44px minimum control targets. Consistent radii. Visible focus rings.

02 · Atoms

Small parts, familiar behavior.

Shared primitives from components/ui. Keyboard focus, disabled states and semantic colors belong in the component.

Primary action Secondary Outline

Default CompleteExampleNeeds attention

Listing title

Use a clear, descriptive name.

Required field · error example

Enter a title to continue.

03 · Molecules

One useful job at a time.

Search field

Label + input + action. Try the real directory search.

Appearance control

The same control used in desktop navigation and the mobile menu.

Appearance

Your choice is saved in this browser. Choose System to follow your device again.

04 · Organisms

Patterns with a purpose.

The navigation above is the live site header: shared destinations, a desktop menu and a mobile drawer. This collection composes the same card primitives used throughout this reference.

01 · Example specimen

Foundations

Semantic colors, type, spacing and interaction rules.

Explore pattern

02 · Example specimen

Atoms

Buttons, labels, inputs, badges and icons.

Explore pattern

03 · Example specimen

Molecules

Small groups with a single job: search, appearance and card headers.

Explore pattern

Loading: Finding community connections…

Empty: No matches yet. Try a broader search.

Error: We couldn’t load these results. Please try again.

05 · Templates & pages

Consistency at every scale.

Foundations become atoms, atoms become molecules, and molecules form organisms. Templates arrange those pieces; pages supply their content.

01
Foundations
Semantic colors, type, spacing and interaction rules.
02
Atoms
Buttons, labels, inputs, badges and icons.
03
Molecules
Small groups with a single job: search, appearance and card headers.
04
Organisms
Navigation, forms and collections composed from shared parts.
05
Templates & pages
Responsive arrangements filled with real content.

Directory template Editorial template Community template

ATX Impact

Loading this page…

ATX Impact · Living system

Rooted in purpose.
Built from shared parts.

A common visual language for the people, places and ideas shaping our community. These specimens use the same components and tokens as the website.

Appearance

System follows your device, including changes while this page is open.

01 · Foundations

One language. Two appearances.

Warm white and charcoal by day; deep charcoal surfaces at night. Amber marks the primary actions. Components choose a role, never a theme-specific hex color.

--background

--foreground

--card

--primary

--secondary

--muted

--muted-foreground

--accent

--border

--ring

--destructive

Typography

Geist for clarity. Georgia for editorial warmth.

A sense of place.

Clear, readable language connects our community.

Geist Mono · labels & technical references

Space & shape

A four-pixel foundation, with room to breathe.

4px

8px

12px

16px

24px

32px

48px

64px

44px minimum control targets. Consistent radii. Visible focus rings.

02 · Atoms

Small parts, familiar behavior.

Shared primitives from components/ui. Keyboard focus, disabled states and semantic colors belong in the component.

Primary action Secondary Outline

Default CompleteExampleNeeds attention

Listing title

Use a clear, descriptive name.

Required field · error example

Enter a title to continue.

03 · Molecules

One useful job at a time.

Search field

Label + input + action. Try the real directory search.

Appearance control

The same control used in desktop navigation and the mobile menu.

Appearance

Your choice is saved in this browser. Choose System to follow your device again.

04 · Organisms

Patterns with a purpose.

The navigation above is the live site header: shared destinations, a desktop menu and a mobile drawer. This collection composes the same card primitives used throughout this reference.

01 · Example specimen

Foundations

Semantic colors, type, spacing and interaction rules.

Explore pattern

02 · Example specimen

Atoms

Buttons, labels, inputs, badges and icons.

Explore pattern

03 · Example specimen

Molecules

Small groups with a single job: search, appearance and card headers.

Explore pattern

Loading: Finding community connections…

Empty: No matches yet. Try a broader search.

Error: We couldn’t load these results. Please try again.

05 · Templates & pages

Consistency at every scale.

Foundations become atoms, atoms become molecules, and molecules form organisms. Templates arrange those pieces; pages supply their content.

01
Foundations
Semantic colors, type, spacing and interaction rules.
02
Atoms
Buttons, labels, inputs, badges and icons.
03
Molecules
Small groups with a single job: search, appearance and card headers.
04
Organisms
Navigation, forms and collections composed from shared parts.
05
Templates & pages
Responsive arrangements filled with real content.

Directory template Editorial template Community template