Exposed Grid Neo-Brutalism

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

A single commerce screen: category tabs, one large product image and a summary card.

An AI workspace: navigation, three action cards, a prompt composer and chat history.

Two fitness screens: a live timer and a metrics card with a semicircle gauge.

A SaaS landing page: hero, an interface collage, customer logos and a step section.

Description

An interface that shows its construction: thick black borders, hard offset shadows, visible grid lines and unstyled-looking controls, in colors that refuse to be tasteful. Direct, cheap-looking on purpose, and very easy to read.

Typography

Bold, Aa, Bb, Typography

Font FamilyGrotesque

Line HeightTight

Font WeightsBold, Extra Bold

Type ScaleModular

Font Pairing Strategy

Monospace accent

Text Case

Mixed

Hierarchy

Strong contrast

Text Visual Role

Primary visual driver

Text Integration

Embedded in shapes

Mood & Personality

Raw, Bold, Confident, Playful

Energy Level

Vibrant

Emotional Bias

Positive

Representation Mode

Literal

Real-world Accuracy

Stylized

Humor Usage

Occasional

Spatial Structure & Hierarchy

Grid System

Modular grid

Hierarchy Clarity

Strong

Symmetry

Asymmetrical balance

Layout Axis

Vertical

Focal Structure

Primary + secondary

Plane Separation Method

Shadow

Visual Density

Balanced

Surface, Material & Detail

Surface Treatment

Flat

Surface Texture Style

Smooth

Transparency / Opacity

Opaque

Line & Stroke System

Stroke Usage

Structural outlines

Stroke Weight

Heavy

Stroke Consistency

Uniform

Stroke Color

Neutral

Stroke Joins

Miter

Post-processing & Render Style

Image Treatment

Duotone

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Web

Presentation Context

Raw UI

UI & Web

Color Theme

Light

Background Tone

Warm off-white

Accent Strategy

Multi-tonal palette

Elevation Approach

Shadow-based

Shadow Technique

Shadow-as-border

Shadow Weight

Heavy

Border Philosophy

Visible solid border

Corner Radius Scale

Small (2–6px)

Button Shape

Sharp rectangle

Input Field Style

Outlined

Icon Style

Outline / Stroke

Icon Weight

Bold (2.5px+)

Hover Treatment

4px translate into its offset shadow; no lift

Animation Philosophy

Functional only

Transition Speed

Fast (80–150ms)

Focus Ring Style

Solid offset ring

Shape Language

Shape Basis

Geometric

Primitive Dominance

Rectangles

Edge Sharpness

Razor-sharp

Curve Consistency

Uniform radius

References

Cultural References

Neo-brutalism, Brutalist

Temporal Reference

Contemporary

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing, Heavy Bokeh / Blur

Avoided Visuals

soft blurred shadows; large rounded corners; grey borders; soft UI with pasted-on black outlines

Avoided Colors

pastel palettes; tinted palettes; gray scale

Allowed Visuals

flat full-strength color blocks; pure black borders; hard offset shadows; visible grid rules; small-radius rectangles

Colors

#FFFBEF35%Usage: Background

#00000025%Usage: Borders and typography

#2B49FF10%Usage: Color blocks

#FFC80010%Usage: Color blocks

#FF5A4710%Usage: Color blocks

#B8FF3D10%Usage: Color blocks

Palette Size

6–8 colors

Color Temperature

Warm

Saturation Range

Electric

Contrast Strategy

High contrast

Hue Relationships

Arbitrary

Gradient Policy

No gradients

Color Dominance

Balanced

Black & White Point

Pure black + Pure white

Accessibility Level

AAA

Light & Shadow

Lighting Presence

None (flat)

Shadow Type

Hard

Shadow Density

Inky

Voice & Language

Formality

Casual

Vocabulary Level

Conversational

Directness

Blunt

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Staccato

Emoji Usage

None

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Square

Corner treatment

Slight radius

Container Dominance

Primary visual identity

Padding rules

Generous

Artistic Mediums & Techniques

Physical Medium

Screen Print

Illustrative Technique

Vector illustration

Custom Style Items

Border Rule

Apply 2–3px pure-black borders to every interface element.

Offset Shadow

Use an unblurred black rectangle offset 4–6px down-right, like a second printed impression.

Grid Exposure

Keep modular-grid gutter rules visible as part of the composition.

Control Honesty

Use blunt, system-like boxes and obvious controls; style structure rather than disguising it.

......X