neo-brutalism-ui

네오-브루탈리즘 UI (Neo-Brutalism UI)

인터페이스는 구조를 드러내고 그것에 대해 당당하게 말함으로써 신뢰를 얻습니다. 모든 테두리와 그림자는 명시된 사실이기 때문입니다.

평평하고 강렬한 색상 필드, 두꺼운 검은색 테두리, 그리고 흐림 효과 없는 단단한 오프셋 그림자. 이 스타일은 Gumroad와 같은 제품 사이트와 Figma 커뮤니티 키트에서 성장했으며, 기업의 부드러움에 대한 의도적인 반응입니다.

시대: 2020년–현재 · 시대 분류: 현대 & 공간적 · 영역: 그래픽 & UI 디자인 · 다른 이름: Neubrutalism (뉴브루탈리즘), Neobrutalism, 브루탈리스트 웹 UI

이 스킬을 로드해야 하는 경우

사용자가 다음과 같이 요청할 때 로드하세요: "neo-brutalism", "neubrutalism", "neobrutalist", "brutalist ui", "thick black borders", "hard shadow", "offset shadow", "gumroad style", "loud flat colours", "sticker style".

다음에 적합합니다: 크리에이터 이코노미 제품, 인디 SaaS 랜딩 페이지, 개발자 도구 사이트, 포트폴리오, 이벤트 및 축제 사이트.

다음과 같은 경우에는 사용하지 마세요:

• 브랜드가 조용한 고급스러움, 의료 케어 또는 은행 보안을 나타내야 하는 경우.
• 인터페이스가 복잡한 엔터프라이즈 도구인 경우. 3px 테두리와 4px 그림자는 모든 행에서 공간을 차지합니다.
• 대상 사용자가 OS 설정 화면과 같은 네이티브 플랫폼 룩을 기대하는 경우.

시스템 지시사항

네오-브루탈리즘 UI로 UI 또는 그래픽 레이아웃을 생성할 때 반드시 다음을 따라야 합니다:

1. 모든 카드, 버튼, 입력 필드 및 이미지 주위에 2px에서 4px 두께의 단색 #000000 테두리를 그립니다.
2. 모든 돌출된 요소에 블러가 없고 4px 4px 오프셋된 단일 하드 섀도우를 적용합니다. 예: 4px 4px 0 0 #000000.
3. 표면을 100% 불투명도의 평평하고 채도가 높은 색상으로 채우고, 한 페이지에 2~4개의 강렬한 색상을 사용합니다.
4. 호버 시 요소를 섀도우 오프셋만큼 이동시키고 섀도우를 0으로 만들어 페이지 안으로 눌러지는 것처럼 보이게 합니다.
5. 반경은 0px에서 8px 사이만 사용하고, 한 페이지의 모든 요소에 동일한 값을 사용합니다.
6. 제목은 700 이상의 두께를 가진 헤비 그로테스크(Grotesque) 또는 모노페이스(mono face)로 설정하고, 크기는 48px에서 96px 사이로 합니다.
7. 텍스트는 색상 필드 위에 검은색을 유지하고, 모든 채우기에서 최소 7:1 명암비를 달성합니다.

가드레일

아래 각 항목은 스타일을 위반합니다. 출력물을 반환하기 전에 목록과 비교하여 확인하세요.

• 절대 금지: 블러 반경이 0px를 초과하는 블러 처리된 드롭 섀도우.
• 절대 금지: 표면의 미묘한 회색 그라데이션 또는 광택 하이라이트.
• 절대 금지: 파스텔 톤, 낮은 채도의 채우기와 회색 텍스트.
• 절대 금지: 가는 1px 테두리 또는 검정색 이외의 색상 테두리.
• 절대 금지: 한 페이지에 혼합된 모서리 반경 (예: 카드에 4px, 버튼에 24px).
• 절대 금지: 반투명 또는 백드롭 블러(backdrop-blur) 패널.
• 절대 금지: 제목에 500 미만의 얇은 글꼴 두께.

벡터 프로필

축	점수	1점 의미	5점 의미
장식성	■■■□□ 3/5	순수 미니멀	맥시멀리스트
입체성	■■□□□ 2/5	엄격한 2D	완전한 3D / 공간적
그리드 경직성	■■■□□ 3/5	혼돈 / 유기적	엄격한 수학적 그리드
스큐어모픽 사실성	■□□□□ 1/5	추상 디지털	사실적 재질
타이포그래피 표현력	■■■■□ 4/5	중립 / 투명	실험적 / 삽화적

