The voice and tone of a brand refers to the brand’s character which is expressed to its users through writing. The copy text conveys the brand’s personality and traits. It is important to maintain a cohesive voice and tone quality to ensure users are not disengaged with your product.
For example, when users view new features on the product page, they are exposed to a new view which can be all too confusing for anyone viewing the page for the first time. It is important that users have adequate information and guidance when viewing such pages. Showing a ‘What’s New’ banner and walkthroughs of the new feature can help alleviate the users fears when dealing with sudden changes.
Another common example is when users are met with error messages. Seeing an error message can instill fear, confusion and panic in the users mind. Handling this with appropriate messaging can help dispel these fears. Showing an error message with meaningful text directing the user can help resolve these issues.
Color
Text colors
font color - dark
rgb(0, 0, 0)
#000000
font color - dark
RGB(170, 170, 170)
#aaaaaa
Main colors
BRAND COLOR 1
rgb(129, 190, 55)
#8CC63F
BRAND COLOR 3
rgb(12, 62, 84)
#0c3e54
BRAND COLOR 2
rgb(9, 165, 237)
#09A5ED
Neutral colors
LIGHT GREY 1
rgb(226, 226, 226)
#E2E2E2
MEDIUM GREY 2
RGB(209, 209, 209)
#D1D1D1
DARK GREY 2
RGB(91, 91, 91)
#5B5B5B
MEDIUM GREY 1
RGB(157, 159, 162)
#9D9FA2
DARK GREY 1
RGB(87, 92, 96)
#575C60
Support colors
PURPLE
rgb(94, 81, 161)
#5E51A1
RED
rgb(228, 49, 53)
#E43135
SHADOW BLUE
rgb(112, 142, 171)
#708EAB
LIGHT PURPLE
rgb(142, 136, 231)
#8E88E7
ORANGE
rgb(253, 169, 9)
#FDA909
Accessibility
Typography
We use Lato as the primary font family. Lato is a sans serif font which gives our applications a clean and crisp look. It also looks great on smaller devices!
The quick brown fox jumps over the dog
HEADING
The quick brown fox jumps over the dog
SUBHEADING 1
The quick brown fox jumps over the lazy dog
SUBHEADING 2
The quick brown fox jumps over the lazy dog
NAVIGATION
The quick brown fox jumps over the lazy dog
LABEL TEXT 1
The quick brown fox jumps over the lazy dog
LABEL TEXT 2
The quick brown fox jumps over the lazy dog
NORMAL TEXT
The quick brown fox jumps over the lazy dog
CAPTION
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog
Paragraph
The quick brown fox jumps over the lazy dogText Link
font-size: 24px (1.5em)
font-weight: Regular
line-height: 34px (2.1)
font-weight: Regular
line-height: 34px (2.1)
font-size: 22px (1.4em)
font-weight: Bold
line-height: 31px (1.9)
font-weight: Bold
line-height: 31px (1.9)
font-size: 18px (1.125em)
font-weight: Bold
line-height: 25px (1.5)
font-weight: Bold
line-height: 25px (1.5)
font-size: 17px (1.05em)
font-weight: Regular
line-height: 17px (1.05)
font-weight: Regular
line-height: 17px (1.05)
font-size: 16px (1em)
font-weight: Regular
line-height: 22px (1.4)
font-weight: Regular
line-height: 22px (1.4)
font-size: 14px (0.875em)
font-weight: Regular
line-height: 20px (1.25)
font-weight: Regular
line-height: 20px (1.25)
font-size: 12px (0.75em)
font-weight: Regular
line-height: 17px (1.05)
font-weight: Regular
line-height: 17px (1.05)
font-size: 11px (0.7em)
font-weight: Regular
line-height: 11px (0.95)
font-weight: Regular
line-height: 11px (0.95)
Logo
Iconography
We believe in balancing icons and text content. Applying meaningful icons and symbols makes it not only easier for users but also serves as a handy way to achieve their goals. Icons are simple line icons using a greytone, with active icons shown in brand color 2.
Components
We use custom components, inputs, and navigations throughout our applications. Our design philosophy revolves around simplicity and utility. To encourage ease of use and calmness, components are shown with rounded edges and light gray tones.
Buttons follow our color palette with CTA shown in Brand Color 2 while secondary buttons are shown as unfilled buttons. Default buttons follow the same neutral grey tone.
Buttons follow our color palette with CTA shown in Brand Color 2 while secondary buttons are shown as unfilled buttons. Default buttons follow the same neutral grey tone.
Primary Button
Height: 40px
Radius: 20px
Left/Right padding: 20px
Color: #09A5ED filled no border
Radius: 20px
Left/Right padding: 20px
Color: #09A5ED filled no border
Hover: 50% #09A5ED
Disabled button: 50% opacity
Height: 32px
Radius: 16px
Left/Right padding: 14px
Radius: 16px
Left/Right padding: 14px
Secondary Button
Height: 40px
Radius: 20px
Left/Right padding: 20px
Color: #FFFFFF
Border: #C5C5C5 2px
Text-color: #4A4A4A
Radius: 20px
Left/Right padding: 20px
Color: #FFFFFF
Border: #C5C5C5 2px
Text-color: #4A4A4A
Hover: #09A5ED border and text
Disabled button: 50% opacity
Height: 32px
Radius: 16px
Left/Right padding: 14px
Radius: 16px
Left/Right padding: 14px
Toggle
Enabled: On (Cart)
Enabled: Off (Cart)
Enabled: On
Enabled: Off
Radio Button
Enabled: On
Enabled: Off
Disabled
Select
Enabled
Hover
Option Focus
Option Selection
Disabled: 50% opacity
Multi-select
Focus
Input
Enabled
Option Focus
Textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Enabled
Hover
Disabled
Slider
Enabled
Hover
Focus
On click
Disabled
Tabbed Navigation
Enabled
Disabled
Modals
Voice and Tone
What is Voice & Tone?
Voice Guidelines
At Qcue, our copy shows that we are:
Trustworthy
Qcue provides recommendations and solutions based on factual data. Users can place trust in our services without batting an eyelid. It is important for users to find trust, security, reliability and honesty with us. Our information is direct and to the point without fluffing the result.
Empathetic and Genuine
We place ourselves in the pricers shoes and fully understand their woes. We always cater to user needs while balancing market fluctuations.
Informed
We are experts in Dynamic Pricing. We have expertise in data science within the live ticketing domain. Our solutions are based on informed data and knowledge from the market.
Humorous, but not Tacky
As an Austin-based business, we pride ourselves of our values, culture and humor. We like to maintain an informal language when conveying our messages without overstepping boundaries. We use ‘Oops’ and ‘Uh-oh’ but always stay classy and respectful with a ‘Please’.
Tone
Qcue’s tone is informal yet informative. We maintain a balance between a conversational and non-conversational tone of voice. Tone of voice is carried through our copy text, error messages, modals, dialog boxes and walkthroughs. The user should be able understand an error clearly while also maintaining interest in a feature walkthrough. Different tones are used in different situations. Applying the right tone in the right situation is key.
DO
Be informative
"Venue Name is required. Please fill in Venue Name."
Providing context and information helps users gain better clarity in reviewing their submitted values.
DON'T
Be vague
"Error! All fields required."
Users viewing vague error messages have trouble deciphering their errors when submitting forms. Aid them, not hinder them.
DO
Be polite, yet jovial
"Oops! There seems to be an existing template with the same name. Please enter a unique template name"
Using a mixture of conversational and formal language, helps put the user at ease. It accommodates for a more human-like tone.
DON'T
Be rude and robotic
"Incorrect name. Enter correct template name."
Avoid the risk of offending users and infuriating them with rude language.
DO
Be clear and instill confidence
"We seem to be having issues. We should be back up in a few minutes. Please try again later or reach out to your Qcue Manager"
Maintain clarity while conveying error messages for form submissions or outages. Users want to use the product, let them know when they can resume activities.
DON'T
Raise alarm and fear
“Error 404! Data missing. Try again later or refresh your browser”
Using technical jargons and terminologies can raise fear and alarm in the user’s mind. Asking them to perform actions with no guarantee of results lowers the user’s trust in the product.