Style guide

Last updated Feb 2025

Version 2

Typeface

Header typeface is League Spartan

Typeface

Header typeface is League Spartan

Typeface

Header typeface is League Spartan

Paragraph typeface is Geist

Paragraph typeface is Geist

Paragraph typeface is Geist

Geist

Aa

Bb

Cc

0123456789

Colors

A system for dark and light colours that auto change to the users system setting.

Colors

A system for dark and light colours that auto change to the users system setting.

Colors

A system for dark and light colours that auto change to the users system setting.

Background | FAFAFA

Page background

Background | FAFAFA

Page background

Background | FAFAFA

Page background

Foreground | 18181B

Text color

Foreground | 18181B

Text color

Foreground | 18181B

Text color

Primary | 2563eb

For buttons, focus states, radio and checkbox active states

Primary | 2563eb

For buttons, focus active states, radio and checkbox active states

Primary | 2563eb

For buttons, focus states, radio and checkbox active states

Primary foreground | FFFFFF

Text color on primary background

Text color on primary background

Text color on primary background

Primary foreground | FFFFFF

Text color on primary background

Primary gradient | BFDBFE

Used in the linear and radial gradients

Primary gradient | BFDBFE

Used in the linear and radial gradients

Primary gradient | BFDBFE

Used in the linear and radial gradients

Muted foreground | 52525B

A faded text color

Muted foreground | 52525B

A faded text color

Muted foreground | 52525B

A faded text color

Error | FEF2F2

Faded red color

Error | FEF2F2

Faded red color

Error | FEF2F2

Faded red color

Error foreground | DC2626

Stronger red for text

Error foreground | DC2626

Stronger red for text

Error foreground | DC2626

Stronger red for text

Card | FFFFFF

White or black for higher contrast against the background

Card | FFFFFF

White or black for higher contrast against the background

Card | FFFFFF

White or black for higher contrast against the background

Border

Used for cards, separators

Border

Used for cards, separators

Border

Used for cards, separators

Input

For input border color

Input

For input border color

Input

For input border color

Secondary

For buttons

Secondary

For buttons

Secondary

For buttons

White

Stay white for active states in radio and checkbox

White

Stay white for active states in radio and checkbox

White

Stay white for active states in radio and checkbox

White auto

For icon colors that adapt to the user color settings

White auto

For icon colors that adapt to the user color settings

White auto

For icon colors that adapt to the user color settings

Dark

When you need a dark button

Dark

When you need a dark button

Dark

When you need a dark button

Dark foreground

Text for the dark background

Dark foreground

Text for the dark background

Dark foreground

Text for the dark background

Fade

For faded background wrapping hero product images

Fade

For faded background wrapping hero product images

Fade

For faded background wrapping hero product images

Nav

For top navigation background

Nav

For top navigation background

Nav

For top navigation background

Icons

The benefit of using an icon component is that you can give it a color such as foreground it will change to the user's color settings. You can use the feather icon from Framer.

Icons

The benefit of using an icon component is that you can give it a color such as foreground it will change to the user's color settings. You can use the feather icon from Framer.

Icons

The benefit of using an icon component is that you can give it a color such as foreground it will change to the user's color settings. You can use the feather icon from Framer.

Font sizes

Font sizes

Font sizes

With great power comes great responsibility

xs

12px/0.75rem

1em

With great power comes great responsibility

sm

14px/0.875rem

1em

With great power comes great responsibility

sm

14px/0.875rem

1em

With great power comes great responsibility

sm

14px/0.875rem

1em

With great power comes great responsibility

base

16px/1rem

1.5em

With great power comes great responsibility

lg

18px/1.125rem

1.2em

With great power comes great responsibility

2xl

24px/1.5rem

1.2em

With great power comes great responsibility

4xl

36px/2.25rem

1.2em

With great power comes great responsibility

5xl

48px/3rem

1em

With great power comes great responsibility

6xl

60px/3.75rem

1em

Buttons

Buttons

Buttons

Forms

Forms

Forms

Topic

Topic

Topic

Pricing

Two components for your pricing page

Pricing

Two components for your pricing page

Pricing

Two components for your pricing page

Free

$0

Free for everyone

Unlimited Task Management

Real-Time Collaboration

Reporting Custom Filters

Basic

Popular

$8

per user/month

Yearly -20%

Yearly

All free features and…

Multi-User Access

Integrated Chat Functions

Business

$12

per user/month

Yearly -20%

Yearly

All basic features and…

Data Export Options

Project Templates Library

Free

$0

Free for everyone

Unlimited Task Management

Real-Time Collaboration

Reporting Custom Filters

Basic

Popular

$8

per user/month

Yearly -20%

Yearly

All free features and…

Multi-User Access

Integrated Chat Functions

Business

$12

per user/month

Yearly -20%

Yearly

All basic features and…

Data Export Options

Project Templates Library

Free

$0

Free for everyone

Unlimited Task Management

Real-Time Collaboration

Reporting Custom Filters

Basic

Popular

$8

per user/month

Yearly -20%

Yearly

All free features and…

Multi-User Access

Integrated Chat Functions

Business

$12

per user/month

Yearly -20%

Yearly

All basic features and…

Data Export Options

Project Templates Library

Monthly

Yearly

Free

$0

Unlimited Task Management

Real-Time Collaboration

Reporting Custom Filters

Basic

Popular

$8

per user/month

Yearly -20%

All free features and…

Multi-User Access

Text

Business

$12

per user/month

Yearly -20%

All basic features and…

Data Export Options

Project Templates Library

Monthly

Yearly

Free

$0

Unlimited Task Management

Real-Time Collaboration

Reporting Custom Filters

Basic

Popular

$8

per user/month

Yearly -20%

All free features and…

Multi-User Access

Text

Business

$12

per user/month

Yearly -20%

All basic features and…

Data Export Options

Project Templates Library

Monthly

Yearly

Free

$0

Unlimited Task Management

Real-Time Collaboration

Reporting Custom Filters

Basic

Popular

$8

per user/month

Yearly -20%

All free features and…

Multi-User Access

Text

Business

$12

per user/month

Yearly -20%

All basic features and…

Data Export Options

Project Templates Library

Profile

Two components for your team page

Profile

Two components for your team page

Profile

Two components for your team page

James Franklin

Product Manager

James Franklin

Product Manager

James Franklin

Product Manager

James Franklin

CTO

James Franklin

CTO

James Franklin

CTO

Logos

Sometimes you need a placeholder logos. This theme is using an auto dark and light theme. So for logos, if you don't have access to the svg format, you can use the white version and add a blending mode of difference on the frame so it will adapt to the users color settings.

Logos

Sometimes you need a placeholder logos. This theme is using an auto dark and light theme. So for logos, if you don't have access to the svg format, you can use the white version and add a blending mode of difference on the frame so it will adapt to the users color settings.

Logos

Sometimes you need a placeholder logos. This theme is using an auto dark and light theme. So for logos, if you don't have access to the svg format, you can use the white version and add a blending mode of difference on the frame so it will adapt to the users color settings.