Design system
A visual index of the template’s existing colors, type styles, components, and composition patterns.
Color styles
Black
rgb(33, 33, 33)
Green
rgb(70, 163, 154)
Light Gray
rgb(161, 161, 161)
Clear Gray
rgb(212, 212, 212)
White 50
rgba(255, 255, 255, 0.5)
Gray
rgb(153, 153, 153)
Gray 30
rgba(217, 217, 217, 0.3)
White 20
rgba(255, 255, 255, 0.2)
White 30
rgba(255, 255, 255, 0.3)
White
rgb(255, 255, 255)
Gray 70
rgba(237, 237, 237, 0.7)
Middle Black
rgb(107, 107, 107)
White 10
rgba(255, 255, 255, 0.1)
Light gray 10
rgba(136, 136, 136, 0.1)
Default
rgba(0, 0, 0, 0)
Dark Gray
rgb(64, 64, 64)
Text styles
Heading 1
A considered headline
Body
Clear supporting copy makes the message easy to understand.
Body 2
Compact label
Body 3
On-dark text sample
Body 4
Small supporting detail
Logo
speco
Components
Button · Existing states
Default
Light
Disabled
Success
Example sections
Section header
A shared visual language
Color, type, and reusable elements create a consistent foundation across the template.
Action pattern
A compact call to action pairs supporting copy with the existing button style.