BLACK ORKA

Internal · Visual System v0.2

VISUAL

시각 시스템의
살아있는 명세.

아래는 BLACK ORKA의 모든 시각 결정을 정의한다. 외주 디자이너 브리핑 시 본 페이지 + VISUAL.md를 송부한다.

Contents

  1. 01Color
  2. 02Typography
  3. 03Logo
  4. 04Grid & Spacing
  5. 05Iconography
  6. 06Motion
  7. 07Application
  8. 08RED TRIGGER

01 · Color

Pure black.
One accent.

검정 75%. 화이트 22%. 네이비 3% 이하.

--color-paper

Paper

#000000

메인 배경 · 75%

--color-paper-2

Paper-2

#0A0A0A

섹션 분리

--color-ink

Ink

#FFFFFF

본문 텍스트 · 22%

--color-navy

Navy

#0F1A3D

액센트 · 1-2회/페이지

PAPER

rgb(0, 0, 0)

hsl(0, 0%, 0%)

PAPER-2

rgb(10, 10, 10)

hsl(0, 0%, 4%)

INK

rgb(255, 255, 255)

hsl(0, 0%, 100%)

NAVY

rgb(15, 26, 61)

hsl(225, 60%, 15%)

사용 비율

75% · PAPER
22% · INK
← 3% NAVY

Gray Scale · 다크 위 가독성

orka-300

#2A2A2A

보더, 분리선

orka-400

#3A3A3A

강조 보더

orka-500

#6B6B6B

캡션, 메타

orka-700

#9A9A98

본문 보조

orka-900

#D4D4D2

본문 강조

Contrast Pairing · WCAG

BG ↓ / FG →

Ink

#FFFFFF

orka-900

#D4D4D2

orka-700

#9A9A98

orka-500

#6B6B6B

Paper

#000000

한 사람 안에 있는 회사.

AAA21.0:1

한 사람 안에 있는 회사.

AAA17.4:1

한 사람 안에 있는 회사.

AAA8.7:1

한 사람 안에 있는 회사.

AA4.3:1

Paper-2

#0A0A0A

한 사람 안에 있는 회사.

AAA19.5:1

한 사람 안에 있는 회사.

AAA16.1:1

한 사람 안에 있는 회사.

AAA8.0:1

한 사람 안에 있는 회사.

AA4.0:1

Navy

#0F1A3D

한 사람 안에 있는 회사.

AAA14.2:1

한 사람 안에 있는 회사.

AAA11.7:1

한 사람 안에 있는 회사.

AA5.8:1

한 사람 안에 있는 회사.

FAIL2.9:1

Ink (Light)

#FFFFFF

한 사람 안에 있는 회사.

AAA21.0:1

한 사람 안에 있는 회사.

AAA11.6:1

한 사람 안에 있는 회사.

AA4.9:1

한 사람 안에 있는 회사.

FAIL2.4:1

AAA = 7:1+ · AA = 4.5:1+ · FAIL = body 텍스트 사용 금지 (장식·캡션만 한정)

Forbidden — "거의 검정"

#08090A · Linear

#141413 · Anthropic

톱티어들이 피하는 색을 우리는 정면으로 쓴다. 어두운 회색이 아니라 쌩 #000.

02 · Typography

Heavy.
Tight.
Sans.

Geist Sans + Pretendard Black.

흘림체·세리프 디스플레이 금지. 강조는 크기와 weight로.

EN Display · Body

Aa Gg

0123456789

Geist Sans

100–900 variable · OFL · 무료

국문 Display · Body

아 가 1

범고래 BLACK

Pretendard Variable

100–900 variable · OFL · 무료

Mono · Meta · Code

Aa 1

EYEBROW STYLE

Geist Mono

100–900 · OFL · 무료

Weight Ladder · Pretendard "범고래" / Geist "ORKA"

100

범고래

ORKA

300

범고래

ORKA

500

범고래

ORKA

700

범고래

ORKA

800

범고래

ORKA

900

범고래

ORKA

기본: Display 800 · Headline 700 · Body 400 · Eyebrow 500. 그 외 weight는 의도가 있을 때만.

Display · 180px · Geist 800 · -0.05em

BLACK ORKA

국한문 혼용 단락 · 16px / 1.7

BLACK ORKA는 마케팅과 AX(AI Transformation)를 한 팀에서 운영하는 정예 에이전시다. 시키는 대로만 하는 수행사가 아니라, 판단을 가진 실행으로 결과를 만든다. 광고비를 줄이고 매출을 늘리는 일, ROAS·CTR·CPA 같은 정량 지표 위에서 의사결정하는 일, 분기당 신매체 1개 검증·신도구 1개 흡수하는 일 — 이것이 우리가 매일 하는 일이다.

line-height 1.7 · letter-spacing -0.005em · 본문 max-width 720px

Numbers · Punctuation

Geist · 48px · tabular

0 1 2 3 4 5 6 7 8 9

Pretendard · 48px · 한국 숫자 (균등폭)

0 1 2 3 4 5 6 7 8 9

Punctuation · 32px

& @ # $ % * + − × ÷ = / \ < > ! ? . , : ; " '

한국어 문장부호

「 」 『 』 ― … · ※

Type Scale (Pretendard)

H1
56px · 700

시키는 대로만 하지 않는다.

H2
36px · 700

흡수하고, 본질만 남긴다.

H3
22px · 600

