Design Tokens

Design tokens are the foundational elements of our design system, defining key aspects of our product's visual language. They enable consistency and flexibility, allowing us to maintain a unified look and feel across all user interfaces.

Changing Theme

Since we have two themes, the values displayed show the available tokens in the currently selected theme.

Colors

A carefully curated set of primary, secondary, and accent colors ensures our product maintains a consistent and recognizable palette.

Our colors are sorted according to their use case. For example, bg colors are only for background used, text for text colors, border only for borders and so on.

If you are not sure which token to use, please visit our design token guideline page

Brand

Name	Value	Example
`brand-500`	`#f8ac67`
`brand-600`	`#fa8005`
`brand-700`	`#a50000`
`brand-800`	`#990000`
`brand-900`	`#511e04`

Accent

Name	Value	Example
`accent-50`	`#ffffff`
`accent-100`	`#f7f5f2`
`accent-200`	`#e3e3e3`
`accent-300`	`#e7e4e0`
`accent-350`	`#cfcfcf`
`accent-400`	`#cecac3`
`accent-500`	`#a9a9a9`
`accent-600`	`#8a8782`
`accent-650`	`#808080`
`accent-700`	`#6f6b64`
`accent-800`	`#4b4b4b`
`accent-900`	`#3d3d3d`

Gray

Name	Value	Example
`gray-50`	`#ffffff`
`gray-100`	`#f7f5f2`
`gray-200`	`#e3e3e3`
`gray-250`	`#dbdbdb`
`gray-300`	`#e7e4e0`
`gray-350`	`#cfcfcf`
`gray-400`	`#cecac3`
`gray-500`	`#a9a9a9`
`gray-600`	`#8a8782`
`gray-650`	`#808080`
`gray-700`	`#6f6b64`
`gray-800`	`#4b4b4b`
`gray-900`	`#3d3d3d`
`gray-950`	`#111`

White

Name	Value	Example
`white`	`#ffffff`

Black

Name	Value	Example
`black`	`#111`

Green

Name	Value	Example
`green-50`	`#e9ffe4`
`green-100`	`#ccffc4`
`green-200`	`#9eff90`
`green-300`	`#5fff50`
`green-400`	`#29fe1d`
`green-500`	`#07e500`
`green-600`	`#00b800`
`green-700`	`#008800`
`green-800`	`#076d08`
`green-900`	`#0b5c0d`
`green-950`	`#003404`

Yellow

Name	Value	Example
`yellow-50`	`#fefbe8`
`yellow-100`	`#fff6c2`
`yellow-200`	`#ffeb88`
`yellow-300`	`#ffd743`
`yellow-400`	`#ffc010`
`yellow-500`	`#efa703`
`yellow-600`	`#dd8800`
`yellow-700`	`#a45904`
`yellow-800`	`#87450c`
`yellow-900`	`#733910`
`yellow-950`	`#431c05`

Red

Name	Value	Example
`red-50`	`#fff1f1`
`red-100`	`#ffdfdf`
`red-200`	`#ffc5c5`
`red-300`	`#ff9d9d`
`red-400`	`#ff6464`
`red-500`	`#ff3333`
`red-600`	`#ed1515`
`red-700`	`#c80d0d`
`red-800`	`#a50f0f`
`red-900`	`#881414`
`red-950`	`#4b0404`

Blue

Name	Value	Example
`blue-50`	`#eff6ff`
`blue-100`	`#dbeafe`
`blue-200`	`#bfdbfe`
`blue-300`	`#93c5fd`
`blue-400`	`#60a5fa`
`blue-500`	`#3b82f6`
`blue-600`	`#2563eb`
`blue-700`	`#1d4ed8`
`blue-800`	`#1e40af`
`blue-900`	`#1e3a8a`
`blue-950`	`#172554`

Text

Name	Value	Example
`text-base`	`#511e04`
`text-base-hover`	`#4b4b4b`
`text-base-disabled`	`#e7e4e0`
`text-inverted`	`#ffffff`
`text-inverted-hover`	`#f7f5f2`
`text-inverted-disabled`	`#a9a9a9`
`text-brand`
`text-brand-hover`
`text-accent`
`text-accent-hover`
`text-info`	`#172554`
`text-info-hover`	`#1e3a8a`
`text-success`	`#008800`
`text-success-hover`	`#00b800`
`text-warning`	`#dd8800`
`text-warning-hover`	`#a45904`
`text-error`	`#ff3333`
`text-error-hover`	`#ed1515`
`text-link`	`#a50000`
`text-link-hover`	`#990000`

Bg

Name	Value	Example
`bg-base`	`#ffffff`
`bg-base-hover`	`#3d3d3d`
`bg-base-active`
`bg-base-disabled`	`#e7e4e0`
`bg-inverted`	`#e3e3e3`
`bg-inverted-hover`	`#f7f5f2`
`bg-inverted-active`
`bg-inverted-disabled`	`#ffffff`
`bg-brand`	`#fa8005`
`bg-brand-hover`	`#f8ac67`
`bg-brand-active`
`bg-accent`	`#8a8782`
`bg-accent-hover`
`bg-accent-active`
`bg-info`	`#3b82f6`
`bg-info-hover`	`#2563eb`
`bg-info-active`	`#1d4ed8`
`bg-success`	`#00b800`
`bg-success-hover`	`#008800`
`bg-success-active`	`#076d08`
`bg-warning`	`#efa703`
`bg-warning-hover`	`#dd8800`
`bg-warning-active`	`#a45904`
`bg-error`	`#ff3333`
`bg-error-hover`	`#ed1515`
`bg-error-active`	`#c80d0d`
`bg-selected`	`#60a5fa`
`bg-selected-input`	`#60a5fa`
`bg-surface`	`#f7f5f2`
`bg-surface-raised`	`#ffffff`
`bg-surface-overlay`	`#ffffff`
`bg-surface-sunken`	`#e3e3e3`
`bg-masterMark`	`#dbdbdb`
`bg-adminMark`	`#111`

