Shinoda Design System
Updated Jan 2026

Colour

text-color-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-color-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-color-tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-color-contrast

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Type

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-xl

heading-lg

heading-md

heading-sm

heading-xs

heading-2xs

subheading-lg

subheading-md

subheading-sm

body-xl

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.

body-lg

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.

body-md

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.

body-sm

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.

body-xs

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.

body-2xs

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-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

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-align-left

text-align-center

text-align-right

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 Block Quotes

Block Quote

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

No bullet list
No bullet list

All Ordered Lists

No bullet list
No bullet list
No bullet list

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

List item
List item
List item

Components

button

Button

Link

Tabs

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

icon-h-xl

icon-h-lg

icon-h-md

icon-h-sm

icon-h-xs

icon-h-2xs

icon-b-xl

icon-b-lg

icon-b-md

icon-b-sm

icon-b-xs

icon-b-2xs

Structure

page-wrapper

main-wrapper

container-3xs

container-2xs

container-xs

container-sm

container-md

container-lg

container-xl

container-2xl

container-3xl

container-4xl

container-5xl

padding-global

padding-sm

padding-md

padding-lg

Widths

max-width-full

max-width-full-tablet

max-width-full-mobile-landscape

max-width-full-mobile-portrait

Paddings

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

padding-0

padding-0.25

padding-0.5

padding-1

padding-1.5

padding-medium

padding-4

padding-6

padding-8

padding-10

Margins

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

margin-0

margin-0.25

margin-0.5

margin-1

margin-1.5

margin-2

margin-4

margin-6

margin-8

margin-10

Grids

grid-2

grid-4

grid-12

Utility

hide

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-auto

pointer-events-none

layer

spacing-clean

align-left

align-center

align-right

Opacity

z-index-1

z-index-2

display-inlineflex

margin-top-auto

aspect-ratio-11

aspect-ratio-23

aspect-ratio-32

aspect-ratio-169

button-row

Let's Chat

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

heading-xl

heading-lg

heading-md

heading-sm

heading-xs

heading-2xs

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6