--- title: "Theming Token Library" slug: "theming-token-library" updated: 2026-02-05T20:36:00Z published: 2026-02-05T20:36:00Z canonical: "docs.preset.io/theming-token-library" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.preset.io/llms.txt > Use this file to discover all available pages before exploring further. # Theming Token Library Theming is in Gradual Rollout Theming is currently available to select teams and will be rolling out to more teams in the coming weeks. To see where the theming tokens are used in Preset, view our library of tokens and see the effects of each token. ## TL;DR | Token | Purpose | | --- | --- | | [**colorPrimary**](/v1/docs/theming-token-library#colorprimary) | Brand + primary actions | | [**colorSuccess**](/v1/docs/theming-token-library#colorsuccess) | Positive outcomes | | [**colorWarning**](/v1/docs/theming-token-library#colorwarning) | Caution, attention | | [**colorError**](/v1/docs/theming-token-library#colorerror) | Failure, danger | | [**colorInfo**](/v1/docs/theming-token-library#colorInfo) | Neutral information | | [**colorLink**](/v1/docs/theming-token-library#colorlink) | Default link text | | [**Seed Text Color**](/v1/docs/theming-token-library#seed-text-color) | Default foreground text | | [**Seed Background Color**](/v1/docs/theming-token-library#seed-background-color) | Default background | ## colorPrimary The core brand color. - Drives the visual identity of primary UI elements - Used for: - Primary buttons - Active states - Represented by orange in screenshots ![Primary.gif](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Primary.gif) ![Screenshot 2026-01-12 at 4.36.31 PM.png](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1769124364521.png) ![Screenshot 2026-01-12 at 4.37.03 PM.png](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1769124390886.png) ![Screenshot 2026-01-21 at 11.30.05 AM.png](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot%202026-01-21%20at%2011.30.05%E2%80%AFAM.png) **Note: The following Map Tokens inherit a gradient of the parent colorPrimary token** - colorPrimaryBgHover - colorPrimaryBorder - colorPrimaryBorderHover - colorPrimaryActive - colorPrimaryTextHover - colorPrimaryText - colorPrimaryTextActive ## colorSuccess Represents successful or positive states. - Used for: - Success alerts - Success messages - Validation success states - Success icons - Typically a green tone, but brand-adjustable (Represented by orange in screenshots) ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1769124612724.png) **Note: The following Map Tokens inherit a gradient of the parent colorSuccess token** - colorSuccessBg - colorSuccessBgHover - colorSuccessBorder - colorSuccessBorderHover - colorSuccessHover - colorSuccessActive - colorSuccessTextHover - colorSuccessText - colorSuccessTextActive ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image(405).png) ## colorWarning Represents caution or potential risk. - Used for: - Warning alerts - Non-blocking validation warnings - Status indicators that need attention - Often a yellow or amber tone (represented by pink in the screenshots) - Indicates “be aware,” not failure ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1769124780854.png) **Note: The following Map Tokens inherit a gradient of the parent colorWarning token** - colorWarningBg - colorWarningBgHover - colorWarningBorder - colorWarningBorderHover - colorWarningHover - colorWarning - colorWarningActive - colorWarningTextHover - colorWarningText - colorWarningTextActive ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot%202026-01-21%20at%2011.40.16%E2%80%AFAM.png) ## colorError Represents **errors or destructive states**. - Used for: - Error alerts - Validation failures - Destructive actions - Error text and icons - Commonly red (represented by pink in screenshots) - Strong visual emphasis to signal something is wrong ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/image-1769125369415.png) **Note: The following Map Tokens inherit a gradient of the parent colorError token** - colorErrorBg - colorErrorBgHover - colorErrorBorder - colorErrorBorderHover - colorErrorHover - colorErrorActive - colorErrorTextHover - colorErrorText - colorErrorTextActive![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot%202026-01-21%20at%2011.40.33%E2%80%AFAM(3).png) ## colorLink The default color for **text links**. - Used for: - Inline links - Anchor elements - Clickable text actions - By default, often equals [colorPrimary] - Optimized for readability and accessibility in text contexts - Represented by orange in screenshots ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Link Base(1).gif) ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot 2026-01-12 at 2.48.17 PM.png) **Note: The following Map Tokens inherit a gradient of the parent colorLink token** ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot 2026-01-22 at 5.51.39 PM(2).png) #### **colorLinkHover** The color applied to links **on hover**. - Typically: - Slightly darker or more saturated - Provides clear interactive feedback without overpowering surrounding text ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Link Hover.gif) #### **colorLinkActive** The color applied to links **while actively clicked or pressed**. - Represents the “pressed” interaction state - Usually darker or more intense than hover - Ensures consistent interaction feedback across browsers and devices![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Link Base.gif) --- ## Seed Text Color The **base foreground (text) color**. (colorTextBase) - Used for: - Primary text - Secondary text - Disabled text ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot 2026-01-12 at 2.19.11 PM(2).png) ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot 2026-01-12 at 2.19.21 PM.png) --- ## Seed Background Color The **base background color of the application**. (colorBgBase) - Used for: - Layout backgrounds - Cards - Popovers - Containers ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot 2026-01-12 at 2.13.35 PM(1).png) ![](https://cdn.document360.io/4749ddf8-aa05-4f3f-80e1-07a5d2d0f137/Images/Documentation/Screenshot 2026-01-12 at 2.13.44 PM.png)