01 · Brand

Brand
Design.

NMWC의 시각 아이덴티티 시스템. 로고, 색, 타이포그래피, 아이코노그래피, 모션의 일관된 룰. 모든 시각 표현은 이 문서를 기준으로 합니다.

Brand DNA

4단의 Pill.
NMWC 구조의 시각화.

4단의 pill이 쌓이는 stack. 각 pill은 자기 SILO를 운영하는 builder — collective로 모였지만 개별로 존재합니다. NMWC는 한 SILO씩 쌓이며 성장합니다.

Logo

NMWC의 시그니처 마크는 4-step Pill Stack. 4단의 pill이 쌓여 만드는 stack — 한 SILO씩 더해지며 collective를 이루는 NMWC의 성장 메타포. 각 pill은 개별 builder로 존재합니다.

Primary Mark

PRIMARY MARK · WHITE ON BLACK

INVERTED · BLACK ON WARM WHITE

원본 SVG: nmwc-logo.svg (currentColor 사용). 적용된 페이지의 CSS color를 상속.

Lockup Variations

NMWC

HORIZONTAL

NMWC

VERTICAL

NMWC

WORDMARK ONLY

WORK

CO.

EXPANDED · NARROW STACK

Clearspace · 보호 영역

마크 주변 최소 여백 = 1× pill height (마크 내부 pill 두께 = 20px 기준).
워드마크 주변 최소 여백 = cap height의 0.5× (SUIT 700 기준 약 16~20px).

Minimum Size

컨텍스트별 최소 크기. 마크는 실제 픽셀로 렌더되어 있어 화면에서 직접 가독성을 확인할 수 있습니다.

Favicon

16px

마크만 · OS 16×16 슬롯, 탭 favicon.

UI inline

24px

마크만 · 본문 행 내 인용, 작은 버튼.

NMWC

헤더 락업

32px

마크 + 워드마크. 사이트·앱 헤더 기본.

NMWC

헤더 (mobile ≤720px)

28px

마크 + 워드마크 (18px). 모바일 site-header 기본.

인쇄

64px

최소 권장 · 명함·스티커·인쇄물.

Size Scale Visualization

동일 마크가 16px부터 128px까지 어떻게 살아남는지. pill 처리(rx=10) 덕분에 16px에서도 떨어지지 않음.

16px

24px

40px

64px

96px

128px

Usage Cases · 적용 예시

실제 적용 컨텍스트의 모킹 · 앱 아이콘 · 프로필 · 로딩 · 헤더 · 명함 · 스티커.

APP ICON · iOS 22% RADIUS

PROFILE / AVATAR

NMWC

LOADING…

LOADING SPLASH

NMWC

ProductAboutPricingSign in

· PAGE CONTENT ·

WEBSITE HEADER

형운 · Hyungwoon Lee

AI Native PM · Founder

nmwc.ai@gmail.com

BUSINESS CARD

NMWC

STICKER / MERCH

Don'ts

✗ 회전 · 마크는 항상 수직
✗ 색상 임의 변경 · NMWC White / Black 외 금지
✗ 비례 왜곡 · viewBox 200×200 유지
✗ 그림자·장식 추가 · 마크는 평면
✗ 단일 pill을 마크처럼 사용 · 4단 set이 정체성
✗ 워드마크 폰트 변경 · 항상 SUIT Variable 700

Color

3색의 미니멀 팔레트. Black + White + Accent로 모든 brand 표현을 해결합니다. 의미 색(success/warning/error)은 Product 가이드에서 정의.

Palette

nmwc-framer-tokens.css 단일 출처. 디자인과 구현 양쪽이 같은 토큰을 본다.

Brand & Accent

Pure White

#ffffff

Brand primary — 모든 CTA pill, display headline.

Sky Blue

#0099ff

단일 chromatic accent — 링크·포커스 링·선택.

Surface

Canvas

#090909

페이지 배경. near-black, 따뜻한 톤.

Surface 1

#141414

가격 카드, secondary 버튼, mockup 타일.

Surface 2

#1c1c1c

featured 가격 카드, selected pricing tab.

Hairline

#262626

1px 보더, input group, table divider.

Hairline Soft

#1a1a1a

FAQ row separator, footer 컬럼 룰.

Inverse Canvas

#ffffff

pill CTA 표면, light-mode template thumbnail.

Text

Ink

#ffffff

모든 headline + 강조 본문.

Ink Muted

#999999

2차 타입 — meta, footer, 비활성 탭.

Brand Gradient (Signature)

Gradient Magenta

#d44df0

Spotlight 카드 variant.

Gradient Violet

#6a4cf5

Spotlight 카드 variant — 가장 흔함.

Gradient Orange

#ff7a3d

Sunset wash spotlight 카드.

Gradient Coral

#ff5577

Coral / pink spotlight 카드 variant.

Semantic

Success Green

#22c55e

가격 비교 체크 글리프.

Warning

#facc15

