All work
Five PEAK design system boards on a lavender field: typography, the icon library, the default color palette, chips and pills, and buttons
Overview

Ascent PEAK Design System. I was tasked to revamp and modernize Ascent’s legacy design system.

After launching multiple projects using the old design system, there was an ask from leadership to begin a proper rebrand within Ascent’s technology and marketing. The prompt was simple: make Ascent look more modern, aesthetically pleasing, and technology-driven. The push for this rebrand and update was to attract new customers to Ascent’s services.

Timeline
January 2021 – Ongoing
Role
Lead UI Designer
Contribution
Visual design · Architecture · Documentation · Branding · Component creation
  • 2Typefaces
  • 45Figma variables
  • 214Icons
  • 12Spacing steps
  • 2Color modes

The problem

01Problem

The previous design system relied heavily on Material Design. Most of it was taken directly from Material Design’s component sets. As the legacy screens below show, the design lacked personality and flash, and looked dull and lifeless overall. We also heard from many users that it was quite “ugly” and looked outdated next to other supply chain software companies.

Four legacy PEAK screens in Material Design: an order detail page with a progress tracker and map, the All Orders table, training videos and a user profile
Legacy PEAK, built on Material Design

Typography

02Typography

Two typefaces, each with a job: Poppins carries headings and prominent text, and Roboto carries everything people read, scan and type.

Primary · HeadingsMedium · SemiBold

Poppins

Embracing elegance and clarity

With its contemporary charm and subtle sophistication, Poppins emerged as our primary typeface for headings and prominent text elements. Its clean, rounded shapes exude warmth while maintaining a distinct visual presence, ensuring that vital information stands out effortlessly.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &@#%?!

Secondary · InterfaceRegular · Bold

Roboto

Nurturing familiarity and accessibility

Robust and adaptable, Roboto gracefully navigates the intricacies of digital interfaces, ensuring seamless legibility across varying screen sizes and resolutions. Its open counters and friendly letterforms invite users to engage effortlessly with content, fostering a sense of comfort and trust throughout their journey.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &@#%?!

Type scale

Every text style in the system with its font, size, weight, line height and color, set live in Poppins and Roboto.

Headers

Display title
The Quick Brown Fox Jumps Over The Lazy Dog.Poppins · 36px · 600 · LH 47px (1.3×) · Dark
Page title
The Quick Brown Fox Jumps Over The Lazy Dog.Poppins · 24px · 600 · LH 32px (1.3×) · Dark
Subheader title
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 18px · 700 · LH 24px (1.3×) · Black
Section / widget title
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 18px · 600 · LH 24px (1.3×) · Dark
Modal title
The Quick Brown Fox Jumps Over The Lazy Dog.Poppins · 18px · 600 · LH 24px (1.3×) · Dark
Card title
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 18px · 700 · LH 24px (1.3×) · Black
Card subtitle
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 13px · 700 · LH 17px (1.3×) · Black

Content

Paragraph 1
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 16px · 400 · LH 24px (1.5×) · BlackBasic text, form input text, column filters
Paragraph 2
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 14px · 400 · LH 21px (1.5×) · Black
Quantity totals
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 18px · 700 · LH 23px (1.3×) · BlackCard totals, grid totals, quantitative totals
Button text 1
Button LabelPoppins · 16px · 500 · LH varies · White
Button text 2
Button LabelPoppins · 12px · 500 · LH varies · White
Order line
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 16px · 700 · LH 21px (1.3×) · BlackOrder lines
Error text
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · Size varies · 400 · LH varies · Error
Caption
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 12px · 400 · LH 18px (1.5×) · BlackData tables, paragraph copy alternative
Data text
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 12px · 400 · LH 12px (1×) · BlackData tables

Form fields

Form header
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 16px · 600 · LH 21px (1.3×) · Black
Small data input field
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 14px · 400 · LH 18px (1.3×) · BlackSmall data input fields only
Error text (form)
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 12px · 400 · LH 18px (1.5×) · ErrorForm validation

Hyperlinks

