클래스팅 브랜드 가이드라인

01 · Foundation

브랜드 정의

클래스팅은 이제 두 제품을 묶는 이름이에요. 매일 주고받는 연락과 기록을 맡는 클래스팅, 그리고 AI로 수업을 돕는 클래스팅 AI. 선생님 하루 안에서 둘은 섞여 있고 로그인도 하나라서, 따로 노는 두 앱처럼 보이면 안 된다고 봤어요.

Classting

클래스팅

알림장, 출결, 상담, 클래스처럼 선생님과 학부모, 학생이 매일 하는 일을 맡아요. 색은 오래 써 온 클래스팅 초록 #00C896이에요.

Classting AI

클래스팅 AI

AI 러닝, AI 샌드박스, AI 라이팅처럼 AI가 수업을 돕는 일을 맡아요. 클래스팅 안에서 AI가 만든 것에는 보라 #6941D7을 써서 바로 알아볼 수 있게 해요.

초록은 매일, 보라는 AI, 만나는 곳에만 그라데이션

한 집안으로 보이게 하는 방법

선생님이 무엇을 눌러야 하는지는 언제나 초록이 알려 주고, 무엇을 AI가 썼는지는 언제나 보라가 알려 줘요. 두 신호가 섞이지 않아야 AI 결과를 따로 확인할 수 있어요. 둘을 잇는 초록에서 남보라까지의 그라데이션은 로고, 앱 아이콘, 첫 화면, 그리고 AI 결과가 처음 도착하는 순간에만 써요. 드물게 나와야 서명처럼 읽혀요.

02 · Identity

로고

로고는 classting.com에서 써 온 심볼 C와 CLASSTING 워드마크 그대로예요. 모양은 하나도 바꾸지 않았고 색만 새로 입혔어요. 심볼 C는 앱 아이콘처럼 135° 사선으로 자기 그라데이션을 처음부터 끝까지 갖고, CLASSTING은 C 왼쪽 끝에서 G 오른쪽 끝까지 가로 그라데이션 하나를 아홉 글자가 나눠 써요.

Symbol

심볼 C

동그란 C 안에 화살 모양 홈이 있는 기존 심볼이에요. 그라데이션은 왼쪽 위 초록에서 오른쪽 아래 남보라로 흘러요. 혼자 쓸 때도 같은 그라데이션이에요.

Wordmark

워드마크 CLASSTING

Frankfurter Com Medium을 바탕으로 다듬은 아홉 개의 path예요. 그라데이션은 단어 전체에 하나만 걸어요. 글자마다 다시 시작하면 줄무늬처럼 보여요.

흰 바탕 기본

어두운 바탕에서도 같은 그라데이션

심볼과 앱 아이콘

심볼은 16px까지 그라데이션이 다 보여요. 앱 아이콘은 같은 그라데이션 면 위에 흰 심볼을 올려요. 타일 모서리는 한 변의 30/112, 심볼은 가운데에 한 변의 약 절반 크기예요.

16px

24px

32px

64px

앱 아이콘 32

앱 아이콘 48

앱 아이콘 72

앱 아이콘 112

CLASSTING AI 짝 로고

AI 두 글자도 워드마크와 같은 Frankfurter Com Medium 글리프를 path로 바꿔 그렸어요. 흰 바탕에서는 CLASSTING은 그라데이션, AI는 그라데이션이 끝나는 남보라 #5B4BD6이에요(흰 바탕 6.14:1). 이 남보라는 어두운 바탕에서 2.95:1로 가라앉아서, 어두운 바탕과 키 비주얼 위에서는 열한 글자 전체를 그라데이션 하나로 칠하거나 모두 흰색으로 써요.

흰 바탕 · AI는 #5B4BD6

어두운 바탕 · 전체 그라데이션

키 비주얼 위 · 모두 흰색

여백

사방 x 이상, x는 워드마크 높이의 절반

로고 둘레에 x만큼은 비워 두세요. 글자, 사진의 경계, 다른 로고가 이 안으로 들어오지 않게 해요. 앱 아이콘 타일은 타일 자체가 여백이라 따로 두지 않아요.

