v2.0
Neo Brutalism Design System

BOLD.
RAW.
UNFILTERED.

거칠고 직접적인 인터페이스 디자인. 두꺼운 테두리, 강렬한 그림자, 과감한 색상으로 구성된 완전한 컴포넌트 라이브러리.

48+
Components
4
Accent Colors
100%
Standalone
0
Dependencies
Live Controls −
01 — Typography

Type Scale

6XLDisplay / Hero
HERO TEXT
3.75rem
5XLDisplay / Large
DISPLAY
3rem
4XLHeading / H1
HEADING
2.25rem
3XLHeading / H2
SUBHEADING
1.875rem
2XLHeading / H3
SECTION TITLE
1.5rem
XLHeading / H4
CARD TITLE EXAMPLE
1.25rem
LGLead / Large body
Lead paragraph text, slightly larger for introductions.
1.125rem
BASEBody / Default
Body text for readable paragraph content and descriptions.
1rem
SMSmall / Secondary
Secondary text, captions, and helper information.
0.875rem
XSMicro / Label
MONO LABEL — UPPERCASE TRACKING
0.75rem
Display
Space Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Body
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Mono
JetBrains
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
02 — Buttons

Interactive Controls

Primary Variants
Style Variants
Sizes
With Icons
Inverted / Dark Surface
Disabled State
03 — Cards

Card Components

Standard / Inverted / Muted
Standard
Bold Default Card
Neo Brutalism 카드의 기본 스타일. 굵은 테두리와 하드 오프셋 그림자가 특징입니다.
Featured
Inverted
Dark Inverted Card
검정 배경의 반전 카드. 노란 그림자로 강한 대비를 만들어냅니다.
New
Muted
Subtle Muted Card
뮤트된 배경의 카드. 보조적인 콘텐츠에 적합한 차분한 스타일입니다.
Default
Accent
Yellow Accent Card
액센트 컬러 배경 카드. 중요한 공지나 하이라이트된 콘텐츠에 활용합니다.
Important
Feature Cards
Performance

최적화된 코드로 빠른 렌더링 성능을 제공합니다. 모든 컴포넌트는 성능을 최우선으로 설계되었습니다.

Fast Optimized
Security

보안 모범 사례를 기반으로 구축된 컴포넌트. 안전한 기본값으로 취약점을 최소화합니다.

Secure Trusted
Accessibility

WCAG 2.1 AA 기준을 준수하는 접근성 중심 설계. 모든 사용자를 위한 포용적 인터페이스.

WCAG AA Inclusive
Pattern / Noise Box
Special Callout
Textured Background Box

사선 패턴으로 텍스처를 준 컨테이너. 중요한 섹션을 강조할 때 사용합니다.

04 — Stats

By The Numbers

48+
UI Components
완전히 커스터마이즈 가능한 재사용 가능 컴포넌트
4
Accent Colors
노랑, 빨강, 파랑, 초록의 강렬한 액센트 팔레트
3
Font Families
Space Grotesk · Inter · JetBrains Mono
∞
Combinations
Live Controls로 무한한 조합 가능성
05 — Forms

Form Elements

Box Style Inputs
Underline Style Inputs
Active Urgent Review Done Default
06 — Colors

Color Palette

Yellow
#FFE600
Red
#FF3366
Blue
#00D4FF
Green
#00FF94
Black
#000000
Cream
#FFFBF0
Muted
#F5F0E0
Gray 700
#444444
Color Combinations
Yellow + Black
HIGH CONTRAST
Black + Yellow
INVERTED
Red + White
DANGER
Blue + Black
INFO
Dividers
Solid — 3px
Dashed — 3px
Dotted — 3px
Double — 6px
Thick — 6px
Yellow + Shadow
07 — Icons

Icon Grid

Home
Search
User
Mail
Lock
Settings
Bolt
Chat
Activity
Chart
Shield
Clock
Pin
Monitor
File
Check
Close
Plus
Trash
Share