The rules of the look and the words

Hue Design System

Loo Say Hien · Updated 7 October 2026

Try the prototypeRead How Hue Works

You sell. Hue keeps track.

This is the design system of Hue, a light customer relationship management tool for Avient Specialty Inks sales reps. Hue works on a phone, a tablet and a computer. It keeps deals, customers and notes in one place, so he spends little time on notes. It is a prototype system: one light theme, a small set of tokens and thirteen components.

Colours

The app blue is inspired by the Avient blue. It is more subdued, so it does not shout, and Daniel can focus on his work. There is no green. Status has a word and an icon, and never colour alone.

Brand and action

The Hue mark

Text and lines

Attention

Problem

Weather panel

Type

Headings are Bricolage Grotesque. Body text is Figtree. The sizes are for a phone.

Headings

Text

Space and shape

Space

Corners

Depth

Lines, not shadows. Only two things float.

Parts

Each part is live. It uses the same styles and the same tokens as the prototype.

The rules

Content fundamentals

• Plain English. Short sentences, no acronyms, no dashes as punctuation.
• A helpful colleague. "Good morning, Daniel." "You sent the quote to Ace Tees 9 days ago. She did not reply yet."
• Always a reason. Every suggestion says why, then offers one next step as a button.
• Money. Singapore dollars, shortened, with no "S": $612k, $1.2M. The Guide in the tool says that all amounts are Singapore dollars.
• One word for one thing. A status has the same words on Home, in Records and in the record. See "Words".
• Status is words and icons. Never colour alone. Done is a tick, attention is a triangle, a problem is a cross.

Visual foundations

