Aristotle Design System
Role · Designer (collaborative)
Timeline · Oct 2025 - Ongoing
Team · 2 designers
Why It Existed
Aristotle grew fast. As Beta took shape, inconsistencies started surfacing. Spacing, sizing, components that worked in one context but broke in another. One-off decisions compounded. The product needed a shared foundation that could move as fast as the team building it.
The Core Challenge
What We Built
The system maps directly to how Aristotle is structured. Each layer of the product has a corresponding layer in the system.
Color
Primitive scales mapped to semantic tokens. The system was designed around how Aristotle actually layers. Background, card, panel, surface. Each level always one step lighter or darker than what sits beneath it. The hierarchy is visual but also structural. You always know where you are in the stack.
Dark mode came later, which meant rethinking the entire token system rather than just inverting values. The layering rule had to hold in both directions. Light mode moves from Neutral 50 inward. Dark mode mirrors it from Neutral 1250 inward. Same logic, opposite ends of the scale.
The system goes one layer deeper with interaction tokens. Background tokens handle static fills. Interaction tokens handle everything a user triggers. Hover, active, selected, focus, disabled. Three groups (Neutral, Brand, Ghost) each mapped to a surface type. The rule is strict: always match the interaction token to the surface beneath it. Crossing groups produces invisible errors that only surface in edge cases.
Accent colors are applied selectively, a decision that came directly from the brand.
Typography
Two typefaces, one choice. Helvetica Now Display handles the default interface. Iovan Old St is the serif alternative. Researchers can switch between them directly in Aristotle's settings. A small decision with real reasoning behind it. Many scientists are accustomed to reading in serif fonts. The interface should meet them where they are, not impose a preference.
The type scale started lean and grew with the product. As more components were designed, cards, panels, sidebars, reasoning traces, each serving a different purpose and hierarchy, the scale expanded to match. Six levels from Display down to Body-sm. Consistent across every X1 model and every surface.
Icons
158 icons across six sizes. The library started small and grew directly with the product. Each icon was added in response to a real UI need, not speculatively. The size range expanded the same way. Smaller sizes like 12 and 14px weren't planned upfront. They became necessary as the interface got more dense and detailed.
Consistency was maintained through a shared visual style across the full set. Stroke weight, corner radius, and sizing grid kept uniform throughout. As new product surfaces emerged, new icon needs followed. Pinboard, currently in development, introduced a category that didn't exist before. Shape and line style controls that standard libraries don't cover.
The library is not fixed. As Aristotle grows, the icons grow with it.
Always In Progress
A design system is never finished. It reflects the product at a point in time and as Aristotle grows, the system grows with it. New features bring new components, new surfaces bring new token needs, new edge cases stress-test what's already there.
This is ongoing work. The system today is more considered than it was six months ago. Six months from now it will be more considered than it is today.
Last updated — July 2026