Classting
Brand Guidelines
The logo, color, type and key visual rules that make Classting and Classting AI look like one family. This page records what was decided on October 4, 2026.
Brand Definition
Classting is now the name over two products: Classting, which carries the messages and records that go back and forth every day, and Classting AI, which helps with teaching. In a teacher’s day the two are mixed together and share one login, so they shouldn’t look like two separate apps.
Classting
It handles what teachers, parents and students do every day: notices, attendance, counseling, class posts. Its color is the Classting green people already know, #00C896.
Classting AI
It handles the work where AI helps teaching: AI Learning, AI Sandbox, AI Writing. Inside Classting, anything AI made carries purple #6941D7 so people can tell at a glance.
Green for every day, purple for AI, gradient only where they meet
Green always tells a teacher what to press; purple always tells them what AI wrote. Keeping those two signals apart is what lets people check AI output on its own. The green to indigo gradient that joins them appears only on the logo, the app icon, the first screen and the moment an AI result first arrives. It reads as a signature because it is rare.
Logo
The logo is the same C symbol and CLASSTING wordmark used on classting.com. The shapes are unchanged; only the color is new. The C symbol carries its own full gradient at 135°, like the app icon, and the nine letters of CLASSTING share one horizontal gradient running from the left edge of the C to the right edge of the G.
The C symbol
The existing symbol: a round C with an arrow-shaped notch. Its gradient runs from green at top left to indigo at bottom right, and it stays the same when the symbol is used alone.
The CLASSTING wordmark
Nine paths refined from Frankfurter Com Medium. The gradient spans the whole word once. Restarting it on every letter makes the word look striped.
Symbol and app icon
The full gradient still shows in the symbol at 16px. The app icon puts a white symbol on the same gradient. Tile corners are 30/112 of the side, and the symbol sits centered at about half the side.
The CLASSTING AI lockup
The letters AI are Frankfurter Com Medium glyphs converted to paths, the same typeface as the wordmark. On white, CLASSTING takes the gradient and AI takes the indigo where the gradient ends, #5B4BD6 (6.14:1 on white). That indigo sinks to 2.95:1 on dark, so on dark backgrounds and on the key visual all eleven letters share one gradient, or everything goes white.
At least x on every side, x = half the wordmark height
Keep x clear around the logo. No text, image edges or other logos inside it. The app icon tile is its own clear space.
Wordmark 12px tall, symbol 16px, app icon 24px
These are screen sizes; never go smaller. The print minimum will be set later by a designer.
The same gradient at small sizes
Below a 16px wordmark height, the symbol and CLASSTING keep the same gradient. Use the small-size file for footers, the small line of an email signature and small badges.
Color Variations
There are four approved combinations. Most of the time use the default on white; when the background is the gradient or a photo, switch to white.
Gradient logo on solid backgrounds only
Use the gradient logo on solid backgrounds such as white, near-white #FBFBFC or dark #141317. On the key visual or a photo, a gradient logo melts into the background.
Green #00C896, ink #00785A when small
When a gradient can’t be printed, print the symbol and word in green. The 2017 guide lists PANTONE 3395 C as the spot reference. For small sizes or documents on white paper, ink #00785A reads more clearly.
Color Palette
The green and purple scales were drawn so that the same step number has the same OKLCH lightness. Brand green #00C896 is a light color, so it sits at 500; Classting AI purple #6941D7 is a deep color, so it sits at 700. The number in each chip is its contrast ratio against white (WCAG 2).
1.06:1
1.15:1
1.32:1
1.58:1
1.85:1
2.16:1
3.34:1
5.48:1
8.60:1
12.77:1
1.08:1
1.18:1
1.38:1
1.69:1
2.03:1
2.41:1
3.82:1
6.29:1
9.82:1
13.87:1
Text and icons use inks, not the base colors. Green ink is green-700 #00785A (5.48:1 on white); purple ink is #5B36C4 (7.58:1 on white). Purple has twice the chroma of green and looks lighter at the same lightness, so its ink sits a little lower, and the two read with equal weight in one paragraph.
To pass AA (4.5:1) with white text, the background would have to drop to #038765, which is no longer the Classting green people remember. So the background stays brand green and the text is green-900.
Surfaces and text use the same neutrals as Cognity. In dark mode the background is #141317 and cards are #1D1C21, and inks move up to step 400 (green #45D5A6, purple #BAABFF).
Semantic colors are defined in OKLCH; the hex values here are their sRGB equivalents. Good is a different green at hue 150° so it isn’t mistaken for the brand green; use the darker value for text.
The gradient starts at the brand green and runs through four stops sampled from the key visual: green, teal, sky, blue, indigo. Because the stops are hex values, Figma, the app and video all render the same colors. The logo and app icon use them at 135°, the AI card line at 90°.
: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%);
}<!-- 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>Which UI element takes which color. Anything not listed is neutral.
| Element | Color | Token | Notes |
|---|---|---|---|
| Green · everyday Classting | |||
| Primary button | #00C896 + #053A2A | --primary / --primary-fg | One per screen. Even on AI screens, Assign stays green. 5.90:1 |
| Active nav, active tab | #00785A | --primary-ink | Only text and icon turn green, 5.48:1 on white |
| Links | #00785A | --primary-ink | Links inside AI output are purple |
| Focus ring | #00A077 2px | --focus | #00C896 is 2.16:1 on white, so the ring steps down. 3.34:1 |
| Purple · made by AI | |||
| AI chips: summary, grading, picks, translation | #5B36C4 / #EDEAFF | --ai-ink / --ai-soft | 6.43:1 |
| Classting AI nav group and its active item | #5B36C4 | --ai-ink | AI Learning, AI Sandbox, AI Writing, Dashboard |
| Links in AI output, "see evidence" | #5B36C4 | --ai-ink | 7.58:1 on white |
| AI paragraph wash | #F7F5FE + #DCD7FE | --ai-wash / --ai-line | Translations, parent summaries |
| Gradient · where the two meet | |||
| Logo, app icon | 135° | --grad-diag | One each on the symbol and the wordmark |
| Splash, login key visual | 125° | --grad-kv | Top of the screen only; buttons sit on a white sheet |
| 3px line on AI result cards | 90° | --grad | Only on first arrival; gone once opened |
| AI nav group marker | 12px | url(#grad-mark) | The logo symbol, small |
| Buttons, general backgrounds, charts | None | Never | |
Typography
Logo type and screen type are separate. The wordmark comes from Frankfurter Com Medium; screen text is Pretendard for Korean and Inter for English. These are the same body faces as the CT Corp. guide. The guide’s Playfair Display and Nanum Myeongjo are the company’s editorial voice and aren’t used in Classting screens.
Frankfurter Com is a commercial Linotype typeface. Its web license is unconfirmed, and the file we have is flagged Preview & Print for embedding. So the font file is never uploaded or shared. The logo is distributed only as outlined SVG, and the AI in CLASSTING AI is glyphs converted to paths. Don’t set headlines or text in this typeface.
UI type scale
The same steps as Cognity. Korean is the default, so Cognity’s Korean adjustments (secondary 14, label 12) are the baseline, and there are no English-style uppercase labels with wide tracking.
| Element | Size | Weight | Line height | Example |
|---|---|---|---|---|
| Page title | 30px | 800 | 1.3 | Friday, September 25 |
| Headline | 24px | 700 | 1.4 | Lead sentence of a card |
| Section title | 16px | 600 | 1.5 | Next up |
| Body, controls | 15px | 400 | 21px | Buttons, inputs, lists |
| Secondary | 14px | 400 | 1.5 | Captions, table cells |
| Label | 12px | 600 | 1.4 | Eyebrows, chips |
| Badge | 10px | 700 | 1 | Count badges only |
Shape and shadow
Radii are 16 for cards, 14 for buttons, 12 for small boxes and pill-shaped for chips. Shadows use a faint tint of the ink #26242B instead of gray, spread wide with a negative spread so they are barely there. A plain card needs only a 1px line; shadows are for hover and active states. Spacing runs on a 4px grid.
Write like a person
Write UI copy short and in a friendly polite register. Don’t drop a bare number; add a line saying what was counted and what wasn’t. Empty states speak like a person, "Nothing yet this week" rather than "No data". Motion only when state changes, never longer than 0.5s.
Product Brand Alignment
The lead colors of the two products under CT Corp. Classting uses its green-to-indigo gradient as its brand color.
Key Visual
The key visual is glass tiles set at an angle on a gradient that flows from green to indigo. The logo gradient starts at the brand green and takes its other four stops from it. Use it only where Classting first says hello.
First screens and outward-facing places
App splash, the top of the login screen, app store images, presentation covers, event banners. Put the logo on it in white and keep to one or two glass tiles per screen. Where a screen needs buttons, like login, lay a white sheet at the bottom and put the green button on it.
Working screens inside the app
Never on buttons, cards, body backgrounds, charts or menus. Don’t put long text on it: white text falls to 1.95:1 on the teal end. Only large headlines and the logo go on the key visual.
.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);
}Do's & Don'ts
These are the cases people mix up most. Most of them come from using the gradient or purple in too many places.
Downloads
Every logo is an outlined SVG that needs no font. Open the file and save it, or copy the code and paste it in. When you place several on one page, rename the gradient ids so they don’t clash.
<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>