Design System

Acid Brutalist

The Aggressive Curator: tactile brutalism meets editorial. This design system rejects the polite, sterilized aesthetic of modern SaaS. It sits at the intersection of productivity, commerce, and the raw energy of underground music culture.

Primary#CCFF00

Headline

Space Grotesk

Aa
PrimarySecondary
InvertedOutlined
Search
Secondary#8A2BE2

Body

Inter

Aa
Tertiary#FF5733

Label

Inter

Aa
Label
Neutral#F9F9F7

Color System

Primary Palette

Primary

#4e6300

primary

Primary Container (Acid Lime)

#cafd00

primary-container

Primary Dim

#435600

primary-dim

Primary Fixed

#cafd00

primary-fixed

Primary Fixed Dim

#beee00

primary-fixed-dim

Secondary Palette

Secondary (Vibrant Violet)

#811cd9

secondary

Secondary Container

#e4c6ff

secondary-container

Secondary Dim

#7400c9

secondary-dim

Secondary Fixed

#e4c6ff

secondary-fixed

Tertiary Palette

Tertiary

#b22200

tertiary

Tertiary Container

#ff937b

tertiary-container

Tertiary Dim

#9c1c00

tertiary-dim

Surface Tiers

Background

#f6f6f4

background

Surface

#f6f6f4

surface

Surface Lowest

#ffffff

surface-lowest

Surface Container Low

#f0f1ef

surface-container-low

Surface Container

#e7e8e6

surface-container

Surface Container High

#e1e3e1

surface-container-high

Surface Container Highest

#dcdddb

surface-container-highest

Surface Dim

#d3d5d3

surface-dim

Neutral & Outline

On Surface

#2d2f2e

on-surface

On Surface Variant

#5a5c5b

on-surface-variant

Outline

#767776

outline

Outline Variant

#acadac

outline-variant

Inverse Surface

#0c0f0e

inverse-surface

Inverse Primary

#cafd00

inverse-primary

Error

Error

#b02500

error

Error Dim

#b92902

error-dim

Error Container

#f95630

error-container

Typography

Hero Title · Space Grotesk · 3.5rem · Bold

Aa — The quick brown fox jumps over the lazy dog

display-lg

Section Head · Space Grotesk · 2.0rem · Bold

Aa — The quick brown fox jumps over the lazy dog

headline-lg

Content Body · Inter · 1.0rem · Regular

Aa — The quick brown fox jumps over the lazy dog

body-lg

Micro-Label · Inter · 0.75rem · Medium

Aa — The quick brown fox jumps over the lazy dog

label-md

Buttons

The “Gig Ticket” style. Primary uses Acid Lime container, 2px solid border, 3rem radius. On hover, shift 4px up-left with hard shadow in primary-dim.

Inputs

Large 1.5rem radius, surface-container-low background. Focus state: 3px Acid Lime border. No blue glow.

Cards

Asymmetric radius: 3rem top-left/bottom-right, 0.5rem on others. No dividers — use 32px spacing. No drop shadows — use tonal stacking with ghost borders.

Asymmetric Card

4px border, surface-lowest on surface background. The signature shape of the design system.

Ghost Border Card

2px outline-variant at 20% opacity. Subtle “paper on table” depth.

Container Card

Flat container style for nested sections. No border needed — tonal shift is enough.

Badges & Chips

HottestTrendingMotion GraphicsColoristStandardUrgent

Navigation

Sticky top bar with 4px bottom border. Font-headline bold uppercase tracking-tighter for nav links. Active link gets primary color + underline. Frosted overlays for floating elements.

CutJam
ExploreHow It WorksPricingFor Editors
Sign InGet Started

Progress & Indicators

Primary progress

Secondary progress

Error / urgency

Rules

Do

  • Use “uncomfortably large” typography for headlines
  • Overlap images and text blocks for 3D depth
  • Use Acid Lime sparingly but violently
  • Use 2-4px borders for structural elements
  • Left-align editorial layouts with wide margins
  • Achieve depth via tonal stacking, not shadows

Don't

  • Use 1px grey borders (looks like a template)
  • Use pure black #000 (use on-surface #2d2f2e)
  • Center-align everything
  • Use standard Material Design shadows
  • Use horizontal divider lines (use 32px spacing)
  • Use blue focus glows (use Acid Lime)