In a design system, how do you turn brand attributes such as 'calm' and 'trustworthy' into concrete interface decisions for a hospital patient portal?
answer
- adjectives cannot be built directly
- what would a user observe
- one trait per design lever
- record the reason with the choice
- 'this, not that' pairs
basics
~20 sDescribe each attribute as traits a user could observe, map each trait to a lever - color, type, shape, imagery, motion, density - and record each choice with its reason and what it rules out.
solid answer
~40 sAn attribute is too vague to build from, so I first ask what it looks and feels like to a user. For a patient portal, *calm* might mean low visual noise, predictable layouts and soft, unhurried motion; *trustworthy* might mean highly legible type, steady structure and honest imagery of real facilities. Each trait becomes a decision on a named lever - color and how much of it, type, shape, imagery, motion, density - written down with its reason and a 'this, not that' limit such as *friendly, not childish*, so it survives handoff. Then I test it: review screens side by side, ask patients to describe the product in their own words, and where two attributes collide on one surface, decide which one leads there.
go deeper
Know that brand attributes are expressed through several levers - color, type, shape, imagery, motion, density - and that a brand is more than its logo and main color.
Explain the attribute to trait to lever chain, and why each decision is recorded with its reason and a 'this, not that' limit so other teams can apply it consistently.
Show how you would test whether screens actually read as the attributes, spot an attribute carried by only one fragile lever, and resolve two attributes that collide on one surface.
Weigh how much expression the system should standardise versus leave to product teams, and how the brand and system teams share ownership of the mapping over time.
## Why brand attributes need translating A **brand attribute** is an adjective an organisation wants people to associate with it: *calm*, *trustworthy*, *confident*, *playful*. Attributes are chosen by brand strategy, but on their own they cannot be built. Two designers handed 'calm' will produce two different screens, and neither can show that theirs is right. The design system's job is to turn each adjective into **decisions that can be checked**, so that a screen built by any team, on any platform, lands in the same place. For a hospital patient portal the stakes are specific. Patients arrive anxious - checking results, booking follow-ups, paying bills - and many are older or unwell. An attribute like *calm* is not decoration here; it is a promise about how the product behaves when someone is stressed. ## From attribute to trait to lever A reliable translation goes through three steps: 1. **Describe observable traits.** Ask what the attribute looks and feels like to a user. *Calm* might mean low visual noise, predictable layouts and unhurried motion. *Trustworthy* might mean legible type, steady structure, honest imagery and no surprises. 2. **Map each trait to a lever.** The levers a design language controls are color (which colors, and how much of each), typography (the personality of the typeface and how boldly it is used), shape (corner softness, line weight), imagery (photography, illustration and their subjects), motion (speed and character), density (how much fits on a screen) and voice. 3. **Record the decision with its reason.** 'Brand color is limited to primary actions and navigation, because calm means few competing signals' can be reviewed; 'use brand color tastefully' cannot. ## A worked mapping for a patient portal | Attribute | Observable trait | Lever and decision | What it rules out | |---|---|---|---| | Calm | Few competing signals | Brand color reserved for primary actions and navigation; neutral surfaces elsewhere | Saturated color fields behind content | | Calm | Unhurried movement | Short, soft transitions; no bouncing or attention-seeking loops | Celebratory animation on routine tasks | | Trustworthy | Easy to read, nothing hidden | A sturdy, highly legible text face; clear hierarchy | Condensed display type in body content | | Trustworthy | Honest and real | Photography of real facilities and consenting staff | Generic stock images of smiling models | | Human | Warm but not childish | Soft line illustration in onboarding and empty states only | Cartoon mascots on clinical screens | The right-hand column matters as much as the middle one. An attribute that rules nothing out is not yet a decision. ## Recording it so it survives The translation must live where teams will meet it: - **In the design language** - color usage, the chosen typefaces, the imagery style - as named, reusable choices rather than one designer's file. - **As 'this, not that' pairs** - *friendly, not childish*; *calm, not cold* - which fence each attribute against its over-applied version. - **As paired examples** - one screen that expresses the attribute and one that overshoots it, each with a one-line reason. - **With the reason attached**, so the next person can extend the rule to a case nobody anticipated instead of copying a surface. ## Checking the result A translation is a hypothesis until it is tested. Useful checks: - **Attribute review**: put a set of screens side by side and ask whether each reads as the attributes. Screens that drift stand out quickly in a group. - **User perception**: in research sessions, ask patients to describe the product in their own words and compare those words with the intended attributes. - **Logo-hidden test**: hide the logo; if the screen is still recognisably this product, the expression is carried by the system, not by the logo alone. - **Single-lever check**: if an attribute is expressed through only one lever, usually color, it is fragile; one palette change erases it. ## When attributes pull against each other Attributes often conflict on a specific surface. *Warm* and *precise* collide on a lab-results table; *confident* and *calm* collide on a payment reminder. The resolution is not to average them everywhere but to **decide which attribute leads on which surface**: warmth leads on onboarding and empty states, precision leads on results and billing. Writing that priority down turns a recurring argument into a settled rule, and keeps the brand recognisable while the product stays usable for the people who need it most.
- How do you stop an attribute like 'friendly' becoming an excuse for any design choice?Pair it with a limit that names its over-applied version - *friendly, not childish* - and with two examples, one that expresses it and one that overshoots it. Then tie it to specific levers: friendly might mean soft corners and a warm illustration in empty states, but never jokes or mascots on clinical screens. An attribute that rules nothing out cannot settle a review.
- Who should own the translation - the brand team or the design system team?Both, with different halves. The brand team owns the attributes and their intent; the design system team owns encoding them into reusable choices - color usage, type, imagery rules, motion - and the guidance that product teams read. They review the mapping together, because the brand team knows what the attribute means and the system team knows what it costs across every product surface.
- How do you tell whether the translation actually worked?Test perception, not compliance. Ask patients in research sessions to describe the product in their own words and compare them with the intended attributes; run side-by-side reviews of screens from different teams; and hide the logo to see whether the product is still recognisable. If users say 'clinical' when you intended 'calm', a lever is off.
saying these in an interview costs you the question
- Brand is the logo and one brand color; the rest of the interface is neutral.
- Brand attributes are marketing's concern and have no bearing on product screens.
- Choosing a color with the right symbolism, such as blue for trust, implements the attribute.
- Using more brand color everywhere makes a product feel more on-brand.
- An attribute can be applied well without defining what it rules out.