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 Mega Large (56)

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)

Button

Button (14)

Mono

Mono (14)

Mono (12)

Colors

Brand Patterns

Green (Light)

#24E497

Green (Dark)

#3D8F71

Blue (Strong)

#066EF9

Gradient Patterns

  • Dark 1

  • Green (Dark)

  • Green (Light)

  • Green (Dark)

  • Green (Light)

  • Blue

  • Blue

  • Dark 1

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

Validation Patterns

Valid

#00B009

Invalid

#F04242

Iconography

Public Library via https://phosphoricons.com/

Visuals

Brand Patterns

blob_vieobn.webp
blob_gk3kam.webp
blob_gk3kam.webp
blob_cp2e1g.webp
blob_lxtwif.webp
blob_q7vp8r.webp
blob_zq3r8c.webp
blob_mfkuc9.webp
blob_aq13ts.webp
blob_ir3sbr.webp
blob_mxwcrn.webp
blob_xbsrpr.webp
blob_ozorqa.webp
blob_uheofw.webp
blob_v3ytaj.webp
blob_a9ppjn.webp
blob_hgyyeg.webp
blob_nni67a.webp

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

Try our Beta

Try our Beta

Try our Beta

Secondary

Try our Beta

Try our Beta

Try our Beta

Secondary Light

Try our Beta

Try our Beta

Try our Beta

Outline

Try our Beta

Try our Beta

Try our Beta

Ghost

Try our Beta

Try our Beta

Try our Beta

Multi-Color

Try our Beta

Try our Beta

Try our Beta

Elements - Badge

Primary

Climate Score

Climate Score

Climate Score

Secondary

Climate Score

Climate Score

Climate Score

Outline

Climate Score

Climate Score

Climate Score

Ghost

Climate Score

Climate Score

Climate Score

Multi-Color

Climate Score

Climate Score

Climate Score

Elements - Icon

Primary

Secondary

Outline

Ghost

Multi-Color

Elements - Forms & Inputs

Multi-Input (Placeholder Labels)

Multi-Input (Outside Labels)

First name

Email

Choose a date

Pick a time

How can we help?

First name

Last name

Email

Company name

Pick a time

Pick a time

How can we help?

2-Column Layout

Let's talk!

Office:

Keizersgracht 520, 1017EK
Amsterdam
The Netherlands

Local time:

14:49:39

Email:

info@trawa.com

Phone:

+49 (0) 30 450 100

First name

Email

How can we help?

Elements - Branded Visuals

MISC

blob_gk3kam.webp

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 - Action Bar

MISC

trawa sichert sich 24 Mio. € Eigenkapitalfinanzierung für das Comeback der Industrie in Europa

Elements - Nav Bar

MISC

Produkte

Industrien

Unternehmen

Einloggen

Kontakt aufnehmen

Elements - Footer

MISC

CMS Content - Team

MISC

Content - Customer Logos

MISC