Website Design System
General Principles
Dynamic Gradients
Simple 3D Shapes
Authentic Photography
Clean Light Backgrounds
Lines/Dividers
White Space
Minimalism
Typography Contrast
Typography
Titles
Title - Giga Large (100)
Title - Super Large (56)
Title - Extra Extra Large (36)
Title - Extra Large (32)
Title - Large (28)
Title - Medium (24)
Title - Small (20)
Body
Body - Large (18)
Body - Medium (16)
Body - Small (14)
Body - Tiny (12)
Colors
Brand Patterns
Blue
#323289
Turquois
#52C7C3
Light Blue
#4494FC
Orange
#FCA644
Red
#FC5444
Gradient Patterns
Dark 1
Blue
Dark Patterns
Dark 1
#000000
Dark 1
#191919
Dark 3
#303030
Dark 4
#444444
Dark 5
#565656
Dark 6
#676767
Dark 7
#767676
Dark 8
#919191
Light Patterns
Light 1
#FFFFFF
Light 2
#FAFAFA
Light 3
#F2F2F2
Light 4
#E8E8E8
Light 5
#DBDBDB
Light 6
#B3B3B3
Light 7
#ABABAB
Light 8
#9C9C9C
Iconography
Public Library via https://phosphoricons.com/
Visuals
Brand Patterns
Page Layout
Background Light & Dark
Title Text
Title Text
Title Text
Title Text
Title Text
Title Text
Title Text
Title Text
Background Light & Dark
Title Text
Title Text
Click to edit header
subtitle text
Click to edit header
subtitle text
Section text goes here
Elements - Logo
Colors
Elements - Buttons
Primary
Secondary
Secondary Light
Outline
Ghost
Multi-Color
Elements - Badge
Primary
Secondary
Outline
Ghost
Multi-Color
Elements - Forms & Inputs
Multi-Input (Placeholder Labels)
Multi-Input (Outside Labels)
2-Column Layout
Let's talk!
Office:
Keizersgracht 520, 1017EK
Amsterdam
The Netherlands
Local time:
Email:
info@trawa.com
Phone:
+49 (0) 30 450 100
Elements - Branded Visuals
MISC
Building
complexity
Tomorrow's
Energy
complexity
complexity
Market.
We transform energy markets through cutting-edge technology management, combining Silicon Valley innovation with enterprise-grade consulting expertise.
Elements - Footer
MISC