TL;DR

To support Calton's growth, we designed and built a Design System from scratch in Figma, starting with requirements analysis and typographic and component foundations, even before "designing pages." Result: consistent interfaces, more predictable delivery times, less design debt.

On the engineering front, we initialized a new front-end project in TypeScript, removing external UI libraries in favor of headless components and an atomic approach, with almost no dependencies, ensuring maximum development speed.

‍

Context & Challenge

Calton is a SaaS that uses AI to collect, manage, and analyze reviews and surveys. The product is growing, features are increasing, and teams are expanding. Without a shared foundation, the risk is visual inconsistency, longer timelines, and ever-increasing maintenance costs.
Goal: To create a consistent and scalable system that allows for composing new UIs and iterating quickly, while maintaining quality and coherence.

Why a Design System (now)

A single shared foundation brings order and speed. With a Design System, we align typography, colors, spacing, and components into a single source of truth that reduces ambiguity and downtime, enables controlled contributions with clear governance, and lays the groundwork for accessibility (contrasts and typographic hierarchies in line with WCAG AA). In practice: fewer choices and repeated code, and more time to create features.

How we worked
‍

1) Discovery & Requirements

• UI Audit of existing views: map of patterns, inconsistencies, debt.
• Use Case Mapping and priorities: CRUD, data tables, filters, loading/error states, empty states.
• Team Alignment: defining functional domains and backend dependencies.

2) Foundations (before pages)

• Typography: typographic scales for Desktop/Mobile, text styles in Figma (display, heading, body, label), 8pt baseline for spacing.
• Colors & States: base palette + semantic (primary, success, warning, danger, info) with light/dark‑ready variants and contrast checks.
• Layout: grids, containers, breakpoints, density rules.
• Iconography: consistent set and usage rules.

3) Components (atomic → composable)

• Atoms: Button, IconButton, Badge, Tag, Tooltip, Avatar, Input Token.
• Molecules: Input/TextArea with states (default/hover/focus/error/disabled), Select, Combobox, Checkbox/Radio, Switch, Slider.
• Organisms: Card, Modal/Drawer, Stepper, Tabs, Table (with sorting/pagination), Data Filters, Toast/Alert.
• Variants & States: use of Component Properties (boolean, text, instance swap) to avoid variant explosions; Auto Layout and Constraints for responsiveness.

4) Tokens & Variables

• Definition of Design Tokens (typography, colors, spacing, radius, shadow) through Figma Variables and semantic naming (e.g. bg/surface/default, text/primary, space/16).
• Documented mapping for a 1:1 front-end integration.

5) Technical Foundation (TypeScript & zero-dependencies)

In parallel, we set up a new TypeScript project focused on headless components and almost zero external dependencies. Design tokens are exposed as CSS variables consumed by the components; the styling is minimal and overridable, avoiding lock-in to graphic libraries.

6) Documentation & Governance

• Guidelines in Figma: dedicated page with Do/Don’t, composition examples, known anti-patterns.
• Changelog and simplified library versioning.
• Contribution process: how to propose new components or extensions (proposal template, acceptance criteria, QA).

7) Adoption

• Sessions with teams: onboarding for designers and developers, spec handoff, UI component mapping → implementation.
• Pilot: rollout on a core flow (e.g., survey analysis) to validate timelines and quality, then gradual extension.

‍

What's new for Calton

More consistent interfaces thanks to shared typography, grids, and patterns; less ambiguity because component states and properties are standardized; real scalability: new views are assembled like Lego blocks. Furthermore, the TS technical infrastructure + headless components deliver performance, control, and speed without relying on heavy UI frameworks.

‍