Design System

Design Tokens

Design system tokens of Branco Website made in Webflow including color palettes, typography and styling utilities including iconography and images Foundations.

1. BG Color

Primary tokens

bg-primary

#E38600

bg-primary-600

#FF9700

Light Mode tokens

bg-light-neutral-100

#F8F8F8

bg-light-neutral-200

#EEEEEE

bg-light-neutral-500

#727272

bg-light-neutral-900

#1A1A1A

Dark mode tokens

bg-dark-neutral-100

#121212

bg-dark-neutral-200

#252525

bg-dark-neutral-500

#999999

bg-dark-neutral-900

#E9E9E9

Gradients tokens

bg-gradient

#F4B863 to #CA7D11

2. Text Color

Primary tokens

text-orange

text-primary-600

Light Mode tokens

text-light-neutral-100

text-light-neutral-200

text-light-neutral-500

text-light-neutral-900

Dark Mode tokens

text-dark-neutral-100

text-dark-neutral-200

text-dark-neutral-500

text-dark-neutral-900

Other colors tokens

light-neutral-100

dark-neutral-500

light-neutral-900

3. Typography

Huge tokens

huge-stats

132px/100%

huge-quote

112px/100%

huge-cta

80px/105%

Heading tokens

h1-black

64px/110%

h2-black

48px/120%

h3-black

40px/125%

Body tokens

body-large-semibold

32px/130%

body-base-big-semibold

24px/135%

body-base-big-light

24px/135%

body-base-semibold

20px/140%

body-base-light

body-small-semibold

18px/145%

body-small-light

18px/145%

body-tiny-semibold

16px/150%

body-tiny-light

16px/150%

body-micro-semibold

14px/155%

body-micro-light

14px/155%

Headings sizes tokens

Heading H1

64px/110%

Heading H2

48px/120%

Heading H3

40px/125%

Link Styles tokens

General Styles 130%

18px/130%

16px/130%

14px/130%

Lists

Unordered item one
Unordered item two

Ordered item one
Ordered item two

Rich Text tokens

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

‍

Paragraph

‍

Link

‍

Quote

‍

Item Number One
Item Number two

‍

Item Number One
Item Number two

‍

4. Variables

Text variables

text-left

text-right

text-center

caps

no-caps

900-Black

italic

no-decoration

underline

Text shadow

Display variables

Block

flex-h-center

flex-h-top

flex-h-bottom

flex-h-sb

flex-v-center

flex-v-left

flex-v-right

flex-v-sb

inline-block

inline

hidden

none

Size variables

width-auto

width-100%

width-100vh

height-auto

height-100%

height-100vh

Position variables

float-left

float-right

Spacing variables

no-margin

no-side-margin

no-upper-margin

margin-side-auto

mt-0

mt-4

mt-8

mt-16

mt-24

mt-32

mt-40

mr-0

mr-4

mr-8

mr-16

mr-24

mr-32

mr-40

mb-0

mb-4

mb-8

mb-16

mb-24

mb-32

mb-40

ml-0

ml-4

ml-8

ml-16

ml-24

ml-32

ml-40

Spacing - Paddings

no-padding

no-side-padding

no-upper-padding

pt-0

pt-4

pt-8

pt-16

pt-24

pt-32

pt-40

pr-0

pr-4

pr-8

pr-16

pr-24

pr-32

pr-40

pb-0

pb-4

pb-8

pb-16

pb-24

pb-32

pb-40

pl-0

pl-4

pl-8

pl-16

pl-24

pl-32

pl-40

5. Iconography

6. Images

Gradient background transitioning from light beige at the bottom to darker beige at the top with rounded corners.

Black credit card with minimalistic design and chip visible on the left side.

Blank cream-colored card with rounded corners on a white background.

Identification card front side with a chip on the left and a man’s portrait photo on the right.

Designer card with chip, name Gonçalo Faria Branco, sex M, height 1.74, senior level, specialty product, document ID 01720624, design ID 1ZMI, career start 10 09 2013, and a portrait photo of a man with short dark hair and beard.

Top portion of an orange-framed smartphone displaying a blank white screen with status icons for time, signal, Wi-Fi, and battery.

Close-up portrait picture of myself against a black background, showing only the right half of my face.

Close-up portrait picture of myself against a black background, showing only the left half of my face.

Gonçalo portrait, the founder of Branco Web Design

Tablet screen showing a dashboard interface with market overview graph, social wallet stats, chat section, and operation buttons on a blue and yellow background.

White rectangular packaging box for Pão de Ló d’Argolo with minimal gold text and a small green circular seal.

Open laptop displaying a website homepage with the text 'We design, develop and promote your business.'

White smartphone displaying a cryptocurrency portfolio with portfolio value, BTC price chart, and candlestick graph on screen.

iPad screen displaying Alvaforce investment profit calculator with inputs for investment amount, duration, and product, showing total investor and customer earnings.

Backpacker hiking in the mountain (branco's hobby)