• Colour. The app blue (blue-600) is inspired by the Avient blue (avient-blue, #0080E0). It is not the same colour. It is more subdued, so it does not shout, and Daniel can focus on his work. Text is ink, the dark grey of the Avient wordmark. There is no green. Amber (amber-*) marks attention and red (red-*) marks a problem.
• Type. Headings are Bricolage Grotesque at normal width and weight 700. Body text is Figtree at weight 500. Numbers use tabular figures.
• Shape. Buttons, chips and the tick circles are pills (radius-pill). Cards use radius-lg.
• Space. An 8 pixel step (space-3). Cards sit 8 pixels apart with 10 pixels of screen padding.
• Depth. Borders, not shadows. Only floating things get a shadow: the capture button (shadow-float) and open menus (shadow-menu).
• Layout. Phone first. Three places on every device: Home, Records, Settings. Home holds sales, today, later this week, needs attention and open deals. On a phone, section links stay at the top of Home. Bigger screens show the same sections in columns, so they do not need the links. Each column is its own stack: the greeting with Today below it, then sales with the lists below it. A card is as tall as its content, and the order in each column is fixed. A customer record has section links on every device, because it is long. One small capture button floats at the bottom right, or the bottom left if the user chooses.

Iconography

Outline icons, 18 pixels, 1.8 pixel stroke, round ends, drawn as inline SVG: microphone, keyboard, pen, camera, picture, plus, close, calendar and lock. No emoji.

The assistant

The assistant inside the tool is called Hue, as in colour, because Avient sells inks. It is not given a human name, so nobody mistakes it for a person.

• The mark. Three overlapping ink discs in the primary colours: blue-600, hue-red and hue-yellow. The red and yellow are softened to sit with the blue. They belong to the mark only, because status uses its own amber and red. When Hue is working, the discs turn and breathe.
• Where it shows. Beside the greeting, and next to anything Hue wrote or picked: the follow ups of today, drafted messages, the fields that Hue filled in, suggestions and alerts.
• Opening screen. Once a day, the first time he opens the tool, a short screen shows the Avient logo, the Hue mark and the line "You sell. Hue keeps track."
• Voice. Hue greets him by name and then stays out of the way. "Good morning, Daniel."
• Limits. Hue never sends or saves by itself. One line at the top of Check and save says what Hue filled in. Below a field, Hue gives the reason for its choice.
• One switch for each job. Settings lists each job of Hue with its own switch: fill in the fields from my notes, draft my messages, put my follow ups in order, alert me when a customer does not reply, suggestions in customer records, weather for my day. All start on. When a switch is off, the screen still works: the note is saved as written, the message box is empty, the follow ups are in order of customer name.

Today

• One section holds all work of the day. It has two parts: Visits and Follow ups.
• Visits. They come first, in order of time. A visit has the time, the customer, the reason, the area and the weather for its time.
• The area and dry weather are plain text with a small icon. Only an alert has the look of a label. A label must not look more like a button than the button below it.
• Follow ups. A follow up is a thing to do for a customer that is not a visit: a call, a message, a quote or a question about a payment. The most important come first. Three show, and one button shows the others. Each follow up has a reason and one next step as a button.
• The count includes the follow ups that are hidden: "0 of 27 done".
• A follow up for a customer that he visits today is part of the visit. It does not show two times.
• Each item has a circle. A done item stays, with a tick, until the next morning. When he saves a note for that customer, Hue ticks the item, and the row says "Done. Hue ticked it when you saved your note."
• The section follows the clock. Before a visit, its button is "Prepare for the visit". After the time of the visit, the button is "Add a note about the visit", and the weather mark goes away.

The order of follow ups

• Hue gives points to each follow up. For a deal, points = deal value × chance of an order + waiting points.
• Chance comes from the stage: New 20%, Sample 40%, Trial 60%, Quote 80%.
• Waiting points: 50 for a promise that is due today, 10 for each day when it is his move, 5 for each day past the usual wait. Each of the last two stops at 30.
• A late payment has its own rule: 40 points, plus the late amount in thousands, plus 1 point for each day that it is late, to a maximum of 30. Money that a customer owes comes before most new deals.
• The order is new at the start of each day. A promise for today that he adds during the day goes to the top.
• Each follow up gives the reason in words. The points are never shown as a number.

Later this week

• The list starts tomorrow. It shows visits and promises to Sunday.
• Each day shows one time, with its rows below it.
• A day shows three rows. A small text link shows the other rows of that day: "Show 5 more on Fri". A large button is for the end of a list only.

Greeting and weather

• Home opens with a greeting from Hue that follows the time of day: morning, afternoon or evening.
• One sentence gives the weather that can delay a visit that is still to come today, with one instruction. "Storms at 3 pm, when you visit Tuas Textile Print. Leave 15 minutes early."
• When no visit is left today, the sentence gives the weather now, then the weather for the visits of tomorrow. "Cloudy now. Tomorrow: showers at 11 am, when you visit Print Lab SG. Keep an umbrella in the car."
• The weather now is large. One picture and the temperature, with the word "Now". The picture moves: the sun turns, the clouds drift, the rain falls. Behind the text, a quiet scene fits the weather: a soft sun with rings, drifting clouds, falling rain, a short flash in a storm, twinkling stars at night. See WeatherPanel for the details.
• The colour of the panel is the weather now. sky-sun for sun, sky-cloud for clouds, sky-rain for showers, sky-storm for storms and sky-night after dark. On the two dark grounds the text is white.
• One row gives the next parts of the day. It continues with tomorrow, written with the day: "Tue morning". The row slides. It never breaks into two rows.
• The same alert shows on that visit in Today. "Storms. Leave 15 minutes early."
• A "Full forecast" link opens the national weather site in a new tab.
• Nothing on this panel is about the past.

Sales progress

• One bar shows two things: what is won (solid blue-600) and what open deals could add (striped). A 2 pixel gap separates them. One dark line, with the label "Today", shows where he should be on this date.
• The percentage is the largest number after the amount. One short line under the bar says how much is left and whether open deals can cover it.
• When opened, it names the one deal that moves him furthest. This is honest encouragement: it never says a target is safe when it is not.

Motion

• Motion explains what happened. It is short: 150 to 300 milliseconds for controls, up to half a second for content arriving.
• Sections fade up as they scroll into view, once. Sheets slide up and slide away. Lists and cards open and close by growing, not by jumping.
• Every button shows a hover state and a press state. Buttons change colour immediately, with no fade. The capture button lifts on hover and its menu fans out one by one.
• A short message confirms a change, such as "Text size: Large."
• Hue's mark waves for four seconds when the tool opens, and turns while it works.
• The weather panel has the only motion that never stops: a slow scene behind the text, and pictures that move. It is quiet, it takes no taps and it never carries information that the sentence does not carry.
• "Less motion" in Settings and the device setting both switch all of this off.

Accessibility

• Text size. Four sizes in Settings. Everything grows together, and rows wrap so nothing is cut off.
• Contrast. Normal text is at least 4.5 to 1. A "Stronger contrast" setting darkens text, lines and buttons.
• Colour. Status never depends on colour. Each status has a word and its own icon shape: tick, triangle, cross.
• Motion. A "Less motion" setting stops moving effects, and the tool also follows the device setting.
• Reach. The capture button can sit on the left or the right.

Long lists

• Search and filters come first. A long list must never be the only way to find a customer.
• On a phone and a tablet, a list shows a first group and then one button: "Show 20 more". Scroll position stays.
• On a computer, the Records table uses pages of 25, with the page number and the total.
• Home lists stay short. Today shows 3 follow ups, later this week shows 3 rows for each day, needs attention shows 4, open deals shows 5. Each has "Show more" or a link to Records.
• The timeline in a record shows 5 notes, then "Show 10 earlier notes".
• People, promises and files in a record show 4 rows, then "Show n more".
• A placeholder that does not fit ends with three dots. It is never cut in the middle of a letter.

Guide

• The meaning of each status, filter, deal stage and mark is in one sheet: Settings, Help, Guide.
• The Guide has section links that stay at the top of the sheet. The link of the section in view is marked.
• Work screens do not carry these explanations. They stay clear for the work.

Buttons

• Level 1, dark blue. One for each screen: the capture button. In a sheet, the one main action: "Save to record", "Send".
• Level 2, light blue with dark blue text. An action inside a section: "Open draft", "Call Mr Tan", "Prepare for the visit", "New customer". It has a thin blue line around it (blue-200), so it reads as a button and not as a label.
• Level 3, text only. A control of a list: "Show 12 more", "Show fewer", "See all 52 in Records".
• "Cancel" and "Close" have a thin line and dark text. "Remove" has a red line.
• Never put two dark blue buttons on one screen. When each button is dark, none gets attention.

Empty states

• An empty state says what will show here, and it gives one next step.
• A screen has one main empty state, with the Hue mark or an icon, a title, one sentence and one light blue button. On Home it is in Today. In Records it fills the page.
• The other empty parts say one short line in a box with a dashed line. They have no button.
• A note needs a customer. With no customer, the capture button opens the form for a new customer.

Forms

• Label. Each field has a label above it. The label is never inside the field.
• Optional. A field that can stay empty says "(optional)" in its label. All other fields are necessary.
• Example. Each field that he types in shows an example in grey: "Example: 9123 4567". A list and a date have no example, because they show their own values.
• Hint. A short line below the field, only when the correct form is not clear from the example.
• Keyboard. Each type opens the correct keyboard: numbers for a phone and an amount, the email keyboard for an email.
• Rules while he types. A phone field accepts numbers, spaces and one + at the start. An amount field accepts numbers only and adds the commas.
• Rules when he leaves a field. The tool corrects the form of the value: "91234567" becomes "9123 4567", "03-12" becomes "#03-12".
• Error. Red text with a cross below the field. It says what is wrong and how to correct it. It goes away when the value is correct. On save, the tool goes to the first field with an error.
• Rules for each type.
• Company name: 2 to 80 characters.
• Person name: 2 to 60 characters, no numbers.
• Phone: 8 numbers that start with 3, 6, 8 or 9. For another country, + and 8 to 15 numbers.
• Email: the form name@company.com.
• Amount: Singapore dollars, $1,000 or more.
• Date: today or later.
• Unit number: the form #03-12.
• Postal code: 6 numbers.
• File: a photo, a PDF or an office file, 10 MB or smaller.
• A search field is different. It says what he can search for: "Search company, person or product".
• Menu. A list of choices uses our own control, not the control of the browser. The field shows the value and an arrow. The value is 12 pixels from the left edge, and the arrow is 12 pixels from the right edge. The list opens below the field, or above it when there is no room. The selected choice has a pale blue ground and a tick. A list with more than 8 choices has a search field.
• Date. A date field is the same control with a calendar icon in the place of the arrow. It opens a small calendar. A tap on the month or the year changes it. Saturday and Sunday have a grey ground. Days that are not permitted are grey. "Today" and "Tomorrow" are one tap. An optional date also has "No date".
• Keys. The arrow keys move in a menu or a calendar. Enter selects. Escape closes the menu only, not the form.
• Leave a form. A tap outside closes a sheet only when nothing can be lost. When a form has entries, each way to close it (the cross, Cancel, the Escape key, a tap outside) opens one question: "Leave this form?" with "Keep for later", "Discard the entries" and "Stay in the form".
• Kept forms. A kept form shows as one pale blue row at the top of Home, with the time. A tap opens the form with the entries in place. A line in the form says when he started it, with "Discard". A kept form goes away when he saves it.
• A voice note in progress and Check and save do not close on a tap outside.

Customer record: add and edit

• The heading of each list has a plus icon: deals, promises, people, timeline, products, files. It adds one item to that list.
• Each item that he can change has a pencil icon. The icons have no words here, because a record has many rows.
• Each icon button has a tap area of 44 pixels or more, a name for a screen reader ("Edit Kelvin Ng") and a label on hover ("Edit").
• The Edit sheet has Save, Cancel and Remove. "Remove" asks for a second tap.
• The Company section is one set of details, so its heading has the pencil.
• The sheet title names the item: "Edit company", "Edit person: Kelvin Ng", "Edit product", "Edit note".
• Timeline rule. He can change what he wrote: a visit, a call, a note. He cannot change a record: a message, an email, or an entry that the tool made. A record shows a grey lock in the place of the pencil. A tap on the lock says why, and how to correct it: add a note.
• Room below a heading. The first row starts 18 pixels below the heading of a card. The tap areas of the plus and the first pencil do not overlap.
• A deal is not removed. If the customer says no, the stage is set to Lost.
• There is no edit mode for the full page.
• Other screens keep words on their buttons: "New customer", "Add note".

Address

• One field. He types a postal code, a street or a building name. A list of matching addresses and streets opens below the field. He selects one.
• A map below the field shows a pin, so he can check the place.
• The placeholder gives examples. There is no help line under the field.
• He does not type the area. Hue reads it from the postal code.
• The prototype uses a small sample table. The web version also asks OneMap, the Singapore address service, and shows the map from Google Maps. Full Google address search needs a Google Maps key.

Tour

• The first time he opens the tool, a short tour shows six features: sales progress, Today, the round button for notes, customers that need attention, records and settings.
• Each step lights one part of the screen and explains it in two or three short sentences.
• He can close the tour at any step. "Start" in Settings shows it again.

Record a note

One floating round button. Tap it and a short menu fans out above it. Hold it to talk at once.

• Phone and tablet: Talk, Type, Write and Photo of a notebook page. The two devices have the same four ways.
• Computer: the "New note" button opens a small menu: Type a note, Talk a note and Attach a photo.
• Write. The page has lines, like a notebook. On a phone it fills almost the full screen, because handwriting needs room. A pen or a finger works.
• Photo. He takes a photo of the page, or chooses one from his album. On a computer he attaches a picture: JPG, PNG or HEIC.
• A guide in each sheet. "A good note says these things": Customer, What happened, Next step, Date, Product. Hue ticks each one when it finds it in his words. See NoteGuide.
• Two ways to continue. "Check now" opens Check and save. "Check later" keeps the note at the top of Home.

Recording is of Daniel's voice only. He asks before recording a customer.

Check and save

• One line at the top says what Hue did: "Hue filled in 6 fields from your voice note. Check each field, then save." See FilledLine.
• The fields are Customer, What happened, Next step, Date of the next step, Products and Deal stage.
• Below a field, one short line gives the reason for a choice: "You said Friday. Hue took the coming one, Fri 9 Oct." "Was Quote. Hue suggests this from your note."
• "Your original words" opens the note as he said it.
• Nothing is saved before he taps "Save to record". "Check later" keeps the note.

Notes to check

• A note that he kept with "Check later" shows at the top of Home, in "Notes to check". It is not in the record yet.
• The heading says how many: "1 not in the record yet".
• A tap opens Check and save. The row goes away when he saves. See NoteToCheck.

Words

Do not use "task", "quiet" or "tidy up". They were the words of earlier versions.

Records: filters

• The filters are All, Open deals, Your move, No reply, Late payment and Not in touch. Each shows its count.
• Two filters have a second row. "Open deals" chooses a stage. "Not in touch" chooses 2 weeks, 3 weeks, or 4 weeks or more.
• A row of filters that is too long slides. It does not break into two rows. With a mouse, he drags it. See FilterRow.
• "Back" from a record goes to the row that he came from.

A late payment

• A late payment is a follow up, and a row in "Needs attention", with the label "Payment late".
• Its sheet has three parts, each with the Hue mark: "Why Hue flagged this", "Possible reason", and "A plan that you can offer".
• The plan is a row of payments, each with its amount and its date. It follows the finance rules, so he can offer it with no approval. See PaymentPlan.
• The message goes to the accounts contact of the customer, not to the main contact.
• A line at the bottom says where the facts come from: the payment status from the accounts system, the plan from the assistant of the finance team.

Rules

• Use blue-600 for anything tappable. avient-blue is for logo and brand moments.
• One dark blue button for each screen: the capture button. A sheet has one for its main action.
• Never show status with colour alone.
• Do not use green. If Avient's green is needed for a brand moment, take it from the official logo file.
• Do not redraw the Avient logo. Use the official file, whole and uncropped, on a white ground. It appears on the opening screen only. Inside the tool, the Hue name and mark carry the brand.
• Show three follow ups first, each with a reason. One button shows the others. The count includes the hidden ones.
• Use the words in "Words". One word for one thing.
• Hue gives the reason for each thing that it filled in or flagged.
• Do not make the user type something that the tool can find, such as the area of an address.
• Do not use a control of the browser where it shows: no browser menu, no browser date field.
• Do not lose what the user typed. Ask before a form with entries closes, and offer to keep the entries.