Design System

Brutalist Industrial — The visual language of Pumpkin Hub.

Philosophy

The Pumpkin Hub design system draws from the "Brutalist Industrial" aesthetic: a no-frills interface that reflects the modernity and rigor of the Rust language. Every visual decision follows these principles:

No-Radius — No rounded corners. Elements use sharp right angles exclusively.
Code-First — The interface is designed for developers: pervasive monospace, technical data front and center.
60-30-10 — 60% black (background), 30% neutral gray (text), 10% orange (actions/CTA).
Technical Clarity — No superfluous decoration. Every pixel serves comprehension.

Color Palette

Background

Token	Hex	Usage
`bg-base`	`#0a0a0a`	Main background
`bg-elevated`	`#111111`	Cards, modals, callouts
`bg-surface`	`#1a1a1a`	Hover, interactive elements

Text

Token	Hex	Usage
`text-primary`	`#ffffff`	Headings, important text
`text-secondary`	`#e5e5e5`	Body text
`text-muted`	`#a3a3a3`	Descriptive, secondary text
`text-subtle`	`#737373`	Labels, metadata
`text-dim`	`#525252`	Tertiary text, placeholders

Accent

Token	Hex	Usage
`accent`	`#f97316`	CTA, links, active states
`accent-light`	`#fb923c`	Accent hover
`accent-dark`	`#ea580c`	Accent active

Borders

Token	Hex	Usage
`border-default`	`#262626`	Separators, cards
`border-hover`	`#525252`	Hover state
`border-accent`	`#f97316`	Focus state, active selection

Semantic

Token	Hex	Usage
`success`	`#4ade80`	Published, success, active
`warning`	`#facc15`	In review, caution
`error`	`#f87171`	Error, deletion
`info`	`#38bdf8`	Information, link

Typography

Fonts

Font	Usage	Weights
Raleway	Headings, body text, navigation	300, 400, 600, 700, 900
JetBrains Mono	Code, badges, technical values, metadata	400, 500, 700

Type Scale

Level	Size	Weight	Font
H1	2rem (32px)	900 (Black)	Raleway
H2	1.4rem (22px)	800 (ExtraBold)	Raleway
H3	1.1rem (18px)	700 (Bold)	Raleway
Body	0.875rem (14px)	400 (Regular)	Raleway
Code	0.75rem (12px)	400 (Regular)	JetBrains Mono
Label	0.65rem (10px)	500 (Medium)	JetBrains Mono

Line height: 1.7x for body text, 1.3x for headings.

Grid & Spacing

The grid system uses a 8px base unit. All spacing and dimensions are multiples of 8px to ensure consistency.

Token	Value	Common Usage
`space-1`	4px	Micro internal spacing
`space-2`	8px	Minimum gap, light padding
`space-3`	12px	Badge and tag padding
`space-4`	16px	Card padding, grid gap
`space-6`	24px	Minor section separation
`space-8`	32px	Major section margin
`space-12`	48px	Block spacing

Components

Buttons

Two main variants, always with border-radius: 0:

Primary — Orange background (#f97316), black text, hover → #ea580c
Ghost — Transparent background, neutral border, gray text, hover → lighter border

Cards (Bento)

1px border #262626, background #111
Hover: border → #f97316, translateY(-2px)
No box-shadow, no border-radius

Badges

JetBrains Mono font, 0.6rem, uppercase
Colored border, semi-transparent background (5% opacity)
No border-radius

Inputs

Background #111, border #262626
Focus: border → #f97316, subtle glow
JetBrains Mono font for technical fields

PluginIcon

Displays a plugin's icon image or a 2-letter initial fallback when no icon is set. Used on plugin cards, detail pages, and explorer results.

Accepts icon_url (nullable), name, and size props
Fallback: first two letters of the plugin name, uppercased, on a dark background with orange accent border
Square aspect ratio, no border-radius (Brutalist style)
Icon images stored on S3/R2 via the plugin edit form

Visual Effects

Noise Overlay

Very subtle SVG noise texture (3% opacity) applied on body::before with position: fixed and pointer-events: none.

Scanlines

CRT scan line effect via repeating-linear-gradient (4px amplitude, 3% opacity).

Orange Glow

Subtle box-shadow on focused or featured elements: box-shadow: 0 0 40px rgba(249, 115, 22, 0.15).

Grid Background

Orthogonal background grid (48px) in very light orange (3% opacity) to reinforce the technical/industrial aesthetic.