Our design tokens are represented by CSS Custom Properties. These behave like variables and can be referenced anywhere where our base stylesheets are loaded. To use these in a content editor or as a per-element setting, use the utility classes which are based on these tokens.
| Token | Custom Property | Value | Utility Class | Example |
|---|
| 1 | —uowdf-border-1 | 1px | b1 | |
| 2 | —uowdf-border-2 | 2px | b2 | |
| 3 | —uowdf-border-3 | 4px | b3 | |
| 4 | —uowdf-border-4 | 5px | b4 | |
| 5 | —uowdf-border-5 | 8px | b5 | |
| 6 | —uowdf-border-6 | 10px | b6 | |
| 7 | —uowdf-border-7 | 15px | b7 | |
| 8 | —uowdf-border-8 | 30px | b8 | |
Our system uses a number of breakpoints for common device sizes. These breakpoints each represent the lower bound (smallest width) at which that breakpoint is active. You can limit to only that breakpoint by using the breakpoint as the min-width, and the next largest breakpoint as the max-width.
| Token | Custom Property | Value | Media Query Example |
|---|
| Desktop Wide | —uowdf-breakpoint-desktop-wide | 1200px | @media (min-width: 1200px) |
| Desktop | —uowdf-breakpoint-desktop | 960px | @media (min-width: 960px) |
| Tablet | —uowdf-breakpoint-tablet | 660px | @media (min-width: 660px) |
| Small | —uowdf-breakpoint-small | 320px | @media (min-width: 320px) |
| Tiny | —uowdf-breakpoint-tiny | 240px | @media (min-width: 240px) |
Our color palette includes the core UO colors along with a set of tint colors that can be used for accessibility reasons.
| Token | Custom Property | Value | Utility Class | Example |
|---|
| UO Green | —uowdf-color-uo-green | #007030 | palette-bg-uo-green | |
| UO Green Tint #9 | —uowdf-color-uo-green-t9 | #197e44 | palette-bg-uo-green-t9 | |
| UO Green Tint #8 | —uowdf-color-uo-green-t8 | #338c59 | palette-bg-uo-green-t8 | |
| UO Green Tint #7 | —uowdf-color-uo-green-t7 | #4c9a6d | palette-bg-uo-green-t7 | |
| UO Green Tint #6 | —uowdf-color-uo-green-t6 | #66a982 | palette-bg-uo-green-t6 | |
| UO Green Tint #5 | —uowdf-color-uo-green-t5 | #7fb797 | palette-bg-uo-green-t5 | |
| UO Green Tint #4 | —uowdf-color-uo-green-t4 | #99c6ac | palette-bg-uo-green-t4 | |
| UO Green Tint #3 | —uowdf-color-uo-green-t3 | #b2d4c0 | palette-bg-uo-green-t3 | |
| UO Green Tint #2 | —uowdf-color-uo-green-t2 | #cce2d5 | palette-bg-uo-green-t2 | |
| UO Green Tint #1 | —uowdf-color-uo-green-t1 | #e5f0ea | palette-bg-uo-green-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| UO Yellow | —uowdf-color-uo-yellow | #fee11a | palette-bg-uo-yellow | |
| UO Yellow Tint #9 | —uowdf-color-uo-yellow-t9 | #fee430 | palette-bg-uo-yellow-t9 | |
| UO Yellow Tint #8 | —uowdf-color-uo-yellow-t8 | #fee747 | palette-bg-uo-yellow-t8 | |
| UO Yellow Tint #7 | —uowdf-color-uo-yellow-t7 | #feea5e | palette-bg-uo-yellow-t7 | |
| UO Yellow Tint #6 | —uowdf-color-uo-yellow-t6 | #feed75 | palette-bg-uo-yellow-t6 | |
| UO Yellow Tint #5 | —uowdf-color-uo-yellow-t5 | #fef08c | palette-bg-uo-yellow-t5 | |
| UO Yellow Tint #4 | —uowdf-color-uo-yellow-t4 | #fff3a3 | palette-bg-uo-yellow-t4 | |
| UO Yellow Tint #3 | —uowdf-color-uo-yellow-t3 | #fff6b9 | palette-bg-uo-yellow-t3 | |
| UO Yellow Tint #2 | —uowdf-color-uo-yellow-t2 | #fff9d1 | palette-bg-uo-yellow-t2 | |
| UO Yellow Tint #1 | —uowdf-color-uo-yellow-t1 | #fffce7 | palette-bg-uo-yellow-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| UO Legacy Green | —uowdf-color-uo-legacy-green | #104735 | palette-bg-uo-legacy-green | |
| UO Legacy Green Tint #9 | —uowdf-color-uo-legacy-green-t9 | #275948 | palette-bg-uo-legacy-green-t9 | |
| UO Legacy Green Tint #8 | —uowdf-color-uo-legacy-green-t8 | #3f6b5d | palette-bg-uo-legacy-green-t8 | |
| UO Legacy Green Tint #7 | —uowdf-color-uo-legacy-green-t7 | #577d71 | palette-bg-uo-legacy-green-t7 | |
| UO Legacy Green Tint #6 | —uowdf-color-uo-legacy-green-t6 | #6f9085 | palette-bg-uo-legacy-green-t6 | |
| UO Legacy Green Tint #5 | —uowdf-color-uo-legacy-green-t5 | #87a299 | palette-bg-uo-legacy-green-t5 | |
| UO Legacy Green Tint #4 | —uowdf-color-uo-legacy-green-t4 | #9fb5ae | palette-bg-uo-legacy-green-t4 | |
| UO Legacy Green Tint #3 | —uowdf-color-uo-legacy-green-t3 | #b6c7c2 | palette-bg-uo-legacy-green-t3 | |
| UO Legacy Green Tint #2 | —uowdf-color-uo-legacy-green-t2 | #cfdad6 | palette-bg-uo-legacy-green-t2 | |
| UO Legacy Green Tint #1 | —uowdf-color-uo-legacy-green-t1 | #e6ecea | palette-bg-uo-legacy-green-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Grass Green | —uowdf-color-grass-green | #489d46 | palette-bg-grass-green | |
| Grass Green Tint #9 | —uowdf-color-grass-green-t9 | #59a658 | palette-bg-grass-green-t9 | |
| Grass Green Tint #8 | —uowdf-color-grass-green-t8 | #6cb06b | palette-bg-grass-green-t8 | |
| Grass Green Tint #7 | —uowdf-color-grass-green-t7 | #7eba7d | palette-bg-grass-green-t7 | |
| Grass Green Tint #6 | —uowdf-color-grass-green-t6 | #91c490 | palette-bg-grass-green-t6 | |
| Grass Green Tint #5 | —uowdf-color-grass-green-t5 | #a0cb9f | palette-bg-grass-green-t5 | |
| Grass Green Tint #4 | —uowdf-color-grass-green-t4 | #b5d8b5 | palette-bg-grass-green-t4 | |
| Grass Green Tint #3 | —uowdf-color-grass-green-t3 | #c7e1c7 | palette-bg-grass-green-t3 | |
| Grass Green Tint #2 | —uowdf-color-grass-green-t2 | #daebda | palette-bg-grass-green-t2 | |
| Grass Green Tint #1 | —uowdf-color-grass-green-t1 | #ecf5ec | palette-bg-grass-green-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Lime Green | —uowdf-color-lime-green | #8abb40 | palette-bg-lime-green | |
| Lime Green Tint #9 | —uowdf-color-lime-green-t9 | #95c152 | palette-bg-lime-green-t9 | |
| Lime Green Tint #8 | —uowdf-color-lime-green-t8 | #a1c866 | palette-bg-lime-green-t8 | |
| Lime Green Tint #7 | —uowdf-color-lime-green-t7 | #adcf79 | palette-bg-lime-green-t7 | |
| Lime Green Tint #6 | —uowdf-color-lime-green-t6 | #b9d68c | palette-bg-lime-green-t6 | |
| Lime Green Tint #5 | —uowdf-color-lime-green-t5 | #c4dd9f | palette-bg-lime-green-t5 | |
| Lime Green Tint #4 | —uowdf-color-lime-green-t4 | #d0e4b2 | palette-bg-lime-green-t4 | |
| Lime Green Tint #3 | —uowdf-color-lime-green-t3 | #dceac5 | palette-bg-lime-green-t3 | |
| Lime Green Tint #2 | —uowdf-color-lime-green-t2 | #e8f1d9 | palette-bg-lime-green-t2 | |
| Lime Green Tint #1 | —uowdf-color-lime-green-t1 | #f3f8eb | palette-bg-lime-green-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Chartreuse | —uowdf-color-chartreuse | #e1e31b | palette-bg-chartreuse | |
| Chartreuse Tint #9 | —uowdf-color-chartreuse-t9 | #e4e330 | palette-bg-chartreuse-t9 | |
| Chartreuse Tint #8 | —uowdf-color-chartreuse-t8 | #e7e647 | palette-bg-chartreuse-t8 | |
| Chartreuse Tint #7 | —uowdf-color-chartreuse-t7 | #eae95e | palette-bg-chartreuse-t7 | |
| Chartreuse Tint #6 | —uowdf-color-chartreuse-t6 | #edec75 | palette-bg-chartreuse-t6 | |
| Chartreuse Tint #5 | —uowdf-color-chartreuse-t5 | #f0ef8c | palette-bg-chartreuse-t5 | |
| Chartreuse Tint #4 | —uowdf-color-chartreuse-t4 | #f3f3a3 | palette-bg-chartreuse-t4 | |
| Chartreuse Tint #3 | —uowdf-color-chartreuse-t3 | #f6f6b9 | palette-bg-chartreuse-t3 | |
| Chartreuse Tint #2 | —uowdf-color-chartreuse-t2 | #f9f9d1 | palette-bg-chartreuse-t2 | |
| Chartreuse Tint #1 | —uowdf-color-chartreuse-t1 | #fcfce7 | palette-bg-chartreuse-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Dark Blue | —uowdf-color-dark-blue | #004f6e | palette-bg-dark-blue | |
| Dark Blue Tint #9 | —uowdf-color-dark-blue-t9 | #19607c | palette-bg-dark-blue-t9 | |
| Dark Blue Tint #8 | —uowdf-color-dark-blue-t8 | #33728b | palette-bg-dark-blue-t8 | |
| Dark Blue Tint #7 | —uowdf-color-dark-blue-t7 | #4c8399 | palette-bg-dark-blue-t7 | |
| Dark Blue Tint #6 | —uowdf-color-dark-blue-t6 | #6695a8 | palette-bg-dark-blue-t6 | |
| Dark Blue Tint #5 | —uowdf-color-dark-blue-t5 | #7fa6b6 | palette-bg-dark-blue-t5 | |
| Dark Blue Tint #4 | —uowdf-color-dark-blue-t4 | #99b8c5 | palette-bg-dark-blue-t4 | |
| Dark Blue Tint #3 | —uowdf-color-dark-blue-t3 | #b2cad3 | palette-bg-dark-blue-t3 | |
| Dark Blue Tint #2 | —uowdf-color-dark-blue-t2 | #ccdce2 | palette-bg-dark-blue-t2 | |
| Dark Blue Tint #1 | —uowdf-color-dark-blue-t1 | #e5edf0 | palette-bg-dark-blue-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Light Blue | —uowdf-color-light-blue | #00a5b5 | palette-bg-light-blue | |
| Light Blue Tint #9 | —uowdf-color-light-blue-t9 | #19adbc | palette-bg-light-blue-t9 | |
| Light Blue Tint #8 | —uowdf-color-light-blue-t8 | #33b7c3 | palette-bg-light-blue-t8 | |
| Light Blue Tint #7 | —uowdf-color-light-blue-t7 | #4cc0cb | palette-bg-light-blue-t7 | |
| Light Blue Tint #6 | —uowdf-color-light-blue-t6 | #66c9d2 | palette-bg-light-blue-t6 | |
| Light Blue Tint #5 | —uowdf-color-light-blue-t5 | #7fd2da | palette-bg-light-blue-t5 | |
| Light Blue Tint #4 | —uowdf-color-light-blue-t4 | #99dbe1 | palette-bg-light-blue-t4 | |
| Light Blue Tint #3 | —uowdf-color-light-blue-t3 | #b2e4e9 | palette-bg-light-blue-t3 | |
| Light Blue Tint #2 | —uowdf-color-light-blue-t2 | #ccedf0 | palette-bg-light-blue-t2 | |
| Light Blue Tint #1 | —uowdf-color-light-blue-t1 | #e5f6f8 | palette-bg-light-blue-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Berry | —uowdf-color-berry | #8d1d58 | palette-bg-berry | |
| Berry Tint #9 | —uowdf-color-berry-t9 | #983368 | palette-bg-berry-t9 | |
| Berry Tint #8 | —uowdf-color-berry-t8 | #a34a79 | palette-bg-berry-t8 | |
| Berry Tint #7 | —uowdf-color-berry-t7 | #af6089 | palette-bg-berry-t7 | |
| Berry Tint #6 | —uowdf-color-berry-t6 | #ba779a | palette-bg-berry-t6 | |
| Berry Tint #5 | —uowdf-color-berry-t5 | #c68dab | palette-bg-berry-t5 | |
| Berry Tint #4 | —uowdf-color-berry-t4 | #d1a4bc | palette-bg-berry-t4 | |
| Berry Tint #3 | —uowdf-color-berry-t3 | #dcbacc | palette-bg-berry-t3 | |
| Berry Tint #2 | —uowdf-color-berry-t2 | #e8d1dd | palette-bg-berry-t2 | |
| Berry Tint #1 | —uowdf-color-berry-t1 | #f3e8ee | palette-bg-berry-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Dark Gray | —uowdf-color-dark-gray | #4d5859 | palette-bg-dark-gray | |
| Dark Gray Tint #9 | —uowdf-color-dark-gray-t9 | #5e6869 | palette-bg-dark-gray-t9 | |
| Dark Gray Tint #8 | —uowdf-color-dark-gray-t8 | #70797a | palette-bg-dark-gray-t8 | |
| Dark Gray Tint #7 | —uowdf-color-dark-gray-t7 | #82898a | palette-bg-dark-gray-t7 | |
| Dark Gray Tint #6 | —uowdf-color-dark-gray-t6 | #949a9b | palette-bg-dark-gray-t6 | |
| Dark Gray Tint #5 | —uowdf-color-dark-gray-t5 | #a5abab | palette-bg-dark-gray-t5 | |
| Dark Gray Tint #4 | —uowdf-color-dark-gray-t4 | #b7bcbc | palette-bg-dark-gray-t4 | |
| Dark Gray Tint #3 | —uowdf-color-dark-gray-t3 | #c9cccd | palette-bg-dark-gray-t3 | |
| Dark Gray Tint #2 | —uowdf-color-dark-gray-t2 | #dbddde | palette-bg-dark-gray-t2 | |
| Dark Gray Tint #1 | —uowdf-color-dark-gray-t1 | #edeeee | palette-bg-dark-gray-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Medium Gray | —uowdf-color-medium-gray | #a2aaad | palette-bg-medium-gray | |
| Medium Gray Tint #9 | —uowdf-color-medium-gray-t9 | #aab2b5 | palette-bg-medium-gray-t9 | |
| Medium Gray Tint #8 | —uowdf-color-medium-gray-t8 | #b1b9bc | palette-bg-medium-gray-t8 | |
| Medium Gray Tint #7 | —uowdf-color-medium-gray-t7 | #b9c1c4 | palette-bg-medium-gray-t7 | |
| Medium Gray Tint #6 | —uowdf-color-medium-gray-t6 | #c1c9cc | palette-bg-medium-gray-t6 | |
| Medium Gray Tint #5 | —uowdf-color-medium-gray-t5 | #c8d0d3 | palette-bg-medium-gray-t5 | |
| Medium Gray Tint #4 | —uowdf-color-medium-gray-t4 | #d0d8db | palette-bg-medium-gray-t4 | |
| Medium Gray Tint #3 | —uowdf-color-medium-gray-t3 | #d8e0e3 | palette-bg-medium-gray-t3 | |
| Medium Gray Tint #2 | —uowdf-color-medium-gray-t2 | #dfe7ea | palette-bg-medium-gray-t2 | |
| Medium Gray Tint #1 | —uowdf-color-medium-gray-t1 | #e7eff2 | palette-bg-medium-gray-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Light Gray | —uowdf-color-light-gray | #d8dcda | palette-bg-light-gray | |
| Light Gray Tint #9 | —uowdf-color-light-gray-t9 | #dbdcdd | palette-bg-light-gray-t9 | |
| Light Gray Tint #8 | —uowdf-color-light-gray-t8 | #dfe0e1 | palette-bg-light-gray-t8 | |
| Light Gray Tint #7 | —uowdf-color-light-gray-t7 | #e3e4e5 | palette-bg-light-gray-t7 | |
| Light Gray Tint #6 | —uowdf-color-light-gray-t6 | #e7e8e9 | palette-bg-light-gray-t6 | |
| Light Gray Tint #5 | —uowdf-color-light-gray-t5 | #ebecec | palette-bg-light-gray-t5 | |
| Light Gray Tint #4 | —uowdf-color-light-gray-t4 | #eff0f0 | palette-bg-light-gray-t4 | |
| Light Gray Tint #3 | —uowdf-color-light-gray-t3 | #f3f4f4 | palette-bg-light-gray-t3 | |
| Light Gray Tint #2 | —uowdf-color-light-gray-t2 | #f7f8f8 | palette-bg-light-gray-t2 | |
| Light Gray Tint #1 | —uowdf-color-light-gray-t1 | #fbfbfb | palette-bg-light-gray-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Golden Yellow | —uowdf-color-golden-yellow | #fed103 | palette-bg-golden-yellow | |
| Golden Yellow Tint #9 | —uowdf-color-golden-yellow-t9 | #fed51b | palette-bg-golden-yellow-t9 | |
| Golden Yellow Tint #8 | —uowdf-color-golden-yellow-t8 | #feda35 | palette-bg-golden-yellow-t8 | |
| Golden Yellow Tint #7 | —uowdf-color-golden-yellow-t7 | #fede4e | palette-bg-golden-yellow-t7 | |
| Golden Yellow Tint #6 | —uowdf-color-golden-yellow-t6 | #fee367 | palette-bg-golden-yellow-t6 | |
| Golden Yellow Tint #5 | —uowdf-color-golden-yellow-t5 | #fee880 | palette-bg-golden-yellow-t5 | |
| Golden Yellow Tint #4 | —uowdf-color-golden-yellow-t4 | #ffed9a | palette-bg-golden-yellow-t4 | |
| Golden Yellow Tint #3 | —uowdf-color-golden-yellow-t3 | #fff1b2 | palette-bg-golden-yellow-t3 | |
| Golden Yellow Tint #2 | —uowdf-color-golden-yellow-t2 | #fff6cc | palette-bg-golden-yellow-t2 | |
| Golden Yellow Tint #1 | —uowdf-color-golden-yellow-t1 | #fffbe5 | palette-bg-golden-yellow-t1 | |
| Token | Custom Property | Value | Utility Class | Example |
|---|
| Sans Serif | —font-family-sans | ”Source Sans Variable”, Arial, Helvetica, Verdana, sans-serif | uo-text-font--sans | Sans Serif Text |
| United Sans Serif | —font-family-sans-united | ”United Sans”, “Source Sans Variable”, Arial, Helvetica, Verdana, sans-serif | uo-text-font--sans-united | United Sans Serif Text |
| United Sans Semi-Condensed | —font-family-sans-united-semi | ”United Sans Semi-Condensed”, “Source Sans Variable”, Arial, Helvetica, Verdana, sans-serif | uo-text-font--sans-united-semi | United Sans Semi-Condensed Text |
| Source Serif | —font-family-serif | ”Source Serif Variable”, Times, “Times New Roman”, Georgia, “DejaVu Serif”, serif | uo-text-font--serif | Source Serif Text |
| United Serif | —font-family-slab | ”United Serif”, “Source Serif Variable”, Times, Georgia, “DejaVu Serif”, serif | uo-text-font--slab | United Serif |
| United Serif Light | —font-family-slab-light | ”United Serif”, “Source Serif Variable”, Times, Georgia, “DejaVu Serif”, serif | uo-text-font--slab-light | United Serif |
| Monospace | —font-family-monospace | ”Courier New”, “DejaVu Sans Mono”, monospace, sans-serif | | |
| Token | Custom Property (Font Size) | Custom Property (Line Height) | Value (Font Size) | Value (Line Height) | Utility Class | Example |
|---|
| Extra Small | —text-size—xs | —line-height—xs | 0.875rem (14px) | 1.225rem | uo-text-size--xs | XS Size Text |
| Small | —text-size—sm | —line-height—sm | 1rem (16px) | 1.4rem | uo-text-size--sm | Small Size Text |
| Regular | —text-size—rg | —line-height—rg | 1.125rem (18px) | 1.575rem | uo-text-size--rg | Regular Size Text |
| Regular (Extra) | —text-size—ex | —line-height—ex | 1.25rem (20px) | 1.75rem (28px) | uo-text-size--ex | Regular (Extra) Size Text |
| Medium | —text-size—md | —line-height—md | 1.5rem (24px) | 1.65rem | uo-text-size--md | Medium Size Text |
| Large | —text-size—lg | —line-height—lg | 1.75rem (28px) | 1.9rem | uo-text-size--lg | Large Size Text |
| Extra Large | —text-size—xl | —line-height—xl | 2rem (32px) | 2.2rem | uo-text-size--xl | XL Size Text |
| 2XL | —text-size—2xl | —line-height—2xl | 2.5rem (40px) | 2.5rem | uo-text-size--2xl | 2XL Size Text |
| 3XL | —text-size—3xl | —line-height—3xl | 3.125rem (50px) | 3rem | uo-text-size--3xl | 3XL Size Text |
| 4XL | —text-size—4xl | —line-height—4xl | 3.75rem (60px) | 3.5rem | uo-text-size--4xl | 4XL Size Text |
| 5XL | —text-size—5xl | —line-height—5xl | 5.625rem (90px) | 5.35rem | uo-text-size--5xl | 5XL Size Text |
| Token | Custom Property (font-variation-settings) | Custom Property (font-weight) | Value | Utility Class | Example |
|---|
| Extra-Light | —font-ext-light | —font-weight-ext-light | 100 | uo-text-weight--ext-light | An Example of Extra-Light Weight Text |
| Light | —font-light | —font-weight-light | 300 | uo-text-weight--light | An Example of Light Weight Text |
| Regular (Default) | —font-reg | —font-weight-reg | 350 | uo-text-weight--reg | An Example of Regular Weight Text |
| Semi-Bold | —font-semi | —font-weight-semi | 500 | uo-text-weight--semi | An Example of Semi-Bold Weight Text |
| Medium | —font-med | —font-weight-med | 600 | uo-text-weight--med | An Example of Medium Weight Text |
| Bold | —font-bold | —font-weight-bold | 700 | uo-text-weight--bold | An Example of Bold Weight Text |
| Extra-Bold | —font-ext-bold | —font-weight-ext-bold | 800 | uo-text-weight--ext-bold | An Example of Extra-Bold Weight Text |
| Heavy | —font-heavy | —font-weight-heavy | 900 | uo-text-weight--heavy | An Example of Heavy Weight Text |
| Token | Custom Property | Value | Example |
|---|
| 1 | —uowdf-m1 | 0.4rem (7.2px) | |
| 2 | —uowdf-m2 | 0.8rem (14.4px) | |
| 3 | —uowdf-m3 | 1.6rem (28.8px) | |
| 4 | —uowdf-m4 | 2.4rem (43.2px) | |
| 5 | —uowdf-m5 | 3.2rem (57.6px) | |
| 6 | —uowdf-m6 | 4rem (72px) | |
| 7 | —uowdf-m7 | 4.8rem (86.4px) | |
| 8 | —uowdf-m8 | 5.6rem (100.8px) | |
| 9 | —uowdf-m9 | 6.4rem (115.2px) | |