Trell Design Systems
These principles form the foundation of Trell. They guide our team when working on different parts of the system and help us do better and more informed decisions.
Project duration:
February 2021 to July 2021
Good design matters
Making sure all our products work in a similar way, whether it's the Trell app and website, or internal tools.
At Trell, we want anyone using our products to find what they're looking for and get things done as simply and quickly as possible. So we've put together all our best practices, tools and guidelines into one handy design system.
We've tried to make it useful for designers, developers and product managers alike.
Consistency
When similar elements look consistent and display the functions they perform, usability thrives.
Reinventing Do/Don’t
Using top-notch design practices to channel a set of patterns into a simple, yet powerful UI.
Simplicity
Clarity results in more efficient user interfaces (UIs) to help users perform their tasks fast and easy.
Less is More
Get the most from UI. Limit the users from having to navigate unnecessary content and let them focus on what matters.
Tone of voice
Conversational
We want people to discover, chat, and create with us. So it’s only natural that we talk to our people in their language.
Sassy & Savvy
Our people are sassy and savvy. So this one is a no-brainer.
Youthful
We are talking to the young. So memes? Yes. Emojis? Yes.
Uplifting
Our content inspires and motivates people to discover something new. We’re all about positivity.
What are we trying to achieve?
Hack the way we work
Through documenting pre-tested, proven processes. Documenting gives us the ability to see the full process picture and improve specific parts through constant re-usage.
Save time
Split our app & website into components for better consistency, less technical debt, and faster updates.
Build a culture
Document and spread our core values to build the culture and find product teams and individuals with similar vision.
Color Overview
Color brings a design to life. It is used to express emotion and tone, as well as place emphasis and create associations.
Consistent color usage boosts the brand recognition and conveys the right mood. It helps to guide users through the interface and highlight important areas.
Brand/Primary Color:
Trell’s brand color comes from Red of the base color palette, it's Hex value is #FF534A, We called it TrellRed.
The Brand color palette should be used for all brand design work, including marketing campaigns, website designs, banner ads, event identity systems, and illustration.
Secondary Color:
We use a range of bold, vibrant secondary colors to add splashes of delight to our UI and illustrations. Secondary colors may also be used for bold, full-bleed backgrounds
Extended Color Palette:
Neutrals Color Palette:
Neutral color is mainly used in a large part of the text interface, in addition to the background, borders, dividing lines, and other scenes are also very common. Neutrals are used to provide utility and hierarchy without competing with our core and secondary colors.
Functional Color:
Functional color represents a clear message as well as status, such as success, error, failure, reminder, link and so on.
Functional colors should be kept as consistent as possible under a set of product systems.
Typography
Use typography to create clear hierarchies to guide users through the product and experience. It is the core structure of any well designed interface. Typography guidelines ensure that we provide a consistent visual hierarchy that maximizes legibility throughout all of our product.
​
We use a font called HK Grotesk. It was designed by Hanken Design Co. HK Grotesk™ is an Open Source sans serif typeface inspired by the classic grotesques. Geometry, metrics, punctuations, and OpenType features have been updated to support a wide range of projects such as Environmental Signage, text face for books and magazines, Interface, Websites, and Mobile Applications.
Font weights:
Use font weights to emphasize or differentiate content hierarchy.
Typographic hierarchy:
One of the most important techniques for effectively communicating content is the use of typographic hierarchy. Using variations in size, weight, color and position of type, typographic hierarchy establishes an order of importance that visually guides the reader through content to easily find what they are looking for.
Simplify navigation:
Logo
How we write our name – this is the closest we get to a "signature" for Trell. How they appear, whether tiny on a screen or enormous at an market, becomes a crucial way for our users and partners to find and trust us.
Design principles:
Our logo is white on Primary Red(trell red) or Sweet Pink. That's how it is on the platform, and, if we could choose, how we'd like it to be all of the time. But life doesn't always work like that. Sometimes the universe conspires to make that impossible. So sometimes you'll find the logo in white on a different coloured background (usually Mellow Purple, Green and Peach).
And in exceptional circumstances (usually when the logo is getting lost or is not prominent enough vs our competitors), the logo appears in Primary Red (trell red) on a white background.
Clear space:
To allow our logo to stand out, do not place any objects such as graphics or text in the clear space shown.
Minimum sizes:
The logo should always be legible. Never use it at sizes smaller than specified.
Rotation
Typically, we place our logo flat on a 0° angle. Horizontal is our default rotation state. Examples include use in our app, on our website, and most advertising formats.
Occasionally, we rotate our logo 90° to make the best use of space with unusual formats.
Please don’t...
Icons
Icons are used to provide additional meaning or in places where text label doesn’t fit. They communicate messages at a glance and draw attention to important information and reduce cognitive load.
Design principles:
Trell Design's icons adhere to the following two principles and are designed for cross-platform consistency:
-
Graphics that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood
-
All icons in the user interface should be consistent in style (detail design, perspective, stroke weight, etc.)
Icons in the design system are inline SVG. This provides the most flexibility for styling and prevents icons from loading slowly.
Icon sizes and layout:
Standard icons are displayed as 24dp x 24dp. For pixel-perfect accuracy, create icons for viewing at 100% scale.
Illustrations
Illustrations express our brand’s visual language, differentiate product categories, and help draw attention. They all share a common style and elements.
Components
The components are our LEGO blocs. They bring composition, inheritance and unlimited overrides from engineering to design. They can be organized into five categories based on their purpose: Action, containment, navigation, selection, and text input.
Avatar
Avatar is used to display a picture, typically next to a person's name.
Default avatar:
When an avatar is unavailable (eg. due to an image error), a default avatar is shown.
Photo avatar:
Sizes:
Buttons
Buttons and Links allow users to take actions, make choices or navigate within a product or website.
Common Button Types:
Usage:
Button specs:
Button states:
Checkbox
Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
Chips
Chips help people enter information, make selections, filter content, or trigger actions.
