Back to DesignMD
Fadhli Ilhami
Generated Jul 20, 2026
DESIGN.md for neo-brutalism-ui-library.vercel.app
Remixes of neo-brutalism-ui-library.vercel.app
Latest remixes
No public remixes yet. Be the first to make one.
Remix itFadhli Ilhami
Generated Jul 20, 2026
Latest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
Neo Brutalism UI embodies a bold, unapologetic approach to digital design that rejects minimalism in favor of raw, graphic impact. The system celebrates stark contrasts, geometric precision, and vibrant color applications—creating interfaces that feel contemporary yet grounded. This design language prioritizes strong visual hierarchy through heavy typography, blocky layouts, and intentional use of negative space. The aesthetic draws from brutalist architecture's philosophy: form follows function, but function is expressed loudly and unmistakably. Every element serves a purpose, rendered without decorative flourish, resulting in interfaces that are simultaneously playful and authoritative.
Key Characteristics
#ABE338): Primary brand accent, call-to-action backgrounds, active states, and emphasis elements#A6FAFF): Secondary brand accent for highlights, hover states, and interactive depth#000000): Primary text, borders, and structural elements#FFA07A): Tertiary accent for alerts, notifications, and complementary highlights#A8A6FF): Tertiary accent for special emphasis and decorative accents#DCC6E0): Soft accent for secondary emphasis and pale backgrounds#B8FF9F): Accent for success states and positive feedback#FFF59F): Accent for warnings, badges, and secondary highlights#A6FAFF): Button backgrounds and interactive element fills#FFF59F): Secondary button backgrounds and interactive states#ABE338): Primary call-to-action and active toggle states#E5E7EB): Primary neutral background for cards and containers#F8F8F2): Secondary background and alternate surfaces#FFFFFF): Maximum contrast backgrounds and text overlays#D4D4D4): Tertiary neutral for disabled or inactive states#727272): Text alternative for reduced contrast contexts#2B2B2B): Secondary text and reduced-emphasis content#000000): All borders, dividers, and structural strokes (minimum 2px weight)#E5E7EB): Subtle border alternative for soft containers#F8F8F2): Background surface color for primary content areasPrimary: ui-sans-serif
Fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Secondary: ui-monospace
Fallback stack: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Courier, monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | ui-sans-serif | 36px | 700 | 40px | 0px | Page titles, hero content |
| Heading / H2 | ui-sans-serif | 24px | 700 | 32px | 0px | Section headings, component titles |
| Body / Paragraph | ui-sans-serif | 14px | 700 | 20px | 0px | Primary body text, dense content |
| Button / CTA | ui-sans-serif | 16px | 400 | 24px | 0px | Interactive button labels |
| Link / Navigation | ui-sans-serif | 24px | 700 | 32px | 0px | Primary navigation and links |
| Link / Secondary | ui-sans-serif | 16px | 400 | 24px | 0px | Secondary links and nav items |
| Accent / Span | ui-sans-serif | 18px | 700 | 28px | 0px | Emphasized spans, highlights |
| Code / Monospace | ui-monospace | 16px | 400 | 24px | 0px | Code blocks, technical content |
700) weight for emphasis roles to maintain visual weight and hierarchy700) for consistency with the neo-brutalist aestheticPrimary Button
#A6FAFF#0000000px 20px48px2px solid #0000000pxnone24px#ABE338, border remains 2px solid #000000#FFF59F, maintains border and typographySecondary Button
#FFF59F#00000010px 10px40px2px solid #0000000pxnone24px#E5D700Ghost Button
transparent#0000000px0px0pxnone24px#ABE338Icon Button
#FFF59F#0000008px 8px40px40px2px solid #0000000pxnone24px#A6FAFFStandard Card
#E5E7EB2px solid #0000000px20pxnone#000000Elevated Card
#FFFFFF2px solid #0000000px20px4px 4px 0px rgba(0, 0, 0, 0.2)#000000Accent Card (Cyan)
#A6FAFF2px solid #0000000px20pxnone#000000Accent Card (Lime)
#ABE3382px solid #0000000px20pxnone#000000Text Input
#FFFFFF2px solid #0000000px12px 16px#00000020px#727272#E5E7EB, border remains 2px solid #000000, outline none#D4D4D4, text color #727272, border 2px solid #727272Checkbox
24px24px#FFFFFF2px solid #0000000px#ABE3382px solid #000000#000000Toggle Switch
48px24px#E5E7EB#ABE3382px solid #00000012px#FFFFFF, width 20px, height 20px, border 2px solid #00000024pxtransform 200ms ease-in-outDropdown / Select
#FFFFFF2px solid #0000000px12px 16px#00000020px#E5E7EB, border remains 2px solid #000000Header Navigation
transparent2px solid #0000000px48pxNavigation Link
#0000000px 16px0pxtransparent24px#ABE338, underline 2px solid #ABE338#FFF59F, text color #000000Breadcrumb
#000000#000000, weight 2px8px 0px2px solid #000000 on hoverDefault Badge
#ABE338#0000004px 12px2px solid #0000000pxSecondary Badge
#FFF59F#0000004px 12px2px solid #0000000pxStatus Badge (Success)
#B8FF9F#0000004px 12px2px solid #0000000pxStatus Badge (Alert)
#FFA07A#0000004px 12px2px solid #0000000pxBase Unit: 8px
Scale:
8px: Tight spacing for compact elements12px: Padding in small form elements and badges16px: Standard padding for buttons and inputs20px: Primary padding for cards and containers32px: Section spacing, medium components40px: Large component spacing48px: Major section breaks80px: Page-level spacing between major sections96px: Extra-large spacing for visual breathing roomUsage Contexts:
8px–12px internal, 16px–20px combined20px standard, 32px for spacious layouts48px–80px vertical separation8px–16px depending on densityMax Width: 1200px for content containers, centered with auto margins
Column Strategy: Flexible 12-column grid with consistent 16px gutters
Section Patterns:
96px vertical padding16px gap spacingNeo Brutalism UI uses whitespace strategically to create breathing room without softening the design. Generous external margins (32px–80px) contrast with dense internal padding (12px–20px), creating a sense of contained boldness. Vertical rhythm is maintained through consistent spacing multiples, ensuring predictable rhythm across layouts. Whitespace is never passive—it actively frames content and reinforces hierarchy through isolation.
0px: All components—buttons, inputs, cards, badges, navigation (default, no rounding)12px: Toggle switches only (for the rounded thumb container)4px: Never used; maintain sharp edges throughout| Level | Treatment | Use |
|---|---|---|
| Base / Ground | No shadow | Standard buttons, inputs, navigation, typography |
| Raised (1) | 2px 2px 0px rgba(0, 0, 0, 0.15) | Cards on hover, secondary emphasis |
| Elevated (2) | 4px 4px 0px rgba(0, 0, 0, 0.2) | Modal overlays, prominent cards, lifted UI sections |
| Modal (3) | 8px 8px 0px rgba(0, 0, 0, 0.25) | Dialogs, dropdowns, critical modals |
| Maximum (4) | 12px 12px 0px rgba(0, 0, 0, 0.3) | Floating action buttons, top-level overlays |
Shadow Philosophy
Shadows in Neo Brutalism UI are intentionally graphic and visible—never subtle gradations. They use hard offsets (2px, 4px, 8px) to create clear visual separation and hierarchy. Shadows reinforce the two-dimensional aesthetic by appearing as though elements are literally floating above the surface rather than being gradually illuminated. All shadows use pure black with opacity adjustments rather than color-specific shadows, maintaining consistency and boldness.
0px border-radius consistently across all components2px border width on interactive elements for visibility and strength700 weight) for all headings and emphasis roles20px–32px) between major content sections2px, 4px, 8px offsets) with rgba(0, 0, 0, ...) for depth#000000) as the primary structural color for borders and dividers8px base)700 for prominence8px or scale above recommended sizes without intent| Name | Width | Key Changes |
|---|---|---|
| Mobile | 0px–480px | Single-column layout, full-width cards, stack components vertically, reduce padding to 16px, font sizes remain consistent, button padding 12px 16px |
| Tablet | 481px–768px | Two-column layout for grids, sidebar navigation collapses to hamburger, cards stack in pairs, padding increases to 20px, max-width 90% |
| Desktop | 769px–1200px | Three-column grids enabled, sidebar navigation visible, full container width achieved, padding 32px, max-width container active |
| Wide | 1201px+ | Max-width container constrained to 1200px, centered layout, spacing increases to 40px–80px |
44px × 44px (buttons, toggles, checkboxes)24px height with 8px vertical padding8px to prevent accidental interaction16px 20px for larger touch surface40px × 40px minimum on all screens20px → 16px on mobile; increase to 32px on desktop16px margin gutters2px border weight across all breakpoints—do not reduce on mobile#ABE338)#A6FAFF)#FFF59F)#E5E7EB)#F8F8F2)#000000)#000000)#000000), minimum 2px#D4D4D4)#FFA07A)#B8FF9F)0px except toggle switch thumbs (12px); this is the signature neo-brutalist trait2px solid #000000 as the default border for buttons, inputs, cards, and containers; never use hairlines or 1px strokes2px, 4px, 8px) with rgba(0, 0, 0, opacity) rather than soft blurs; use only on raised/elevated states700 (bold) for headings, spans, and navigation; use 400 only for buttons and body text#ABE338) is primary/emphasis; Cyan (#A6FAFF) is interactive/secondary; Yellow (#FFF59F) is tertiary; Black (#000000) is structural8px increments; standard padding is 16px–20px for components, 20px–32px for cards, 48px–80px for section breaks#E5E7EB, #FFFFFF) or black text on bright backgrounds-apple-system, BlinkMacSystemFont, "Segoe UI"...) exclusively; reserve ui-monospace for code onlyWCAG AA contrast ratio; prefer #000000 text on light backgrounds (#E5E7EB, #FFFFFF, #ABE338, #A6FAFF, #FFF59F)