Style Guide

Visual Design Style

A complete guide to ensuring your visual appearance and identity stays consistent across platforms.

Primary Color

Our primary color palette is based on Perfect Days. Use this color palette to empathize brand feeling in your system. This color reflects the perfect balance between calm and energy, bringing a warm feel that is modern and timeless. Ideal for creating a clean, professional, and classy impression.
Perfect Days (#4B9FE0)

Secondary Color

This color is inspired by the classic look of the Megadrive screen, bringing a retro-futuristic feel with sharp contrast and iconic aesthetics. Ideal for bold and characterful accent elements.
Megadrive Screen (#4D3EAC)

Heading Font

A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
Inter
Bold - 48 px

Heading 1

Bold - 36 px

Heading 2

Bold - 28 px

Heading 3

Bold - 24 px

Heading 4

Bold - 20 px
Heading 5
Bold - 18 px
Heading 6

Bodytext Font

A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading.
Inter
Bold - 16 px
Bodytext 1
Bold - 14 px
Bodytext 2

Primary Button

A button that represents the main action on a page or interface. It stands out the most and is used for high-priority actions, such as submitting a form or completing a purchase.
regular
Normal
Button
Hover
Button
Small
Normal
Button
Hover
Button

Secondary Button

A button that supports the primary action but is less prominent. It is typically used for alternative actions that are important but not the main focus, such as "Cancel" or "Learn More.
regular

Tertiary Button

A button with the lowest emphasis, often styled as a text link or minimally designed. It is used for less critical actions, such as navigation or supplementary options.
larger
Normal
Button
Hover
Button

Boost Your Sales with AI-Powered Insight

Optimize your sales and marketing strategy with artificial intelligence.