Skip to content
Shop by goal:
Your cart

Your cart is empty

Continue shopping

Colors

Primary colors

  • Oyster white [oyster-white] (#F5F6EF)
  • Oyster blue [oyster-blue] (#172431)
  • Mycelium white [mycelium-white] (#FFFFFF)
  • Oyster gray [oyster-gray] (#74767D)

Secondary colors

  • Secondary Lions mane yellow [lions-mane-yellow] (#F5B455)
  • Lions mane brown [lions-mane-brown] (#AD724F)
  • Reishi orange [reishi-orange] (#F97821)
  • Reishi brown [reishi-brown] (#5B3615)
  • Turkey tail aqua [turkey-tail-aqua] (#77C5BB)
  • Turkey tail aqua subdued [turkey-tail-aqua] (#B6DED9)
  • Turkey tail brown [turkey-tail-brown] (#913F0C)
  • Maitake purple [maitake-purple] (#927FB2)
  • Maitake taupe [maitake-taupe] (#7C6C4D)
  • Shiitake peach [shiitake-peach] (#E1896E)
  • Shiitake peach subdued [shiitake-peach] (#F6A48B)
  • Shiitake brown [shiitake-brown] (#885437)
  • Oyster green [oyster-green] (#8DA05E)

UTILITY COLORS

  • Utility error (#DD1D1D)
  • Utility success (#18E098)
  • Utility warning (#FB8F2B)

Typography

Heading 1 - 48px/56px (mob: 32px/36px)

Heading 2 - 44px/48px (mob: 25px/28px)

Heading 3 - 34px/36px (mob: 22px/24px)

Heading 4 - 28px/36px (mob: 16px/24px)

Heading 5 - 16px/24px (mob: 13px/16px)
Heading 6 - 16px/25px (mob: 12px/16px)

MINOR HEADING - 12px/14px (mob: 12px/14px)


Paragraphs

Paragraph (standard 16px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (small 14px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (minor 12px/20px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (standard - bold 16px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (small - bold 14px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (minor - bold 12px/20px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.


Buttons

Primary buttons

Primary dark button
Primary dark button (small)
Primary light button
Primary light button (small)

Secondary buttons

Secondary black button
Secondary black button (small)
Secondary white button
Secondary white button (small)

Tertiary button

Load more button

Slider buttons

Accordion buttons

Form fields

Dropdown
Base dropdown
Disabled dropdown
Dropdown with error

Custom checkbox

Custom radio button

Search field

Quantity selector
1