← back
2025

KnowThyself360 An AI environment built for a team that doesn't have a full design department

KT360 is an early-stage AI startup. The brand had to look nothing like AI — playful, human, deliberately distinct. The harder problem: no designer on the team. We encoded the brand into the environment. Rules, component specs, and motion patterns live as files an AI can read, check, and enforce. Marketing writes a blog post, a developer ships a page — both come out looking like the same hand because the rules do the work.

Role: Freelance Designer & AI Builder

Contribution: Brand strategy, Visual identity, Design systems, AI environment design, Prototype infrastructure

Visual Identity
Dark
Playful, human, deliberately distinct — so the brand reads as a person, not as a model.
Rules as Files
Button color|--color-primary
Font size|text-xs token
Corner radius|rounded-md token
rules/ enforcing consistency
Brand rules, component specs, and motion patterns written as files the AI reads — so an agent catches the off-brand button before a human has to.
Shared Prototype Environment
Deployedkt360-env → production
One codebase marketers, developers, and AI agents all open — so a blog post and a new page come out of the same place.
Design System Foundation
ColorsTypeComponents
Primary
Light
Lighter
Text
Muted
BG
Tokens, typography, components — so every new page inherits the brand without anyone choosing it manually.
Motion as Tokens
kt360 / motion.ease.out-soft · ~240ms
Easing and timing live as tokens like color and spacing — so motion doesn't drift between a button hover and a modal entrance.

The problem

On most teams, motion is the last thing the designer hands over and the first thing the developer simplifies. The brand has a font, a color, a spacing scale — and then every animation gets eyeballed in CSS at the end. Surfaces drift in feel even when they look identical at rest.

What we did

Treated motion the way the system already treats color and spacing — as decisions about curves and times, not as decoration. Built two motion-token tables inside the KT360 rulebook.

The solution

Timing tokens like `motion.duration.fast` (~160ms), `motion.duration.base` (~240ms), `motion.duration.slow` (~400ms). Easing tokens like `motion.ease.out-soft` for entrances, `motion.ease.in-firm` for exits, `motion.ease.spring-snap` for things that should feel alive. Every component reaches in by name, and the rulebook tells the AI which token a given interaction belongs to.

Why it works

The same easing carries from a button hover to a modal entrance to a toast — because what got copied is the token, not the value. Year one nobody notices. Year three the brand still feels the way the founder remembers it feeling, because the motion didn't drift.

More case studies

See all