Set up your design system

Get up and running with your own look and feel in 15 minutes

Set up your design system

Get up and running with your own look and feel in 15 minutes

Design tokens

This page guides you to quickly set up your design system to give your site your own look and feel. Updating design tokens will change them everywhere they are used on the site. You will also preview Nyla templates with your own global design tokens so that they appear on brand for you.

Getting started

Scroll down this page and take a few moments to:

Useful links: Knowledge base, Properties documentation

Resources

1. Design tokens docs2. Adding content & updating design tokens merchant training

1. Load in your fonts and typography styles2. Add your brand colors3. Add your CTA styles

If you prefer you can use the defaults that Nyla comes with. You can add to and update your design tokens at any time.

Design tokens

This page guides you to quickly set up your design system to give your site your own look and feel. Updating design tokens will change them everywhere they are used on the site. You will also preview Nyla templates with your own global design tokens so that they appear on brand for you.

Getting started

Scroll down this page and take a few moments to:

1. Load in your fonts and typography styles2. Add your brand colors3. Add your CTA styles

If you prefer you can use the defaults that Nyla comes with. You can add to and update your design tokens at any time.

Resources

1. Design tokens docs2. Adding content & updating design tokens merchant training

Useful links: Knowledge base, Properties documentation

Typography

Typography in Nyla is responsive, allowing you to choose different font settings for mobile and desktop. Take a few moments to add your fonts and adjust your global type styles. Remember you can always come back to this and add more custom type styles as you go.

Resources

1. Adding fonts2. Editing typography: video (2 min)

Hero

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Large

Body Large Bold

Body Regular

Body Regular Bold

Body Small

Body Small Bold

Typography

Typography in Nyla is responsive, allowing you to choose different font settings for mobile and desktop. Take a few moments to add your fonts and adjust your global type styles. Remember you can always come back to this and add more custom type styles as you go.

Resources

1. Adding fonts2. Editing typography: video (2 min)

Hero

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Large

Body Large Bold

Body Regular

Body Regular Bold

Body Small

Body Small Bold

Colors

Our color system is built to provide a simple starting place for your website. Replace these color styles with your brand colors, and add more colors as needed.

Resources

1. Colors: video (2 mins)

Brand

Primary

Secondary

Backgrounds

Lighter

Darker

Base

White

Black

Transparent

Overlay

Grey

Grey 1

Grey 2

Grey 3

Grey 4

Grey 5

Grey 6

Grey 7

Grey 8

Status

Success

Warning

Error

Custom

Custom 1

Custom 2

Custom 3

Custom 4

Custom 5

Custom 6

Colors

Our color system is built to provide a simple starting place for your website. Replace these color styles with your brand colors, and add more colors as needed.

Resources

1. Colors: video (2 mins)

Brand

Primary

Secondary

Backgrounds

Lighter

Darker

Base

White

Black

Transparent

Overlay

Grey

Grey 1

Grey 2

Grey 3

Grey 4

Grey 5

Grey 6

Grey 7

Grey 8

Status

Success

Warning

Error

Custom

Custom 1

Custom 2

Custom 3

Custom 4

Custom 5

Custom 6

Call to actions

Nyla comes with the following default cta styles, but you can add as many as you need for your design. Try updating your Brand CTAs to give your site your own look and feel. You can always update these and add more CTA styles as you go.

Resources

1. CTAs & states: video

Brand CTAs

Primary

Secondary

Text Link

Text Link White

Navigation

Outlined

Tabs & Accordion

Some layout content items like tabs and accordion reference cta design tokens, so Nyla comes loaded with the following defaults that you can adapt or add to as you need.

The tabs CTA design token defines the default style for your tabs

Tab 2 content

The tabs white design token is intended for use on darker backgrounds

Tab 2 content

The Accordion 1 button design token sets the title style of this accordion. It isn't necessary to have more than one accordion style, but some Nyla templates reference Accordion 1, 2 or 3 depending on whether they are against darker or lighter backgrounds, or the design requires a larger type style.

Call to actions

Nyla comes with the following default cta styles, but you can add as many as you need for your design. Try updating your Brand CTAs to give your site your own look and feel. You can always update these and add more CTA styles as you go.

Resources

1. CTAs & states: video

Brand CTAs

Primary

Secondary

Text Link

Text Link White

Navigation

Outlined

Tabs & Accordion

Some layout content items like tabs and accordion reference cta design tokens, so Nyla comes loaded with the following defaults that you can adapt or add to as you need.

The tabs CTA design token defines the default style for your tabs

Tab 2 content

The tabs white design token is intended for use on darker backgrounds

Tab 2 content

The Accordion 1 button design token sets the title style of this accordion. It isn't necessary to have more than one accordion style, but some Nyla templates reference Accordion 1, 2 or 3 depending on whether they are against darker or lighter backgrounds, or the design requires a larger type style.