Linchpin AI — 브랜드 컬러 가이드

Primary

Indigo Violet

Linchpin AI의 메인 브랜드 컬러. 신뢰·전문성·기술력을 상징하며 모든 주요 CTA, 버튼, 링크에 사용됩니다. Indigo 500이 브랜드의 기준점이에요.

50

#F5F4FF

가장 연한 배경

100

#EEEEFF

태그 배경

300

#A99FF8

보조 포인트

500 ⭐

#4F47E0

메인 브랜드

700

#3D35B0

hover/pressed

900

#1D1888

다크 강조

Secondary

Teal

성공·완료·긍정 상태를 표현하는 보조 컬러. 자막 번역 테마 컬러로도 사용되며, Indigo와 대비를 이루어 활력을 줍니다.

100

#EDFAF7

성공 메시지 배경

300

#5DD8C5

포인트 일러스트

500 ⭐

#10B5A0

Secondary CTA

700

#0C9B88

자막 테마 컬러

Accent

포인트 컬러

시스템 상태와 정보를 전달하는 컬러. 브랜드 컬러로 사용하지 않고 경고·오류·정보 전달 목적으로만 제한적으로 사용합니다.

Amber

#F59E0B

경고 · 인기 배지 · 별점

Rose

#F87171

오류 · 삭제 · 환불

Sky

#3B82F6

정보 알림 · 링크

Neutrals

중성 컬러

배경·텍스트·구분선에 사용하는 무채색 계열. 라이트 테마는 Cream, 다크 테마는 #09090F를 기본 배경으로 사용합니다.

White

#FFFFFF

Cream

#F7F6F2

100

#F0F0F5

300

#B0AECA

500

#706E86

700

#4A4860

900

#14131F

Dark BG

#09090F

Usage

테마별 사용 예시

라이트 테마(마케팅 페이지)와 다크 테마(앱 대시보드)에서 컬러가 어떻게 조합되는지 실제로 확인해보세요.

라이트 테마

index.html · subtitle.html 등 마케팅 페이지

Linchpin·AI

AI 번역, 한 번 맡기면
번역이 쌓여가요

파일을 올리면 이전에 번역했던 말투·용어를 자동으로 불러와요.

번역 메모리 단어장

배경 #F7F6F2

CTA #4F47E0

제목 #14131F

뱃지 #10B5A0

다크 테마

dashboard.html · 앱 내부 페이지

Linchpin·AI

잔여 크레딧

5,000원

번역 상태

완료

번역 메모리 적용됨

89% 유사도 매칭

배경 #09090F

포인트 #A99FF8

카드 #14131F

성공 #0C9B88

Principles

컬러 사용 원칙

일관된 브랜드 경험을 위해 아래 원칙을 따라주세요.

01

단일 Primary 원칙

한 화면에 Indigo 계열만 사용하세요. 다양한 채도를 섞지 말고 하나의 명확한 강조점만 만들어요.

02

60–30–10 규칙

배경(중성) 60% · 카드·구분 30% · CTA·강조(Primary) 10%. Primary가 너무 많으면 강조 효과가 사라져요.

03

Teal은 강조용으로만

성공 상태, 아이콘, 포인트 일러스트에만 제한적으로 사용. 자막 번역 페이지 테마로 활용해요.

04

Accent는 시스템 상태에만

Amber·Rose·Sky는 경고·오류·정보 전달에만 사용. 브랜드 장식 컬러로 쓰지 마세요.

05

명암비 4.5:1 이상

텍스트는 배경 대비 최소 4.5:1 명암비를 유지하세요. WCAG AA 접근성 기준이에요.

06

테마 일관성

라이트 페이지는 Cream 배경, 다크 페이지는 #09090F 배경으로 통일. 섞어 쓰지 마세요.

Do / Don't

이렇게 써주세요

컬러를 잘못 사용하면 브랜드 일관성이 무너져요. 아래 사항을 꼭 지켜주세요.

✓ DO

CTA 버튼은 항상 Indigo 500 (#4F47E0) 사용

hover 상태는 Indigo 700 (#3D35B0)으로 어둡게

번역 완료·성공은 Teal 계열로 표현

다크 테마에서 텍스트는 Indigo 300 (#A99FF8)으로 포인트

인스타 콘텐츠도 Indigo·Teal 팔레트 기준으로 통일

로고 점(·)은 항상 Indigo 500 컬러 적용

✕ DON'T

보라 그라데이션 배경 사용 (AI 클리셰)

Amber·Rose를 브랜드 장식으로 사용

순수 검정(#000000)을 텍스트로 사용

한 화면에 Indigo + Teal을 동시에 CTA로 사용

라이트·다크 테마 컬러를 섞어서 사용

임의의 파란색·보라색으로 대체

Code

디자인 도구용 코드

Figma, CSS, 인스타 콘텐츠 제작 시 아래 값을 사용해주세요.

/* ── Primary — Indigo ── */
--indigo-50:  #F5F4FF;   /* 가장 연한 배경 */
--indigo-100: #EEEEFF;   /* 태그 배경 */
--indigo-300: #A99FF8;   /* 다크 테마 포인트 텍스트 */
--indigo-500: #4F47E0;   /* ⭐ 메인 브랜드 컬러 */
--indigo-700: #3D35B0;   /* hover / pressed */
--indigo-900: #1D1888;   /* 다크 강조 */

/* ── Secondary — Teal ── */
--teal-100:   #EDFAF7;   /* 성공 메시지 배경 */
--teal-300:   #5DD8C5;   /* 포인트 일러스트 */
--teal-500:   #10B5A0;   /* ⭐ Secondary CTA */
--teal-700:   #0C9B88;   /* 자막 테마 컬러 */

/* ── Accent ── */
--amber:      #F59E0B;   /* 경고 · 인기 배지 */
--rose:       #F87171;   /* 오류 · 삭제 */
--sky:        #3B82F6;   /* 정보 알림 */

/* ── Neutrals ── */
--white:      #FFFFFF;   /* 카드 · 모달 */
--cream:      #F7F6F2;   /* 라이트 테마 배경 ⭐ */
--gray-500:   #706E86;   /* 보조 본문 */
--gray-700:   #4A4860;   /* 본문 텍스트 */
--gray-900:   #14131F;   /* 제목 */
--dark:       #09090F;   /* 다크 테마 배경 ⭐ */

/* ── Figma Palette Copy ── */
Primary:   #F5F4FF #EEEEFF #A99FF8 #4F47E0 #3D35B0 #1D1888
Secondary: #EDFAF7 #5DD8C5 #10B5A0 #0C9B88
Accent:    #F59E0B #F87171 #3B82F6
Neutral:   #FFFFFF #F7F6F2 #F0F0F5 #B0AECA #706E86 #4A4860 #14131F #09090F