Overview

Foundation

Colors
Headings

Basic UI elements

Overview

The desired structure of the design system should have individual SCSS includes defining general variables e.g. colors, typograpy, spacing units. Following the atomic design principle, assets ranging from individual UI elements to more complex components should also be styled individually, included in a master theme file/global CSS.

@import './common/variables'; @import './common/mixins'; // component styles @import './components/tnl-core.alert'; @import './components/tnl-core.accordion'; @import './components/tnl-core.button'; @import './components/tnl-core.checkbox'; ..

Colors

Creating a standard naming convention for defining the base identity colors, and their shade variations as per the example below enables us for consistent reference across all components.

// Blue $color-blue: #007ac3; $color-blue-tint-1: #009efd; $color-blue-tint-2: #409BD2; $color-blue-tint-3: #80BDE1; $color-blue-tint-4: #a6d1ea; $color-blue-tint-5: #e0eff8; $color-blue-shade-1: #005b92; // Navy (Dark Blue) $color-navy: #241866; $color-navy-tint-1: #5B528C; $color-navy-tint-2: #928CB3; $color-navy-tint-3: #B3AECA; // Green $color-green: #85bc20; $color-green-tint-1: #A4CD58; $color-green-tint-2: #C2DE90; $color-green-tint-3: #D4E8B1; $color-green-tint-4: #E7F2D2; // Primary, secondary $tnl-color-primary: $color-yellow; $tnl-color-secondary: $color-grey; $rci-color-primary: $color-blue; $rci-color-secondary: $color-red; // Transparent $color-white-overlay-75: rgba($color-white, .75); $color-black-overlay-50: rgba($color-black, .5); $color-black-overlay-175: rgba($color-black, .175); $color-black-overlay-30: rgba($color-black, .3); $color-black-overlay-20: rgba($color-black, .2); $color-grey-overlay-50: rgba($color-grey, .5); $color-grey-overlay-75: rgba($color-grey, .75); ..

Typography

Defining base H1-H6 and body font sizes, line-heights, spacing, etc.

// Fonts $tnl-theme-font: 'Söhne Breit'; $tnl-body-font: 'Roboto'; $h1-size: 2.25rem; $h1-line-height: 2.875rem; $h2-size: 2.25rem; $h2-line-height: 2.875rem; $h3-size: 2.25rem; $h3-line-height: 2.875rem; $h4-size: 2.25rem; $h4-line-height: 2.875rem; $h5-size: 2.25rem; $h5-line-height: 2.875rem; $h6-size: 2.25rem; $h6-line-height: 2.875rem;

Alerts

Type of alerts

Success
Commodo aliqua sunt adipisicing dolor in consectetur duis.

Info
Commodo aliqua sunt adipisicing dolor in consectetur duis.

Warning!
Commodo aliqua sunt adipisicing dolor in consectetur duis.

Error!
Commodo aliqua sunt adipisicing dolor in consectetur duis.

Anatomy of alerts

1. Only title

Upload successful.

Rule for usage:
If the alert message is short and relates to one action.

2. No title

Commodo aliqua sunt adipisicing dolor in consectetur duis aliqua sunt adipisicing dolor in consectetur duis.

Rule for usage:
If the alert message contains rich text, multiple lines for information purposes.

3. Title and description

Warning title
Commodo aliqua sunt adipisicing dolor in consectetur duis.

Rule for usage:
If the alert message informs the user about one specific topic and contains further explanation.

4. Title, description and link

Warning title
Commodo aliqua sunt adipisicing dolor in consectetur duis. Link text

Buttons

1.1 Primary buttons

Primary Save Delete

Rule for usage:

Blue: Use it for primary actions, only one is allowed in case of multiple buttons.
Green: Use this only for 'Save' button but not for 'Save as'.
Red: Use this only for 'Delete' button.

1.2 Secondary buttons

Secondary1 Secondary2

Rule for usage:

Gray: Use it for secondary actions, multiple can be used.
Outlined: Use it for secondary actions, mostly one can be used at a time. Good example: Save as or New area

1.3 Icon buttons

Back Next

Rule for usage:
Use these buttons only in wizards for moving back and forward between steps.

1.4 Full width buttons

Primary button

1.5 Disabled buttons

Primary button Save button Delete Secondary1 Secondary2

Checkboxes

Colors

1.1 Primary colors and shades

Click the solid colors to copy the HEX code to the clipboard.

1.2 Secondary colors and shades

Datepickers

1.1 Datepicker

1.2 Year picker

1.3 Month picker

Error page

You already have a valid license

For any assistances, please contact Technical Support at (800) 555-1234.

Filepicker

Browse

Footer - standard

View markup

Form elements

1.1 Input fields

Default

With placeholder

Disabled

Readonly

Error

Error! Please type a valid value.

Warning

With suffix

1.2 Textarea

Default

Disabled

Readonly