이 점수를 유지하십시오. 요청이 축을 2점 이상 이동시키면 스타일을 벗어난 것입니다: "계통 대체"로 이동하세요.

공간 및 그리드 로직

• 그리드 메커니즘: 24px에서 32px 거터(Gutter)를 가진 12열 그리드와 2, 3 또는 4열 블록에 위치하는 카드; 오프셋 섀도우는 4px에서 8px의 시각적 너비를 추가합니다.
• 여백 비율: 표면의 25–40%는 열려 있습니다; 간격 스케일은 8, 16, 24, 32, 48 및 64px이며, 카드는 24px 패딩을 가집니다.
• 정렬 규칙: 왼쪽 정렬 텍스트; 블록은 그리드 가장자리에 위치하며 스티커와 배지만 1~2도 기울임 허용; 섹션은 전체 너비의 3px 검은색 구분선으로 잘립니다.
• 컨테이너 지오메트리: 0px에서 8px 반경, 3px 검은색 테두리 및 4px 4px 0 0 #000000 그림자가 있는 직사각형; 알약(pill) 모양은 태그에만 999px 반경을 사용합니다.

타이포그래피

• 분류: 그로테스크 산스(Grotesque sans) · 모노스페이스(monospace) · 슬랩 세리프(Slab serif)
• 자간(Tracking): 디스플레이 크기는 -0.03em; 본문은 0 유지; 대문자 레이블은 +0.05em.
• 행간(Leading): 디스플레이 1.0~1.1; 본문 1.5; 레이블 1.2.
• 계층 규칙:
  • 제목에는 700 또는 800 두께, 본문에는 400 또는 500 사용; 가는 두께는 사용하지 마십시오.
  • 제목은 48px에서 96px, 본문은 16px에서 18px로 설정하여 약 3:1 이상의 비율을 유지합니다.
  • 버튼과 레이블은 14px의 굵은 대문자로 +0.05em 자간을 적용합니다.
  • 헤드라인의 핵심 단어는 3px 검은색 테두리가 있는 컬러 하이라이트 블록에 넣습니다.

글꼴 페어링

디스플레이	본문	참고
Space Grotesk	DM Sans	평범한 텍스트 얼굴 위의 독특한 그로테스크 헤드라인.
Archivo Black	Work Sans	큰 제목을 위한 헤비 포스터 두께 디스플레이.
Bricolage Grotesque	Inter	중립적인 본문과 함께하는 좁고 대비가 높은 디스플레이.
Space Mono	Space Grotesk	원시적이고 기술적인 목소리를 위한 모노스페이스 레이블.

색상 및 조명

• 팔레트 구조: 검은색 외곽선, 따뜻한 오프 화이트 또는 노란색 배경, 그리고 분홍색, 파란색, 녹색과 같은 2~4개의 강렬한 평탄한 색상으로, 각각 100% 불투명도로 큰 블록에 사용됩니다.
• 명암비 규칙: 모든 강렬한 채우기 위의 검은색 텍스트는 최소 7:1 명암비를 달성해야 합니다 (예: Lemon 위 15:1, Electric Blue 위 7:1); 흰색 텍스트는 검은색 채우기 위에서만 허용됩니다; 3px 검은색 테두리는 각 컨트롤에 21:1의 가장자리를 제공합니다.
• 표면 처리: 그라데이션, 텍스처, 투명도 없이 100% 불투명도의 평평하고 불투명한 필드; 페이지 배경에 8% 검은색의 선택적 도트 또는 그리드 패턴.
• 빛과 그림자: 광원이 시뮬레이션되지 않습니다; 4px 4px 0 0 #000000의 하드 오프셋 섀도우가 오른쪽 아래로 떨어지며 블러는 0이고 외곽선 확장처럼 작동합니다.

팔레트

이름	16진수	역할
Ink (잉크)	#000000	테두리, 그림자 및 텍스트
Cream (크림)	#FFF8E7	페이지 배경
Lemon (레몬)	#FFE14D	하이라이트 및 기본 채우기
Hot Pink (핫핑크)	#FF5DA2	강조 채우기
Electric Blue (일렉트릭 블루)	#4D7CFF	보조 강조
Mint (민트)	#6EE7B7	성공 및 태그 채우기
White (흰색)	#FFFFFF	카드 표면