Primary hyperlink
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 16px · 400 · LH 24px (1.5×) · LinkOpens an element on the current page · Underlines on hover
Secondary hyperlink
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 14px · 400 · LH 18px (1.3×) · LinkUnderlines on hover
Tertiary hyperlink
The Quick Brown Fox Jumps Over The Lazy Dog.Roboto · 12px · 400 · LH 16px (1.3×) · LinkFooter and disclaimer links, where primary links are too large · Underlines on hover

Colors

03Color

We selected colors that are crisp and clear, ensuring they meet AA and AAA accessibility standards. We designed separate color grids for both light mode and dark mode, ensuring they complement each other while maintaining appropriate contrast ratios.

Each chip shows its best text color and WCAG contrast ratio. Click or tap a swatch to copy its hex.

Primary gradient

Hero surfaces and brand moments

#5A59C0#3F3E81#292B57

Primary

The brand violet and its interaction states

Secondary

A brighter blue-violet for secondary actions

Status

Success and error, each with hover and pressed

Accents

Alerts, links and shipment tags

Tints

The neutral ramp for text, surfaces and strokes

One palette, two modes

Every token has a light and a dark value in the Figma variables. Dark mode inverts the neutral ramp: White becomes the near-black surface, Black becomes the text, and the brand and status colors shift to hold their contrast. Drag the divider to watch the same widget and tokens re-theme.

Drag across the board
Light mode
Shipment GroupsView all

Every incoming shipment with its progress, destination, ETD and ETA.

In TransitPre TransitDelivered
  • 14529023Los Angeles, CAIn Transit
  • 14529031Santa Paula, CADelivered
  • 14529047Long Beach, CAHold
Add widgetCancel
Primary
Primary#5756B3
Primary Hover#36357E
Primary Pressed#151543
Primary 50%#A3A0FF
Primary 10%#CDCCE8
Secondary
Secondary#5550FF
Secondary Hover#6762FF
Secondary Pressed#151280
Secondary 25%#CDCCFC
Status
Success#238170
Success Hover#0C615C
Success Pressed#043E3B
Error#D33E6A
Error Hover#9D1E44
Error Pressed#650723
Accents
Hot#FE7797
Alert#DE5D13
Warning Alternative#FDD4BB
Links#008BD2
Tag 1#8196C9
Tag 2#A9BEF1
Tints
Black#05050F
Dark#23233A
Medium (Dark 75%)#646C8D
Dark 50%#8484A0
Dark 30%#B2B6C6
Light#CED6E8
Light 75%#DBE3F5
Light 30%#EEF0FA
Light 25%#F4F5FA
Light 10%#F2F7FF
White#FFFFFF

Icons

04Icons

We crafted our icon library with a modern and bubbly aesthetic. Our approach involved meticulous attention to detail, combining sleek lines and playful curves to create visually appealing icons. Each icon was carefully designed to convey its function effectively while maintaining a cohesive style throughout the library.

Each icon is its own component, not a variant of its category. Icons are named Category / Shape or Concept / Fill or Stroke / Miscellaneous, which makes a specific icon easy to search for.

The PEAK icon library in 22 categories, from Alerts and Info, Arrows and Boxes to Freight, Location, Transportation and Visualization
Icon library · 22 categories

Components

05Components

Our components bring the foundations together: our spacing guidelines, typography choices, color palette and our own icons. We continuously updated and refined them to accommodate the diverse needs and use cases of designers across our product range. This ongoing process kept the design system responsive to evolving customer requirements and consistent across our products.

Buttons

Variant
State
Size

Main components

Every state, side by side. Each one is a working button.

DefaultHover / FocusPressed / ActiveInactive
PrimaryRegular, average, every day actions.
Primary
Primary Hover
Primary Pressed
Dark 30%
SecondaryMinor actions, or actions within a confined visual space.
White · Primary 1.5px stroke
Primary
Primary Pressed
Dark 30%
ErrorFor cancelling potential actions.
Error 1.5px stroke
Error Hover
Error Pressed
Dark 30%

Other buttons

Specialised buttons for specific jobs in PEAK.

