All case studies
Design System

Arrow Electronics

Snap: an Angular 2 component library for Arrow Electronics. Design tokens and UI components (type, colour, buttons, forms, tables, messages, tabs) built once so a growing product surface stays fast and consistent.

Client
Arrow Electronics
Project
Snap component library
Focus
UI development
Stack
Angular 2 · CSS3
Arrow Electronics: the Snap component library on a laptop and a phone, on a blue and dark split background.
Approach

A system built to be reused.

  1. Tokens first

    Colour, type and spacing live in named custom properties, so a theme is a handful of overrides rather than a rewrite.

  2. Small, honest components

    Buttons, fields, tables, messages and tabs each carry one job and their own states, including disabled, focus and error.

  3. Dark theme built in

    The same components re-skin through the tokens alone. Try the Light/Dark toggle in the live components below.

Live components

The Snap library, running.

These are live components, not screenshots: the buttons, tabs and toggle all work.

Arrow
  • Home
  • Products
  • Resources
Typography

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Body text — Arrow Electronics is a global provider of products, services and solutions to industrial and commercial users of electronic components and enterprise computing solutions. Learn more about Arrow.

Bold text for emphasis. Regular paragraph copy using the base 12px Arial typeface. Line height is set to 1.4em for comfortable reading.

Colour palette
Gray
Red
Orange
Gold
Lt Green
Green
Lt Blue
Blue
Dk Blue
Purple
Burgundy
Buttons & badges
ABC
Form controls
  
Table
Part numberDescriptionQtyUnit priceStatus
MCU-32F417IGMicrocontroller STM32500$4.28In Stock
CAP-0603-10UFCapacitor 10µF 060310,000$0.12Lead Time
RES-0402-100RResistor 100Ω 040225,000$0.03Out of Stock
Content boxes

Rounded content box

Standard card container with border radius and subtle border.

Gray content box

Gray-background variant for secondary content areas.

Feedback
Success — Your order has been submitted successfully.
Error — Please correct the fields highlighted below.
Warning — Some items in your cart have limited availability.
Info — Prices shown are estimated only and subject to change.
Breadcrumbs & tabs
  • Home
  • Products
  • Semiconductors
  • Microcontrollers
Overview: each tab panel shows the content for its category.
© 2016 Arrow Electronics, Inc.Privacy · Terms · Contact
Tokens

The values underneath.

--clr-gray#353D40
--clr-gray-dark#282E30
--clr-gray-mid#495053
--clr-text#676D6F
--clr-border#EAEBEC
--clr-bg#F5F5F5
--clr-blue#009DDC
--clr-blue-dk#008bc3
--clr-blue-deep#00539B
--clr-blue-lt#72CDF4
--clr-green#54B948
--clr-red#E31B23
--clr-gold#FDBB30
--clr-orange#F68A33
Mobile app

Signing in, on a phone.

Alongside Snap, I designed screens for Arrow's Enterprise Computing Solutions NA mobile app, which shipped to Arrow customers and the wider Arrow community. Three account-access screens from 2018 survive and are redrawn here; the rest of my files are lost. A concept that extends them follows.

Original designs, 2018

Redrawn from my 2018 Illustrator file at today's iPhone size. Layout and colours follow the original; I fixed two typos, swapped the placeholder logo for the Arrow wordmark and substituted the typeface.

Original 2018Log InUsername and password, with recovery links and a route for people without an account.
Original 2018Forgot UsernameRecover a username by email without leaving the app.
Original 2018Forgot PasswordRequest a reset link using the username and email on file.

Extending the concept

Portfolio concept. These six screens were not designed at Arrow and never shipped. They carry the same visual system through the rest of the journey: what happens after "Send Instructions", how a new customer gets in, and where a logged-in user lands. Names, numbers and order IDs are placeholders.

ConceptCheck Your EmailConfirms the request went through, shows where it was sent, and offers a resend so nobody is left guessing.
ConceptEnter Verification CodeSix-digit code entry for people who open the email on another device. iOS can fill it from Mail or Messages.
ConceptCreate New PasswordLive strength meter and a checklist, so the rules are visible before the form is submitted, not after it fails.
ConceptRequest an AccountWhere the "request an account" link on Log In leads. Short on purpose: sales follows up for the rest.
ConceptFace ID Log InReturning users skip the password. Face ID arrived on iPhone X in late 2017, so it would already have been an option in 2018.
ConceptHomeWhere a logged-in user lands: what needs attention today, then the latest activity, with the main areas one tap away.
More case studies

Keep exploring.

Take-Home Project

Let's Roam

A 48-hour take-home redesign of a scavenger-hunt app's core hunt screen — research, spec, and a working interactive demo, not just mockups.
Industrial / IoT

Hach Controller

A tablet interface for a water-quality instrument: big readings, clear status, one small icon system.
Brand & Web

Kritek LLC

A brand mark, a 67-icon library, and six shipped pages for an IT consulting firm serving transportation agencies.
Retail

Sports Authority

A team and coach registry taken from a low-fi Axure wireframe to a finished, on-brand interface.
All case studies Next: Let's Roam