USA-BGA - Tech Centric BGA

Style Guide

This page outlines the current styles and standards for the USA-BGA - Tech Centric BGA website.

Colors

An overview of this site's brand colors.
primary
Primary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
secondary
Secondary
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
accent
Accent
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
base
Base
Ultra Light
Light
Medium
Dark
Ultra Dark
Comp
shade
Shade
Ultra Light
Light
Medium
Dark
Ultra Dark
primary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
secondary
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
accent
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
base
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
shade
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
Headings
H1 (--xxl)

Heading 1 Regular

Heading 1 Medium

Heading 1 Bold

H2 (--xl)

Heading 2 Regular

Heading 2 Medium

Heading 2 Bold

H3 (--l)

Heading 3 Regular

Heading  Medium

Heading 3 Bold

H4 (--m)

Heading 4 Regular

Heading 4 Medium

Heading 4 Bold

H5 (--s)
Heading 5 Regular
Heading  Medium
Heading 5 Bold
H6 (--xs)
Heading 6 Regular
Heading 6 Medium
Heading 6 Bold
Body Text
BODY TEXT (--m)
Text m Regular
Text m Medium
Text m Bold
SMALL TEXT (--s)
Text s Regular
Text s Medium
Text s Bold
XTRA SMALL TEXT (--xs)
Text xs Regular
Text xs Medium
Text xs Bold
Examples

Heading 1 (H1)

This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2 (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3 (H3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 5 (H5)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 6 (H6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Buttons

Solid and outline buttons are available across all color sets including black and white.
BUTTONS ON LIGHT BACKGROUND