Action buttonPill-shaped buttons, used only when an action takes the user to another screen. Use cases: Save, Submit, Login.
Add Cargo buttonIn lieu of a button, this button fits the shape of the container for adding cargo.
Text buttonContextual actions within the same screen.
Button iconUsually paired with text to communicate an add or remove action.
Edit DashboardA sticky action that exists only on the dashboard screen. Six stacked drop shadows in #6C49AC, from 1.97% to 7%.
DirectionalA sticky component that switches between different steps. Try it.
  1. Origin
  2. Freight
  3. Cargo
  4. Review

Button order

Same buttons, two layouts. Switch between them.

Ready to book?Review your shipment, then continue to confirm.

When buttons are grouped, regardless of where the group sits, the order is always Destructive / Positive / Primary.

Mobile and email buttons stack in the reverse order (Primary / Positive / Destructive), at the full width of the container, 16 px apart.

Form fields

The form fields board, from atoms through molecules to organisms: text, select, date, time and password fields in every state, form header groups and the global search results
Form fields · atoms to organisms
Type
State

Main components

Nine field types, five states each. For most final designs, these are the fields to use.

Organism: form header + input fields

Main components assembled into a settings-style form. Try saving it empty.

Pickup detailsWhere and when the carrier collects the shipment.

When a field needs an exact number of characters, it won’t accept more: the zip code stops at 5.

Chips, pills, badges and tags

State
Parts

Chips in use

Chips appear dynamically, as a group. There are four kinds, plus a More chip. All of them work.

Input chipsRepresent information used in fields, such as an entity or different attributes, like accessorials. Type one and press Enter.

Backspace on an empty field removes the last chip.

Choice chipsSets of at least two options where only one can be chosen. They always appear in a set.

Filter chips, with valuesFilter a collection. The value shows how many items sit in each category, and a check marks the active filters. Pick any combination.
    GroupingChips in a group sit 8 px apart.
    More chipA chip with a dropdown, for options that don’t fit in the set.

    Badges & tags

    Same shape, different jobs. Badges can’t be added or removed by the user, so they have no ✕.

    BadgesPrimary 50% · read-only.
    LabelHazmatPriority
    TagsDisplayed on the Shipment Details and Order Details pages. Every color in the set; ✕ removes one.
    Adding tags in Order EntryThe add-tag flow from Order Entry: the ⊞ button opens a Tag Name field, then Cancel or Add.

    Selection controls

    Selection controls board: checkboxes with a reorder pattern, radio buttons, sliders and switches, each with every state and its spacing spec
    Selection controls
    CheckboxesOutline Medium · check Secondary · hover halo Primary 50%, 48px · disabled Light 75%.
    Atom
    Molecule · try it
    Radio buttonsOutline Primary · radio Secondary · hover halo Primary 50%, 48px · disabled Light 75% on Light 10%.
    Atom
    Molecule · try it
    SliderLine Light 75% · selection and thumb Secondary · hover Secondary 25% · disabled Light 75%. The label thumb has no “neck”.
    Main component
    Try it
    SwitchesOff Medium · on Primary · hover Light / Secondary 25%, 36px · disabled Light 75% / Secondary 25%.
    Atom
    Molecule · try it

    Reorder pattern

    Select or reorder rows, as in Customize Columns. Drag the handle, or focus it and use the arrow keys.

      All shipments · live preview

      Variables

      06Variables

      We made the switch from styles to variables once Figma introduced the concept at Config 2023. Our design system grew exponentially more powerful as we transferred our colors and spacing styles into variable properties.

      Spacing scalepx
      1. 4Uncommon
      2. 8
      3. 12Uncommon
      4. 16
      5. 24
      6. 32
      7. 40
      8. 48
      9. 56Less common
      10. 64Less common
      11. 72Less common
      12. 80Less common
      Figma variables panels: the Colors and Tints collection with default and dark values, and the Spacing collection from 4 to 80
      Figma variables · colors, tints and spacing

      More projects

      Ascent PEAK DashboardProduct Design
      Ascent Order EntryProduct Design