카드 및 테이블 행을 위한 1px solid #e5e7eb으로, 무거운 그림자 없이 미묘한 경계를 제공합니다
카드에는 보이는 그림자가 없으며, 구분을 위해 테이블에 의존합니다
06
레이아웃
1200container
12columns
24pxgutter
768 / 1024breakpoints
상단 내비게이션 바와 밀집된 탭ular 데이터를 포함한 콘텐츠 섹션이 쌓인 단일 칼럼 데이터 중심 레이아웃
07
모션과 인터랙션
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
색상, 배경, 테두리를 포함한 모든 인터랙티브 상태에 대한 균일한 150ms 전환
테이블 행 및 버튼과 같은 인터랙티브 요소의 미묘한 배경색 전환 · 즉각적인 시각적 피드백과 상태 변화, 커서 기본값은 포인터
08
컴포넌트
button9999px 반경의 필 모양, 미니멀한 테두리, 시맨틱 배경색
card1px 테두리와 4px 반경의 화이트 배경으로, 핵심 성과 지표를 포함합니다
chip티커 심볼 및 상태 표시용 컬러 배경(그린/레드/오렌지)
input상단 내비게이션에 있는 둥근 검색 입력란으로, 키보드 단축키 표시기가 있습니다
hero좌측 정렬된 대형 헤드라인, 보조 부제목, 그리고 아래의 지표 카드 그리드
09
보이스와 금지 목록
톤객관적이고 분석적이며 진지하며, 편집 편향 없이 원시 데이터 프레젠테이션에 중점을 둡니다
헤드라인데이터 범위 및 특정 지표에 대한 직접적이고 선언적인 진술
CTA'모두 보기 →' 및 'GitHub에서 스타하기'와 같은 기능적인 내비게이션 링크
무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 1px 테이블만으로 정의된 깔끔한 화이트 카드를 보여줍니다
중앙 정렬된 헤드라인을 사용하지 마세요 — 스크린샷은 전체적으로 엄격한 좌측 정렬 텍스트 계층을 보여줍니다
카드의 둥근 모서리를 사용하지 마세요 — 스크린샷은 데이터 컨테이너에 날카로운 4px 반경을 보여줍니다
세리프 타이포그래피를 사용하지 마세요 — 스크린샷은 모든 텍스트에 깔끔한 grotesque sans-serif 계열을 보여줍니다
화려한 그라데이션을 사용하지 마세요 — 스크린샷은 평면적인 중립 배경과 시맨틱 컬러 칩을 보여줍니다
복잡한 다중 칼럼 레이아웃을 사용하지 마세요 — 스크린샷은 선형적인 단일 칼럼 데이터 스트림을 보여줍니다
피하기: 마케팅 용어
피하기: 감정적 언어
피하기: 과장된 표현
피하기: 모호한 설명
11
System Prompt
이것은 의회 및 행정부 주식 거래를 추적하는 데이터 밀도 높은 오픈소스 시민 투명성 대시보드입니다. 중립적인 오프화이트 배경(#f4f5f8)과 선명한 화이트 서페이스, 어두운 차콜 텍스트(#23252a)를 사용합니다. 타이포그래피는 깔끔한 grotesque sans-serif(Inter)이며, 데이터용 보조 모노스페이스가 있습니다. 강조색은 엄격히 시맨틱합니다: 이익(#0f7b3f), 손실(#be2929), 경고용 오렌지. 핵심 제약 조건: 텍스트를 절대 중앙 정렬하지 않고, 장식적 그림자를 절대 사용하지 않으며, 항상 시각적 화려함보다 데이터 가독성을 우선시하며, 150ms 전환으로 상호작용을 절제합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
