kennedys0/taste-style-neo-brutalism

이 스킬은 사용자가 명시적으로 선택하거나 확인된 프로젝트 구성에서 지정한 경우에만 사용합니다. 설명되지 않은 새로운 UI 요청이 있을 경우, 여기서 사용자의 취향을 결정하는 대신 스타일 선택기(예: 스타일 선택기)를 사용하세요. 기존 브랜드, 접근성 및 사용자 재정의는 아래 모든 예시보다 우선합니다. 다음 스타일 가이드는 스타일 선택 전에 UI 코딩을 시작할 수 있는 권한이 아닙니다.

스타일 팩: 네오-브루탈리즘

ID: neo-brutalism 시그니처: 플레이풀한 볼드 색상, 고대비 검은색 테두리, 흐림 없는 하드 오프셋 그림자, 촉각적인 기계식 프레스 피드백.

이것은 필수 기본값이 아닌 스타일 팩입니다. 명시적 선택 또는 확인된 프로젝트 스타일 이후에만 로드하세요. 프로젝트 지침은 개별 선택을 재정의할 수 있습니다. 접근성, 유용성 및 브랜드 제약 조건을 유지하세요. 글꼴은 필수 종속성이 아닌 제안 사항입니다. 둥근 모서리와 부드러운 흐림 드롭 섀도우가 있는 플랫 카드는 네오-브루탈리즘으로 간주되지 않습니다.

적합성 및 트레이드오프

