Euphoria Style Guide
Every colour, type style, button and form element in this template is driven by variables. Change a variable once and the whole site updates.
Color Palette
Primary
Primary Light
Heading Text
Body Text
Text Gray
Dark BG
Beige BG 1
Beige BG 2
Beige BG 3
White
Border Gray 100
Border Gray 300
Typography
Display Heading
Display / Satoshi / Medium / 72px / 1.01 Line Height
Heading 1
H1 / Satoshi / Medium / 72px / 1.15 Line Height
Heading 2
H2 / Satoshi / Medium / 48px / 1.15 Line Height
Heading 3
H3 / Satoshi / Medium / 32px / 1.15 Line Height
Heading 4
H4 / Satoshi / Medium / 32px / 1.31 Line Height
Heading 5
H5 / Satoshi / Medium / 24px / 1.3 Line Height
Heading 6
H6 / Satoshi / Medium / 20px / 1.3 Line Height
Paragraph large. Euphoria streamlines your finance operations with intelligent automation.
Paragraph Large / Satoshi / Regular / 20px / 1.5 Line Height
Paragraph medium. Euphoria streamlines your finance operations with intelligent automation.
Paragraph Medium / Satoshi / Regular / 18px / 1.44 Line Height
Paragraph regular. Euphoria streamlines your finance operations with intelligent automation.
Paragraph Regular / Satoshi / Regular / 16px / 1.38 Line Height
Paragraph small. Euphoria streamlines your finance operations with intelligent automation.
Paragraph Small / Satoshi / Regular / 14px / 1.5 Line Height
Paragraph extra small. Euphoria streamlines your finance operations with intelligent automation.
Paragraph Extra Small / Satoshi / Regular / 12px / 1.5 Line Height
Text Link / Satoshi / Medium / 16px / Primary, Underline
- Automated invoice matching and approvals
- Real-time cash flow dashboards
- Audit-ready reports in one click
- Connect your bank and accounting tools
- Set your approval rules
- Close the books faster every month
Unordered and Ordered Lists / Satoshi / Regular / 16px / 1.5 Line Height
Euphoria cut our month-end close from ten days to three, and our team finally trusts the numbers.
Blockquote / Satoshi / Medium / 18px / 1.44 Line Height
Buttons and Elements
Eyebrows and Tags
Text Colors
Text Primary
Text Secondary
Text Tertiary
Text Accent
Cards
Benefit Card
Used on the Features and About pages for icon-led content.
Quote card. Dark surface used for testimonials and contact.
Form Fields
