Colors
Typography
Buttons
Inputs
Avatars
Badges
Cards
Tables
Icons
Modals
Tabs
Empty State
Structure
Figma File
Thind Style Guide
Based on {Finsweet Client First
thind.dev
Colors
Neutral
Colors to be used for background , borders, dividers and  text elements
100
200
300
400
500
600
700
800
900
1000
Primary
Colors to be used for call to actions
100
Background
700
Default State
800
Hover State
900
Pressed State
Secondary
Colours to be used for showing informations and highlights
100
Background
700
Default State
800
Hover State
900
Pressed State
Success
Colours to be used to show a positive result
100
Background
700
Default State
800
Hover State
900
Pressed State
Warning
Colors to be used to show a caution/warning information
100
Background
700
Default State
800
Hover State
900
Pressed State
Danger
Colors to be used to show a false/error result
100
Background
700
Default State
800
Hover State
900
Pressed State
Background Colors
Predefined colors to be used as background
background-color-white
background-color-primary100
background-color-gray
background-color-primary
background-color-black
Text Color
text-color-white
text-color-white
text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-green
text-color-green
HTML Headings
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading Classes
heading-style-h1

heading-style-h1

heading-style-h2

heading-style-h2

heading-style-h3

heading-style-h3

heading-style-h4

heading-style-h4

heading-style-h5
heading-style-h5
heading-style-h6
heading-style-h6
Other HTML Tags
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists

  • No bullet list

  • No bullet list

All Ordered Lists

  1. No bullet list

  2. No bullet list

  3. No bullet list

All Unordered Lists

  • No bullet list

  • No bullet list

Text Size
text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Weights
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
Text Alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Buttons
button
Button
button
is-icon
is-icon-front
Button
Button
button
is-small
Button
button
is-small
is-icon
is-icon-front
Button
Button
button
is-secondary
Button
button
is-secondary
is-icon
Button
Button
button
is-secondary
is-small
Button
button
is-secondary
is-small
is-icon
is-icon-front
Button
Button
button
is-tertiary
Button
button
is-tertiary
is-icon
is-icon-front
Button
Button
button
is-tertiary
is-small
Button
button
is-tertiary
is-small
is-icon
is-icon-front
Button
Button
button
is-warning
Button
button
is-warning
is-icon
is-icon-front
Button
button
is-tertiary
is-small
Button
button
is-tertiary
is-small
is-icon
Button
button
is-danger
Button
button
is-danger
is-icon
is-icon-front
Button
button
is-danger
Button
button
is-danger
is-icon
is-icon-front
Button
button
is-success
Button
button
is-success
is-icon
is-icon-front
Button
button
is-danger
Button
button
is-danger
is-icon
is-icon-front
Button
button
is-link
is-small
Button
button
is-link
Button
button
is-icon-only
button
is-small
is-icon-only
button
is-secondary
is-icon-only
button
is-secondary
is-small
is-icon-only
button
is-tertiary
is-icon-only
button
is-tertiary
is-small
is-icon-only
button
is-link
is-icon-only
Form Element
field-label
form-input
form-input
is-text-area
form-input
is-select-input
form-checkbox
form-radio
button
form-normal-message
This is some text inside of a div block.
form-normal-message
is-warning
This is some text inside of a div block.
form-normal-message
is-danger
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Avatars
Phtoto Avatar
is-small
avatar
is-medium
is-large
Text Avatar
JB
is-small
JB
avatar
JB
is-medium
JB
is-large
Badges
badge
Status
badge
Status
is-success
Status
is-warning
Status
is-danger
Status
is-neutral
badge
is-outline
Status
is-outline
Status
is-success
Status
is-warning
Status
is-danger
Status
is-neutral
badge
is-plain
Status
is-color
Status
is-success
Status
is-warning
Status
is-danger
Status
is-neutral
Cards
Base Structure
How every card in the UI should look like
Cards with text & action
To be used to show text heavy information with an action
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cancel
Start
Cards with icon, text & action
To be used to show text heavy information categorized using icons with an action. Eg:- Orders, Notifications & Billing etc.
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cancel
Start
Cards with image, text & action
To be used to show featured information with Image attracting users attention.
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Stats Cards
Cards to be used when displaying Stats in words, numbers and percentages.
Stats Title
$5.09K
37%
Stats Title
65.79K
12%
Stats Title
65.79K
+12%
Analytics Cards
Cards to be used when displaying stats with graphs/visuals
Stats Title
$5.09K
+12%
Stats Title
65.79K
+12%
Tables
Data Table
Used for displaying data in a list
Name
Email
Company
Status
ROLE
Harry Singh
harry@thind.dev
(778) 987 - 9087
Active
Admin
John Doe
john@thind.dev
(778) 563 - 2354
Active
Agent
Andy Han
han@thind.dev
(604) 354 - 2418
Active
Member
Jamie Choi
jamie@thind.dev
(768) 325 - 6577
Active
Member
Data Table with picture
Used for Used for displaying data in a list with an avatar data in a list
Name
Subscription
Last Payment
Status
Harry Singh
harry.singh@innofoods.ca
Starter Plan
$24/m
July 20,2023
Active
John Doe
john@thind.dev
Premium Plan
$38/m
July 20,2023
Active
Andy Han
han@thind.dev
Starter Plan
$24/m
July 20,2023
Cancelled
Jamie Choi
jamie@thind.dev
Starter Plan
$24/m
July 20,2023
Paused
Table with Search & Filters
Used for displaying actions to filter & add new data to table
More Filters
New user
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Name
Email
Company
Status
ROLE
Harry Singh
harry@thind.dev
(778) 987 - 9087
Active
Admin
John Doe
john@thind.dev
(778) 563 - 2354
Active
Agent
Andy Han
han@thind.dev
(604) 354 - 2418
Active
Member
Jamie Choi
jamie@thind.dev
(768) 325 - 6577
Active
Member
Icons
Icons as image

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

icon-1x1-xxsmall

icon-1x1-xsmall

icon-1x1-small

icon-1x1-medium

icon-1x1-large

icon-1x1-xlarge

icon-1x1-custom1

Icons as HTML

icon-embed-xxsmall

icon-embed-xsmall

icon-embed-small

icon-embed-medium

icon-embed-large

icon-embed-xlarge

icon-embed-custom1

Modals
Action popup
Modal used to request an action from user.
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cancel
Start
Action popup with icon
Modal used to request an action from user.
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Cancel
Start
Form popup
Modal used to collect infromation from user.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tabs
Action popup
Modal used to request an action from user.
Tab button
Tab button
Tab button
Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button
Empty State
Simple empty state
Used when table user is accessing has no data
No items found

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Empty state with action
Used to ask user for an action when table user is accessing has no data
No items found

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Create new user
Structure
Page Structure
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
Max Widths
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings Direction
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Paddings Size
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-card-regular
padding-card-small
padding-card-stats
Margin Direction
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Margin Size
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Spacers
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Utility Classes
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto