Overview Colors Typography Spacing Components Forms Border Radius Accessibility Guidelines Breakpoints

Design Philosophy

The Scouts ACT design system embodies the spirit of adventure, community, and growth. Our primary color #262661 represents trust, reliability, and the night sky under which many scouting adventures take place.

Color Palette

Our color system is built around the primary color #262661, complemented by vibrant accents that reflect the energy and diversity of scouting.

Primary Colors

Our foundational color palette built around #262661

Primary

#262661

rgb(38, 38, 97)

Main brand color, headers, CTAs

Primary Light

#3d3d8a

rgb(61, 61, 138)

Hover states, accents

Primary Dark

#1a1a44

rgb(26, 26, 68)

Active states, footers

Secondary & Accent Colors

Complementary colors that add vibrancy and visual interest

Secondary (Trust)

#5B5FAD

rgb(91, 95, 173)

Secondary CTAs, highlights

Accent Green (Nature)

#4CAF50

rgb(76, 175, 80)

Nature, outdoor content, success

Accent Yellow (Adventure)

#FFB703

rgb(255, 183, 3)

Energy, adventure, highlights

Accent Blue (Water)

#219EBC

rgb(33, 158, 188)

Water activities, information

Neutral Colors

Grayscale palette for backgrounds, text, and UI elements

White

#FFFFFF

rgb(255, 255, 255)

Backgrounds, cards, clean space

Off White

#F8F9FA

rgb(248, 249, 250)

Page backgrounds, subtle contrast

Gray 50

#F5F5F7

rgb(245, 245, 247)

Section backgrounds

Gray 100

#E8E9ED

rgb(232, 233, 237)

Borders, dividers

Gray 200

#D1D3DB

rgb(209, 211, 219)

Form borders, disabled states

Gray 300

#B4B7C3

rgb(180, 183, 195)

Placeholder text, icons

Gray 400

#8E92A3

rgb(142, 146, 163)

Secondary text, metadata

Gray 500

#6B6F82

rgb(107, 111, 130)

Body text, captions

Gray 600

#4D5161

rgb(77, 81, 97)

Headings, emphasis

Gray 700

#31343F

rgb(49, 52, 63)

Dark text, strong emphasis

Gray 800

#1E2029

rgb(30, 32, 41)

Primary text, headers

Gray 900

#121318

rgb(18, 19, 24)

Darkest text, code blocks

Black

#0A0A0C

rgb(10, 10, 12)

Maximum contrast, rare use

Semantic Colors

Colors that communicate meaning and system status

✓

Success

#4CAF50

rgb(76, 175, 80)

Confirmations, success messages, positive states

⚠

Warning

#FFB703

rgb(255, 183, 3)

Cautions, important notices, alerts

Error

#F44336

rgb(244, 67, 54)

Errors, destructive actions, validation failures

ℹ

Info

#219EBC

rgb(33, 158, 188)

Information, helpful tips, neutral notifications

CSS Variables Reference

Copy these CSS variables to your theme for consistent color usage

:root {
  /* Primary Colors */
  --primary: #262661;
  --primary-light: #3d3d8a;
  --primary-dark: #1a1a44;
  --primary-50: rgba(38, 38, 97, 0.05);
  --primary-100: rgba(38, 38, 97, 0.1);
  --primary-200: rgba(38, 38, 97, 0.2);
  
  /* Secondary & Accent Colors */
  --secondary: #5B5FAD;
  --secondary-light: #7A7ECA;
  --secondary-dark: #464A8A;
  --accent-green: #4CAF50;
  --accent-yellow: #FFB703;
  --accent-blue: #219EBC;
  
  /* Neutral Colors */
  --white: #FFFFFF;
  --off-white: #F8F9FA;
  --gray-50: #F5F5F7;
  --gray-100: #E8E9ED;
  --gray-200: #D1D3DB;
  --gray-300: #B4B7C3;
  --gray-400: #8E92A3;
  --gray-500: #6B6F82;
  --gray-600: #4D5161;
  --gray-700: #31343F;
  --gray-800: #1E2029;
  --gray-900: #121318;
  --black: #0A0A0C;
  
  /* Semantic Colors */
  --success: #4CAF50;
  --warning: #FFB703;
  --error: #F44336;
  --info: #219EBC;
}

/* Usage Examples */
.primary-button {
  background: var(--primary);
  color: var(--white);
}

.secondary-button {
  background: var(--secondary);
  color: var(--white);
}

.success-message {
  background: var(--success);
  color: var(--white);
}

Typography

DISPLAY XL - OUTFIT 800 - 4rem

Adventure Awaits

Display LG - Outfit 700 - 3rem

Join the Movement

Display MD - Outfit 600 - 2.25rem

Build Character Through Action

Heading XL - Outfit 600 - 2rem

Programs & Activities

Heading LG - Outfit 600 - 1.5rem

Upcoming Events

