Framer Design System

Typography

Colors

Buttons

Icons

Dividers

Spacing

Navigation

Typography

Roboto

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Regular

Text900

Text800

Text700

Text600

Text500

Text400

Text300

Text200

Text100

Text50

Medium

Text900

Text800

Text700

Text600

Text500

Text400

Text300

Text200

Text100

Text50

Bold

Text900

Text800

Text700

Text600

Text500

Text400

Text300

Text200

Text100

Text50

Colors

White

#FFFFFF

Base

10

#F8F8F8

20

#CCCCCC

30

#B3B3B3

40

#999999

50

#808080

60

#666666

70

#4D4D4D

80

#333333

90

#191919

100

#000000

Neutral

70

#0B5AE2

80

#0948B5

90

#073B93

100

#062D71

10

#E7EFFC

20

#C2D6F8

30

#9DBDF3

40

#79A4EF

50

#548CEB

60 - Primary

#4385F6

Blue

70 - Primary

#FD784F

80

#CA603F

90

#A44E33

100

#7F3C28

10

#FFF2ED

20

#FFDDD3

30

#FEC9B9

40

#FEB59E

50

#FEA184

60

#FD8C69

Orange

70

#00B88A

80

#009973

90

#007A5C

100

#005C45

10

#D9F7F0

20

#B3F0E0

30

#8CE8D1

40

#66E0C2

50

#40D9B3

60 - Primary

#00CC99

Green

70

#D78F03

80

#B17602

90

#986502

100

#724C01

10

#FFF2D9

20

#FEE5B3

30

#FED88E

40

#FECB68

50

#FEBE42

60 - Primary

#FDA803

Yellow

70

#CA3333

80

#A42A2A

90

#8B2323

100

#721D1D

10

#FFE2E2

20

#FFCFCF

30

#FEB3B3

40

#FE9696

50

#FD6666

60 - Primary

#FD4040

Red

Buttons

Blue Solid

Small

Button Label

Medium

Button Label

Large

Button Label

Extra Large

Button Label

Blue Outline

Small

Button Label

Medium

Button Label

Large

Button Label

Extra Large

Button Label

Orange Solid

Small

Button Label

Medium

Button Label

Large

Button Label

Extra Large

Button Label

Orange Outline

Small

Button Label

Medium

Button Label

Large

Button Label

Extra Large

Button Label

Secondary

Small

Button Label

Medium

Button Label

Large

Button Label

Extra Large

Button Label

Ghost

Small

Button Label

Medium

Button Label

Large

Button Label

Extra Large

Button Label

Icons

Standard Iconography

Choose the specific icon from the Variants menu under the Icons asset. Freely resize each instance based on the required specification of the page or area.

Dividers

Standard Divider

Dotted Divider

Spacing & Grids

Spacing Units

4px

8px

12px

16px

24px

32px

40px

48px

52px

60px

64px

72px

80px

88px

96px

104px

112px

120px

128px

140px

152px