최소 크기

워드마크 높이 12px, 심볼 16px, 앱 아이콘 24px

화면 기준 크기예요. 이보다 작게 쓰지 않아요. 인쇄 최소는 추후 디자이너가 정해요.

xxxx

x = 워드마크 높이의 절반

작은 크기에서도 같은 그라데이션

워드마크 높이가 16px보다 작아도 심볼과 CLASSTING 모두 같은 그라데이션을 써요. 바닥글, 메일 서명 아랫줄, 작은 배지에는 작은 크기용 파일을 써요.

16px 미만작은 크기용 파일, 같은 그라데이션

16px 이상심볼과 단어 각자 그라데이션

03 · 로고 컬러

컬러 배리에이션

쓸 수 있는 조합은 네 가지예요. 대부분은 흰 바탕 기본을 쓰고, 바탕이 그라데이션이나 사진이면 흰색으로 바꿔요.

흰 바탕

그라데이션 on #FFFFFF

SVG

어두운 바탕

그라데이션 on #141317

SVG

키 비주얼 위

#FFFFFF on 그라데이션

SVG

단색 흰색

#FFFFFF on 사진, 단색

SVG

바탕 규칙

그라데이션 로고는 단색 바탕에만

흰색, 니어 화이트 #FBFBFC, 어두운 #141317처럼 단색 위에서는 그라데이션 로고를 써요. 키 비주얼이나 사진 위에 그라데이션 로고를 올리면 색이 바탕에 묻혀요.

한 색 인쇄

초록 #00C896, 작으면 잉크 #00785A

그라데이션을 찍을 수 없는 한 색 인쇄에서는 심볼과 단어를 모두 초록으로 찍어요. 2017년 가이드의 별색 참고값은 PANTONE 3395 C예요. 작은 글자나 흰 종이 문서에서는 잉크 #00785A가 더 또렷해요.

04 · Color

컬러 팔레트

초록과 보라 두 단계표는 같은 번호끼리 OKLCH 밝기가 같도록 뽑았어요. 브랜드 초록 #00C896은 밝은 색이라 500에, 클래스팅 AI 보라 #6941D7은 깊은 색이라 700에 앉아요. 칸 안의 숫자는 흰 바탕 대비 명암비(WCAG 2)예요.

초록 · 클래스팅

050#E8FDF3
1.06:1

100#CEF8E6
1.15:1

200#A5EFD1
1.32:1

300#72E2B8
1.58:1

400#45D5A6
1.85:1

브랜드500#00C896
2.16:1

600#00A077
3.34:1

잉크700#00785A
5.48:1

800#035740
8.60:1

900#053A2A
12.77:1

보라 · 클래스팅 AI 전용

050#F7F5FE
1.08:1

100#EDEAFF
1.18:1

200#DCD7FE
1.38:1

300#CABFFF
1.69:1

400#BAABFF
2.03:1

500#AD98FE
2.41:1

600#886DF1
3.82:1

AI700#6941D7
6.29:1

800#4C29A1
9.82:1

900#331970
13.87:1

글자와 아이콘에는 원색 대신 잉크를 써요. 초록 잉크는 green-700 #00785A(흰 바탕 5.48:1), 보라 잉크는 #5B36C4(흰 바탕 7.58:1)예요. 보라는 채도가 초록의 두 배라 같은 밝기에서도 가볍게 보여서, 잉크를 조금 더 낮춰 둘이 한 문단 안에서 같은 무게로 읽히게 했어요.

주 버튼과 포커스

과제 내기#053A2A on #00C896 · 5.90:1

과제 내기hover #00B386 · 4.74:1

과제 내기포커스 링 #00A077 · 3.34:1

과제 내기#FFFFFF on #00C896 · 2.16:1

흰 글자로 AA(4.5:1)를 넘기려면 바탕을 #038765까지 내려야 하는데, 그건 더 이상 사람들이 기억하는 클래스팅 초록이 아니에요. 그래서 바탕은 브랜드 초록 그대로 두고 글자를 green-900으로 써요.

무채색

Aa

바탕

#FBFBFC

페이지 바탕

Aa

