Style Guide

Icons and CSS variables

→ Link to the GitLab repository

Icons

layout-dashboard

logout

navigation-menu

information-circle

filter-text

question-circle

pencil-write

tool-service

corpus

lexical

model

grammar

uncategorized-language-description

organization

project

shipment-upload

hierarchy-9

layout-module

team-chat

people-woman-10

performance-increase

send-email-2

space-rocket-flying

organic-plant-grow

single-neutral-chat

binary-monitor

programming-team-chat-1

app-window-search-text

3d-box-expand-corners

space-astronaut

room-service-bring-plate

data-transfer-square-diagonal

network-users

messages-bubble-double

database-hierarchy

database-connect

business-team-goal

business-deal-handshake

arrow-right

arrow-left

account-circle

remove-circle

youtube

twitter

gitlab

contact

Usage:

The following code snippet displays an icon:

<svg class="icon {xxs, xs, s, m, l, xl, or xxl} color--black"><use href="#{id of the icon}" viewbox="0 0 24 24"></use></svg>

Variables

--max--width
--gap
--border--radius
--font--family
--color
--h1--font--style
--h1--font--weight
--h1--font--size
--h1--line--height
--h1--max--width
--h1--text--transform
--h2--font--style
--h2--font--weight
--h2--font--size
--h2--line--height
--h2--max--width
--h2--text--transform

--h3--font--weight
--h3--font--size
--h3--line--height
--h3--max--width
--h3--text--transform
--h4--font--style
--h4--font--weight
--h4--font--size
--h4--line--height
--h4--max--width
--h4--text--transform
--p--font--style
--p--font--weight
--p--font--size
--p--line--height
--p--max--width

--a--color
--a--text--decoration
--a--transition
--a--color--hover
--figcaption--font--size
--nav--height
--nav--logo--height
--nav--font--size
--footer--background
--footer--font--size
--footer--first--color
--footer--second--color
--footer--third--color
--footer--border--color
--footer--height
--footer--height
--footer--height

Usage:

The CSS variables can be used to replace hard coded values:

var({name of the value})

Colors

--cyan--light

--cyan

--cyan--vivid

--cyan--dark

--cyan--dim

--mint--light

--mint

--mint--vivid

--mint--dark

--mint--dim

--green--light

--green

--green--vivid

--green--dark

--green--dim

--orange--background

--orange--light

--orange

--orange--vivid

--orange--dark

--orange--dim

--pink--light

--pink

--pink--vivid

--pink--dark

--pink--dim

--violet--light

--violet

--violet--vivid

--violet--dark

--violet--dim

--purple--light

--purple

--purple--vivid

--purple--dark

--purple--dim

--brand--color

--brand--vivid

--brand--background

--brand--light

--brand--dark

--brand--dim

--accent--color

--accent-color

--accent--vivid

--accent--light

--accent--dark

--accent--dim

--white

--offwhite

--glossy

--bright

--light

--gloomy

--grey

--gray

--dun

--dark

--night

--offblack

--black

--transparent-black

--transparent-white

--transparent

Usage:

The CSS variables can be used to replace hard coded color:

var({name of the value})

The following CSS classes are also available:

color{name of the color} background{name of the color}

Navigation Bar

→ Link to the GitLab repository