Border

Name	Value	Example
`border-base`	`#4b4b4b`
`border-base-hover`	`#808080`
`border-base-active`
`border-base-disabled`	`#e7e4e0`
`border-inverted`	`#cfcfcf`
`border-inverted-hover`
`border-inverted-active`
`border-inverted-disabled`
`border-brand`	`#fa8005`
`border-brand-hover`	`#f8ac67`
`border-brand-active`
`border-accent`
`border-accent-hover`
`border-accent-active`
`border-info`	`#172554`
`border-info-hover`	`#1e3a8a`
`border-info-active`	`#172554`
`border-success`	`#00b800`
`border-success-hover`	`#008800`
`border-success-active`	`#076d08`
`border-warning`	`#dd8800`
`border-warning-hover`	`#a45904`
`border-warning-active`	`#87450c`
`border-error`	`#ff3333`
`border-error-hover`	`#ed1515`
`border-error-active`	`#c80d0d`
`border-selected`	`#60a5fa`
`border-selected-input`

Outline

Name	Value	Example
`outline-focus`	`#3b82f6`

Typography

With a defined font family and various font sizes and weights, our typography maintains readability and hierarchy. The consistent use of typography contributes to a polished and cohesive user experience. For formatting dates or numbers we already have some helper components: NumericFormat, DateFormat.

The Value corresponds to the class name from Tailwind CSS.

We have tokens for:

Font Size

Font Weight

Font Style

Text Align

Name	Value	Example
`xs`	text-[13px]	Marigolds bloom with vibrant colors.
`sm`	text-sm	Marigolds bloom with vibrant colors.
`base`	text-base	Marigolds bloom with vibrant colors.
`lg`	text-lg	Marigolds bloom with vibrant colors.
`xl`	text-xl	Marigolds bloom with vibrant colors.
`2xl`	text-2xl	Marigolds bloom with vibrant colors.
`3xl`	text-3xl	Marigolds bloom with vibrant colors.
`4xl`	text-4xl	Marigolds bloom with vibrant colors.
`5xl`	text-5xl	Marigolds bloom with vibrant colors.
`6xl`	text-6xl	Marigolds bloom with vibrant colors.
`7xl`	text-7xl	Marigolds bloom with vibrant colors.
`8xl`	text-8xl	Marigolds bloom with vibrant colors.
`9xl`	text-9xl	Marigolds bloom with vibrant colors.

Headlines

The <Headline> component supports by default certain styles. They are listed as Tailwind class names.

Level	Example	Styles
level-1	Discover the Beauty of Marigold	text-[2rem]
level-2	Discover the Beauty of Marigold	mb-6 text-2xl
level-3	Discover the Beauty of Marigold	text-xl
level-4	Discover the Beauty of Marigold	text-lg
level-5	Discover the Beauty of Marigold	text-base
level-6	Discover the Beauty of Marigold	text-[13px] uppercase

Spacing

Consistent spacing ensures harmonious layouts and enhances visual flow. The defined spacing scale helps create balanced and accessible interfaces across different screen sizes. It's used for gap, padding, width and margin.

Name	Value	Example
`0`	0px
`0.5`	2px
`1`	4px
`1.5`	6px
`2`	8px
`2.5`	10px
`3`	12px
`3.5`	14px
`4`	16px
`5`	20px
`6`	24px
`7`	28px
`8`	32px
`9`	36px
`10`	40px
`11`	44px
`12`	48px
`14`	56px
`16`	64px
`20`	80px
`24`	96px
`28`	112px
`32`	128px
`36`	144px
`40`	160px
`44`	176px
`48`	192px
`52`	208px
`56`	224px
`60`	240px
`64`	256px
`72`	288px
`80`	320px
`96`	384px

Besides this there are percentage values available for width property, which is found in form components. You can use them similar to the tokens above. Here is a list of the values: Tailwind percentage tokens

Radius

Standardized border radius contribute to a clean and modern design. These properties are applied to components, ensuring a cohesive appearance throughout our product.

rounded-sm 2px

rounded 4px

rounded-md 6px

rounded-lg 8px

rounded-xl 12px

rounded-2xl 16px

rounded-full 9999px

Alignment

Consistent alignment ensures that elements are arranged in a purposeful manner, enhancing clarity and user comprehension.

Horizontal

Vertical

none

left

center

right

Breakpoints

By defining breakpoints for different screen sizes, we achieve responsive design that adapts seamlessly to various devices and orientations.

Name	Breaks at
`sm`	640px
`md`	768px
`lg`	1024px
`xl`	1280px
`2xl`	1536px

Design Tokens

Colors

Brand

Accent

Gray

White

Black

Green

Yellow

Red

Blue

Text

Bg

Border

Outline

Typography

Headlines

Discover the Beauty of Marigold

Discover the Beauty of Marigold

Discover the Beauty of Marigold

Discover the Beauty of Marigold

Discover the Beauty of Marigold

Discover the Beauty of Marigold

Spacing

Radius

Alignment

Breakpoints