tSL Design Brand Guidelines
Welcome
to the timeSensor LEGAL Brand Guidelines. These guidelines apply to everyone at timeSensor LEGAL.
If you are a designer, copywriter, producer, or an agency supporting our team, these guidelines are stylistic rules for using our logo and one of several resources that form the foundation of our brand and define it.
Here you will find our current brand voice and persona, colors and typography, as well as links to helpful resources such as logo files and detailed information. This will enable you to create brand-compliant content online and in the real world in no time.
Voice and Tone
This section explains how we communicate in writing.
Logo
As a cornerstone of our identity, the timeSensor LEGAL logo is a symbol of trust, quality, and an important identifier for our customers. To reproduce our logo faithfully across a variety of media, there are some simple guidelines to follow to ensure clarity and consistency at all times.
Logo
Original colors
Black (used only in exceptional cases)
White (used only in exceptional cases)
Clear space
The clear space ensures the readability and impact of the logo by isolating it from competing visual elements such as text, graphics, and imagery. The image below shows the correct size of the space that should surround the logo. No accompanying text or logos should appear in this area.
Please do not distort the logo or apply effects.
Placement
The logo is always placed in a corner of the workspace.
There is no maximum size for timeSensor logos. However, make sure the logo is not too small.
On a 300 x 250 pixel asset, the logo at 10% would be only 30 pixels wide.
Replace it with a logo that is 90 pixels wide to ensure readability.
Typography
The only font that can be used for corporate communication is Myriad Pro.
To maintain a consistent tone, we exercise restraint in the font weights and styles used. The Myriad Pro Regular font is preferred over all other fonts, while Myriad Pro Bold is used for headings or important information. The Myriad Pro Italic Regular font is used for short data and appears only rarely in our identity system.
Use of type
We use type in a clear, calm, and confident manner. With as few styles as necessary, we align text to the left, carefully attend to ragged right edges, and always avoid "orphans" (the first line of a paragraph at the bottom of a column or page) and "widows" (the last line of a paragraph at the top of a column or page).
System fonts
In certain situations, our fonts may not be available (e.g., when web fonts are blocked or unavailable, digital newsletters, etc.). In such cases, the web-safe font Open Sans can be used in "Bold", "Regular", and "Italic".
Usage table
The usage table shows a set of settings for effective and readable typography design. This should be considered a guideline..
Screen | Size | Line height | Kerning | Tracking |
00–15 px | 140% | Metrics | +1% | |
15–20 px | 140% | Metrics | +0% | |
20–30 px | 125% | Metrics | +0% | |
30–45 px | 115% | Metrics | -1% | |
45–70 px | 110% | Metrics | -1.5% | |
70 px+ | 100% | Metrics | -4% |
| Size | Line height | Kerning | Tracking | |
| 00–8 px | 125% | Metrics | +1% | |
| 8–15 px | 120% | Metrics | +0% | |
| 15–25 px | 115% | Metrics | +0% | |
| 25–40 px | 110% | Metrics | -1% | |
| 40–70 px | 105% | Metrics | -1.5% | |
| 70 px+ | 100% | Metrics | -4% |
Color
Our color palette features a vibrant range of rich, serious colors supported by a series of sophisticated gray and neutral tones.
Color selection and design software
Print
When designing for print, we work with CMYK values in software that supports these values, such as Adobe Illustrator or InDesign.
Screen
When designing for screen, we work with RGB or HEX values in software that supports these values, such as Figma, Adobe Illustrator, InDesign, Canva, Keynote, or any other available motion software.
Note
Printed color values are not displayed correctly on screen. Screen colors are not printed exactly.
Color values
CMYK
Cyan, magenta, yellow, and black. The four colors used in offset and digital printing.
RGB
Red, green, and blue, the component colors that create all screen colors.
HEX
A hexadecimal representation of the red, green, and blue colors of the screen.
Please note:
Various factors can affect color reproduction. A test is always advisable before any large print run.
Primary colors:
Primary colors are the distilled expression of the timeSensor LEGAL brand. They welcome customers into our world.
tSL Blue
HEX: #00B5F0
tSL Light Blue
HEX: #87CFEB
tSL Black-White Tones
A HEX: #FFFFFF
B HEX: #FCFCFC
C HEX: #F8F8F8
D HEX: #DDDDDD
E HEX: #AAAAAA
F HEX: #919191
G HEX: #575756
H HEX: #333333
tSL Dark Blue
HEX: #003366
Accent colors:
Besides the timeSensor Blue, these colors are used to set accents.
tSL Wine Red
HEX: #590007
tSL Gold
HEX: #D3AF45
tSL Beige
HEX: #997300
Tertiary colors:
In places where larger data sets need to be differentiated, tertiary colors can be used.
I HEX: #FFCCE5
J HEX: #FFFACC
K HEX: #FFE2CC
L HEX: #EBFFCC
M HEX: #EDD0FB
N HEX: #FBFFCC
O HEX: #D0FBF3
P HEX: #F3E3D8
Q HEX: #D6CCFF
R HEX: #FFD5CC
Image Worlds Overview
timeSensor uses different media to communicate effectively. The main formats are photos, illustrations, software blockframes, and icons.
Illustration
Illustrations work to convey more complex ideas.
In this Figma document you will find assets to create further illustrations.
Blockframes
Blockframes are product illustrations that demonstrate the capabilities and functions of timeSensor LEGAL. They present complex stories in a simplified and informative way, communicated across our touchpoints: in product experiences, presentations, videos, and digital ads.
Product images inform and help prospects and customers understand the full potential of timeSensor LEGAL.
Fidelity levels illustrate the actual product, product function, and the agent's workspace by explaining how the features work through storytelling.
High fidelity
Screen capture of tSL. Must be set large to be readable.
Use for: Websites, demo videos, interactive demos, product tours.
Low fidelity
These blockframes contain no text. They are primarily used for navigation training during onboarding to design the visual experience so that users are guided through various product features. Use them for touchpoints with complex localization, onboarding in the in-product experience, and some product presentation decks.
Use for: Onboarding, product experiences, presentations
Simplified
Illustrative representation of the software.
Use for: Explainer videos, in a larger context
Photography
All our photographs should appear as natural as possible. Observe the following style principles:
Natural
Use natural light, no harsh flashes or extreme contrasts.
Casual
Choose candid shots and limit staged photos that appear forced.
Recurring motifs are office spaces, office buildings, and business people working at computers.
Iconography
Our icons are based on the "Simple Small" library found on icons8.com. If a needed icon is not found, it can be drawn in thefollowing Figma document Draw.
They are either used in the GUI or in presentations to better convey ideas:
Related Articles
[102.x] Sales analysis by mandate
Contents This report is based on the invoices issued within the defined period. For the selected user or users, the invoiced sales per mandate are consolidated and the user's share is displayed in hours and as an amount. The average hourly rate ...