Error

Error! Please type a valid value.

Warning

1.3 Dropdowns / combobox

Dropdown

Label text

Dropdown disabled

Label text

Dropdown multiselect

Label text

Searchable dropdown

Label text

1.4 Special comboboxes

Dropdown special

Dropdown icon link

Priority of validation messages

Order:

1. Empty field: 'Name is empty. Please enter a valid name.'
2. Special characters: 'Name cannot contain these characters: ~ ! @ # $ % ^ * + = [ ] { } | \\ / ; , “ ” ` < > ?'
3. Maximum number of chars: 'Name cannot be longer than 50 characters.'
4. Name uniqueness: 'Name already exists. Please provide a unique name.'

Headings

Heading 1 "Söhne Breit" / font-size: 32px / line-height: 46px

<h1>Heading 1</h1>

Heading 2 "Söhne Breit" / font-size: 28px / line-height: 40px

<h2>Heading 2</h2>

Heading 3 "Söhne Breit" / font-size: 24px / line-height: 32px

<h3>Heading 3</h3>

Heading 4 "Söhne Breit" / font-size: 19px / line-height: 27px

<h4>Heading 4</h4>

Heading 5 "Söhne Breit" / font-size: 16px / line-height: 22px

<h5>Heading 5</h5>

Heading 6 "Söhne Breit" / font-size: 12px / line-height: 22px

<h6>Heading 6</h6>

Loaders and spinners

1.1 Fullscreen preloaders

1.2 Loader buttons

Click (1 sec) Click (1 sec) Save (2 sec) Save (3 sec)

Modal examples and markup

Click each example to open the modal, or click the code icon to view the markup.
Modal sizing is done using bootstrap columns, for best results use: col-sm-8 col-md-6 col-lg-5 col-xl-4.
Modals are only dismissable by clicking 'X' or action buttons or hitting 'ESC' key. Backdrop/overlay clicking is disabled!

Progress bar

View markup

Save bar

Revert to default

View markup

Stepper

1.1 Start

1. Step
2. Step
3. Step

1.2 In progress

1. Step
2. Step
3. Step

Toasters

Click each example to open the toaster.

Type of toasters

Anatomy of toasters

1. Only title

Toaster title

Rule for usage:
If the toaster doesn't contain any additional details like file or report names, links or whatever.

2. Title and description

Toaster title This is the description of the toaster message to demonstrate the capabilities of these messages.

Rule for usage:
If the toaster contains any additional details like file or report names, links or whatever.

3. Title and list items in description

Toaster title Description of the toaster:

Bullet point list item 1
Bullet point list item 2
Bullet point list item 3

Rule for usage:
If the toaster contains a lot of details like file or report names, links or whatever.

Example 1

Example 2

Tables

Table headings font-size: 14px;
Table body font-size: 16px;

Table with fixed columns and sorting

Id	Appl No.	Actual	Predicted	Std Residual	Loan Term	Custom Credit Score	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14	Column 5	Column 6	Column 7	Column 8	Column 9	Column 10	Column 11	Column 12	Column 13	Column 14
1	135089324598	19.43	55.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
2	235089324598	9.43	15.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
3	35089324598	7.43	35.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
4	5089324598	3.43	75.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
5	4089324598	11.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
6	535089324598	69.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
7	935089324598	18.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
8	135089324598	5.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
9	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
10	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
11	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
12	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
13	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
14	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
15	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
16	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
17	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
18	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234
19	235089324598	19.43	505.45	77423	67	27	51	75	29	4.01%	381.1	23%	0.003	234	67	27	51	75	29	4.01%	381.1	23%	0.003	234

Tables with sortable columns and sticky header

Factor	Estimated  Influence	Significance	Pr > \|t\|	Marginal  Impact	Interpretation or relationship
Credit score: Custom credit score	0.0013	11.85	<0.0000		Factor increases approval
Intercept	-7.5651	-9.5	0.0030	-0.70651
Financial Ratios	-0.0028	-0.2	0.0201		Not Significant
Stability: Length in residence	0.0501	-0.2	0.014		Not Significant
Financial ratios: Loan to value ratio	-0.0053	-0.2	0.0011		Factor decreases approval
Credit score: Length in residence	-0.1510	-0.2	<0.0000		Not Significant
Financial ratios: Loan to value ratio	0.0543	-0.2	<0.0000		Not Significant
Stability: Length in residence	0.0501	-0.2	<0.0000		Not Significant
Credit score: Custom credit score	0.0013	11.85	0.0430		Factor increases approval
Intercept	-7.5651	-9.5	0.0011	-0.70651
Financial Ratios	-0.0028	-0.2	0.0011		Not Significant
Stability: Length in residence	0.0501	-0.2	0.0011		Not Significant
Financial ratios: Loan to value ratio	-0.0053	-0.2	0.0011		Factor decreases approval
Credit score: Length in residence	-0.1510	-0.2	0.0011		Not Significant
Financial ratios: Loan to value ratio	0.0543	-0.2	0.0011		Not Significant
Stability: Length in residence	0.0501	-0.2	0.0011		Not Significant
Credit score: Custom credit score	0.0013	11.85	0.0011		Factor increases approval
Intercept	-7.5651	-9.5	0.0011	-0.70651
Financial Ratios	-0.0028	-0.2	0.0011		Not Significant
Stability: Length in residence	0.0501	-0.2	0.0011		Not Significant
Financial ratios: Loan to value ratio	-0.0053	-0.2	0.0011		Factor decreases approval
Credit score: Length in residence	-0.1510	-0.2	0.0011		Not Significant
Financial ratios: Loan to value ratio	0.0543	-0.2	0.0011		Not Significant
Stability: Length in residence	0.0501	-0.2	0.0011		Not Significant