재질 및 텍스처

• 표면 시뮬레이션: 없음; 표면은 검은색 외곽선과 하드 드롭이 있는 평평한 절단 종이 또는 스티커 재질이며 실제 재료를 모방하지 않습니다.
• 테두리 규칙: 작은 컨트롤에 2px, 카드에 3px, 히어로 블록에 4px의 단색 #000000 테두리; 테두리 색상은 상태 간에 절대 변경되지 않습니다.
• 블러 및 입체감: 블러는 모든 곳에서 0px입니다; 입체감은 섀도우 오프셋입니다: 태그에 2px 2px, 카드와 버튼에 4px 4px, 모달에 8px 8px, 모두 #000000.

장식 및 아이콘그래피

• 아이콘그래피: 2.5px에서 3px 스트로크와 정사각형 또는 원형 캡(Cap)을 가진 대담한 아이콘, 24px 크기, 검은색, 종종 2px 테두리가 있는 색상 원 안에 위치.
• 일러스트레이션: 두꺼운 검은색 외곽선이 있는 강렬한 팔레트의 평면 일러스트레이션, 스티커, 별 및 화살표 포함; 손으로 그린 듯한 표시도 환영합니다.
• 장식 요소: 스티커 및 배지 · 마키 텍스트 밴드(Marquee text bands) · 별 폭발(Starbursts) · 도트 그리드 배경 · 화살표 및 밑줄 스크리블

모션 및 상호작용

• 스크린 기반: 예
• 전환 물리: 요소가 호버와 프레스 시 정확히 섀도우 오프셋만큼 이동하여 섀도우가 사라지는 것처럼 보입니다; 이동은 짧고 선형적으로 느껴지며 오버슈트가 없습니다.
• 이징: cubic-bezier(0.2, 0, 0, 1)
• 지속 시간 (ms): 120
• 호버 및 활성: 호버는 요소를 오른쪽으로 4px, 아래로 4px 이동시키고 섀도우를 0 0 0 0으로 설정합니다; 활성은 그 위치를 유지합니다; 포커스는 2px 오프셋된 3px solid #4D7CFF 외곽선을 추가합니다.

코드 및 토큰 기본 정보

루트 요소에 data-style="neo-brutalism-ui"를 설정하고 토큰을 붙여넣으십시오. 파일 tokens.css에는 동일한 토큰과 참조 규칙 세트가 있습니다.

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Tailwind 패턴:

요소	클래스
페이지	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
카드	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
버튼	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
입력	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
제목	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
태그	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

시각 팩

이 스타일의 그림과 아이콘은 파일입니다. 있는 그대로 사용하거나 명세서로 읽고 동일한 언어로 직접 그리십시오.

파일	내용
pack/hero.svg	히어로 플레이트, 800x600. 스타일의 시각적 언어로 된 추상 그림.
pack/pattern.svg	패턴 타일, 80x80. 양방향으로 반복됩니다.
pack/icons.svg	아이콘 스프라이트: home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• 아이콘: 외곽선, 24px 필드에서 스트로크 2.5, 정사각형 캡, 마이터 조인, 컨테이너: 정사각형. 사용법: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. 아이콘은 currentColor를 사용합니다.
• 아이콘 패밀리: 스프라이트는 Phosphor Icons의 Phosphor (Bold)에서 잘랐으며, 라이선스는 MIT입니다. 이유: 두꺼운 테두리와 일치하는 무딘 무게의 헤비 라인. 데모용 오픈 소스 대체재입니다. 제품의 경우 브랜드의 아이콘 라이브러리를 사용하고 아래 규칙에 따라 패밀리를 선택하십시오.
• 디스플레이 유형: 무게 700, 자간 -0.03em, 행간 0.95, 대소문자: 없음.
• 무게: 디스플레이 700, 부제목 700, 본문 500, 텍스트 내 볼드 700, 레이블 및 버튼 700. 스타일은 2가지 무게(500, 700)만 사용하며 그 외는 없습니다. 디스플레이는 본문보다 200 더 무겁습니다. 강조는 무게입니다: 더 무거운 단어가 강조이므로 무게 단계 간의 차이가 명확합니다.
• 본문 유형: 17px, 행간 1.5.
• 페이지: 히어로 분할, 왼쪽 정렬, 컴팩트 밀도, 강조 기울기 -1°.
• 텍스트 색상: --color-text는 기본 읽기 필드에만 사용됩니다. 각 필드에서 해당 토큰을 사용하세요: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

