Blackstar IP — Killer Car

Design System & Style Guide

개발자용 재사용 스타일 패키지. <link rel="stylesheet" href="styles.css"> 하나만 링크하면 아래 모든 토큰과 컴포넌트를 쓸 수 있습니다. body에 class="kc-page kc-texture", 페이지 컨테이너에 class="kc-frame"을 부여하세요. 적용 예시는 example.html 참고.

1. Colors

모든 색은 CSS 변수로만 사용합니다. 임의의 hex 값 사용 금지.

--kc-ink
#33322C · 글자/강한 선
--kc-text-soft
#5A574E · 보조 본문
--kc-muted
#8B877A · 라벨/비활성
--kc-line
#B9B5A6 · 약한 구분선
--kc-paper
#F6F4EC · 종이 배경
--kc-paper-dim
#EFEDE1 · 네비 배경
--kc-paper-hover
#ECE9DB · hover 배경
--kc-desk
#ECEAE0 · 바깥 배경
--kc-accent
#5C79BC · 브랜드 블루
--kc-accent-strong
#4A66A8 · hover
--kc-red
#B5493B · 위험/도장/미커버
--kc-gold
#C8A030 · 경고/부분 커버
--kc-green
#5B7F4E · 긍정/완전 커버
Rule강한 선은 --kc-border-strong(1.5px ink), 약한 구분선은 --kc-border(1px line). 표 바깥 테두리·섹션 경계는 강한 선, 행 구분은 약한 선.

2. Typography

서체는 Pretendard Variable 하나. 크기는 h1~h5 + 본문(12px), 총 6단계만 사용합니다.

H1 · 24px Bold — 페이지 제목

<h1> / var(--kc-text-h1)

H2 · 18px Bold — 큰 섹션 제목

<h2> / var(--kc-text-h2)

H3 · 15px Bold — 서브 섹션 제목

<h3> / var(--kc-text-h3)

H4 · 12px Bold — 카드/블록 제목

<h4> / var(--kc-text-h4)
H5 · 9px Caps — 오버라인 라벨
<h5> 또는 .kc-overline

Body · 12px / 행간 1.65 — 본문 기본. 등록 특허의 선행기술 문헌을 자동 발굴하고 Claim Chart를 생성합니다.

body / var(--kc-text-body)

3. Inline Text — Bold · Italic · Link · Mark

Sharing virtual memory — 본문 속 키워드 강조는 <b>: 잉크색 + 700. 키·값 나열 패턴은 「NUMA/CC-NUMA 시스템: SGI, Sequent 등 1990년대 특허」처럼 볼드 키 + 소프트 본문.

부가 설명·영문 병기는 <i>: The host performs mapping of the virtual memory…

액션 링크는 <a> 또는 .kc-link: Top 30 DOCX Download ↓ · ← 목록 (기본 블루, hover 시 잉크색)

하이라이트는 <mark>: 청구항 1의 modify the least significant bits 한정이 핵심 쟁점.

Rule밑줄 금지(링크 포함). 색만으로 링크를 구분. 볼드는 문장당 1회 이내.

4. Lists — Bullets

  • 비순서 목록은 5px 사각 불릿
  • 볼드 키 + 설명 조합 가능
  • 행간 1.65, 항목 간 4px
  1. 순서 목록은 볼드 회색 숫자
  2. 절차·단계 설명에 사용
  3. 마커는 --kc-muted

<ul> 사각 불릿 · <ol> 숫자. 스타일 자동 적용, 클래스 불필요.

5. Buttons

New
Rule.kc-btn--primary 주요 액션(화면당 1개) · .kc-btn--caps 네비 소형(높이 28px 고정, 대문자+자간) · .kc-pill 탭 줄 액션 · .kc-btn--block 가로 채움. hover는 항상 잉크 배경 + 종이색 글자 반전.

6. Folder Tabs

New US11741019B2 US9041007 US6926544 US8854595
Rule.kc-tabs 컨테이너 + .kc-tab, 활성 탭에 .is-active. ① 사선(±8deg skew)·둥근 상단(9px)은 ::before/::after 자동 ② 탭끼리 14px 겹침(.kc-tab + .kc-tab) ③ 활성 탭이 맨 위(z-index 3) + 종이색 배경 + 하단 테두리 제거로 본문과 연결 ④ 활성 탭에만 넓은 2중 drop-shadow, 아래쪽은 clip-path로 잘라 위·옆으로만.