• 다음에 적합: 크리에이터 도구, 장난기 있는 B2B SaaS, 현대적인 개발자 포털, 해커톤/이벤트 플랫폼, 인디 제품 웹사이트, 독특한 개성을 요구하는 마케팅 페이지.
• 다음에 주의: 공식 금융 보고 또는 엔터프라이즈 법률 워크플로우 (에너제틱하고 비전통적인 대상을 위해 특별히 브랜딩되지 않은 경우).
• 참고 방향:
  • 라이트 팝 캔버스: 선명한 크림색 또는 따뜻한 종이 베이스 (#FFFDF7 / #F4F0EA)와 고대비 검은색 획 (#121212), 전기적인 악센트 채움 (선명한 노랑 #FFDE59, 강렬한 사이언 #4DEEEA, 코랄 #FF5E5B), 선명한 흐림 없는 드롭 섀도우 (5px 5px 0 #121212).
  • 다크 팝 대비: 진한 잉크 캔버스 (#18181B)와 선명한 흰색 테두리 (2.5px solid #FAFAFA), 선명한 라임/바이올렛 악센트, 흰색/악센트 오프셋 그림자 (4px 4px 0 #FAFAFA).

네오-브루탈리스트 재질 충실도 게이트 — 필수

네오-브루탈리스트 페이지를 완료했다고 부르기 전에, 열리는 뷰포트가 진정한 네오-브루탈리스트 구성으로 시각적으로 읽혀야 합니다. 사용자가 이 스타일을 선택했다면, 미묘한 border-radius와 표준 흐림 그림자가 있는 일반 카드는 실패입니다. CSS 클래스에 neo가 포함되어 있더라도 마찬가지입니다.

성공적인 네오-브루탈리스트 구현은 다음 모든 것을 입증해야 합니다:

1. 고대비 솔리드 외곽선: 핵심 컨테이너, 클릭 가능한 버튼, 입력 필드, 배지는 선명한 솔리드 테두리 (2px–3px solid #121212)를 특징으로 합니다. 희미한 회색 헤어라인 획은 없습니다.
2. 하드(흐림 없는) 오프셋 그림자: 표면은 날카롭고 0-블러 방향성 드롭 섀도우를 투사합니다 (컨트롤의 경우 4px 4px 0 #121212, 카드의 경우 6px 6px 0 #121212 ~ 8px 8px 0 #121212). 부드러운 흐림 그림자는 직접적인 실패입니다.
3. 기계식 프레스 붕괴: :active 또는 클릭 시, 대화형 버튼은 그림자 축을 따라 물리적으로 눌립니다 (transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;). 명확한 촉각적 기계식 피드백을 제공합니다.
4. 생생하고 의도적인 컬러 블로킹: 균형 잡힌 고대비 팔레트: 1개의 캔버스 베이스 + 1개의 선명한 잉크 색상 + 기본 작업 및 의미 그룹화에 사용되는 1–2개의 목적 있는 채도 악센트.
5. 볼드한 비대칭 타이포그래피 구조: 자신감 있는 그로테스크 또는 기하학적 타이포그래피, 빡빡한 줄 높이, 거대한 디스플레이 제목과 읽기 쉬운 본문 텍스트 사이의 명확한 대비.

첫 뷰포트 테스트: 데스크톱 스크린샷에서 페이지 제목을 읽지 않고 두꺼운 검은색 외곽선, 하드 0-블러 오프셋 그림자, 촉각적인 버튼 상태를 식별하세요. 표준 플랫 SaaS 레이아웃처럼 보인다면, 진행하기 전에 테두리 및 그림자 토큰을 수정하세요.

명시적 네오-브루탈리스트 하드-섀도우 예외 — 그림자는 날카로워도 됨

네오-브루탈리즘 특정 재정의: 과도한 장식이나 산만한 그림자에 대한 보편적인 안티-슬롭 주의 사항은 여기서 하드 오프셋 그림자나 검은색 외곽선을 금지하는 것으로 해석되어서는 안 됩니다. 이것들은 재질을 가능하게 하는 속성이며, 네오-브루탈리스트 물리학과 시각적 명확성에 필수적입니다.

• 허용된 재질 처리: 솔리드 0-블러 오프셋 그림자 (4px 4px 0 #000), 2–3px 검은색 테두리, 배지 회전 (배지에만 -2° ~ +2° 사이), 고대비 컬러 알약.
• 색상 대비 규율: 생생한 악센트 배경 (노랑, 사이언, 라임, 코랄)에 배치된 모든 텍스트는 검은색 잉크 (#121212)에 대해 테스트되어 WCAG AA (4.5:1)를 초과해야 합니다. 순수 흰색 텍스트는 어두운 잉크 채움을 위해서만 엄격히 사용됩니다.
• 안티-슬롭 해석: 네오-브루탈리스트 요소는 어포던스, 레이아웃 구조 및 가독성으로 평가하며, 하드 섀도우 수로 평가하지 않습니다. 일반적인 최소 휴리스틱을 만족시키기 위해 하드 오프셋 그림자를 제거하는 것은 디자인 퇴보입니다.

타이포그래피 및 타자

표현력 있고 자신감 있는 그로테스크 산세리프: Space Grotesk, Archivo, Syne 또는 시스템 산세리프. 제목 36–56 px 데스크톱 / 28–40 px 모바일; 두께 700–800. 본문 텍스트 15–17 px, 두께 400–500; 줄 높이 1.45–1.55. 섹션 인덱스 및 메타데이터는 대문자 추적 (letter-spacing: 0.05em)을 사용할 수 있습니다. 텅 빈 슬로건 없는 강력하고 인간적인 마이크로카피.

색상 방향

• 라이트 모드 (펀치 팝 라이트):
  • 캔버스 베이스: 오프 화이트 / 라이트 크림 (#FFFDF7 또는 #F7F5F0).
  • 카드 배경: 순수 흰색 (#FFFFFF) 또는 밝은 색조 블록.
  • 잉크 / 획: 제트 블랙 (#121212).
  • 오프셋 그림자: 솔리드 블랙 (4px 4px 0 #121212).
• 다크 모드 (다크 팝 대비):
  • 캔버스 베이스: 진한 잉크 캔버스 (#18181B).
  • 카드 배경: 높은 다크 차콜 (#222227) 또는 딥 슬레이트 (#27272A).
  • 잉크 / 획: 선명한 흰색 / 크림 (#FAFAFA).
  • 오프셋 그림자: 선명한 흰색 또는 생생한 악센트 (4px 4px 0 #FAFAFA 또는 4px 4px 0 var(--taste-neo-accent-primary)).
• 기본 악센트: 생생한 팝 색상 (예: 일렉트릭 옐로우 #FFE600, 핫 코랄 #FF5757, 또는 로열 코발트 #3B5BFF).
• 보조 악센트: 보색 대비 (예: 크리스피 민트 #00F0A8 또는 라일락 팝 #D8B4FE).
• 테마 결합 및 충돌 방지 규칙: 다크 모드에서 테두리와 오프셋 그림자는 반드시 밝은/흰색 또는 밝은 악센트로 전환되어야 합니다. 어두운 캔버스에 검은색 테두리와 검은색 그림자를 남기면 깊이와 대비가 완전히 손실됩니다 (검정 위에 검정). 생생한 악센트 배경 (노랑, 사이언, 라임, 코랄)의 모든 텍스트는 검은색 잉크 (#121212)에 대해 테스트되어 WCAG AA (4.5:1)를 초과해야 합니다. 순수 흰색 텍스트는 어두운 잉크 채움을 위해서만 엄격히 사용됩니다.

레이아웃 및 기하학

모서리는 정사각형이거나 미묘하게 둥글게 (0px–8px 최대); 넉넉한 패딩 (카드에 20px–32px); 2px–3px 솔리드 테두리; 4px–8px 하드 오프셋 그림자. 간격은 단단한 8px 그리드를 사용합니다. 레이아웃은 안정적이고 강력하며 자신감 있어야 합니다.

표면, 깊이, 질감

표면은 깨끗하고 불투명하며 단단합니다:

• 버튼 (올림): background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212;
• 버튼 (활성/눌림): transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;
• 카드 및 패널: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212;
• 입력 필드: background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212; (포커스 시 조여짐).

컴포넌트 구조 및 상호작용

• 기본 동작 (CTA): 볼드한 컬러 알약/직사각형, 하드 오프셋 그림자, 두꺼운 획, 촉각적인 클릭 눌림.
• 보조 동작: 흰색 또는 투명 채움에 검은색 테두리, 반전 호버 효과 (background: #121212; color: #FFFFFF;).
• 폼 컨트롤: 선명한 레이블이 있는 외곽선 입력 상자, 컬러 오프셋 글로우 또는 깊어진 획으로 구별되는 포커스 상태.
• 상태 배지 / 태그: 2px 획이 있는 고대비 알약, 미묘한 2px 오프셋 그림자, 짧고 구체적인 레이블.
• 카드: 카드 헤더, 본문 및 동작 바닥글을 구분하는 선명한 구분선 (border-bottom: 2px solid #121212).

모션

100–160 ms의 선명한 선형 또는 이즈-아웃 전환. 누를 때 직접적인 1–2px 변위. 긴 탄력 있는 스프링, 플로트 루프 또는 만화 같은 진동을 절대 사용하지 마십시오.

선택적 Anime.js v4 레시피

• 모션 결정: 일치하는 하드 그림자 반응이 있는 짧고 직접적인 1–2px 버튼 이동; 거대한 그림자를 절대 애니메이션하지 마십시오.
• 시작 지속 시간: 130ms (0 = 즉시); 작업 및 사용자 선호도에 따라 조정.
• 피해야 할 것: 바운스 및 끝없이 움직이는 스티커.
• 종속성: 기본적으로 CSS/네이티브. 요청된 상호작용이 정당화하는 경우에만 Anime.js v4를 사용하십시오. 가능한 경우 Taste Engine references/motion-engine.md를 따르십시오; 독립 실행형 스킬은 위의 축소-모션 및 비장식-루프 원칙을 따릅니다.

UI 작성 및 마이크로카피

에너제틱하고, 평이하고, 직접적입니다. 예시: “Start building”, “Get code”, “Copied to clipboard”. 프로덕션 도구에서 기업 관료 용어나 귀여운 밈 텍스트를 피하십시오.

스타터 토큰 (제안 사항, 완전한 테마가 아님)

토큰	라이트 모드 기본값	다크 모드 기본값
--taste-neo-bg	#fffdf7	#18181b
--taste-neo-card-bg	#ffffff	#222227
--taste-neo-ink	#121212	#fafafa
--taste-neo-border	2.5px solid #121212	2.5px solid #fafafa
--taste-neo-shadow-sm	3px 3px 0 #121212	3px 3px 0 #fafafa
--taste-neo-shadow-md	5px 5px 0 #121212	5px 5px 0 #fafafa
--taste-neo-shadow-lg	8px 8px 0 #121212	8px 8px 0 #fafafa
--taste-neo-accent-primary	#ffe600	#ffe600
--taste-neo-accent-secondary	#ff5757	#ff5757
--taste-neo-radius	6px	6px
--taste-neo-font-body	Space Grotesk, Archivo, system-ui, sans-serif	Space Grotesk, Archivo, system-ui, sans-serif
--taste-neo-motion-duration	130ms	130ms

토큰은 방향을 나타내며 모든 팔레트/플랫폼에 대해 복사-붙여넣기로 보장되지 않습니다. 프로젝트 수준에서 --taste-neo-*를 정의하고, 색상 대비를 확인하고, 리터럴 값을 흩뿌리는 대신 테마 토큰을 통해 조정하십시오.

히어로 구성 (전체 첫 뷰포트)

공개 포트폴리오/랜딩/홈페이지에 히어로가 있는 경우: 한 화면에 보이는 헤더+히어로 구성을 사용하십시오. 기본 높이는 100vh 폴백이 있는 min-height: 100svh로 설정하고, 헤더가 일반 흐름일 때만 실제 헤더를 뺍니다; 접근성과 짧은 모바일 화면을 위해 히어로가 확장되도록 합니다. 개인 대시보드나 다른 작업 화면에는 적용하지 마십시오; 직접적인 사용자 재정의가 우선합니다. 스타일별 방향: 볼드한 비대칭 블록, 잘 배치된 디스플레이 타이포그래피 및 하나의 고대비 기본 동작을 통해 전체 뷰포트를 에너제틱하게 만드십시오. 두꺼운 테두리와 오프셋 그림자는 의도적으로 유지됩니다; 화면을 채우기 위해 스티커, 추가 외곽선 상자 또는 회전하는 장식을 쌓지 마십시오. 존재하는 경우 라우터 references/hero-layout.md를 참조하십시오. 독립 실행형 사용은 동일한 반응형 및 안티-슬롭 원칙을 따릅니다.

스타일별 품질 게이트

• 할 것: 하드 흐림 없는 오프셋 그림자 확인; 2–3px 솔리드 테두리 유지; 촉각적 누름 변위 테스트; 채도 높은 악센트(검은색 잉크 on 노랑/사이언/민트)에 대한 텍스트 대비 확인; 다크/라이트 모드 전환을 확인하여 테두리, 오프셋 그림자 및 잉크가 적절히 반전되고 어두운 바탕에서 절대 사라지지 않도록 합니다.
• 하지 말 것: 네오-브루탈리스트 그림자에 블러 또는 확산을 추가하지 마십시오; 음소거된 저대비 파스텔을 피하십시오; 노란색 또는 민트색 버튼에 순수 흰색 텍스트를 배치하지 마십시오; 어두운 캔버스에 검은색 테두리/그림자를 남기지 마십시오.
• 데스크톱 및 모바일 일관성 확인; 가시적인 키보드 포커스 (:focus-visible); 로딩, 빈, 비활성화, 오류 및 성공 상태; 축소-모션 동작 (prefers-reduced-motion).
• 스타일별 가정을 관련 없는 프로젝트에 주입하지 마십시오. 스타일을 결합할 때는 기본 스타일과 차용한 기능을 명시적으로 명명하십시오.

범용 안티-슬롭 게이트 (자체 포함)

모든 요소는 그 위치를 정당화해야 합니다. 장식보다 콘텐츠가 먼저입니다. 불확실성을 장식하지 마십시오. 잔액, 지표, 사용자 후기, 로고, 승인, 확인/라이브/온라인 상태, 가짜 활동 또는 성공 확인을 만들지 마십시오; 대신 정직한 빈/로딩/오류 상태를 사용하십시오. 데모 데이터는 요청되고 눈에 띄게 레이블이 지정된 경우에만 허용됩니다.

장식적인 카드-속-카드 레이어를 추가하지 마십시오: 중첩된 표면은 별개의 상호작용 또는 정보 경계를 나타내야 합니다. 자동 생성된 3-기능 그리드, 4-통계 대시보드, 가짜 히어로 주장, 목적 없는 차트, 배지/칩/아이콘 스팸, 관련 없는 장식 예술 및 단순히 뷰포트를 채우기 위한 무작위 루프를 피하십시오. 타이포그래피, 간격, 정렬 및 구분선을 사용한 그룹화를 선호하십시오. 동등한 동료는 의도적인 시각적 균형이 필요합니다.

안티-슬롭 카피라이팅: 일반적인 "잠재력을 발휘하세요", "미래를 경험하세요", "워크플로우를 강화하세요", "완벽한" 주장 또는 번역된 동등 표현은 사용하지 마십시오. 제목은 실제 콘텐츠를 전달해야 하고, CTA는 동작을 명명해야 하며, 빈/오류/성공 텍스트는 실제 상태와 다음 단계를 설명해야 합니다. 가짜 긴박감, 조작된 숫자, 모호한 AI 과대광고, 불필요한 이모지 및 접근할 수 없는 모두 대문자 벽을 피하십시오. 이 스타일과 사용자의 언어에 맞게 표현을 조정하되 진실을 변경하지 마십시오.

테마 및 모드 대비 무결성: 사용자가 다크 모드 또는 라이트 모드를 요청하거나 (테마 전환기를 구축할 때) 배경 및 전경 색상은 모든 표면, 텍스트, 테두리, 입력 및 의미론적 배지에 걸쳐 동기화된 쌍으로 전환되어야 합니다. 어두운 배경에 검은색 텍스트, 흰색 배경에 흰색 텍스트 또는 읽을 수 없는 저대비 상태 알약을 절대 남기지 마십시오. 모든 상태는 WCAG AA 대비 (본문/보통 텍스트의 경우 최소 4.5:1, 큰 제목 및 대화형 경계의 경우 3:1)를 충족해야 합니다.

반응형 및 모션: 모바일을 신중하게 구성하고, 긴 레이블, 포커스 상태 및 접근 가능한 대비를 확인하십시오; 유행하는 레이아웃에 맞추기 위해 텍스트가 잘리지 않도록 합니다. 기본적으로 정적; 의미 있는 상호작용에 모션을 사용하고, 축소-모션 기본 설정을 존중하며, 실제 상태 없이 바운스/플로팅/맥동 장식을 피하십시오.

중대/높음 발견 사항 블록 완료: 가짜 상태/데이터, 깨진 동작, 접근 불가능/잘린 컨트롤, 오해의 소지가 있는 카피, 테마 대비 충돌 또는 심각한 모바일 실패는 수정되어야 합니다. 실제로 확인된 것을 보고하십시오; 실행되지 않은 테스트를 주장하지 마십시오.

미학 거부권이 아님: 표현적인 색상, 그림자, 그라데이션, 카드 레이아웃 또는 ...