Style Guide
Everything that makes up Echo’s visual language: color tokens, type scale, and core components. Reference this page while customizing the template so your edits stay consistent with the rest of the design.
Colors
bgPrimary
rgb(7, 7, 7)
bgSecondary
rgb(18, 18, 18)
bgTertiary
rgb(38, 38, 38)
primary
rgb(0, 255, 208)
primary-hover
rgb(15, 209, 173)
primary-pressed
rgb(6, 156, 128)
textPrimary
rgb(255, 255, 255)
textSecondary
rgba(255, 255, 255, 0.75)
textTertiary
rgba(255, 255, 255, 0.6)
textPrimaryDark
rgba(0, 0, 0, 0.75)
Typography
Heading One
Plus Jakarta Sans / 600 / 48px
Heading Two
Plus Jakarta Sans / 600 / 40px
Heading Three
Plus Jakarta Sans / 600 / 32px
Heading Four
Plus Jakarta Sans / 600 / 24px
Heading Five
Plus Jakarta Sans / 600 / 16px
Heading Six
Inter / 600 / 16px
Body XL Regular — the quick brown fox
Inter / 400 / 20px
Body L Regular — the quick brown fox
Satoshi / 400 / 16px
Body L SemiBold — the quick brown fox
Satoshi / 500 / 16px
Body M Regular — the quick brown fox
Satoshi / 400 / 14px
Body M SemiBold — the quick brown fox
Satoshi / 500 / 14px
Caption L Regular — the quick brown fox
Satoshi / 400 / 12px
Caption L Semibold — the quick brown fox
Satoshi / 500 / 12px