Heading MD - Outfit 600 - 1.25rem

Get Involved

Body LG - DM Sans 400 - 1.125rem

Scouting helps young people develop into well-rounded individuals through outdoor activities, community service, and personal challenge. Our programs foster leadership, teamwork, and resilience.

Body MD - DM Sans 400 (DEFAULT) - 1rem

Scouting in ACT provides opportunities for youth aged 6-25 to explore, learn, and grow. Through camping, hiking, skill development, and community projects, members build confidence and lifelong friendships.

Body SM - DM Sans 400 - 0.875rem

Perfect for captions, labels, and supporting information that needs to be readable but less prominent than primary body text.

Typography Guidelines

Display fonts are reserved for hero sections and major page titles
Headings establish content hierarchy and section breaks
Body text should maintain 1.6 line-height for optimal readability
Use font-weight: 600-700 for emphasis rather than bold (900)
Maintain at least 16px font size for body text on mobile devices
Keep line length between 60-75 characters for optimal reading

Spacing System

An 8px-based spacing scale creates visual rhythm and consistent breathing room throughout the interface.

XS 0.25rem (4px)

SM 0.5rem (8px)

MD 1rem (16px)

LG 1.5rem (24px)

XL 2rem (32px)

2XL 3rem (48px)

3XL 4rem (64px)

4XL 6rem (96px)

Spacing Applications

Token	Value	Common Uses
`--space-xs`	4px	Tight spacing, icon-text gaps, badges
`--space-sm`	8px	Form field internal padding, button icons
`--space-md`	16px	Standard spacing, paragraph margins, button padding
`--space-lg`	24px	Section spacing, card padding, list items
`--space-xl`	32px	Component spacing, card margins
`--space-2xl`	48px	Large section spacing, layout gaps
`--space-3xl`	64px	Section headers, hero spacing
`--space-4xl`	96px	Major section dividers

Buttons & Actions

Button styles for different contexts and emphasis levels, from primary calls-to-action to subtle ghost buttons.

Button Variants

Button Sizes

Large Button

Default Button

Small Button

Usage Guidelines

Primary: Main Call to Action (CTA), one per section
Secondary: Supporting actions
Outline: Alternative actions
Ghost: Tertiary or inline actions

Best Practices

Use clear, action-oriented labels
Maintain consistent padding across buttons
Ensure 44x44px minimum touch target
Include hover and active states

Badges & Tags

Small components for labeling and categorization

Primary Secondary Success Warning Error Info

Alerts & Messages

Feedback messages for different states

✓

Success! Your registration has been submitted successfully.

⚠

Warning: Please complete all required fields before submitting.

Error: Unable to process your request. Please try again.

ℹ

Info: New program registrations open on March 1st, 2026.

Form Elements

Accessible, user-friendly form components with clear feedback states.

Form States

Visual feedback for different input states

Default State

Focused State

Valid State

✓ Email is valid

Error State

✕ Please enter a valid email address

Disabled State

Border Radius Scale

Consistent corner rounding creates visual harmony across components.

Small

4px

Badges, small elements

Medium

8px

Buttons, form inputs

Large

12px

Cards, containers

Extra Large

16px

Large cards, modals

2X Large

24px

Hero sections, features

Full

9999px

Pills, circular elements

Usage Guidelines

✓

Be consistent - Use the same radius values for similar components throughout your site

✓

Match component size - Larger components can handle larger radius values

✓

Consider context - Formal sections may use smaller radius, playful areas can be more rounded

⚠

Avoid mixing - Don't use too many different radius values on the same page

Accessibility

All color combinations meet WCAG 2.1 AA standards, ensuring content is readable for users with various visual abilities.

Color Contrast Ratios

Testing our color palette against accessibility standards

10.4:1

AAA

Primary on White

Sample text for readability testing at various sizes.

5.2:1

Secondary on White

Sample text for readability testing at various sizes.

4.6:1

Success Green on White

Sample text for readability testing at various sizes.

4.5:1

Info Blue on White

Sample text for readability testing at various sizes.

Accessibility Checklist

✓ All text meets WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text)

✓ Interactive elements have minimum 44x44px touch targets

✓ Color is not the only means of conveying information

✓ Focus indicators are clearly visible on all interactive elements

✓ Form fields have associated labels

✓ Headings follow a logical hierarchy (H1 → H2 → H3)

✓ Images include descriptive alt text

✓ Content is keyboard navigable (Tab, Enter, Space keys work)

✓ Text can be resized up to 200% without loss of functionality

✓ Skip links provided for keyboard users to bypass repetitive content

Testing Tools & Resources

🔍 Contrast Checkers

WebAIM Contrast Checker
Coolors Contrast Checker
Adobe Color Accessibility Tools

♿ Screen Readers

NVDA (Windows - Free)
JAWS (Windows)
VoiceOver (Mac/iOS - Built-in)