카드

#FFFFFF

카드, 시트, 입력창

Aa

채움

#F2F1F4

칩, 비활성 칸

Aa

선

#E6E4E9

카드 테두리, 구분선

Aa

흐린 글자

#ABABAB

자리표시자, 꺼진 아이콘

Aa

보조 글자

#6A6873

캡션. 흰 바탕 5.47:1

Aa

본문

#26242B

본문과 제목. 바탕 위 14.83:1

면과 글자는 Cognity와 같은 무채색이에요. 어두운 모드에서는 바탕 #141317, 카드 #1D1C21이고, 잉크는 같은 단계표의 400(초록 #45D5A6, 보라 #BAABFF)으로 올라가요.

상태색

Aa

좋음

#319751

oklch(0.6 0.14 150) · 글자는 #00672D

Aa

주의

#EB881F

oklch(0.72 0.16 60) · 글자는 #7E4503

Aa

위험

#CC272E

oklch(0.55 0.2 25) · 글자는 #94020D

상태색은 OKLCH로 정의하고, 여기 hex는 sRGB로 옮긴 값이에요. 좋음은 브랜드 초록과 헷갈리지 않게 색상각 150°의 다른 초록이고, 글자로 쓸 때는 진한 값을 써요.

그라데이션

#00C896 · 0% #02CFC8 · 20% #12B6E8 · 45% #5F8BE7 · 72% #5B4BD6 · 100%

브랜드 초록에서 시작해 키 비주얼에서 뽑은 네 점으로 이어져요. 초록, 청록, 하늘, 파랑, 남보라 순서예요. 정지점이 hex라서 Figma, 앱, 영상 어디서든 같은 색이 나와요. 로고와 앱 아이콘은 135°, AI 카드 선은 90°로 같은 정지점을 써요.

CSS