결과로 말한다. 자기 자랑은 빼고.

Body L
18px · 400

단문. 단언. 들뜨지 않는다. 같잖은 아이디어 0개.

Body
16px · 400

맥킨지였다면 이 결정을 했을까? 통과 못 하면 하지 않는다.

Tracking Comparison

-0.05em · DISPLAY

BLACK ORKA

-0.02em · HEADLINE

BLACK ORKA

0 · BODY

BLACK ORKA

0.22em · EYEBROW

BLACK ORKA — MARKETING × AX

04 · Grid & Spacing

12 columns.
4px unit.

max-width 1400px · gutter 24px.

1
2
3
4
5
6
7
8
9
10
11
12

Base Unit

4px

Gutter

24px · 16px (M)

Section Padding

96–160px · 64–96px (M)

Content Width

본문 720px · 헤드라인 풀폭

Spacing Scale · 실물 크기

4px
rule · hairline border
8px
inline gap
16px
tight stack
24px
default gutter
32px
card padding
48px
block separator
64px
section padding (M)
96px
section padding
160px
section padding (hero)

모든 간격은 4의 배수. 그 외 값 사용 시 일관성 깨짐.

Breakpoints

SM

640px+

태블릿 세로 · 4 col

MD

768px+

태블릿 가로 · 8 col

LG

1024px+

데스크탑 · 12 col

05 · Iconography

Lucide.
1.5 stroke.

단일 라이브러리. 모노톤. 24px 기본.

컬러 아이콘·일러스트형 아이콘 금지.

Stroke Width · 1.5 채택

1.0 · 약함

1.5 · 채택

2.0 · 무거움

Size Scale

16px

20px

24px

32px

48px

기본 24px. 인라인 16px. 강조 32–48px.

In Context

Button (with icon)

아이콘은 텍스트 height에 맞춰 16-18px.

List item

  • 판단을 가진 실행
  • 흡수하고, 본질만 남긴다
  • 데이터로 말한다

Card header

AX Discovery

현재 워크플로우 진단부터 시작.

06 · Motion

Quiet.
Subtle.

페이드·슬라이드만. 회전·바운스 금지.

아래 버튼에 호버해보세요 ↓

Timing Scale

INSTANT

100ms

버튼 클릭 피드백, 작은 ui 반응

FAST

200ms

호버, 작은 컴포넌트 등장

STANDARD

300ms

기본값 · 모든 트랜지션 기본

SLOW

500ms

페이지 진입, 큰 블록 등장

ease: cubic-bezier(0.4, 0, 0.2, 1) · 모든 트랜지션 공통 이징

07 · Application

In the wild.

명함 · 메일 · 슬라이드 · 소셜.

Business Card · 90×50mm · Matte

BLACK ORKA

Marketing × AX

배준형

Founder

peter@blackorka.com

peter95kr.com

[ MARK ]

peter95kr.com

Email Signature · 텍스트만

배준형 Founder

BLACK ORKA

peter@blackorka.com · 010-XXXX-XXXX

peter95kr.com

이미지·이모지·배너 금지.

Slide Masters · 3 types

Master · Title

PROPOSAL

2026 Q2 · CAPRA

Master · Section

02 · Approach

전략과 실행을 한 팀에서.

Master · Content

KPI

CTR +34%

CPA −18%

peter95kr.com

Full Slide Example · 1920×1080

03 · Marketing Line

04 / 18

광고비를 줄이고
매출을 늘립니다.

CTR

+34%

CPA

−18%

ROAS

×4.2

BLACK ORKA

peter95kr.com

Social Post · Instagram 1080×1080

Insight · 002

같잖은 아이디어를
대단한 척
발표하지 않는다.

BLACK ORKA

@blackorka

Case · 004

×4.2

ROAS, 90일 만에.
매체 통합 분석 + CRM 세그먼트.

BLACK ORKA

@blackorka

검정 베이스 · 단일 메시지 · 자기 자랑 0.

08 · RED TRIGGER

Sub-brand

바이럴 라인. 빨강 1색만 더해진다.

[TBD] Red 후보 · 1개 선택

Option A

Carmine

#C8102E

차분한 톤 · 클래식 · 럭셔리

Option B

Signal Red

#E11919

날카로움 · 도발적 · 캠페인

Campaign Poster · 2:3 · 가상 캠페인

RED TRIGGER · CAMPAIGN 011

2026.06 · LAUNCH

한 방으로
끝낸다.

신제품 런칭. 48시간 안에 화제성 1위.

RED TRIGGER

a BLACK ORKA campaign line

peter95kr.com

사용 원칙

  • 01베이스는 검정. 빨강은 핵심 카피·로고에만.
  • 02한 화면에 빨강은 2-3 요소까지. 그 이상은 들뜸.
  • 03본체와 동시 노출 시 "a BLACK ORKA campaign line" 명기.
  • 04네이비 액센트는 RED TRIGGER에서 사용 금지 — 검정·흰색·빨강만.

RED TRIGGER

정확한 한 방.

BLACK ORKA의 마케팅 라인 안의 바이럴 캠페인 전용 서브브랜드. 인보이스·계약서는 BLACK ORKA 단일 법인명.

Source-of-truth spec

VISUAL.md

로고 요구사항·납품 포맷·운영 룰 전체 명세는 별도 마크다운 문서. 외주 디자이너 브리핑 시 본 페이지와 함께 송부.