Design Style Guide
Visual Standards for Container Elementor Template Kit
Colors
Our palette is structured to support branding, system feedback, readability, and layout clarity.
Brand Color
Primary
Primary colors should be used prominently across buttons, highlights, and key brand elements.
100
300
600
900
Secondary
Secondary colors provide flexibility and can be used to complement primary branding without overpowering it.
100
300
600
900
System
Alert
System alert colors convey real-time feedback and status indicators. Each variant supports visual communication of messages.
Error
Success
Warning
Info
Neutral
Neutral Tones
Neutral tones support legibility and are used across headings, body copy, and muted UI elements.
Base Light
Soft Tint
Neutral Light
Neutral Medium
Neutral Dark
Base Dark
Base
Background
Base background colors provide structural balance and spacing for content layout.
Main Background
Variant Background
Border
Borders help separate components and define structure. These are subtle, low-opacity neutral colors.
Border
Typography
Clear, readable, and scalable typography forms the backbone of all user interfaces.
Heading
Heading 1
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Heading 2
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Heading 3
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Heading 4
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Heading 5
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Heading 6
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Body
Small Text
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Normal Text
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Large Text
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Sub Title
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Button
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
Label
Viewing Quizzical Abstracts Mixed Up Hefty Jocks
UI Components
A standardized set of interface elements designed for reusability and clarity.