주의·경고 상태.

Error

#f87171

에러 상태, 입력 검증 실패.

Info

#60a5fa

정보성 메시지.

Spotlight (Signature)

monochrome 그리드 위에 떨어뜨리는 oversized atmospheric tile. 페이지당 한두 장이 적정.

Spot · Violet

Build your SILO.

기본 violet — Brand DNA를 가장 잘 표현하는 시그니처.

Spot · Magenta

AI Translate

밝고 활기찬 톤 — feature highlight에 적합.

Spot · Orange

AI Plugins

Sunset wash — partnership·toolset 강조.

Spot · Coral

Hand-picked Experts

Coral·pink — 사람 중심 메시지에.

Usage Rules

마크 색은 항상 White-on-Black (dark) 또는 Black-on-Light (light)
Accent는 액션과 강조에만, 면이 아닌 점·선
색만으로 의미 전달 금지 (아이콘·텍스트 보조 필수)

Contrast (WCAG)

모든 텍스트는 WCAG AA 이상 보장:

Ink (#ffffff) on Canvas (#090909) ≈ 21.0:1 (AAA)
Sky Blue (#0099ff) on Canvas ≈ 5.4:1 (본문 AA 통과, 18px+ AAA)
Ink Muted (#999999) on Canvas ≈ 6.5:1 (AA)

Typography

SUIT Variable 단일 폰트 시스템. 한글+라틴 통합 디자인. weight 100~900 연속 변화로 모든 hierarchy 해결.

Primary Font · SUIT Variable

sun-typeface가 배포하는 무료 variable font. MIT 라이선스. CDN으로 즉시 임베드.

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT@2/fonts/variable/woff2/SUIT-Variable.css">

body {
  font-family: 'SUIT Variable', 'SUIT', -apple-system, sans-serif;
}

Weight Scale

샘플 텍스트는 weight 차이를 보여주기 위한 것 · 워드마크는 항상 700 + letter-spacing 0.04em 고정.

가 Aa

Regular · 400 · Body

가 Aa

Medium · 500 · UI

가 Aa

SemiBold · 600 · Heading

가 Aa

Bold · 700 · Wordmark

가 Aa

ExtraBold · 800 · Emphasis

가 Aa

Black · 900 · Rare

Wordmark Specification

5개 spec 속성 각각의 시각 효과. 우측 비교 — 좌(스펙대로) vs 우(스펙 위반). 모든 wordmark는 spec을 정확히 지켜야 합니다.

font-family

'SUIT Variable', 'SUIT'

SUIT의 기하학적 차분함이 마크의 pill stack과 조응.

✓ SUITNMWC

✗ system-uiNMWC

font-weight

700

Regular(400)·Medium(500)은 워드마크로 절대 금지. Bold만 사용.

✓ 700NMWC

✗ 400NMWC

letter-spacing

0.04em

트래킹이 없으면 글자가 뭉쳐 마크의 정밀한 톤이 깨집니다.

✓ 0.04emNMWC

✗ 0NMWC

text-transform

none

대문자 그대로(NMWC). 소문자·CSS 변환 금지.

✓ NMWCNMWC

✗ lowercaseNMWC

color

currentColor · var(--ink)

부모 텍스트 색을 상속. 다크에선 흰색, 라이트에선 검은색이 자동 적용.

on darkNMWC

on lightNMWC

Mono Font

코드·데이터·파일경로용. 시스템 mono stack.

font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

Type Scale

12-tier scale. Display는 SUIT Variable 500의 음수 트래킹이 핵심.

Display XXL

110px · 500 · 0.85 · −5.5px

Build better sites

Display XL

85px · 500 · 0.95 · −4.25px

Never start from scratch

Display LG

62px · 500 · 1.00 · −3.1px

Scale without switching tools

Display MD

32px · 500 · 1.13 · −1.0px

Powering ambitious teams worldwide

Headline

22px · 700 · 1.20 · −0.8px

Pricing tier headlines

Subhead

24px · 400 · 1.30 · −0.01px

Lead body next to display headlines

Body LG

18px · 400 · 1.30 · −0.18px

Hero subhead, lead paragraphs

Body

15px · 400 · 1.30 · −0.15px

Default body — SUIT의 OpenType character variant 활용.

Body SM

14px · 500 · 1.40 · −0.14px

Pricing comparison rows, dense data

Caption

13px · 500 · 1.20 · −0.13px

Eyebrow caption

Micro

12px · 400 · 1.20 · −0.12px

Disclaimer / footnote micro text

Button

14px · 500 · 1.0 · −0.14px

Get started for free

Iconography

Lucide React 표준 셋 + NMWC 커스텀 아이콘. 마크의 pill 언어와 일치하는 round cap. 이 섹션은 브랜드 캐넌 — 제품 UI 적용 사이즈 표준·컨텍스트별 예시는 Product § Iconography 참조.

Icon Style Direction

Grid: 24×24 (1.5px stroke) 또는 16×16 (1px stroke, dense UI)
Stroke: 1.5px, round cap, round join
Fill: 기본 outline. 활성 상태에서만 filled
Color: currentColor · 텍스트 색을 상속

Standard Set · Lucide

제품 UI는 Lucide React 셋을 기본 사용. CDN: https://lucide.dev

import { ChevronRight, Settings, User } from 'lucide-react';
<ChevronRight size={24} strokeWidth={1.5} />

Custom NMWC Icons

마크의 4-step pill stack 언어를 차용한 커스텀 아이콘 (추후 확장):

silo-stack · 4단 pill stack (마크 단순화)
builder · 사람 + 도구 silhouette
ai-collab · 별 + 점 (협업 표현)
build-action · 화살표 + 4단 pill

Don'ts

✗ 다른 스타일 셋 혼용 (Phosphor, Heroicons 등 섞지 말 것)
✗ stroke 두께 변경 (1.5px 고정)
✗ 직접 그린 아이콘 추가 (review 없이)

Photography & Imagery

사진과 그래픽의 톤 가이드. 마크의 미니멀·하이콘트라스트 언어 유지.

Photo Style Direction

✓ DO

미니멀 구도 · 하이 콘트라스트 · 어두운 배경 + 밝은 피사체 · 단색 또는 NMWC accent 톤

✗ DON'T

스톡 사진 (특히 사람 + 노트북 클리셰) · 강한 채도 · 형광색 · 여러 색이 섞인 구도

Color Treatment

단색 (모노톤) 또는 NMWC Accent (#0099ff) 색조 처리
채도 -30% (corporate stock 룩 회피)
Hard light / single point light 선호

Motion

마크의 정밀함과 일치하는 모션. 빠르고 절제된 transition. 무한 반복·과한 bounce 금지.

Easing Functions

카드 위에 호버하면 dot이 해당 timing function으로 트래블합니다. 곡선의 가로축은 시간, 세로축은 진행률.

--ease-standard

cubic-bezier(0.4, 0, 0.2, 1)

표준 — 대부분 transition의 기본값.

--ease-decelerate

cubic-bezier(0, 0, 0.2, 1)

Enter — 진입 모션. 빠르게 시작해 부드럽게 정착.

--ease-accelerate

cubic-bezier(0.4, 0, 1, 1)

Exit — 퇴장 모션. 부드럽게 시작해 빠르게 사라짐.

--ease-spring

cubic-bezier(0.34, 1.56, 0.64, 1)

Spring — 강조 (rare). 오버슛 후 정착. 절제해서 사용.

Duration Scale

카드 위에 호버하면 dot이 해당 시간만큼 트래블합니다. 150ms와 800ms 차이를 직접 비교해 보세요.

--motion-micro

150ms

버튼 hover, 작은 색 변경.

--motion-fast

200ms

탭 전환, 토글.

--motion-standard

250ms

카드 hover, 메뉴 expand.

--motion-medium

400ms

모달 enter, drawer slide.

--motion-slow

600ms

페이지 전환, complex 이동.

--motion-brand

800ms

브랜드 splash, intro.

Brand Signature Motion · Stagger Build

마크의 4단이 위에서 아래로 순차 등장. 80ms stagger · 총 440ms.

@keyframes stagger-build · 200ms × 4 · 80ms stagger

opacity 0 → 1, translateY -8px → 0. 각 단계가 ease-out 200ms로 작동하고 80ms 간격으로 순차 시작. Replay 버튼으로 다시 재생할 수 있습니다.

Don'ts

✓ DO

목적 있는 motion (orient, indicate, delight) · 250ms 이하 · prefers-reduced-motion 지원

✗ DON'T

텍스트 자체 애니메이션 · 무한 반복 · 0.5초 이상 transition · 과한 spring/bounce

Assets

제공 자산 파일 목록. 모두 SVG (벡터). 색은 currentColor로 CSS에서 제어.

파일	용도	비고
`nmwc-logo.svg`	원본 마크	currentColor
`nmwc-logo-white.svg`	다크 배경 강제	`#ffffff` hardcoded
`nmwc-logo-black.svg`	라이트 배경 강제	`#090909` hardcoded
`nmwc-favicon.svg`	브라우저 탭 (modern)	SVG favicon · 모든 사이즈 대응
`nmwc-favicon-32.png`	브라우저 탭 (legacy)	32×32 PNG fallback
`nmwc-apple-touch-icon.png`	iOS 홈 화면	180×180 · 검정 배경 + 흰색 마크
`nmwc-og.png`	OG 소셜 공유	1200×630 · 마크 + 워드마크 + tagline

※ 소스 SVG는 .assets-source/에 보관 (apple-touch-icon-source.svg, og-source.svg). PNG 재생성 시 qlmanage + sips 파이프라인 사용. favicon.ico multi-size는 도구(icoutils/ImageMagick) 부재로 SVG favicon + PNG fallback 패턴으로 대체.