GeoBold
PaletteComponentsAnimationsProjectsRules
←StyleKit
几何大胆风 — Geometric Bold

GEO

METRIC

BOLD

包豪斯与构成主义的影响。强烈的几何形状,极端的色块对比,没有渐变,没有阴影。 纯粹的视觉冲击力。

3
Accent Colors
0
Gradients Used
100%
Hard Edges
4
Animation Rules
— Palette

5 COLORS.
NO MORE.

Black and white form the foundation. Red, blue, yellow are the only permitted accent colors. Maximum 3-4 per design. Zero gradients, zero shadows.

Primary
Black
#000000
Background
White
#ffffff
Accent 1
Red
#ff0000
Accent 2
Blue
#0000ff
Accent 3
Yellow
#ffff00
Black + Red
Blue + Yellow
White + Black
— Components

HARD
BLOCKS

Every component uses solid color blocks, hard edges, and linear-fast transitions. No rounded-lg. No shadows. No gradients.

Primary — Offset Shadow Block + Heavy Press

Circle — rounded-full only

Outlined — hard color swap on hover (Blocky Impact rule)

— Animation & Interaction Rules

4 RULES.
ZERO SOFTNESS.

Every interaction in Geometric Bold follows exactly four named rules from the aiRules spec. Hover or click each demo card to feel the physics.

Rule 01

Blocky Impact

交互使用纯色硬切与短位移反馈,避免柔和透明度过渡。

Hard solid-color switch on hover. No opacity fade, no blur transition. Immediate color snap + 1-2px translate offset. The difference between this and a soft fade is total — structurally honest.

bg: #000 → #ff0000
offset: -1px,-1px → +2px,+2px
duration: 100ms ease-linear
Waiting for hover interaction
Rule 02

Shape Snapping

几何装饰在 hover 时可瞬时旋转/放大,形成结构突变感。

Geometric decorations snap to a new rotation or scale on hover. Not a smooth animation — a structural jump. The shape mutates its form, creating the sensation of mechanical engagement.

Sq
square
Ci
circle
Di
diamond
Hover a shape above
Rule 03

Heavy Press

active 状态优先用位移与层级回弹表达按压,不依赖柔和缩放。

On active/click, the element shifts +4px down-right as the offset shadow collapses to zero. Not a soft scale — a displacement press. The shadow block disappears and the element lands hard on the surface.

shadow block: offset 4px → 0
button: translate 0 → 4px,4px
idle
Rule 04

Linear & Fast

统一使用 duration-100 + ease-linear,拒绝弹簧感和慢速拖尾。

No spring, no cubic-bezier overshoot, no ease-in-out tail. duration-100ms + ease-linear on everything. The comparison below shows linear (correct for this style) vs spring (wrong).

100ms ease-linear — CORRECT
Spring cubic-bezier — WRONG

Overshoot bounce = banned in Geometric Bold

— Work

PROJECT
GRID

Each row uses a different accent. Hover to see Blocky Impact and Shape Snapping in tandem — the row background snaps immediately.

01FORM FOLLOWS FORCE
Installation→
02BLUE MANIFESTO
Typography→
03YELLOW TENSION
Brand Identity→
04HARD EDGE
Poster Design→
05CIRCLE MANIFOLD
Motion→
01

STRUCTURE

02

CONTRAST

03

DYNAMICS

— Typography

TYPE IS
STRUCTURE

font-black + uppercase everywhere. Numbers serve as design elements. tracking-widest on labels. tracking-tight on display text.

10remBIG
8xlBOLDER
6xlDISPLAY
4xlHEADING
2xlSUBHEADING
xsLABEL — TRACKING [0.3em] — UPPERCASE ONLY
01
Numbers as Art

Large numbers anchor
the visual hierarchy

02
Tracking Labels

tracking-[0.3em]
on all labels

— Shapes

THE SHAPE
VOCABULARY

Circles (rounded-full), squares (rounded-none), and triangles (SVG polygon). Combine them to build every composition.

Square + Circle + Triangle

01
02
Square
rounded-none
Circle
rounded-full
Triangle
SVG polygon
Diamond
rotate-45
— Philosophy

DO &
DON'T

Geometric Bold is a strict discipline. The rules define what this style is. Breaking them breaks the aesthetic.

DO

  • Solid color blocks: bg-black, bg-white, bg-red-500, bg-blue-600
  • Regular geometric shapes: circles, squares, triangles
  • Oversized typography: text-6xl, text-8xl, text-[10rem]
  • Absolute positioning for overlapping elements
  • rounded-none OR rounded-full only — never in-between
  • Rotation for dynamics: rotate-12, rotate-45, rotate-90
  • Limited palette: black, white + 1-2 accent colors
  • font-black uppercase for all headings

DON'T

  • No gradients — ever
  • No soft or low-contrast colors
  • No rounded-lg or medium border-radius values
  • No box shadows or blur effects
  • No more than 3-4 colors per design
  • No symmetric or conventional layouts
  • No ease-in-out, spring, or cubic-bezier overshoot
  • No opacity fades for interaction states
— App Demo

AGENCY
PORTFOLIO

A design agency portfolio section rendered in full Geometric Bold style. Offset grid, number anchors, hard color contrast throughout.

STUDIO XX
WorkAboutContact
Selected Work 2024

WE BUILD
BOLD
THINGS

XX
24
Projects
12
Awards
8
Years
3
Offices
01Bauhaus Revival
Install→
02Grid System Study
Print→
03Constructivist Poster
Brand→
GeometricBold

Bauhaus and Constructivism influence. Strong geometric shapes, intense color contrast. No gradients, no shadows. Pure visual impact.

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
RulesNo GradientsNo ShadowsMax 4 Colors100ms Linear
Built for StyleKit — Geometric Bold
←Back to StyleKit