아이콘 팩 선택 방법

아이콘 팩은 그림을 위한 서체입니다. 텍스트 서체와 동일한 주의를 기울여 선택하십시오. 이 규칙은 오픈 소스 세트와 라이선스 라이브러리 모두에 적용됩니다.

1. 획이 자루(Stem)와 일치합니다. 텍스트 크기에서 본문 텍스트 옆에 아이콘을 배치하십시오. 아이콘의 선과 글자의 자루는 동일한 두께를 가져야 합니다.
2. 끝부분과 모서리는 반경 토큰을 따릅니다. 버트 캡(Butt caps)과 마이터 조인은 반경이 0인 경우에 사용됩니다. 라운드 캡과 라운드 조인은 부드러운 반경과 함께 사용됩니다.
3. 채우기 모드는 시대의 기술을 따릅니다. 인쇄 시대는 단단한 형태를 잘라냅니다. 깊이가 있는 화면 시대는 형태를 채우고 음영을 줍니다. 현재 제품 인터페이스는 외곽선을 그립니다.
4. 은유는 스타일보다 젊지 않습니다. 각 그림은 시대가 알고 있던 대상입니다. 이후 시대의 은유를 가진 아이콘은 시대성을 깨뜨립니다.
5. 하나의 패밀리, 하나의 그리드. 모든 아이콘은 하나의 패밀리와 하나의 변형에서 나와야 하며, 하나의 필드에 그려집니다. 하나의 표면에 패밀리를 혼합하지 마십시오.
6. 패밀리가 제품을 포괄합니다. 확정하기 전에 제품에 필요한 각 개념을 나열하십시오. 그중 하나에 대한 아이콘이 없는 패밀리는 잘못된 패밀리입니다.
7. 색상은 토큰입니다. 아이콘은 currentColor를 사용합니다. 두 번째 톤은 파일이 아닌 토큰에서 가져옵니다.
8. 라이선스가 사용을 허용합니다. 세트의 라이선스를 읽으십시오. 라이선스가 요구하는 곳에 크레딧을 표시하십시오. 브랜드가 있는 제품은 라이선스가 있는 라이브러리를 사용하고 동일한 규칙을 적용하여 패밀리를 선택합니다.

계통 대체

사용자가 변형을 요청하면 즉흥적으로 대응하지 마십시오. 여기에 명명된 이웃 스타일 쪽으로 혼합하고 해당 스킬을 로드하십시오.

• 사용자가 더 차분한 스타일을 요청하는 경우: flat-design (플랫 디자인) 쪽으로 이동하십시오. 테두리를 1px로 줄이고, 오프셋 섀도우를 제거하고, 채우기의 채도를 60%로 낮추십시오; 평면 필드와 그리드는 유지하십시오.

• 사용자가 더 질서 정연한 스타일을 요청하는 경우: swiss-international (스위스 국제 스타일) 쪽으로 이동하십시오. 팔레트를 검정, 흰색 및 하나의 빨간색으로 줄이고, 12열 그리드에 0px 반경과 왼쪽 정렬 텍스트를 설정하십시오; 2px 구분선은 유지하십시오.

• 사용자가 더 앱 같은 스타일을 요청하는 경우: bento-grid-ui (벤토 그리드 UI) 쪽으로 이동하십시오. 16px 간격으로 혼합 크기 셀의 직사각형 그리드에 콘텐츠를 채우십시오; 3px 테두리와 하드 섀도우는 유지하십시오.

• 사용자가 더 정교한 스타일을 요청하는 경우: material-design (머티리얼 디자인) 쪽으로 이동하십시오. 8px 반경, 1px 테두리 및 0 2px 4px rgba(0, 0, 0, 0.2)의 부드러운 그림자로 이동하십시오; 하나의 강렬한 강조 색상은 유지하십시오.

• 유래 (더 정통적인 버전을 원한다면 여기로 가십시오): flat-design

• 반대 (반대 극점; 혼합하지 마십시오): corporate-memphis