Design System Styleguide

Visual design tokens, components, and patterns for ADAMnetworks

Brand Color

Primary

#E8572A

HSL(11, 81%, 54%)

Extracted from logo

Primary / 20%

Backgrounds & badges

Primary / 10%

Subtle highlights

Neutral Colors

Background

Card

Muted

Accent

Secondary

Border

Typography

Heading 1

5xl/6xl · Bold · Line-height 1.2

Heading 2

4xl/5xl · Bold · Line-height 1.2

Heading 3

3xl/4xl · Bold · Line-height 1.2

Heading 4

2xl/3xl · Bold · Line-height 1.2

Body text with improved readability. Line-height set to 1.65 for comfortable reading. Ideal for paragraphs and longer content blocks.

Base · Regular · Line-height 1.65

Secondary text for less important information, metadata, or supporting content.

Small · Muted · Line-height 1.65

Buttons

Variants

Sizes

Form Elements

Input Field

Textarea

Badges

Default

Secondary

Outline

Destructive

Alerts

Information

This is an informational alert to provide helpful context.

Error

This is an error alert for critical issues that need attention.

Cards

Card Title

Card content with rounded-xl borders by default. Clean and professional.

With Image

Cards can contain various content types.

Interactive

Hover over this card to see the elevation effect.

Spacing Scale (4/8px rhythm)

1 (4px)

2 (8px)

3 (12px)

4 (16px)

6 (24px)

8 (32px)

12 (48px)

16 (64px)

20 (80px)

24 (96px)

Border Radius

Small

rounded-sm (3px)

Large

rounded-lg (8px)

Extra Large

rounded-xl (12px default)

2X Large

rounded-2xl (16px heroes/cards)