Active Ice Digital | Atomic Design

Tokens

Tokens represent the smallest units of design within our system, encapsulating essential attributes such as logos, icons, colours, typography, spacing, and more. Just as atoms are the basic units of matter in the physical world, tokens are the elemental units that form the basis of our design language. more about tokens >

Logos

Colours

Silk Mist

#F8F5F0
rgb(248, 245, 240)

t: has-silk-mist-color

b: has-silk-mist-background-color

Forest Shadow

#242E1C
rgb(36, 46, 28)

t: has-forest-shadow-color

b: has-forest-shadow-background-color

Sage Green

#748568
rgb(116, 133, 104)

t: has-sage-green-color

b: has-sage-green-background-color

Ivory

#EFE7D9
rgb(239, 231, 217)

t: has-ivory-color

b: has-ivory-background-color

Honey

#D3BB94
rgb(211, 187, 148)

t: has-honey-color

b: has-honey-background-color

Oak

#B99B68
rgb(185, 155, 104)

t: has-oak-color

b: has-oak-background-color

White

#FFFFFF
rgb(255, 255, 255)

t: has-white-color

b: has-white-background-color

Success

#74A84F
rgb(116, 168, 79)

t: has-success-color

b: has-success-background-color

Error

#9F1841
rgb(159, 24, 65)

t: has-error-color

b: has-error-background-color

Grey1

#eeeeee
rgb(238, 238, 238)

t: has-grey1-color

b: has-grey1-background-color

Grey2

#dddddd
rgb(221, 221, 221)

t: has-grey2-color

b: has-grey2-background-color

Grey3

#bbbbbb
rgb(187, 187, 187)

t: has-grey3-color

b: has-grey3-background-color

Grey4

#808080
rgb(128, 128, 128)

t: has-grey4-color

b: has-grey4-background-color

Grey5

#666666
rgb(102, 102, 102)

t: has-grey5-color

b: has-grey5-background-color

Grey6

#444444
rgb(68, 68, 68)

t: has-grey6-color

b: has-grey6-background-color

Gradients

Transparent to Silk Mist

c: has-transparent-to-silk-mist-gradient-background

s: linear-gradient(90deg, rgba(248, 245, 240, 0) 0%, #f8f5f0 75%)

Forest Shadow to Sage Green

c: has-ai-green-to-white-gradient-background

s: linear-gradient(90deg, rgba(36, 46, 28,1) 0%, rgba(116, 133, 104,1) 100%)

Typography

Aa

Primary Typeface

DM Sans

Google font | Weight: 400

Aa Bb Cc Dd Ee Ff
Gg Hh Ii Jj Kk Ll
Mm Nn Oo Pp Qq Rr
Ss Tt Uu Vv Ww Xx
Yy Zz 0 1 2 3
4 5 6 7 8 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tristique est. Cras tincidunt orci eget justo laoreet facilisis.

Aa

Secondary Typeface

Marcellus

Google font | Weight: 200, 400, 700, 900

Aa Bb Cc Dd Ee Ff
Gg Hh Ii Jj Kk Ll
Mm Nn Oo Pp Qq Rr
Ss Tt Uu Vv Ww Xx
Yy Zz 0 1 2 3
4 5 6 7 8 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tristique est. Cras tincidunt orci eget justo laoreet facilisis.

Aa

Accent Typeface

Bodoni Moda

Google font | Weight: 400, 700

Aa Bb Cc Dd Ee Ff
Gg Hh Ii Jj Kk Ll
Mm Nn Oo Pp Qq Rr
Ss Tt Uu Vv Ww Xx
Yy Zz 0 1 2 3
4 5 6 7 8 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tristique est. Cras tincidunt orci eget justo laoreet facilisis.

Headings

Heading Level 01 - h1

Heading Level 02 - h2

Heading Level 03 - h3

Heading Level 04 - h4

Heading Level 05 - h5
Heading Level 06 - h6

Icons

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y