Springline Logo
Early Access

Brand Guidelines

Colors, typography, and identity details used across Springline. Use this page as a reference for consistent branding.

Brand colors

Primary is always red (default brand). Secondary and semantic palettes below.

Primary (brand red) — default

Main brand color, always red. Use for primary actions, links, and key UI.

lighter
#CDE9FD
light
#6BB1F8
main
#0C68E9
dark
#063BA7
darker
#021D6F
contrastText
#FFFFFF
Secondary (indigo)

Supporting brand color for secondary actions and accents.

lighter
#E8EBFF
light
#9FAAFF
main
#7A8CFF
dark
#4A5FFF
darker
#2A2FFF
contrastText
#FFFFFF

Semantic colors

Info, success, warning, and error states.

Info
lighter
#CAFDF5
light
#61F3F3
main
#00B8D9
dark
#006C9C
darker
#003768
contrastText
#FFFFFF
Success
lighter
#D3FCD2
light
#77ED8B
main
#22C55E
dark
#118D57
darker
#065E49
contrastText
#ffffff
Warning
lighter
#FFF9E6
light
#FFDC5C
main
#F5B94C
dark
#D3992C
darker
#C1891C
contrastText
#1C252E
Error
lighter
#FFE9D5
light
#FFAC82
main
#FF5630
dark
#B71D18
darker
#7A0916
contrastText
#FFFFFF

Neutrals (grey)

Backgrounds, borders, and text hierarchy.

Grey scale
50
#FCFDFD
100
#F9FAFB
200
#F4F6F8
300
#DFE3E8
400
#C4CDD5
500
#919EAB
600
#637381
700
#454F5B
800
#1C252E
900
#141A21

Alternate primary colors

Users can switch the app accent in settings. The default brand primary is always red.

Cyan
lighter
#CCF4FE
light
#68CDF9
main
#078DEE
dark
#0351AB
darker
#012972
contrastText
#FFFFFF
Purple
lighter
#EBD6FD
light
#B985F4
main
#7635dc
dark
#431A9E
darker
#200A69
contrastText
#FFFFFF
Blue
lighter
#CDE9FD
light
#6BB1F8
main
#0C68E9
dark
#063BA7
darker
#021D6F
contrastText
#FFFFFF
Orange
lighter
#FEF4D4
light
#FED680
main
#fda92d
dark
#B66816
darker
#793908
contrastText
#1C252E
Red
lighter
#FFE3D5
light
#FFC1AC
main
#FF3030
dark
#B71833
darker
#7A0930
contrastText
#FFFFFF

Common

Black
#000000
White
#FFFFFF

Typography

Font families and type scale used across the product.

Font families
Primary (body):

Public Sans Variable

Secondary (headings h1–h3):

Barlow

Weights: 300 (light), 400 (regular), 500 (medium), 600 (semi-bold), 700 (bold), 800 (extra-bold).

Type scale
Heading 1 — h1

Brand Guidelines

Heading 2 — h2

Colors & typography

Heading 3 — h3

Semantic palette

Heading 4 — h4

Neutrals

Heading 5 — h5
Alternate primaries
Heading 6 — h6
Common
Subtitle 1 — subtitle1
Subtitle text
Subtitle 2 — subtitle2
Subtitle two
Body 1 — body1

Body text at 16px for readable paragraphs.

Body 2 — body2

Body text at 14px for secondary content.

Caption — captionCaption and metadata
Overline — overlineOverline label
Button — buttonButton text