MentorMe's Visual Design Tokens — A Love Letter to the Teal

Design tokens are the opinions your product makes before it opens its mouth. Colors, type, spacing, radius — the reader feels them in the first 200 milliseconds and decides something about you. Then they read the copy.

We spent more time on MentorMe's tokens than on most of our features. Here's why we made the calls we made.

The teal is #2DD4BF. It's not a random Tailwind color. It's an intentional rejection of three things. First — SaaS blue. Every B2B tool on earth uses some version of Stripe's indigo. We didn't want to be that. Second — AI purple. Every AI tool uses some version of Anthropic's beige-and-orange or OpenAI's green-on-black. We didn't want to be that either. Third — generic startup green. Too close to sustainability brands, too close to finance apps.

Teal is warm and technical at the same time. It reads as competent but not corporate. It shows up well on dark and light backgrounds. It has just enough saturation to signal action without being aggressive. On the hero CTA, it pops. On a data chart, it reads clean. On a profile avatar ring, it looks human.

The dark is #0A1929. Not black. Black is too hard, too gamer, too heavy. Pure black on a screen creates eye strain at high contrast and signals "hacker aesthetic" in a way we specifically didn't want. #0A1929 is a navy-black, very dark but with enough blue in it that the eye reads it as a color rather than an absence. It pairs with the teal without fighting it. A pure black would make the teal look neon. The navy makes it look considered.

"Colors, type, spacing, radius — the reader feels them in the first 200 milliseconds and decides something about you."

The typography is Playfair Display for headlines and Inter for everything else. Playfair is a high-contrast serif with sharp terminals — it's the kind of font you see on editorial magazines, not on B2B SaaS. That contrast is the point. We're not a spreadsheet tool. We're a school and a community and a product. A serif headline tells the reader they're somewhere that takes words seriously. Inter for body text is the unsurprising choice. It's the most legible sans-serif we've tested across the widest range of screens and sizes. Nobody ever complains about Inter.

The supporting palette is small and opinionated. A single neutral gray scale for UI chrome. An amber for warnings. A softer coral for destructive actions instead of the default red — red on a learning platform feels like a test you failed, and that's the wrong emotional register for "are you sure you want to delete this post." Coral says the same thing without the dread.

Spacing is on an 8-pixel grid. Radius is 12 pixels for cards, 8 for buttons, full-round for avatars and status pills. Shadows are layered — one tight shadow for elevation, one diffuse shadow for ambient depth. We use actual soft shadows, not the harsh ones from default component libraries. The difference is subtle and it's the kind of thing you feel more than see.

Dark mode is the default on the landing page. Light mode is available and we maintain both with the same fidelity. The teal adjusts slightly between the two — #2DD4BF on dark, #14B8A6 on light — because the same hex can read differently on different backgrounds and we want it to feel the same both times.

The biggest design principle we enforce. No decoration. Every element on the page does a job. If it doesn't, it comes out. We've had versions of the marketing site with floating blobs, gradient meshes, subtle animated background patterns — we cut them all. They added visual noise without adding meaning. The site is cleaner than most SaaS sites. That's a choice.

One more piece — the voice of the copy matches the tokens. Short paragraphs. Direct sentences. No marketing buzzwords. The same aesthetic that chose a serif for the headline chose a conversational tone for the body. If the design token is warm but technical, the copy has to be too. Otherwise the whole thing reads as a mask.

Design tokens are the easiest thing to copy and the hardest thing to choose. Anyone can copy our hex codes. Nobody can copy the reasoning. The reasoning is what makes them work.

Action step: pull up your own product's color palette and write one sentence per color explaining why it's that exact hex.

Start free at mentorme.com — community, 2 courses, AI Operator Stack, and the skill library.