BSA Digital Design System

Web, 1x

crafted in

Color palette

Scouting dark blue
#003366
0, 51, 102
Scouting pale blue
#9AB3D5
154, 179, 213
Informative blue
#067EEB
6, 126, 235
Scouting dark red
#860D1A
134, 13, 26
Scouting red
#CE1126
206, 17, 38
Scouting light red
#C54250
197, 66, 80
Scouting tan
#D6CEBD
214, 206, 189
Scouting dark tan
#AD9D7B
173, 157, 123
Scouting light tan
#E9E9E4
233, 233, 228
Scouting dark gray
#232528
35, 37, 40
Scouting pale gray
#969897
150, 152, 151
Gray 10
#1A1A1A
26, 26, 26
Gray 9
#333333
51, 51, 51
Grey 8
#4D4D4D
77, 77, 77
Grey 7
#666666
102, 102, 102
Grey 6
#808080
128, 128, 128
Grey 5
#999999
153, 153, 153
Grey 4
#B3B3B3
179, 179, 179
Grey 3
#CCCCCC
204, 204, 204
Grey 2
#E6E6E6
230, 230, 230
Gray 1
#F2F2F2
242, 242, 242
Matrix yellow
#FFB225
255, 178, 37
Matrix green
#039B03
3, 155, 3
Matrix orange
#FF6200
255, 98, 0
Dark teal
#00303C
0, 48, 60
Scouting blue 10
#003F87 10%
0, 63, 135 10%
Alert red
#DD0000
221, 0, 0
Scouting blue
#003F87
0, 63, 135
Scounting gray
#515354
81, 83, 84
Dark sea green
#0D7549
13, 117, 73
Dark blue grey
#221850
34, 24, 80

Text style catalog

Headline 1 Style
Roboto, Light, 96px
Letter spacing: -1.5px
Headline 2 Style
Roboto, Light, 60px
Letter spacing: -0.5px
Headline 3 Style
Roboto, Regular, 48px
Headline 4 Style
Roboto, Regular, 34px
Letter spacing: 0.3px
T1 Roboto
Roboto, Bold, 32px
H1 Roboto Slab
RobotoSlab, Bold, 32px
T2 Roboto
Roboto, Bold, 24px
H2 Roboto Slab
RobotoSlab, Bold, 24px
Headline 5 Style
Roboto, Regular, 24px
Headline 6 Style
Roboto, Medium, 20px
Letter spacing: 0.2px
T3 Roboto
Roboto, Bold, 18px
H3 Roboto Slab
RobotoSlab, Bold, 18px
Body 1 Style
Roboto, Regular, 18px
Line height: 28px, Letter spacing: 0.5px
ST2 Roboto
Roboto, Regular, 18px
T4 Roboto
Roboto, Bold, 16px
H4 Roboto Slab
RobotoSlab, Bold, 16px
Forms/Light/Input
Roboto, Regular, 16px
Line height: 24px
Forms/Light/Placeholder
Roboto, Regular, 16px
Line height: 24px
Subtitle 1 Style
Roboto, Regular, 16px
Line height: 24px, Letter spacing: 0.2px
ST3 Roboto
Roboto, Regular, 16px
Subtitle 2 Style
Roboto, Medium, 14px
Line height: 24px, Letter spacing: 0.1px
Button Style
Roboto, Medium, 14px
Letter spacing: 0.8px
Body 2 Style
Roboto, Regular, 14px
Line height: 20px, Letter spacing: 0.3px
ST4 Roboto
Roboto, Regular, 14px
Forms/Checkbox/Label
Roboto, Regular, 13px
Forms/Radio/Label
Roboto, Regular, 13px
T5 Roboto
Roboto, Bold, 12px
H5 Roboto Slab
RobotoSlab, Bold, 12px
Forms/Light/Label/Error
Roboto, Regular, 12px
Line height: 16px
Forms/Light/Label/Error/RTL
Roboto, Regular, 12px
Right, Line height: 16px
Forms/Light/Label/Idle
Roboto, Regular, 12px
Line height: 16px
Forms/Light/Label/Focus
Roboto, Regular, 12px
Line height: 16px
Forms/Light/Label/RLT
Roboto, Regular, 12px
Right, Line height: 16px
Caption Style
Roboto, Regular, 12px
Line height: 16px, Letter spacing: 0.4px
ST5 Roboto
Roboto, Regular, 12px
Overline Style
Roboto, Medium, 10px
Line height: 16px, Letter spacing: 1.5px

Designs

BSA Digital Design System
20
BSA and Program Colors
Web - BSA Primary Colors
31
Web - BSA UI Colors
4
Program Colors
Web - Cub Scout Colors
19
Web - Scouts BSA Colors
14
Web - Venturing Colors
5
Web - Sea Scout Colors
9
Web - Exploring Colors
2
Web - STEM Scouts Colors
2
High Adventure Bases
Web - HAB Summit Colors
1
Web - HAB Philmont Colors
6
Web - HAB Northern Tier Colors
1
Typography
Web - Typography Official Fonts
9
Web - Typography Scale
3
Web - Typography Scale Application
1
Web - Typography Fonts and Weights
3
Web - Typography Accessibility
0
Web - Typography Accessibility Text Selection
2
Header Navigation and Footer
BSA Website Navigation
2
BSA Website Navigation Copy 2
0
BSA Website Navigation Copy 3
0
BSA Website Footer
0
Hero Images
BSA UI Components - Hero Image1
0
BSA UI Components - Hero Image2
3
BSA UI Components - Hero Image3
0
Side Navigation
BSA Website Side Navigation Copy
2
BSA Website Side Navigation
0
Grid System
BSA Grid System
0
BSA Grid System - Columns
0
BSA Grid System - Margins and Gutters
0
BSA Grid System - BreakPoints
0
BSA Grid System Use
0
Links
BSA UI Components - Hero Image3 Copy
0
BSA UI Components - Hero Image3 Copy 2
0
Buttons
BSA Buttons_GeneralUsage
0
BSA UI Components - Buttons Anatomy
2
BSA UI Components - Buttons Styles
3
BSA UI Components - Buttons States
0
Form Fields
BSA UI Components - Text Fields
2
BSA UI Components - Dropdowns
0
BSA UI Components - Selection Controls
0
BSA UI Components - Selection Controls 2
0
Cards
BSA Cards_Anatomy
1
BSA Cards _ Container
7
BSA Cards_ Titles and Subtitles
0
BSA Cards _ Media
1
BSA Cards_Content
1
BSA Cards_Scrolling
2
Alerts (Snackbars, Banners and Dialogs)
BSA Snackbars
0
BSA Snackbars Usage
0
BSA Banner
1
BSA Banner Usage
0
BSA Dialog
0
BSA Dialog Usage
14
Modals
BSA Modals Anatomy
0
BSA Modals Styles - one main CTA
2
BSA Modals Styles - 2 CTA's
0
BSA Modals Usage
0
Tabs
BSA Tabs General Usage
0
BSA UI Components - Tabs Anatomy
0
BSA UI Components - Tab States
0
Progress Indicators
BSA UI Components - Progress Anatomy
0
BSA Progress_GeneralUsage
1
Tooltips and Chips
BSA Tooltips_GeneralUsage
3
BSA Chips_GeneralUsage
0