디자인 시스템

web

v1.0.0

90/100

Neobrutalism Bold Kit

@dante · Bold & Expressive

Bold & expressive neobrutalist UI kit with thick black borders, hard offset shadows, and saturated primary blocks on warm paper.

HTML/CSS

React

shadcn/ui

Tailwind

#aesthetic

#bold

#raw

#saturated

#shadow

다운로드4

패키지 JSON 다운로드

DESIGN.md SKILL.md

개요

Neobrutalism Bold Kit

Visual theme

This system is a modern take on brutalism: bold borders, vivid accent colors, and raw, high-contrast layouts on a warm paper surface (#FBFBF9). Outputs read as confident, product-specific, and a little loud — never decorative, never apologetic. The aesthetic is comic-cousin: thick ink-black outlines, hard offset shadows with no blur, and saturated primary blocks that block traffic.

Color

Primary #FDC800 (yellow) — single hero CTA per view, the kicker on the headline.
Secondary #432DD7 (indigo) — navigation actions and secondary buttons.
Success #16A34A, Warning #D97706, Danger #DC2626 — used as solid fills, never tinted.
Surface / Neutral #FBFBF9 — paper canvas behind everything; cards keep this fill.
Text #1C293C — body copy and the only border color the system allows.

Favor solid blocks of color over translucency. Gradients, mesh fills, glassmorphism, and soft drop shadows are forbidden.

Typography

Scale 13 / 15 / 17 / 21 / 27 / 35 (px).
Families Inter (display + body) at weights 700–900 for headings, 500–700 for body. Mono is JetBrains Mono — used aggressively for labels, kickers, footer headings, badges, and any meta caption.
Headings carry the personality: tight tracking, near-black weight, occasional inline .nb-mark highlight wrapped in a yellow chunk.
Body text optimizes for scanability — bold weight, generous size, no italics for emphasis.

Spacing & grid

Spacing scale 4 / 8 / 12 / 16 / 24 / 32. Vertical rhythm is consistent across components.
Borders are 2px (small chips), 3px (default), or 4px (heavy slabs). Hard offset shadows are 4 / 5 / 6 / 8 px and always solid #1C293C (or the danger red for error states).
Radius is 4px max. No pill shapes, no full circles outside icon glyphs.

Layout & composition

Clear content blocks with consistent internal padding. Hierarchy is obvious: kicker → headline → support text → primary action. Whitespace separates concerns before borders or shadows are introduced. One BigStat or Hero per view; never compete two large slabs side by side.

Voice

Concise, confident, action-oriented. Microcopy avoids generic filler. Headlines may be playful (Build loud. Ship louder.) but UI labels stay literal. ALL CAPS mono is reserved for labels, badges, and kickers — never for body copy.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (13)

primary

#FDC800

secondary

#432DD7

success

#16A34A

warning

#D97706

danger

#DC2626

surface

#FBFBF9

paper

#FBFBF9

ink

#1C293C

neutral

#FBFBF9

accentRed

#DC2626

accentBlue

#432DD7

accentYellow

#FDC800

accentGreen

#16A34A

타이포그래피 (7)

display

Inter, 'Helvetica Neue', Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

heading

Inter, 'Helvetica Neue', Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

body

Inter, 'Helvetica Neue', Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

label

Inter, 'Helvetica Neue', Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

mono

'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

scale

unparsed

{
  "h1": "35px/1.05",
  "h2": "27px/1.1",
  "h3": "21px/1.2",
  "body": "15px/1.5",
  "small": "13px/1.45"
}

weights

unparsed

{
  "regular": 500,
  "bold": 800,
  "black": 900
}

컴포넌트 (14)

Button

Primary CTA: yellow fill, 3px black border, hard 4px offset shadow. Press effect translates the button to meet its shadow.

html

Hand-tuned CSS, no framework

1 props · 6 states · 10 tags · 2 소스

Input

Text input with 3px ink border, hard inset focus shadow, and chunky monospace label.

html

Hand-tuned CSS, no framework

1 props · 5 states · 7 tags · 2 소스

Card

Content card with thick border, 6px offset hard shadow, and a colored header strip.

html

Hand-tuned CSS, no framework

0 props · 2 states · 7 tags · 2 소스

누락 상태: focus-visible, disabled

Badge

Solid-fill chunky badge with 2px border. Used for status, category, count.

html

Hand-tuned CSS, no framework

1 props · 1 states · 9 tags · 2 소스

누락 상태: hover, focus-visible, disabled

Heading

Tight-tracked display headings with optional yellow underline marker.

html

Hand-tuned CSS, no framework

1 props · 1 states · 8 tags · 2 소스

누락 상태: hover, focus-visible, disabled

Link

Inline anchor with thick yellow underline highlight that flips to ink on hover.

html

Hand-tuned CSS, no framework

0 props · 4 states · 3 tags · 2 소스

누락 상태: disabled

Hero

Marketing hero on paper with chunky kicker tag, oversized headline, paragraph, and dual CTAs.

html

Hand-tuned CSS, no framework

0 props · 1 states · 8 tags · 2 소스

누락 상태: hover, focus-visible, disabled

Nav

Top navigation bar with chunky logo block, link rail, and primary action button.

html

Hand-tuned CSS, no framework

0 props · 3 states · 7 tags · 2 소스

누락 상태: disabled

Footer

Footer slab with mono columns and a chunky signature row.

html

Hand-tuned CSS, no framework

0 props · 1 states · 7 tags · 2 소스

누락 상태: hover, focus-visible, disabled

Stat

Compact stat tile with mono label, oversized number, and colored accent strip.

html

Hand-tuned CSS, no framework

0 props · 1 states · 7 tags · 2 소스

누락 상태: hover, focus-visible, disabled

PixelTag

Signature mono pill tag with hard shadow — used for category, version, and meta annotations.

html

Hand-tuned CSS, no framework

0 props · 2 states · 9 tags · 2 소스

누락 상태: focus-visible, disabled

BlockTile

Square category tile with chunky icon glyph, label, and count. Tiles stack into a grid mosaic.

html

Hand-tuned CSS, no framework

0 props · 2 states · 9 tags · 2 소스

누락 상태: focus-visible, disabled

BigStat

Hero-sized vanity number on a colored slab with mono caption — for landing-page proof bars.

html

Hand-tuned CSS, no framework

0 props · 1 states · 4 tags · 2 소스

누락 상태: hover, focus-visible, disabled

ChunkyCheckbox

Square checkbox with thick border and yellow check fill. Pairs with bold label.

html

Hand-tuned CSS, no framework

0 props · 5 states · 6 tags · 2 소스

누락 상태: error

DESIGN.md

Neobrutalism Bold Kit

Visual theme

Color

Primary #FDC800 (yellow) — single hero CTA per view, the kicker on the headline.
Secondary #432DD7 (indigo) — navigation actions and secondary buttons.
Success #16A34A, Warning #D97706, Danger #DC2626 — used as solid fills, never tinted.
Surface / Neutral #FBFBF9 — paper canvas behind everything; cards keep this fill.
Text #1C293C — body copy and the only border color the system allows.

Favor solid blocks of color over translucency. Gradients, mesh fills, glassmorphism, and soft drop shadows are forbidden.

Typography

Scale 13 / 15 / 17 / 21 / 27 / 35 (px).
Families Inter (display + body) at weights 700–900 for headings, 500–700 for body. Mono is JetBrains Mono — used aggressively for labels, kickers, footer headings, badges, and any meta caption.
Headings carry the personality: tight tracking, near-black weight, occasional inline .nb-mark highlight wrapped in a yellow chunk.
Body text optimizes for scanability — bold weight, generous size, no italics for emphasis.

Spacing & grid

Spacing scale 4 / 8 / 12 / 16 / 24 / 32. Vertical rhythm is consistent across components.
Borders are 2px (small chips), 3px (default), or 4px (heavy slabs). Hard offset shadows are 4 / 5 / 6 / 8 px and always solid #1C293C (or the danger red for error states).
Radius is 4px max. No pill shapes, no full circles outside icon glyphs.

Layout & composition

Voice

어댑터 (6)

adapters/tokens.css
text/css
다운로드
adapters/shadcn-registry.json
application/json
다운로드
adapters/tailwind.config.js
text/javascript
다운로드
adapters/react/index.ts
text/typescript
다운로드
adapters/html/index.html
text/html
다운로드
adapters/html/styles.css
text/css
다운로드

전체 파일 (11)

DESIGN.mdtext/markdown
SKILL.mdtext/markdown
tokens/colors.jsonapplication/json
tokens/typography.jsonapplication/json
tokens/components.jsonapplication/json
adapters/tokens.csstext/css
adapters/shadcn-registry.jsonapplication/json
adapters/tailwind.config.jstext/javascript
adapters/react/index.tstext/typescript
adapters/html/index.htmltext/html
adapters/html/styles.csstext/css

버전

v1.0.02026. 5. 8.
다운로드