KOTCOM
Contact us

Style Guide

We use Figma’s local styles to standardize colors, typography, and components ensuring consistency, scalability, and easy maintenance.

Icon
Buy Template
Icon

Colors Style

Icon
Brand Color
Primary Color
#181057-#03020B
Icon
Text Colors
Title Dark
#03020B
Title White
#FFFFFF
Paragraph Dark
#585866
Paragraph Grey
#E1E2E5
Icon
Background and Accent Colors
Background Dark
#03020B
Background White
#FFFFFF
BG Gradient
#181057-#03020B
Accent Pink
#BB7CE4
Icon
Stroke Colors
Stroke Light
#E1E2E5
Stroke Dark
#595959
Icon
Grayscale Colors
25
#E1E2E5
50
#E1E2E5
100
#E1E2E5
200
#E1E2E5
300
#E1E2E5
400
#E1E2E5
500
#E1E2E5
600
#E1E2E5
700
#E1E2E5
800
#E1E2E5
900
#595959
950
#E1E2E5

Typography Style

Icon
Big shoulder Display & Instrument Sans | Regular/Medium/SemiBold/Bold/ExtraBold
ShapeShape
Icon
Text Scaling
Text Size and Line Height
Icon

H1 TEXT

120px
100%

H2 TEXT

88px
100%

H3 TEXT

60px
120%

H4 TEXT

48px
120%
H5 TEXT
40px
120%
H6 TEXT
32px
120%

Paragraph Large

20px
150%

Paragraph Medium

18px
150%

Paragraph Small

16px
150%

Paragraph Extra Small

14px
150%

Buttons Style

Icon
Large Buttons
Icon
Primary Button
Icon
Icon
Secondary Button
Icon
Icon
Small Buttons
Icon
Primary Button
Icon
Icon
Secondary Button
Icon
Let’s TalkContact Text
Icon
Work TogetherContact Text
Icon
Let’s TalkContact Text
Icon
Work TogetherContact Text
Icon
Let’s TalkContact Text
Icon
Work TogetherContact Text
Icon
Let’s TalkContact Text
Icon
Work TogetherContact Text
Icon
Let’s TalkContact Text
Icon
Work TogetherContact Text
Icon
pentaclay.com
Grab Now
Buy For $59