7. Tooltip

Killer Car (hover)We kill patents. Queen Bee (hover)준비중입니다

부모에 .kc-tip(position:relative 포함) + 자식 .kc-tip__bubble. 잉크 배경, 위쪽 화살표, hover 시 0.05s 지연 후 페이드인.

8. Tables (장부형)

8a. 기본 — 목록/데이터
No.프로젝트명특허번호상태Filed
01testTop N 완료2026. 7. 7.
02us11741019분석 완료2026. 6. 28.
8b. Heat Map — 커버리지 기호
ElemClaim (원문)Gao
US2015..
Chen
US2015..
Wolrich
US2016..
1.1A method comprising: sharing, by a first processor…
1.2wherein the virtual memory is mapped…

기호: 완전 커버(green) · 부분(gold) · 미커버(red) — .kc-sym--full/--part/--none

Rule헤더: 9px 대문자 자간 라벨 + 아래 1px 잉크 선. 행 구분·셀 세로선은 1px --kc-line. 첫 열은 왼쪽 세로선 없이 페이지 여백(--kc-gutter)과 정렬. 셀 보조색 .is-muted .is-soft .is-link. 좁은 화면은 .kc-scroll-x로 감싸기. 2단 병렬 배치 시 컬럼 사이 세로선 없이 30px 여백.

9. Section Headers — Rule & Band

Top 30 Top 30 DOCX Download ↓
Claim Chart (US11741019B2) vs Gao Overall Coverage: 95%
Rule① Rule 헤더: 볼드 제목 ── 1px 선(flex:1) ── 우측 .kc-link 액션. 섹션 시작 기본형. ② .kc-band: 블루 배지 밴드 — 반복 블록(Claim Chart 카드 등)의 시작 표시, 우측 끝 값은 .kc-band__end.

10. Stamps & Seal & Coverage

진행 중 분석 완료 95% §102 85% §103 커버됨 기울임
blackstar ip12/07/2026approved
Rule.kc-stamp 2px 현재색 테두리, 배경 없음. 기본 파랑 · --red(§102/고난도) · --gold(§103/중간) · --green(긍정) · --tilt(-2deg). 커버리지 수치 배지도 동일 컴포넌트. 원형 승인 도장은 .kc-seal(7deg 기울임, 클릭 불가).

11. Pipeline Chips & Stepper

Pipeline 1,363 SerpAPI 수집 673 Pass 0 출력 30 최종 선별
특허 분석
청구항 정보 수집 및 선택
선행기술 탐색
후보 수집, 필터링, 스크리닝
3상세 분석
Claim Chart 생성
Rule칩은 .kc-chip(볼드 수치 + 라벨), 사이 화살표는 muted 텍스트 →. 스테퍼는 .kc-steps 3등분 그리드 > .kc-step, 상태 .is-done(블루 채움 번호) / .is-current(블루 틴트 배경).

12. Form · Checkbox · Notice

⚠ 본 분석은 AI 생성 초안으로 법적 의견이 아닙니다.
Rule.kc-field > .kc-label(9px caps) + .kc-input(1.5px 잉크 테두리, focus 시 블루 아웃라인). 체크 목록은 .kc-check + .is-checked(블루 채움 박스 + 틴트 배경). 법적 고지·경고는 .kc-notice(골드 테두리 + 틴트).

13. Modal

.kc-modal-backdrop(잉크 25% + blur 6px) > .kc-modal(오프셋 하드 섀도) · __head __close __foot. 푸터 버튼 순서: 취소(외곽) → 확인(primary).

14. Behavior Patterns

15. Assets & Logo

로고는 PNG를 마스크로 사용해 단색으로 렌더: .kc-logo--logo:url(...)과 크기 지정. 색 변경은 .kc-logo--accent 또는 background 재정의. 파일: assets/killercars-wordmark.png, assets/blackstar-logo-horizontal.png, assets/blackstar-logo-stacked.png