:root {
  --grad-0: #00C896;  /* 0%   */
  --grad-1: #02CFC8;  /* 20%  */
  --grad-2: #12B6E8;  /* 45%  */
  --grad-3: #5F8BE7;  /* 72%  */
  --grad-4: #5B4BD6;  /* 100% */
  --grad:      linear-gradient(90deg,  #00C896 0%, #02CFC8 20%, #12B6E8 45%, #5F8BE7 72%, #5B4BD6 100%);
  --grad-diag: linear-gradient(135deg, #00C896 0%, #02CFC8 20%, #12B6E8 45%, #5F8BE7 72%, #5B4BD6 100%);
}

SVG

<!-- symbol C, its own 135deg gradient (viewBox 0 0 29 32) -->
<linearGradient id="grad-mark" gradientUnits="userSpaceOnUse"
    x1="-.75" y1=".75" x2="29.75" y2="31.25">
  <stop offset="0"   stop-color="#00C896"/>
  <stop offset=".2"  stop-color="#02CFC8"/>
  <stop offset=".45" stop-color="#12B6E8"/>
  <stop offset=".72" stop-color="#5F8BE7"/>
  <stop offset="1"   stop-color="#5B4BD6"/>
</linearGradient>

<!-- CLASSTING, one gradient across all nine letters (viewBox 0 0 120 18) -->
<linearGradient id="grad-word" gradientUnits="userSpaceOnUse"
    x1="0" y1="0" x2="120" y2="0"> ...same five stops... </linearGradient>

역할

어떤 화면 요소가 어떤 색을 받는지예요. 표에 없는 곳은 무채색이에요.

요소	색	토큰	비고
초록 · 매일 쓰는 클래스팅
주 버튼	#00C896 + #053A2A	`--primary / --primary-fg`	화면마다 하나. AI 화면에서도 과제 내기는 초록이에요. 5.90:1
활성 메뉴, 활성 탭	#00785A	`--primary-ink`	글자와 아이콘만 초록, 흰 바탕 5.48:1
링크	#00785A	`--primary-ink`	AI 결과 안의 링크는 보라
포커스 링	#00A077 2px	`--focus`	#00C896은 흰 바탕 2.16:1이라 한 단계 내렸어요. 3.34:1
보라 · AI가 만든 것
요약, 채점, 추천, 번역 같은 AI 칩	#5B36C4 / #EDEAFF	`--ai-ink / --ai-soft`	6.43:1
클래스팅 AI 메뉴 묶음과 그 안의 활성 항목	#5B36C4	`--ai-ink`	AI 러닝, AI 샌드박스, AI 라이팅, 대시보드
AI 결과 속 링크, 근거 보기	#5B36C4	`--ai-ink`	흰 바탕 7.58:1
AI 문단 바탕	#F7F5FE + #DCD7FE	`--ai-wash / --ai-line`	번역, 학부모용 요약
그라데이션 · 둘이 만나는 곳
로고, 앱 아이콘	135°	`--grad-diag`	심볼과 워드마크에 각자 하나씩
스플래시, 로그인 키 비주얼	125°	`--grad-kv`	화면 위쪽에만, 버튼은 흰 시트 위
AI 결과 카드 위 3px	90°	`--grad`	처음 도착했을 때만, 한 번 열면 사라져요
AI 메뉴 묶음 표시	12px	`url(#grad-mark)`	로고 심볼을 작게
버튼, 일반 배경, 차트	쓰지 않음		쓰지 않아요

05 · Typography

타이포그래피

로고 글꼴과 화면 글꼴을 나눠서 생각해요. 워드마크는 Frankfurter Com Medium에서 나왔고, 화면의 글자는 한글 Pretendard, 영문 Inter예요. 화면 글꼴은 CT Corp. 가이드의 본문 글꼴과 같아요. 가이드의 Playfair Display와 나눔명조는 회사 문서의 목소리라 클래스팅 화면에는 쓰지 않아요.

Frankfurter Com Medium 워드마크 · Linotype · 아웃라인 SVG로만 배포

Frankfurter Com은 Linotype의 상용 글꼴이에요. 웹 라이선스는 아직 확인하지 못했고, 가지고 있는 파일의 embedding 등급은 Preview & Print예요. 그래서 글꼴 파일은 어디에도 올리거나 나누지 않아요. 로고는 아웃라인으로 바꾼 SVG로만 배포하고, CLASSTING AI의 AI 두 글자도 글리프를 path로 바꿔 넣었어요. 이 글꼴로 제목이나 문장을 조판하지 마세요.

Pretendard 한글 화면 글꼴 · jsdelivr CDN · 400, 600, 700, 800

수학 시간 전에 분수 쓰는 법을 한 번 더 짚어 주세요

어제 과제를 낸 14명 가운데 9명이 분모와 분자를 바꿔 썼어요. 아직 내지 않은 10명은 세지 않았어요.

Inter 영문 화면 글꼴 · Google Fonts · 400, 600, 700, 800

Go over writing fractions once more before math

9 of the 14 students who turned in yesterday's task swapped the numerator and denominator. The 10 who haven't turned it in aren't counted.

화면 글자 크기

Cognity와 같은 단계를 써요. 한국어가 기본이라 Cognity의 한국어 보정값(보조 14, 라벨 12)을 기본으로 삼고, 영어식 대문자 라벨과 넓은 자간은 쓰지 않아요.

요소	크기	굵기	행간	예
페이지 제목	`30px`	800	1.3	9월 25일 금요일
헤드라인	`24px`	700	1.4	카드의 첫 문장
섹션 제목	`16px`	600	1.5	그다음 할 일
본문, 컨트롤	`15px`	400	21px	버튼, 입력창, 목록
보조 본문	`14px`	400	1.5	캡션, 표 안 글자
라벨	`12px`	600	1.4	아이브로, 칩
배지	`10px`	700	1	숫자 배지만

모양과 그림자

반경은 카드 16, 버튼 14, 작은 상자 12, 칩은 알약형이에요. 그림자는 회색 대신 본문색 #26242B를 옅게 섞고, 음수 spread로 넓게 퍼뜨려 거의 보이지 않게 해요. 기본 카드는 1px 선 하나로 충분하고 그림자는 마우스를 올렸을 때와 활성 상태에만 써요. 간격은 4px 단위예요.

16카드

14버튼

12작은 상자

pill칩

sh-md0 16px 40px -18px

사람이 쓴 것처럼

화면 문장

화면 문장은 해요체로 짧게 써요. 숫자만 던지지 않고 무엇을 셌고 무엇을 세지 않았는지 한 줄 붙여요. 빈 화면에는 "데이터가 없습니다" 대신 "이번 주에는 아직 없어요"처럼 사람의 말로 써요. 움직임은 상태가 바뀔 때만, 0.5초를 넘기지 않아요.

06 · Product Family

프로덕트 브랜드 정합

CT Corp. 아래 두 제품의 대표색이에요. 클래스팅은 초록에서 남보라로 이어지는 그라데이션을 브랜드 색으로 써요.

CT Corp.

#9b7bd4

모회사, 따뜻함

Cg

Cognity

#6C4AB6

중간톤, 학술

Classting

#00C896 → #5B4BD6

브랜드 색, 매일 하는 일

07 · Key Visual

키 비주얼

키 비주얼은 초록에서 남보라로 흐르는 그라데이션 위에 유리 타일이 비스듬히 놓인 장면이에요. 로고 그라데이션은 브랜드 초록에서 시작하고 나머지 네 정지점을 여기서 뽑았어요. 클래스팅이 처음 인사하는 자리에만 써요.

가로 배너 원본

세로 원본

CT Corp.

CSS로 다시 만든 스플래시

쓰는 곳

첫 화면과 바깥에 보이는 자리

앱 스플래시, 로그인 화면 위쪽, 앱스토어 이미지, 발표 표지, 행사 배너. 로고는 흰색으로 얹고, 유리 타일은 한 화면에 한두 장만 둬요. 로그인처럼 버튼이 필요한 화면은 아래쪽에 흰 시트를 깔고 그 위에 초록 버튼을 둬요.

쓰지 않는 곳

앱 안의 일하는 화면

버튼, 카드, 본문 바탕, 차트, 메뉴에는 쓰지 않아요. 키 비주얼 위에 긴 본문을 올리지 마세요. 흰 글자가 청록 쪽에서 1.95:1까지 떨어져요. 키 비주얼 위 글자는 큰 제목과 로고만이에요.

CSS 키 비주얼

.kv {
  background:
    radial-gradient(90% 45% at 0% 100%, rgba(255,255,255,.26), transparent 70%),
    radial-gradient(70% 40% at 100% 0%, rgba(30,20,120,.22), transparent 70%),
    linear-gradient(125deg, #00C896 0%, #02CFC8 20%, #12B6E8 46%, #5F8BE7 72%, #5B4BD6 100%);
}
.kv .tile {               /* glass tile, one or two per screen */
  border-radius: 50px;
  background: linear-gradient(140deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 55%, rgba(255,255,255,.12));
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(4px) saturate(115%);
  transform: rotate(-38deg) skew(10deg, 4deg);
}

08 · 사용 규정

올바른 사용 / 잘못된 사용

자주 헷갈리는 경우를 그려 뒀어요. 대부분은 그라데이션과 보라를 너무 많은 곳에 쓰는 데서 생겨요.

로고는 받은 SVG 그대로심볼과 단어에 각자 그라데이션 하나씩

과제 내기

주 버튼은 초록 바탕에 짙은 글자#053A2A on #00C896 · 5.90:1

AI 요약14편 가운데 10편이 낙엽으로 시작했어요

AI 결과에는 보라 칩과 3px 선선은 처음 도착했을 때만

키 비주얼 위에는 흰 로고그라데이션 로고를 겹치지 않아요

글자마다 그라데이션 금지글자마다 다시 시작하면 줄무늬가 돼요

과제 내기

버튼에 그라데이션 금지그라데이션은 로고와 키 비주얼의 것

심볼 색 바꾸기 금지그라데이션, 흰색, 한 색 인쇄 초록만

늘이거나 줄이기 금지비율은 그대로, 크기만 바꿔요

과제 내기오늘

AI가 아닌 곳에 보라 금지과제 내기, 활성 메뉴는 초록

과제 내기

#00C896 위 흰 글자 금지2.16:1 · AA 미달

09 · Downloads

다운로드

모든 로고는 글꼴 없이 그려지는 아웃라인 SVG예요. 파일을 열어 저장하거나, 코드를 복사해 그대로 붙여 넣으세요. 여러 개를 한 화면에 넣을 때는 그라데이션 id가 겹치지 않게 바꿔 주세요.

클래스팅 로고

classting-logo.svg

SVG 열기

클래스팅 로고 흰색

classting-logo-white.svg

SVG 열기

16px 미만 작은 크기용

classting-logo-small.svg

SVG 열기

심볼

classting-symbol.svg

SVG 열기

워드마크

classting-wordmark.svg

SVG 열기

앱 아이콘

classting-app-icon.svg

SVG 열기

CLASSTING AI · 흰 바탕

classting-ai-logo.svg

SVG 열기

CLASSTING AI · 어두운 바탕

classting-ai-logo-gradient.svg

SVG 열기

CLASSTING AI · 흰색

classting-ai-logo-white.svg

SVG 열기

classting-symbol.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 32" width="116" height="128" role="img" aria-label="Classting symbol"><defs><linearGradient id="cm1" gradientUnits="userSpaceOnUse" x1="-.75" y1=".75" x2="29.75" y2="31.25"><stop offset="0" stop-color="#00C896"/><stop offset=".2" stop-color="#02CFC8"/><stop offset=".45" stop-color="#12B6E8"/><stop offset=".72" stop-color="#5F8BE7"/><stop offset="1" stop-color="#5B4BD6"/></linearGradient></defs><g fill="url(#cm1)"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.378 13.731c-.269 0-.527.046-.756.12-.352.116-1.503.604-1.545 2.048a3.846 3.846 0 000 .2c.042 1.446 1.193 1.934 1.545 2.05.75.245 1.812.172 2.543-.767l.009-.01L20.258 16l-1.084-1.37a2.212 2.212 0 00-1.796-.898zM15.69 3.813h-.174C9.21 3.902 4.184 8.597 3.566 14.725c-.702 6.962 4.654 13.187 11.646 13.455a12.141 12.141 0 0010.021-4.595c.302-.38.3-.914-.004-1.299l-2.549-3.223a.241.241 0 00-.378 0l-.377.476c-1.522 1.951-4.03 2.712-6.393 1.939-2.333-.764-3.886-2.834-3.956-5.275a6.41 6.41 0 010-.406c.07-2.439 1.624-4.51 3.956-5.273 2.362-.773 4.87-.012 6.393 1.938l.377.477a.241.241 0 00.378 0l2.549-3.223a1.053 1.053 0 00-.01-1.316 12.12 12.12 0 00-9.528-4.586zm0 27.877a15.59 15.59 0 01-11.096-4.594A15.59 15.59 0 010 16c0-4.16 1.601-8.075 4.509-11.024A15.597 15.597 0 0115.469.312c2.47-.034 4.84.49 7.046 1.556a15.824 15.824 0 015.441 4.345 4.54 4.54 0 01.02 5.675L24.724 16l3.252 4.113a4.529 4.529 0 01-.001 5.651A15.618 15.618 0 0115.69 31.69z"/></g></svg>

클래스팅브랜드 가이드라인

브랜드 정의

클래스팅

클래스팅 AI

초록은 매일, 보라는 AI, 만나는 곳에만 그라데이션

로고

심볼 C

워드마크 CLASSTING

심볼과 앱 아이콘

CLASSTING AI 짝 로고

사방 x 이상, x는 워드마크 높이의 절반

워드마크 높이 12px, 심볼 16px, 앱 아이콘 24px

작은 크기에서도 같은 그라데이션

컬러 배리에이션

그라데이션 로고는 단색 바탕에만

초록 #00C896, 작으면 잉크 #00785A

컬러 팔레트

타이포그래피

화면 글자 크기

모양과 그림자

사람이 쓴 것처럼

프로덕트 브랜드 정합

키 비주얼

첫 화면과 바깥에 보이는 자리

앱 안의 일하는 화면

올바른 사용 / 잘못된 사용

다운로드

클래스팅
브랜드 가이드라인