CASE STUDY, DESIGN SYSTEM

The KNOCCS Design System

The mark, the tokens and every component behind a customer support inbox. Play with it below.

ROLE: Product Designer
COMPANY: Spursol
SCOPE: Brand, tokens, components
VERSIONS: V1.0 → V1.1

The KNOCCS support inbox, showing a conversation list with status tags and a purple sidebar built from the design system

OVERVIEW

From screens to a system

button styles became one governed family

hand drawn themes became one token layer

030+

named color and type tokens

BRAND

The mark

KNOCCS

One looping stroke, in the same purple to pink gradient as the Primary palette.

One accent, many neutrals

Four brand colors against seven greys. Color is kept for what matters.

Every state drawn

Default, hover and active, designed before anything counts as done.

DefaultHoverActive

Governance over decoration

A documented token beats a clever gradient.

FOUNDATIONS

Tokens come first

Primary

#778AFA

#7620BA

#EB7878

#DE62EA

Secondary

#1A181C

#312D34

#534E56

#7D7881

#ADA7B2

#EAE7EB

S7 White

#FFFFFF

Accent

Red

#B52121

Red Base

#FFEDED

Green

#066627

Green Base

#EDFFF3

Orange

#A74B09

Orange Base

#FFF6ED

Blue

#0C2EA8

Blue Base

#E8EAFF

Hover and surfaces

Hover Dark

#4B3B56

Hover Light

#F7F5FA

Focused

#EDE9F9

Star

#EBC606

Menu BG

#322A38

Type scale

Extra small12/16

Small14/20

Paragraph16/24

Heading 620/28

Heading 524/32

Heading 428/36

Heading 332/40

Heading 236/44

Heading 148/56

Iconography

15 of the 50+ icons, drawn at 24px to one weight.

ANATOMY

One card, seven tokens

Liam Wilson6:34 PMMissing Tooltip on Product Images30 minsCritical6143257

1NameS114 / 20, semibold when new
2SnippetS314 / 16, one line
3TimeS412 / 16, medium
4StarStar16px icon
5Critical tagRed + Red Basepill, 12 / 20
6Unread dotP29px circle
7Hover fillHover Lightfull row

PLAYGROUND

Try the components

Real states, colors and copy from the Figma file.

Assign to me

Loop in

Variant

FULL LIBRARY

Everything else it documents

Real frames from the Figma file, grouped by purpose.

Navigation and chrome

Header

Light and Dark, with search and agent status.

Browser Header

Light and Dark browser chrome.

Sidebar Navigation

Five configurations built from one Nav Item.

Status and people

Agent Status

Available and Unavailable, with the toggle.

Atoms

Avatar, badge and toggle, reused everywhere.

HSO

312

Menus and forms

Loop in menu

Checklist with search.

Tags menu

Filter by tag.

Escalate Conversation

The textarea and its actions.

Simple Menu

Plain actions and a submenu.

User and Email menu

People with search.

Status menu

Open, Pending, Resolve.

Profile menu

Availability and options.

Menu Atom

The row every menu is built from.

Messaging

Conversation Detail Header

Default and Looped in.

Message

Customer, automated and rich signature.

Internal Comment

Team and personal comments.

Email Chip

Recipients, with a removable state.

Conversation Logs

System events as pills.

Files

File type icons

32 formats, one mark each.

Attachments menu

Files with type and size.

Not in the file yet

Breadcrumbs, tabs, an elevation scale, grids and breakpoints, and input error states. Candidates for V1.2.

PROCESS

How it grew up

Two fixes that show the shift from screens to system.

The button

V1.1: One Assign Button with three real states. Outlined, with a chevron, and assigned with an avatar.

The sidebar

Dashboard

Client3

Conversation

V1.1: One Nav Item with Default, Hover and Activated. A theme change becomes a token swap.

Want to see the system in a real screen, or build one like it?

Let's talk