Style Guide

1. Text Styles

The typography system is designed to create a clear visual hierarchy while maintaining consistency across all screens. From large display headings to subtle captions, each style is defined to guide attention, improve readability, and support structured content.

Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Large
Text Large (Strong)
Text Medium
Text Medium (Strong)
Text Small
Text Small (Strong)
Label
Caption
2. Colors

The color system is built around a restrained, functional palette with a strong emphasis on contrast and usability. Core neutrals establish the foundation, while accent colors are used intentionally to highlight actions, states, and key elements.

Dark

Dark Depth

Blue wash

Light

Light depth

pink

Dark Lift

Yellow

Light Lift

Blue

3. Buttons

Buttons are designed to clearly communicate hierarchy and intent. Primary actions are visually prominent, while secondary and tertiary styles provide support without competing for attention.

4. Inputs

Input components are built for clarity, feedback, and ease of use. Different states - default, active, and filled help users understand where they are in the interaction and what is expected.

For teams preparing for growth, not hype

Create a free website with Framer, the website builder loved by startups, designers and agencies.