Tabs

Nunc in consequat tellus, nec gravida diam. Aenean enim justo, vehicula at erat at, bibendum cursus nisl. Ut vitae interdum tortor. Morbi auctor quis elit non efficitur. Proin ultricies sollicitudin ipsum vel laoreet. Sed nec augue pharetra, porttitor ex eu, consequat velit. Integer lorem magna, sagittis tristique convallis non, aliquam et nisi. Etiam imperdiet augue bibendum venenatis blandit.

Curabitur auctor, augue eu scelerisque malesuada, lorem enim faucibus sapien, in hendrerit velit leo sit amet tellus. Pellentesque gravida rutrum dui, quis scelerisque massa fringilla quis. Donec hendrerit sit amet augue vitae pharetra. Fusce vitae urna vitae enim laoreet malesuada ac id tellus. Praesent euismod ut metus ac interdum. Nunc at mi iaculis, sagittis erat sed, vehicula magna. Donec vel pellentesque ante, eu eleifend purus. Cras egestas eget odio congue maximus. Maecenas accumsan purus ac dui porta scelerisque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum tortor purus, placerat at dui at, luctus egestas elit. Donec aliquet quis tortor eu elementum.

Toggles and group of selection

Toggle

For view selection. Content changes based on selection.

1.1 Default

Append Update

1.2 Disabled

Append Update

1.3 Inactive

Append Update

Group of selection

Similar to a group of radion buttons, but with a different visual representation.

2.1 Default

Option 1 Option 2 Option 3

2.2 Disabled

Option 1 Option 2 Option 3

2.3 Selected

Option 1 Option 2 Option 3

Cards

1. Basic hotel cards

New York, NY

Conrad New York Midtown

Flexible cancellation
Breakfast included
Pool

4.6/5 1,268 Reviews

$490 night

$350.00 avg /night

New York, NY

Conrad New York Midtown

Flexible cancellation
Breakfast included
Pool

4.6/5 1,268 Reviews

Foundation

Basic UI elements

Notifications

Loaders

Components

Templates

Overview

Colors

Typography

Accordion

1.1 Fixed width sections

1.1.1 Accordion with tree

Collapsed

Expanded

Collapsed with disabled

1.1.2 Multi level accordion

Collapsed

Expanded

Collapsed with disabled

1.2 Full width sections

1.2.1 Accordion with content

Collapsed

Expanded

Collapsed with disabled

1.2.2 Multi level full width accordion

Expanded

Alerts

Type of alerts

Anatomy of alerts

Buttons

1.1 Primary buttons

1.2 Secondary buttons

1.3 Icon buttons

1.4 Full width buttons

1.5 Disabled buttons

Checkboxes

Colors

1.1 Primary colors and shades

1.2 Secondary colors and shades

Datepickers

1.1 Datepicker

1.2 Year picker

1.3 Month picker

Error page

You already have a valid license

Filepicker

Footer - standard

Form elements

1.1 Input fields

1.2 Textarea

1.3 Dropdowns / combobox

1.4 Special comboboxes

Priority of validation messages

Headings

Heading 1 "Söhne Breit" / font-size: 32px / line-height: 46px

Heading 2 "Söhne Breit" / font-size: 28px / line-height: 40px

Heading 3 "Söhne Breit" / font-size: 24px / line-height: 32px

Heading 4 "Söhne Breit" / font-size: 19px / line-height: 27px

Heading 5 "Söhne Breit" / font-size: 16px / line-height: 22px

Heading 6 "Söhne Breit" / font-size: 12px / line-height: 22px

Loaders and spinners

1.1 Fullscreen preloaders

1.2 Loader buttons

Modal examples and markup

Progress bar

Radio buttons

Radio button

Radio button selected

Radio button disabled

1.1 Inline radio buttons

1.2 Group of radio buttons

Save bar

Stepper

1.1 Start

1.2 In progress

Toasters

Type of toasters

Anatomy of toasters

Tables

Table with fixed columns and sorting