🛠️ Browser Extensions

WAVE Web Accessibility Tool
axe DevTools
Lighthouse (Chrome DevTools)

Implementation Guidelines

Best practices and code examples for implementing the Scouts ACT design system.

💻

CSS Variables

Use CSS custom properties for consistent styling across your project

:root {
  /* Colors */
  --primary: #262661;
  --secondary: #5B5FAD;
  
  /* Spacing */
  --space-md: 1rem;
  --space-lg: 1.5rem;
  
  /* Radius */
  --radius-md: 8px;
}

.button {
  background: var(--primary);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

📐

Layout Principles

Use a max-width of 1400px for main content
Apply consistent horizontal padding (24px mobile, 32px+ desktop)
Maintain vertical rhythm with 8px-based spacing
Use grid systems for responsive layouts
Ensure generous white space between sections

🎨

Component Building

Build components mobile-first
Use semantic HTML elements
Include ARIA labels where necessary
Test with keyboard navigation
Optimize images and assets
Ensure consistent hover and focus states

✍️

Typography Best Practices

Use Outfit for headings and display text
Use DM Sans for body copy and UI elements
Maintain 1.6 line-height for body text
Keep line length 60-75 characters optimal
Use font-weight 600-700 for emphasis
Ensure minimum 16px font size on mobile

Brand Voice & Tone

✓

Do

Use active, encouraging language
Be welcoming and inclusive
Focus on growth and development
Highlight adventure and community
Use "we" and "our" to build connection
Be authentic and relatable

Don't

Use overly formal or corporate language
Make assumptions about abilities
Focus on limitations or barriers
Use jargon without explanation
Be condescending or patronizing
Create exclusive or alienating content

Responsive Breakpoints

Mobile-first approach with consistent breakpoints for all screen sizes.

📱

Mobile

< 640px

Single column layouts, larger touch targets, simplified navigation

Key Considerations:

Stack all content vertically
Minimum 44x44px touch targets
Larger fonts for readability
Hamburger navigation menu
Full-width buttons

📱

Tablet

640px - 1024px

2-column grids, collapsible navigation, balanced layouts

Key Considerations:

2-column grid layouts
Expandable navigation options
Medium-sized imagery
Flexible card arrangements
Optimized whitespace

💻

Desktop

1024px - 1400px

Multi-column layouts, expanded navigation, full feature set

Key Considerations:

3-4 column grid layouts
Full horizontal navigation
Larger imagery and media
Hover interactions
Optimal line lengths

🖥️

Wide Screen

> 1400px

Max-width constraint, generous spacing, enhanced experience

Key Considerations:

Content max-width 1400px
Increased whitespace
Larger grid gaps
Enhanced visual hierarchy
Additional content areas

Media Query Examples

/* Mobile First Approach */
/* Base styles (mobile) */
.container {
  padding: 16px;
  width: 100%;
}

/* Tablet and up */
@media (min-width: 640px) {
  .container {
    padding: 24px;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Wide screens */
@media (min-width: 1400px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

Responsive Testing Checklist

✓ Test on actual devices (iPhone, iPad, Android)

✓ Use browser DevTools responsive mode

✓ Check both portrait and landscape orientations

✓ Test touch interactions on mobile devices

✓ Verify text remains readable at all sizes

✓ Ensure images scale appropriately

✓ Check navigation functionality at all breakpoints

✓ Test forms on mobile devices

Scouts ACT Design System

Design Philosophy

Color Palette

Primary Colors

Secondary & Accent Colors

Neutral Colors

Semantic Colors

CSS Variables Reference

Typography

DISPLAY XL - OUTFIT 800 - 4rem

Display LG - Outfit 700 - 3rem

Display MD - Outfit 600 - 2.25rem

Heading XL - Outfit 600 - 2rem

Heading LG - Outfit 600 - 1.5rem

Heading MD - Outfit 600 - 1.25rem

Body LG - DM Sans 400 - 1.125rem

Body MD - DM Sans 400 (DEFAULT) - 1rem

Body SM - DM Sans 400 - 0.875rem

Typography Guidelines

Spacing System

Spacing Applications

Buttons & Actions

Button Variants

Button Sizes

Usage Guidelines

Best Practices

Badges & Tags

Alerts & Messages

Form Elements

Form States

Border Radius Scale

Usage Guidelines

Accessibility

Color Contrast Ratios

Accessibility Checklist

Testing Tools & Resources

🔍 Contrast Checkers

♿ Screen Readers

🛠️ Browser Extensions

Implementation Guidelines

CSS Variables

Layout Principles

Component Building

Typography Best Practices

Brand Voice & Tone

Do

Don't

Responsive Breakpoints

Mobile

Key Considerations:

Tablet

Key Considerations:

Desktop

Key Considerations:

Wide Screen

Key Considerations:

Media Query Examples

Responsive Testing Checklist

Branch Office Location

Address