Fulflld style guide

Here you can find all of the style settings for the new FULFLLD website. Rough draft!

Colors

Neutral Spectrum

1000
Neutral-1000
232323
900
Neutral-900
2B2B2B
800
Neutral-800
333333
700
Neutral-700
4D4D4D
600
Neutral-600
666666
500
Neutral-500
808080
400
Neutral-400
999999
300
Neutral-300
B3B3B3
200
Neutral-200
CCCCCC
100
Neutral-100
E6E6E6
50
Neutral-50
FAFAFA

Primary Spectrum

900
Primary-900
2E0F0F
800
Primary-800
5E1F1F
700
Primary-700
903030
600
Primary-600
C03F3F
500
Primary-500
F25050
400
Primary-400
F37575
300
Primary-300
F69B9B
200
Primary-200
F9C2C2
100
Primary-100
FCD6D6

Orange Spectrum

900
Orange-900
2E180C
800
Orange-800
5E3219
700
Orange-700
904D26
600
Orange-600
C06632
500
Orange-500
F0803F
400
Orange-400
F39965
300
Orange-300
F6B38C
200
Orange-200
F9CCB2
100
Orange-100
FCE6D9

Yellow Spectrum

900
Yellow-900
2E250C
800
Yellow-800
5E4D19
700
Yellow-700
907526
600
Yellow-600
C09C32
500
Yellow-500
F0C43F
400
Yellow-400
F3CF65
300
Yellow-300
F6DB8C
200
Yellow-200
F9E7B2
100
Yellow-100
FCF3D9

Green Spectrum

900
Green-900
172E0C
800
Green-800
305E19
700
Green-700
499026
600
Green-600
61C032
500
Green-500
7AF03F
400
Green-400
94F365
300
Green-300
AFF68C
200
Green-200
CAF9B2
100
Green-100
E5FCD9

Blue Spectrum

900
Blue-900
0C172E
800
Blue-800
19305E
700
Blue-700
264990
600
Blue-600
3261C0
500
Blue-500
3F7AF0
400
Blue-400
6594F3
300
Blue-300
8CAFF6
200
Blue-200
B2CAF9
100
Blue-100
D9E5FC

Typography

Display 1

Telegraf Medium

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Display 2

Telegraf Medium

Lorem ipsum dolor sit amet

Display 3

Telegraf Medium

Lorem ipsum dolor sit amet

Display 4

Telegraf Medium

Lorem ipsum dolor sit amet

Heading 1

Telegraf Medium

Lorem ipsum dolor sit amet

Heading 2

Telegraf Medium

Lorem ipsum dolor sit amet

Heading 3

Telegraf Medium
ABC ABC

Lorem ipsum dolor sit amet

Heading 4

Telegraf Medium
ABC ABC

Lorem ipsum dolor sit amet

Heading 5

Telegraf Medium
ABC ABC

Lorem ipsum dolor sit amet

Heading 6

Telegraf Medium
ABC ABC

Lorem ipsum dolor sit amet

Text 1

Public Sans Light
ABC ABC

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.

Text 2

Public Sans Light
ABC ABC

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text 3

Public Sans Light
ABC ABC

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et.

Text Link 1

Public Sans Light
Lorem ipsum dolor sit amet consectetur

Text Link 2

Public Sans Light
Lorem ipsum dolor sit amet consectetur

Text Link 3

Inter Regular
Lorem ipsum dolor sit amet consectetur

Unordered List

  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco
  • Lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur consectetur consectetur
  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco
  • Lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur consectetur consectetur
  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco
  • Lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur consectetur consectetur

Ordered List

  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco
  • Lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur consectetur consectetur
  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco
  • Lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur consectetur consectetur
  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco
  • Lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet consectetur consectetur consectetur

Image & Caption

Figure And Caption - Startply X Webflow Template
Bibendum est ultricies integer quis. Semper eget duis at tellus.

Buttons

Primary Buttons

Button
Button Small
Button
Button Default
Button
Button Large
Button
Button Small
Button
Button Default
Button
Button Large

Secondary Buttons

Button
Button Small
Button
Button Default
Button
Button Large
Button
Button Small
Button
Button Default
Button
Button Large

Primary Icon Buttons

Button Small
Button Small
Button Small
Button Small
Button Small
Button Small

inputs

Fields

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkboxes

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Radio buttons

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.