디자인 시스템
Warm Brutalist 컴포넌트 미리보기. 모든 수치는 예시 데이터입니다.
버튼
주요·보조·고스트·위험 버튼. hover 는 애니메이션 없이 즉시 색만 바뀝니다.
입력
라벨, 도움말, 오류가 스크린리더와 연결됩니다.
최대 40자. 한글·이모지 등 자유롭게 사용할 수 있습니다.
3자 이상이어야 합니다.
0 / 5,000
선택 컨트롤
실제 checkbox/radio 의미론을 유지한 네모형 커스텀 외형.
선택기
셀렉트·날짜·색상·파일 선택기. 브라우저 기본 외형을 쓰지 않습니다.
옵션
날짜 선택
첨부 파일
파일을 끌어다 놓거나
최대 5MB
상태와 알림
아이콘과 텍스트로 상태를 전달합니다(색상 단독 의존 금지).
저장되었습니다.
예시 텍스트
문제가 발생했습니다
요청을 처리하지 못했습니다. 잠시 후 다시 시도하세요.
설치 모드
아직 제공되지 않는 기능입니다
아직 내용이 없습니다
접근 권한이 없습니다
문제가 발생했습니다
모달과 툴팁
focus trap, Esc, focus 복원, 스크롤 잠금.
korscripterdev@korscripterdev
예시 텍스트 1
통계 카드
숫자도 Pretendard 로 표시합니다.
VISITORS · 예시 데이터12,840+12.8%
PAGE VIEWS · 예시 데이터38,210
타이포그래피
일반 UI 는 Pretendard, 코드 영역만 JetBrains Mono.
좋은 디자인은 불필요한 장식보다 일관된 규칙에서 시작됩니다.
예시 텍스트 inline code — 한글 GitHub
const theme = "brutalist";
// 브랜드 색상을 적용합니다