Style Guide
The logo, every color, type style, spacing rule, and core component used across the Relay template, in one reference page. Use this alongside the Documentation page when customizing your site. Every color has a light and a dark value — use the switch in the footer to preview both.
Logo
The “.relay” logo is the Relay Logo code component, an inline SVG outlined from Satoshi Bold. The wordmark uses text-primary and the dot uses brand, so it follows the light/dark theme automatically. On bold sections, set its Wordmark color to text-on-bold. To use your own mark, edit the paths in RelayLogo.tsx (Assets → Code).
Default · Wordmark: text-primary · Dot: brand
On bold sections · Wordmark: text-on-bold · Dot: brand
Sizes in use: 100 × 40px (desktop nav) · 80 × 32px (phone nav) · 61 × 24px (Integrations header). Keep at least the dot’s width of clear space around the logo.
Colors
Core
background-color
Light: rgb(255, 255, 255)
Dark: rgb(13, 13, 13)
background-2
Light: rgb(228, 234, 242)
Dark: rgb(22, 23, 26)
text-primary
Light: rgb(13, 13, 13)
Dark: rgb(244, 246, 250)
text-secondary
Light: rgb(99, 101, 115)
Dark: rgb(170, 173, 186)
text-tertiary
Light: rgb(122, 124, 138)
Dark: rgb(151, 153, 166)
inverse
Light: rgb(255, 255, 255)
Dark: rgb(13, 13, 13)
high-contrast
Light: rgb(42, 43, 49)
Dark: rgb(228, 234, 242)
low-contrast
Light: rgb(184, 187, 198)
Dark: rgb(74, 76, 87)
Brand & Primary
brand
Light: rgb(217, 75, 43)
Dark: rgb(232, 96, 63)
brand-background
Light: rgb(251, 231, 225)
Dark: rgb(42, 23, 18)
primary
Light: rgb(217, 75, 43)
Dark: rgb(232, 96, 63)
primary-background
Light: rgb(228, 234, 242)
Dark: rgb(28, 29, 34)
primary-hover
Light: rgb(217, 75, 43)
Dark: rgb(232, 96, 63)
primary-border-extension
Light: rgb(238, 242, 247)
Dark: rgb(23, 24, 28)
primary-pressed
Light: rgb(192, 63, 34)
Dark: rgb(240, 117, 86)
Semantic
info
Light: rgb(99, 101, 115)
Dark: rgb(151, 153, 166)
info-background
Light: rgb(228, 234, 242)
Dark: rgb(28, 29, 34)
success
Light: rgb(0, 124, 57)
Dark: rgb(74, 196, 122)
success-background
Light: rgb(230, 248, 234)
Dark: rgb(16, 34, 24)
warn
Light: rgb(145, 99, 0)
Dark: rgb(232, 178, 80)
warn-background
Light: rgb(255, 242, 225)
Dark: rgb(40, 32, 18)
error
Light: rgb(197, 54, 7)
Dark: rgb(255, 122, 92)
error-background
Light: rgb(255, 238, 230)
Dark: rgb(44, 22, 18)
error-hover
Light: rgb(165, 50, 13)
Dark: rgb(255, 150, 124)
Disabled & Input
disabled-background
Light: rgb(221, 225, 232)
Dark: rgb(38, 39, 45)
disabled-text
Light: rgb(184, 187, 198)
Dark: rgb(90, 92, 104)
input-border
Light: rgb(203, 209, 219)
Dark: rgb(46, 48, 55)
Surfaces
surface-glass
Light: rgba(255, 255, 255, 0.7)
Dark: rgba(28, 29, 34, 0.72)
surface-glass-2
Light: rgba(248, 250, 252, 0.7)
Dark: rgba(22, 23, 26, 0.72)
surface-frost
Light: rgba(255, 255, 255, 0.6)
Dark: rgba(28, 29, 34, 0.6)
hairline
Light: rgba(13, 13, 13, 0.1)
Dark: rgba(255, 255, 255, 0.1)
Bold Sections
section-ink
Light: rgb(13, 13, 13)
Dark: rgb(22, 23, 26)
text-on-bold
Light: rgb(255, 255, 255)
Dark: rgb(244, 246, 250)
text-on-bold-muted
Light: rgba(255, 255, 255, 0.72)
Dark: rgba(244, 246, 250, 0.7)
Typography
Every text style responds at three breakpoints: Desktop (≥1200px) / Tablet (≥810px) / Phone (<810px), shown below each sample.
Typography/Display 6XL
Desktop 64/72px · Tablet 52/58px · Phone 40/46px
Typography/Display 5XL
Desktop 56/64px · Tablet 46/54px · Phone 36/42px
Typography/Heading 4XL
Desktop 48/56px · Tablet 40/48px · Phone 32/38px
Typography/Heading 3XL
Desktop 40/48px · Tablet 34/42px · Phone 28/34px
Typography/Heading 2XL
Desktop 32/40px · Tablet 28/36px · Phone 24/30px
Typography/Heading XL
Desktop 24/32px · Tablet 22/30px · Phone 20/28px
Typography/Subtitle LG
Desktop 20/24px · Tablet 19/24px · Phone 18/24px
Typography/Body MD
Desktop 18/24px · Tablet 17/24px · Phone 16/24px
Typography/Body SM
Desktop 16/24px · Tablet 16/24px · Phone 15/22px
Typography/Label XS
Desktop 14/18px · Tablet 14/18px · Phone 14/18px
Typography/Caption XXS
Desktop 12/16px · Tablet 12/16px · Phone 12/16px
Typography/Micro XXXS
Desktop 10/14px · Tablet 10/14px · Phone 10/14px
Spacing & Breakpoints
Desktop breakpoint
≥ 1200px viewport width
Tablet breakpoint
810px – 1199px viewport width
Phone breakpoint
< 810px viewport width
Section vertical padding
40px (standard) · 160/120/100px top on page-title sections (desktop/tablet/phone)
Section horizontal padding
60px desktop/tablet · 24px phone
Content max-width
1440px outer section · 800px reading column on text-heavy pages
Card corner radius
8–10px
Standard content gap
16–48px depending on hierarchy (16 = related items, 32–48 = section blocks)
Buttons
Button and Underline Button are shared components used throughout the site. Edit them once in Assets → Components to restyle every instance at once.
Default
Secondary Default
Outline Regular / Default
Transparent / Default
Danger / Default
Underline Button