Design System & Style Guide

Primary styles, core components, and patterns used to design and build The Modern Practice by Net32

Icons

Grid & Spacing

Dividers

Navigation

Sidebar

Typography

ABCDEFGHIJKLMNOPQRSTUV

abcdefghijklmnopqrstuv

0123456789

Light

Text 900

Text 800

Text 700

Text 600

Text 500

Text 400

Text 300

Text 200 - Base

Text 100

Text 50

Regular

Text 900

Text 800

Text 700

Text 600

Text 500

Text 400

Text 300

Text 200 - Base

Text 100

Text 50

Medium

Text 900

Text 800

Text 700

Text 600

Text 500

Text 400

Text 300

Text 200 - Base

Text 100

Text 50

Bold

Text 900

Text 800

Text 700

Text 600

Text 500

Text 400

Text 300

Text 200 - Base

Text 100

Text 50

Colors

Neutral

White

#FFFFFF

10

#F8F8F8

20

#E2E2E2

30

#B3B3B3

40

#999999

50

#808080

60

#666666

70

#4D4D4D

80

#333333

90

#1A1A1A

Black

#000000

Brand Blue

10

#E8F0FC

20

#C4D7F8

30

#9BBBF3

40

#7BA5EF

50

#568DEB

60

#4385F6

70

#0B59E0

80

#0847B4

90

#0847B4

100

#062D6F

Orange

10

#FFF2ED

20

#FFDDD3

30

#FEC9B9

40

#FEB59E

50

#FEA184

60

#FD8C69

70

#FD784F

80

#CA603F

90

#A44E33

100

#7F3C28

Green

10

#D9F7F0

20

#B3F0E0

30

#8CE8D1

40

#66E0C2

50

#40D9B3

60

#00CC99

70

#00B88A

80

#009973

90

#007A5C

100

#005C45

Yellow

10

#FFF2D9

20

#B3F0E0

30

#FED88E

40

#66E0C2

50

#FEBE42

60

#FDA803

70

#D78F03

80

#B17602

90

#007A5C

100

#724C01

Red

10

#FFE2E2

20

#FFCFCF

30

#FEB3B3

40

#FE9696

50

#FD6666

60

#FD4040

70

#CA3333

80

#A42A2A

90

#8B2323

100

#721D1D

Buttons

Blue Solid

Blue Outline

Orange Solid

Orange Solid

Secondary

Icon

Small

Medium

Large

X-Large