Lulu Wang
The ANDS component library — buttons, inputs, filters and notifications laid out as a shared reference.

Design System · Altitude Networks · 0 → 1

Altitude Networks Design System

The central place for documenting design decisions: visual style and code.

At a glance
Summary:
As we see many UI components and marketing copies that are used multiple times, I proposed to create a design system for the company. The effort is well received by all stakeholders.
Design process:
Propose the structure of Altitude Networks Design System (ANDS) → Propose the roadmap → Creating the component library in Figma, design guidelines in Notion, connect to code in Storybook.
Team:
1 product designer, 1 front-end engineer, 1 customer success manager.
4 wks Structure, roadmap, and stakeholder buy-in
8+ mo Ongoing build
1/2 day/wk Sustained, dedicated investment alongside product work

01What is Altitude Networks Design System (ANDS)?

Design System is the central place for documenting design decisions. It improves and sustains a team's shared understanding of visual style through design, code, and other interdisciplinary handoffs.

The structure of ANDS: content, component library in Figma, Storybook, and principles — each listing the tokens, components and guidelines it covers.

02The Benefits of ANDS

For frontend devs, it provides a documented reusable codebase.

For graphic designers and UX designers, it keeps the visuals, UI, and interactions of the product coherent.

For copy writers, the content style guide keeps the copy fits into our branding.

ANDS branching into UI design, graphic design, frontend implementation, and marketing.

03ANDS Implementation Roadmap

The 2021 implementation roadmap: design tokens, design guidelines, accessibility, content, Storybook implementation, and ongoing component library maintenance.

04Initial Set of Design Tokens

The initial token set: typography, icons, colors, surface, grid and spacing, and radius.

05Basic Components

Basic components: buttons, inputs, filters, notifications, cards, navigation, and tables.

06More Complex Components

Complex components: file permission editing, risk resolution, the file inspector, and spotlight views.

07Design tokens for front-end codebase (Notion)

The token documentation in Notion — name, description and value for text, border and font-family tokens.

Design tokens are named entities that store visual design attributes, they are absolute values used within components. Altitude Networks Design System (ANDS) follows the naming system below for our tokens.

Domain-Component-Category-Variant-State-Mode

For example, the design token for primary button hover color used in app will be named as:

$flavious-button-primary-icontext-hover-ondark
which maps to #0167DC.

I completed the entire design token used in our application, and worked with the front-end developers to include it in the codebase.

(Inspired by Nathan Curtis' article: Naming Tokens in Design Systems.)