Design System

Foundations

Foundations of Branco Website developed in Webflow including color palettes, typography, iconography, images and css styling utilities.

1. BG Colors

Primary

bg-primary
#E38600

Light Mode

bg-light-neutral-100
#F8F8F8
bg-light-neutral-200
#EEEEEE
bg-light-neutral-500
#727272
bg-light-neutral-900
#1A1A1A

Dark mode

bg-dark-neutral-100
#121212
bg-dark-neutral-200
#252525
bg-dark-neutral-500
#999999
bg-dark-neutral-900
#E9E9E9

Gradients

bg-gradient
#F4B863 to #CA7D11

2. Text Colors

Primary

text-orange

Light Mode

text-light-neutral-100
text-light-neutral-200
text-light-neutral-500
text-light-neutral-900

Dark Mode

text-dark-neutral-100
text-dark-neutral-200
text-dark-neutral-500
text-dark-neutral-900

Other colors

light-neutral-100
dark-neutral-500
light-neutral-900

3. Icons

4. 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.
Two Tuapata business cards with rounded corners, one in coral with white logo, the other white with contact details.
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)
Huge and beautiful green mountains
beautiful green trees from a big forest
  • Notion app icon
  • Slack app icon
  • Webflow app icon
  • Figma app icon
  • Photoshop app icon
  • Adobe Illustrator app icon
  • Premiere Pro app icon
  • ChatGPT icon
  • Claude.ai icon
  • Gemini icon
  • Spotify app icon
  • Loom app icon
  • Sublime Text 3 icon
  • Shopify icon
  • ScreenFlow icon
  • Atlas icon
  • Atlas icon
  • Atlas icon
  • Atlas icon

    • 5. Typography

    Huge

    huge-stats
    132px/100%
    huge-quote
    112px/100%
    huge-cta
    80px/105%

    Heading

    h1-black
    64px/110%
    h2-black
    48px/120%
    h3-black
    40px/125%

    Body

    body-large-semibold
    32px/130%
    body-base-big-semibold
    24px/135%
    body-base-big-light
    24px/135%
    body-base-semibold
    20px/140%
    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

    Heading H1

    64px/110%

    Heading H2

    48px/120%

    Heading H3

    40px/125%

    Link Styles

    Nav Link
    All Links
    General Styles 130%
    04-S-Link
    18px/130%
    03-XS-Link
    16px/130%
    02-XXS-Link
    14px/130%

    Lists

    • Unordered item one
    • Unordered item two
    1. Ordered item one
    2. Ordered item two

    Rich Text

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    ‍

    Paragraph

    ‍

    Link

    ‍

    Quote

    ‍

    • Item Number One
    • Item Number two

    ‍

    1. Item Number One
    2. Item Number two

    ‍

    ‍

    ‍

    6. Other styles

    Text

    text-left
    text-right
    text-center
    caps
    no-caps
    900-Black
    italic
    no-decoration
    underline
    Text shadow

    Display

    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

    width-auto
    width-100%
    width-100vh
    height-auto
    height-100%
    height-100vh

    Position - Float

    float-left
    float-right

    Spacing - Margins

    no-margin
    no-side-margin
    no-upper-margin
    margin-side-auto
    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