Kazimir Malevich, 1915

The Supremacy
of Pure Feeling

A geometric abstract art movement reducing visual expression to its purest forms: squares, circles, crosses, and rectangles floating on infinite white fields.

Pure Form,
Infinite Space

Suprematism rejects representational imagery entirely, seeking to convey "the supremacy of pure artistic feeling" through color, shape, and spatial relationships alone.

In digital design, Suprematism translates into radically minimal compositions built from bold geometric primitives, stark primary-plus-black palettes, dynamic diagonal axes, and vast white space that functions as infinite depth rather than emptiness.

Founded by Kazimir Malevich in 1915, the movement reduced painting to its absolute zero point -- the Black Square -- and from there rebuilt visual language using only the vocabulary of geometry and color.

Visual Characteristics

Core Design
Traits

Pure Geometric Primitives

Squares, rectangles, circles, triangles, and crosses used as the sole compositional vocabulary with no illustrative or representational elements.

Floating on White Fields

Elements appear suspended in a depthless white void, creating a sense of weightlessness and cosmic space.

Dynamic Diagonal Axes

Compositions tilted along diagonal lines create energy and movement within static geometry.

Bold, Flat Color Fills

Shapes rendered in solid, unmodulated color with no gradients, textures, or shadows.

Asymmetric Balance

Elements arranged through dynamic equilibrium rather than symmetrical mirroring, creating tension and motion.

Scale Contrast

Dramatic differences between large and small elements establish visual hierarchy purely through size.

No Ornamentation

Total absence of borders, decorative elements, patterns, or embellishment of any kind.

Foundational Rules

Design
Principles

Hover to interact -- geometric composition
Chromatic Identity

Color
Palette

Suprematism demands chromatic restraint. A small number of strongly contrasting hues -- anchored by black and white -- create maximum visual impact. Each color serves a specific compositional role.

Suprematist Black
#1A1A1A
Primary element, text, dominant shapes
White Field
#FFFFFF
Infinite space, negative area
Malevich Red
#D42B2B
Primary accent, dynamic rectangles
Primary Yellow
#F2C41D
Secondary accent, circles and bars
Constructive Blue
#2456A4
Tertiary accent, supporting geometry
Warm Grey
#E8E5E0
Subtle background variation
Deep Green
#1B6B3A
Occasional accent (use sparingly)
Raw Ochre
#C8933C
Earth-tone geometric accent
Off-White
#F8F6F2
Warm white alternative
Steel Grey
#4A4A4A
Secondary text, lighter elements
Typographic System

Font
Pairings

Typography in Suprematism must submit to the geometry. Clean, geometric sans-serifs and bold condensed display faces echo the forms of the shapes themselves.

Heading
Bebas Neue
Architectural poster, bold simplicity
Body
Inter 400 -- The zero point of painting. A form reduced to its absolute essence, the foundation upon which all composition rests.
Heading
Oswald
Constructivist editorial, structured
Body
Inter 300 -- Dynamic tension through color and angle. A tilted plane that defies gravity and asserts pure visual energy in space.
Heading
Space Grotesk
Geometric harmony, modern gallery
Body
Inter 300 -- Circles, squares, and crosses floating on white fields. The supremacy of pure artistic feeling over representation.
CSS Patterns

Design
Techniques

Geometric Card

A card with a floating red square accent. Built with ::before pseudo-element positioned above the border.

Suprematist Button

Black fill with offset border shadow via ::after. Hover transitions to Malevich Red.

Geometric Divider

Lines extending from a central red square marker, built purely with flexbox and pseudo-elements.

Cross Element

Two overlapping bars created with ::before and ::after. A signature Suprematist motif.

Spatial Logic

Layout
Principles

01

White as Infinite Plane

The white background is not empty space but an active, infinite field on which geometric elements float; it should dominate the composition.

02

Diagonal Axis Composition

Arrange key elements along a diagonal line from corner to corner to create dynamic tension and visual movement.

03

Extreme Asymmetry

Avoid centering and symmetry; position elements at unexpected coordinates to create tension and balance through counterweight.

04

Grid as Invisible Scaffold

Use a strict underlying grid but allow elements to break and overlap it, creating floating freedom within hidden structure.

05

Scale as Hierarchy

The largest shape is the most important; use dramatic size differences between primary and secondary elements.

06

Responsive Approach

On mobile, simplify to fewer geometric elements while preserving the dominance of white space and the power of single bold shapes.

Guidelines

Do's
& Don'ts

Do

  • Use only pure geometric forms: squares, rectangles, circles, triangles, crosses
  • Let white space dominate the composition as an active, infinite field
  • Create hierarchy exclusively through size, position, and color contrast
  • Use diagonal axes and rotation to create dynamic energy
  • Limit your palette to 3-4 strongly contrasting colors plus black and white
  • Make every element essential; remove anything that does not serve the composition
  • Reference Malevich, El Lissitzky, and Constructivist design principles

Don't

  • Add gradients, textures, shadows, or any surface embellishment to geometric shapes
  • Use decorative typefaces, script fonts, or ornamental borders
  • Fill the white space with content; the void is the canvas
  • Apply rounded corners to rectangles (use sharp 90-degree angles)
  • Mix representational imagery with abstract geometry
  • Create symmetrical, balanced layouts; asymmetric tension is fundamental
  • Use more than 4-5 colors; chromatic restraint creates power
Connections

Related
Aesthetics