01 / Design System

GEO
METRIC
BOLD

Bold geometric shapes. Strong visual impact. Black and white with primary color accents. Inspired by Bauhaus and Constructivism.

Color System

Black

#000000

White

#FFFFFF

Red

#EF4444

Blue

#2563EB

Yellow

#FACC15

Buttons

Square

Outlined

Circle

Cards

Structure

Clean geometric forms define the visual hierarchy.

Contrast

Bold black and white create maximum visual impact.

Motion

Rotation and offset add dynamic energy to static layouts.

Form

Message

Tabs

Overview content — Bold geometric navigation provides clear visual feedback and structure.

Badges

Square

NewHotProDraft

Circle

010203

Progress

Loading75%

Progress45%

Complete100%

Alerts

Information alert with bold geometric styling.

Success! Your action was completed.

Warning! Please review before continuing.

Error! Something went wrong.

Controls

Toggles

Dark Mode

Notifications

Checkboxes

Option AOption BOption C

Dropdown

Table

Project	Status	Action
Website Redesign	Active
Brand Identity	Complete
App Development	Draft

Stats

100+

Projects

50K

Users

99%

Uptime

24/7

Support

Avatars

Sizes

Circle

Stacked

Core Rules

Must Use

- Solid color blocks: black, white, red, blue
- Geometric shapes: circles, squares
- Large type: text-6xl, text-8xl
- Absolute positioning for overlaps
- Only rounded-none or rounded-full
- Rotation: rotate-12, rotate-45
- Max 3-4 colors per design

Must Avoid

- Gradients
- Soft/low contrast colors
- Medium border-radius (rounded-lg)
- Shadows of any kind
- More than 4 colors
- Symmetrical conventional layouts

01 / Design System

GEO
METRIC
BOLD

Bold geometric shapes. Strong visual impact. Black and white with primary color accents. Inspired by Bauhaus and Constructivism.

Color System

Black

#000000

White

#FFFFFF

Red

#EF4444

Blue

#2563EB

Yellow

#FACC15

Buttons

Square

Outlined

Circle

Cards

Structure

Clean geometric forms define the visual hierarchy.

Contrast

Bold black and white create maximum visual impact.

Motion

Rotation and offset add dynamic energy to static layouts.

Form

Message

Tabs

Overview content — Bold geometric navigation provides clear visual feedback and structure.

Badges

Square

NewHotProDraft

Circle

010203

Progress

Loading75%

Progress45%

Complete100%

Alerts

Information alert with bold geometric styling.

Success! Your action was completed.

Warning! Please review before continuing.

Error! Something went wrong.

Controls

Toggles

Dark Mode

Notifications

Checkboxes

Option AOption BOption C

Dropdown

Table

Project	Status	Action
Website Redesign	Active
Brand Identity	Complete
App Development	Draft

Stats

100+

Projects

50K

Users

99%

Uptime

24/7

Support

Avatars

Sizes

Circle

Stacked

Core Rules

Must Use

- Solid color blocks: black, white, red, blue
- Geometric shapes: circles, squares
- Large type: text-6xl, text-8xl
- Absolute positioning for overlaps
- Only rounded-none or rounded-full
- Rotation: rotate-12, rotate-45
- Max 3-4 colors per design

Must Avoid

- Gradients
- Soft/low contrast colors
- Medium border-radius (rounded-lg)
- Shadows of any kind
- More than 4 colors
- Symmetrical conventional layouts

GEOMETRICBOLD

Color System

Buttons

Cards

Structure

Contrast

Motion

Form

Tabs

Badges

Progress

Alerts

Controls

Dropdown

Table

Stats

Avatars

Core Rules

Must Use

Must Avoid

GEOMETRICBOLD

Color System

Buttons

Cards

Structure

Contrast

Motion

Form

Tabs

Badges

Progress

Alerts

Controls

Dropdown

Table

Stats

Avatars

Core Rules

Must Use

Must Avoid

GEO
METRIC
BOLD

GEO
METRIC
BOLD