Style Guide

This style guide serves as a page that outlines clear visuals on typography, color schemes and other design elements.

Colors

Surface containers

Elevations

Typography

.fs-4xl

.fs-3xl

.fs-2xl

.fs-xl

.fs-l

.fs-m

.fs-s

.fs-xs

.fw-100 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-200 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-300 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-400 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-500 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-600 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-700 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-800 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.fw-900 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a hyperlink

Elements

Buttons

I am a button I am a button I am a button I am a button I am a button I am a button I am a button I am a button I am a button

Icons

--primary

--secondary

--tertiary

Avatars

Cards

.card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Primary Secondary

.card .card-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Primary

.card .card-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Primary

.card .card-tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Primary

Sizing

.space-4xl

.space-3xl

.space-2xl

.space-xl

.space-l

.space-m

.space-s

.space-xs

.space-2xs

.space-3xs

.space-4xs

Padding

.p-4xl

.p-3xl

.p-2xl

.p-xl

.p-l

.p-m

.p-s

.p-xs

.p-2xs

.p-3xs

.p-4xs

Track your expenses

Expenses

$12,543

Jan

Feb

Mar

Apr

May

Jun

Gain control

Create budgets: earn and win

Income

$15,989$18,871 last period

Expenses

$12,543$10,221 last period

Savings

$5,210$10,221last period

Hannah Laurent

Expenses

$12,543

Jan

Feb

Mar

Apr

May

Jun

Neveta
Náutica

Style Guide

Colors

Surface containers

Elevations

Typography

Elements

Buttons

Icons

Avatars

Cards

.card

.card .card-primary

.card .card-secondary

.card .card-tertiary

Sizing

Padding

Track your expenses

Expenses

Gain control

Categories

Groceries

Household

Travel

Other

Create budgets: earn and win

Income

Expenses

Savings

Hannah Laurent

Expenses

Daniel Johnson