Design Tokens
      Back to home
      1. Knowledge Base
      2. Design Tokens

      Design Tokens

      Design tokens are reusable style settings that control the look and feel of your site. They act as the building blocks of your brand system in Nyla. Instead of editing colors or fonts in individual sections, you configure tokens once and apply them everywhere.

      • When you change a token, it updates everywhere it’s used.

      • Tokens keep your site consistent and on-brand.

      • Tokens cover typography, colors, spacing, CTAs, forms, modals, and more.

      Setting up design tokens should be the first step of configuring a custom Nyla site. See here for tips on building your design tokens during onboarding. 

      Best practice: configure all global tokens first, then add custom tokens only when needed.

       
      Design styles can be found by navigating to Design from the main menu.

      Global vs. Custom

      Global styles come come loaded into all Nyla sites by default and are used in the default section templates that come with Nyla instances. Custom styles can be added by you as a user. 
      Global_custom.png

      Global Styles: 

      • Preloaded/included with every Nyla site. See here for more details.

      • Power Nyla template previews and block defaults.

      • Cannot be renamed or deleted, but their styles can be edited.

      • If left unedited, they display with the original defaults (e.g., default fonts, colors).

      Custom Styles:

      • Created manually to extend your design system.

      • Examples: custom promo headline, brand-specific accent color, new CTA style.

      • Should be named clearly so future users know how to apply them.

      • You can add as many custom styles as you want.

      Editing and Managing Tokens

      1. Navigate to Design in the left menu.

      2. Select a design token to edit, then select an existing global or custom style or click "+" to create a custom one.

      3. Configure settings (this varies by token type).

      4. Save changes. They will appear in Draft form in your site preview.

      5. Queue and publish changes to push them live.

      Note: All design tokens share a single publish flow - you cannot publish one token without publishing the others in draft.

      Publishing Design Tokens

      All design tokens are saved as a single draft that needs to be published in order for the changes to go live on your site.
      When you have draft design tokens, you will see any instances of your design tokens in draft form on your pages on your preview, but the previous (live) version of your design tokens on your live site. In order for those draft design tokens to go live, you need to publish your design token changes via the publish flow.  

      • Draft - your edits are saved locally and appear in preview.

      • Queued - changes are added to the publish queue.

      • Published - changes are live on your site.

      • Draft tokens appear in preview but not on the live site until published.

      • Publishing design tokens applies to the entire token set, not individual tokens.

      Where Tokens Apply

      Design tokens are referenced throughout your site:

      • Typography tokens: Apply everywhere that text is used on the site. This includes Headings, text blocks, CTA references, forms etc.

      • Color tokens: Everywhere that colors are used on your site - backgrounds, text colors, overlays.

      • CTA tokens: Set the styles for buttons, navigation, tabs, accordion, menu items.

      • Form tokens: Inputs, dropdowns, checkboxes, radios.

      • Spacing tokens: Sets the global site width, margins, and section sizing defaults.

      • Modal tokens: Styles modals. 

      • Animation/transition tokens: Optional reusable motion styles.

      Best Practices

      • ✅ Configure all global tokens (ensures templates preview correctly).

      • ✅ Make tokens production-grade and comprehensive (cover all required typography, colors, forms, CTAs).

      • ✅ Use custom tokens sparingly - only for styles missing from global coverage.

      • ✅ Use clear, descriptive names (e.g., Promo Headline Italic, Body Small Light).

      • ✅ Document custom token usage in the description field.

      • ❌ Avoid near-duplicate tokens (too many variations clutter dropdowns).

      • ❌ Don’t leave globals unconfigured - they will default to Nyla’s system styles.

      • ⚠️ Be mindful of concurrency: if multiple users edit tokens at the same time, the last save will overwrite earlier ones. See Concurrency in Nyla.

      Common Pitfalls

      • Preview vs Live mismatch → You saved but didn’t publish.

      • Unexpected site-wide changes → Editing a token updates all instances of it.

      • Lost changes → Another user may have overwritten your draft (refresh before editing if working in teams) and be mindful of concurrency best practices. 

      • Too many tokens → Large dropdowns make it hard for non-designers to pick the right style.

      Global design token defaults: 

      Nyla comes with the following global design tokens by default. When setting up your site, we suggest to style each of these global design tokens (in addition to any extra custom tokens you need) so that Nyla templates and blocks appear fully on brand for you. 

      Typography

      • Hero

      • Heading 1–6

      • Body Large / Body Large Bold

      • Body Regular / Body Regular Bold

      • Body Small / Body Small Bold

      CTAs

      • Primary

      • Secondary

      • Text Link

      • Text Link White

      • Navigation

      • Outlined

      • Tabs

      • Accordion (styles 1–3)

      Forms

      • Outlined with label

      • Underlined with label

      • Outlined no label

      • Underlined no label

      • Underlined with label – lighter

      • Underlined no label – lighter

      • Checkbox (small, medium)

      • Radio (small, medium)

      • Dropdown (outlined, underlined)

      Colors

      • Primary, Secondary

      • Lighter (background), Darker (background)

      • White, Black, Transparent, Overlay

      • Grey 1–8

      • Success, Warning, Error

      Related Reading