Start
Foundations
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
Design standards, tokens, fonts, and CSS variables for non-React projects.
Use @strongtie/styles when you need Strongtie design standards without React components. This is ideal for:
Consistency across frameworks. Whether you're building in React, Vue, Angular, Blazor, or vanilla HTML, Strongtie design standards ensure your UI stays consistent with Simpson Strong-Tie's brand guidelines.
Framework-neutral delivery. The package exposes CSS custom properties and modular styles without requiring a React runtime, so each framework can use its native component and templating conventions.
No build process required. Add to your HTML <head>:
<!-- All styles (~50-80 KB) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/all.css"
/>Or load individual modules:
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/tokens.css"
/>
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/fonts.css"
/>
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/reset.css"
/>Version pinning: For production, replace latest with a specific version
(e.g., v1.0.0) to prevent unexpected changes.
For projects with a build process:
Create a .npmrc file in your project root that routes only the @strongtie scope to the Simpson feed:
@strongtie:registry=https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/Use @strongtie:registry (scoped) instead of registry (global). This ensures only @strongtie/* packages use Azure Artifacts authentication, while public packages install from npmjs.org without errors.
Then add your credentials to ~/.npmrc — see Set up your .npmrc for the full two-file setup.
/* Import everything */
@import "@strongtie/styles";
/* Or import specific modules */
@import "@strongtie/styles/tokens";
@import "@strongtie/styles/fonts";
@import "@strongtie/styles/reset";| Module | Import | Size | Description |
|---|---|---|---|
| All | @strongtie/styles | ~50-80 KB | Complete design system |
| Tokens | @strongtie/styles/tokens | ~3-5 KB | Design standards as CSS custom properties |
| Fonts | @strongtie/styles/fonts | ~2-4 KB | @font-face declarations |
| Reset | @strongtie/styles/reset | ~5-8 KB | CSS normalize/reset |
Access design standards via CSS custom properties:
.my-button {
background-color: var(--action-default-background);
color: var(--action-default-foreground);
border-radius: var(--corner-radius-75);
padding: var(--space-200) var(--space-400);
font-size: var(--font-size-100);
font-weight: var(--font-weight-medium);
transition: background-color var(--tx-s);
}
.my-button:hover {
background-color: var(--action-default-hover-background);
}
.my-card {
background-color: var(--surface-primary-background);
border: 1px solid var(--surface-primary-border);
border-radius: var(--corner-radius-200);
padding: var(--space-500);
box-shadow: var(--shadow-default);
}Add the CDN link to your _Host.cshtml or App.razor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://design.strongtie.io/cdn/styles/latest/all.css" />
<link rel="stylesheet" href="css/site.css" />
</head>
<body>
@RenderBody()
<script src="_framework/blazor.server.js"></script>
</body>
</html>Create styled components using CSS variables:
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--corner-radius-75);
padding: var(--space-200) var(--space-400);
font-size: var(--font-size-100);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: background-color var(--tx-s);
}
.btn-primary {
background-color: var(--action-default-background);
color: var(--action-default-foreground);
}
.btn-primary:hover {
background-color: var(--action-default-hover-background);
}
.btn-secondary {
background-color: var(--action-secondary-background);
color: var(--action-secondary-foreground);
}
.card {
background: var(--surface-secondary-background);
border: 1px solid var(--surface-primary-border);
border-radius: var(--corner-radius-200);
padding: var(--space-400);
}<button class="btn @CssClass" @onclick="OnClick">
@ChildContent
</button>
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public EventCallback OnClick { get; set; }
[Parameter] public string CssClass { get; set; } = "btn-primary";
}Apply the same Strongtie variables to application-owned Razor components or to the framework-native component library your product already uses.
Example of creating a custom alert component using design standards:
Best Practice: When building custom components, create abstracted wrappers instead of modifying base styles directly. This makes updates and maintenance easier across your application.
.alert {
padding: var(--space-300) var(--space-400);
border-radius: var(--corner-radius-100);
font-size: var(--font-size-100);
line-height: var(--line-height-300);
}
.alert-info {
background-color: var(--feedback-info-secondary-background);
color: var(--feedback-info-secondary-foreground);
border: 1px solid var(--feedback-info-background);
}
.alert-success {
background-color: var(--feedback-success-secondary-background);
color: var(--feedback-success-secondary-foreground);
border: 1px solid var(--feedback-success-background);
}
.alert-warning {
background-color: var(--feedback-warning-background);
color: var(--feedback-warning-foreground);
}
.alert-error {
background-color: var(--feedback-critical-secondary-background);
color: var(--feedback-critical-secondary-foreground);
border: 1px solid var(--feedback-critical-background);
}Ensure the styles are loaded before your custom CSS.
CSS custom properties require a modern browser.
Confirm the import path is correct.
Look for the font file requests.
Ensure CORS headers allow font loading from the CDN.
Import fonts.css or all.css.
Use CSS layers to control specificity:
@layer reset, tokens, custom;
@layer tokens {
@import "@strongtie/styles/tokens";
}
@layer custom {
/* Your custom styles here */
}Every design token shipped by @strongtie/styles, grouped by category. Prefer the semantic tokens (surface, action, control, feedback) for component styling; reach for the raw color ramp only when defining new semantic tokens.
Typography scale for consistent text sizing throughout the application.
| Variable | Value | Purpose |
|---|---|---|
--font-size-50 | 0.625rem (10px) | Smallest text size for fine print or legal text |
--font-size-75 | 0.75rem (12px) | Small text, captions, or helper text |
--font-size-100 | 0.875rem (14px) | Body text (small), labels, default size |
--font-size-200 | 1rem (16px) | Default body text size |
--font-size-300 | 1.125rem (18px) | Large body text, small headings |
--font-size-400 | 1.25rem (20px) | Subheadings |
--font-size-500 | 1.375rem (22px) | Medium headings (H3) |
--font-size-600 | 1.875rem (30px) | Large headings (H2) |
--font-size-700 | 2.5rem (40px) | Extra large headings (H1) |
--font-size-800 | 3.375rem (54px) | Display text (large) |
--font-size-900 | 4.5rem (72px) | Display text (extra large) |
--font-size-1000 | 6rem (96px) | Hero text, largest display size |
Font weight scale for typography hierarchy.
| Variable | Value | Purpose |
|---|---|---|
--font-weight-light | 300 | Light text weight for decorative or large text |
--font-weight-regular | 400 | Regular text weight for body copy |
--font-weight-medium | 500 | Medium text weight for labels and emphasis |
--font-weight-bold | 700 | Bold text weight for headings and strong emphasis |
Consistent spacing scale for margins, padding, and gaps.
| Variable | Value | Purpose |
|---|---|---|
--space-00 | 0rem (0px) | No spacing |
--space-50 | 0.125rem (2px) | Minimum spacing, subtle separations |
--space-75 | 0.25rem (4px) | Extra small spacing |
--space-90 | 0.375rem (6px) | Small spacing variant |
--space-100 | 0.5rem (8px) | Small spacing (base unit) |
--space-200 | 0.75rem (12px) | Small-medium spacing |
--space-250 | 0.875rem (14px) | Medium spacing variant |
--space-300 | 1rem (16px) | Medium spacing (1 unit) |
--space-350 | 1.25rem (20px) | Medium-large spacing |
--space-400 | 1.5rem (24px) | Large spacing |
--space-500 | 2rem (32px) | Extra large spacing |
--space-550 | 2.25rem (36px) | Extra large spacing variant |
--space-600 | 2.5rem (40px) | Double extra large spacing |
--space-700 | 3rem (48px) | Section spacing (small) |
--space-800 | 4rem (64px) | Section spacing (medium) |
--space-900 | 5rem (80px) | Section spacing (large) |
--space-1000 | 6rem (96px) | Section spacing (extra large) |
Border radius values for consistent rounded corners.
| Variable | Value | Purpose |
|---|---|---|
--corner-radius-00 | 0rem (0px) | No rounding (square corners) |
--corner-radius-50 | 0.03125rem (0.5px) | Minimal rounding |
--corner-radius-75 | 0.25rem (4px) | Small rounding for buttons, inputs |
--corner-radius-100 | 0.375rem (6px) | Medium rounding |
--corner-radius-200 | 0.5rem (8px) | Standard rounding for cards, containers |
--corner-radius-300 | 0.625rem (10px) | Large rounding |
--corner-radius-400 | 0.75rem (12px) | Extra large rounding |
--corner-radius-500 | 1rem (16px) | Maximum standard rounding |
--corner-radius-9999 | 100vh | Pill shape (fully rounded) |
Line height values for optimal text readability.
| Variable | Value | Purpose |
|---|---|---|
--line-height-100 | 1.2 | Tight line height for headings |
--line-height-200 | 1.3 | Compact line height for UI text |
--line-height-300 | 1.5 | Default line height for body text |
--line-height-400 | 1.7 | Loose line height for enhanced readability |
Border width scale for consistent stroke weights.
| Variable | Value | Purpose |
|---|---|---|
--border-width-100 | 1px | Thin border (default) |
--border-width-200 | 2px | Medium border |
--border-width-300 | 3px | Thick border (focus states) |
--border-width-400 | 4px | Extra thick border |
Opacity scale for transparency effects.
| Variable | Value | Purpose |
|---|---|---|
--opacity-00 | 0 | Fully transparent |
--opacity-10 | 0.1 | 10% opacity |
--opacity-20 | 0.2 | 20% opacity |
--opacity-30 | 0.3 | 30% opacity |
--opacity-40 | 0.4 | 40% opacity |
--opacity-50 | 0.5 | 50% opacity (half transparent) |
--opacity-60 | 0.6 | 60% opacity (disabled state) |
--opacity-70 | 0.7 | 70% opacity |
--opacity-80 | 0.8 | 80% opacity |
--opacity-90 | 0.9 | 90% opacity |
--opacity-100 | 1 | Fully opaque |
White overlay colors with varying opacity levels for creating lighter variants.
| Variable | Color | Purpose |
|---|---|---|
--tint-100 | rgba(255, 255, 255, 0.9) | Lightest tint (90% white) |
--tint-200 | rgba(255, 255, 255, 0.8) | Very light tint (80% white) |
--tint-300 | rgba(255, 255, 255, 0.7) | Light tint (70% white) |
--tint-400 | rgba(255, 255, 255, 0.6) | Medium-light tint (60% white) |
--tint-500 | rgba(255, 255, 255, 0.5) | Medium tint (50% white) |
--tint-600 | rgba(255, 255, 255, 0.4) | Medium-dark tint (40% white) |
--tint-700 | rgba(255, 255, 255, 0.3) | Dark tint (30% white) |
--tint-800 | rgba(255, 255, 255, 0.2) | Very dark tint (20% white) |
--tint-900 | rgba(255, 255, 255, 0.1) | Darkest tint (10% white) |
--tint-1000 | rgba(255, 255, 255, 0) | Transparent |
Black overlay colors with varying opacity levels for creating darker variants.
| Variable | Color | Purpose |
|---|---|---|
--shade-100 | rgba(0, 0, 0, 0.9) | Darkest shade (90% black) |
--shade-200 | rgba(0, 0, 0, 0.8) | Very dark shade (80% black) - used for modal backgrounds |
--shade-300 | rgba(0, 0, 0, 0.7) | Dark shade (70% black) |
--shade-400 | rgba(0, 0, 0, 0.6) | Medium-dark shade (60% black) |
--shade-500 | rgba(0, 0, 0, 0.5) | Medium shade (50% black) |
--shade-600 | rgba(0, 0, 0, 0.4) | Medium-light shade (40% black) |
--shade-700 | rgba(0, 0, 0, 0.3) | Light shade (30% black) |
--shade-800 | rgba(0, 0, 0, 0.2) | Very light shade (20% black) |
--shade-900 | rgba(0, 0, 0, 0.1) | Lightest shade (10% black) |
--shade-1000 | rgba(0, 0, 0, 0) | Transparent |
Full color palette with granular shades. Each color family has values from 000 (lightest) to 999 (darkest).
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-neutral-000 | #ffffff | Pure white |
--sst-color-neutral-025 | #f7f7f7 | Near white |
--sst-color-neutral-050 | #f5f5f5 | Background, very light gray |
--sst-color-neutral-075 | #e9e9e9 | Light border color |
--sst-color-neutral-100 | #e3e3e3 | Border color |
--sst-color-neutral-150 | #d4d4d4 | Subtle border |
--sst-color-neutral-200 | #c6c6c6 | Light gray |
--sst-color-neutral-250 | #b9b9b9 | Gray variant |
--sst-color-neutral-300 | #ababab | Medium-light gray |
--sst-color-neutral-350 | #9d9d9d | Gray variant |
--sst-color-neutral-400 | #909090 | Medium gray |
--sst-color-neutral-450 | #848484 | Gray variant |
--sst-color-neutral-500 | #777777 | Mid-tone gray, muted text |
--sst-color-neutral-550 | #6a6a6a | Dark-medium gray |
--sst-color-neutral-600 | #5e5e5e | Secondary text color |
--sst-color-neutral-650 | #525252 | Gray variant |
--sst-color-neutral-700 | #474747 | Dark gray |
--sst-color-neutral-750 | #3b3b3b | Very dark gray |
--sst-color-neutral-800 | #303030 | Near black gray |
--sst-color-neutral-850 | #262626 | Gray variant |
--sst-color-neutral-900 | #1c1c1c | Almost black |
--sst-color-neutral-950 | #111111 | Near pure black, primary text |
--sst-color-neutral-999 | #000000 | Pure black |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-neutral-warm-000 | #ffffff | Pure white |
--sst-color-neutral-warm-025 | #f9f7f6 | Warm near white |
--sst-color-neutral-warm-050 | #f6f4f2 | Warm background |
--sst-color-neutral-warm-075 | #ece9e5 | Warm light gray |
--sst-color-neutral-warm-100 | #e6e2dd | Warm border |
--sst-color-neutral-warm-150 to --sst-color-neutral-warm-999 | Various warm grays | Warm-toned neutral scale |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-orange-000 | #ffffff | Pure white |
--sst-color-orange-025 | #fff5f2 | Lightest orange tint |
--sst-color-orange-050 | #ffece5 | Very light orange |
--sst-color-orange-075 | #ffe2d8 | Light orange background |
--sst-color-orange-100 | #ffd9cb | Light orange |
--sst-color-orange-150 to --sst-color-orange-350 | Various | Orange scale variants |
--sst-color-orange-400 | #ff5308 | Brand orange (primary) |
--sst-color-orange-450 | #ec4c07 | Brand orange hover |
--sst-color-orange-500 | #d64405 | Brand orange active |
--sst-color-orange-550 to --sst-color-orange-999 | Various | Darker orange variants |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-yellow-000 | #ffffff | Pure white |
--sst-color-yellow-025 | #fff8e3 | Lightest yellow |
--sst-color-yellow-050 to --sst-color-yellow-100 | Various | Light yellows |
--sst-color-yellow-150 | #ffd040 | Warning yellow background |
--sst-color-yellow-200 to --sst-color-yellow-700 | Various | Yellow scale |
--sst-color-yellow-750 | #493a0b | Warning yellow foreground |
--sst-color-yellow-800 to --sst-color-yellow-999 | Various | Dark yellow/gold variants |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-blue-000 | #ffffff | Pure white |
--sst-color-blue-025 | #f4f8ff | Lightest blue |
--sst-color-blue-050 to --sst-color-blue-450 | Various | Light to medium blues |
--sst-color-blue-500 | #206eec | Info/link blue, focus color |
--sst-color-blue-550 to --sst-color-blue-999 | Various | Darker blue variants |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-red-000 | #ffffff | Pure white |
--sst-color-red-025 | #fff5f4 | Lightest red |
--sst-color-red-050 to --sst-color-red-450 | Various | Light to medium reds |
--sst-color-red-500 | #ef0028 | Error/destructive red |
--sst-color-red-550 | #d70023 | Destructive red (active) |
--sst-color-red-600 to --sst-color-red-999 | Various | Darker red variants |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-green-000 | #ffffff | Pure white |
--sst-color-green-025 | #f2faef | Lightest green |
--sst-color-green-050 to --sst-color-green-450 | Various | Light to medium greens |
--sst-color-green-500 | #368813 | Success green (secondary) |
--sst-color-green-550 | #2f7a10 | Success green (active) |
--sst-color-green-600 to --sst-color-green-999 | Various | Darker green variants |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-purple-000 | #ffffff | Pure white |
--sst-color-purple-025 to --sst-color-purple-999 | Various purples | Complete purple scale for decorative use |
| Variable | Hex Value | Purpose |
|---|---|---|
--sst-color-pink-000 | #ffffff | Pure white |
--sst-color-pink-025 to --sst-color-pink-999 | Various pinks | Complete pink scale for decorative use |
Semantic tokens for backgrounds, borders, and text on various surfaces.
| Variable | Color | Purpose |
|---|---|---|
--surface-primary-background | #ffffff (gray-000) | Main background color for the application |
--surface-primary-foreground | #111111 (gray-950) | Primary text color on main background |
--surface-primary-border | #e9e9e9 (gray-075) | Borders on primary surface |
--surface-primary-muted-foreground | #777777 (gray-500) | Muted/secondary text on primary surface |
--surface-primary-muted-background | #f5f5f5 (gray-050) | Muted background areas |
| Variable | Color | Purpose |
|---|---|---|
--surface-secondary-background | #f7f7f7 (gray-025) | Secondary surface background (cards, panels) |
--surface-secondary-foreground | #5e5e5e (gray-600) | Text on secondary surfaces |
--surface-secondary-border | #e3e3e3 (gray-100) | Borders on secondary surfaces |
| Variable | Color | Purpose |
|---|---|---|
--surface-auxiliary-background | #f5f5f5 (gray-050) | Tertiary surface background |
--surface-auxiliary-foreground | var(--surface-primary-background) | Text on auxiliary surfaces |
--surface-auxiliary-border | #d4d4d4 (gray-150) | Borders on auxiliary surfaces |
| Variable | Color | Purpose |
|---|---|---|
--surface-modal-background | rgba(0, 0, 0, 0.8) | Modal overlay/backdrop color |
Semantic tokens for interactive elements like buttons and links.
| Variable | Color | Purpose |
|---|---|---|
--action-default-background | #1c1c1c (gray-900) | Default button background |
--action-default-foreground | #ffffff (gray-000) | Default button text |
--action-default-hover-background | #474747 (gray-700) | Default button hover state |
--action-default-hover-foreground | #ffffff (gray-000) | Default button hover text |
--action-default-active-background | #303030 (gray-800) | Default button active/pressed state |
--action-default-active-foreground | #ffffff (gray-000) | Default button active text |
| Variable | Color | Purpose |
|---|---|---|
--action-selected-background | #f5f5f5 (gray-050) | Selected item background |
--action-focus-foreground | #111111 (gray-950) | Focus state text color |
| Variable | Color | Purpose |
|---|---|---|
--action-secondary-background | #f5f5f5 (gray-050) | Secondary button background |
--action-secondary-foreground | var(--surface-primary-foreground) | Secondary button text |
--action-secondary-hover-background | #f7f7f7 (gray-025) | Secondary button hover |
--action-secondary-hover-foreground | #111111 (gray-950) | Secondary button hover text |
--action-secondary-active-background | #e9e9e9 (gray-075) | Secondary button active state |
--action-secondary-active-foreground | #111111 (gray-950) | Secondary button active text |
| Variable | Color | Purpose |
|---|---|---|
--action-destructive-background | #ef0028 (red-500) | Destructive button background |
--action-destructive-foreground | #ffffff (gray-000) | Destructive button text |
--action-destructive-hover-background | #ff002b (red-450) | Destructive button hover |
--action-destructive-hover-foreground | #ffffff (gray-000) | Destructive button hover text |
--action-destructive-active-background | #d70023 (red-550) | Destructive button active state |
--action-destructive-active-foreground | #ffffff (gray-000) | Destructive button active text |
| Variable | Color | Purpose |
|---|---|---|
--action-outline-background | #ffffff (gray-000) | Outline button background |
--action-outline-foreground | var(--surface-primary-foreground) | Outline button text |
--action-outline-hover-background | #f5f5f5 (gray-050) | Outline button hover |
--action-outline-active-foreground | #e9e9e9 (gray-075) | Outline button active text |
--action-outline-border | #e3e3e3 (gray-100) | Outline button border |
| Variable | Color | Purpose |
|---|---|---|
--action-ghost-background | #ffffff (gray-000) | Ghost button background |
--action-ghost-foreground | var(--surface-primary-foreground) | Ghost button text |
--action-ghost-hover-background | #f5f5f5 (gray-050) | Ghost button hover state |
| Variable | Color | Purpose |
|---|---|---|
--action-link-foreground | #206eec (blue-500) | Link text color |
--action-link-hover-foreground | #1859c2 (blue-600) | Link hover color |
Semantic tokens for form controls (checkboxes, radio buttons, switches, inputs).
| Variable | Color | Purpose |
|---|---|---|
--control-background | #ffffff (gray-000) | Input/control background |
--control-border | #e3e3e3 (gray-100) | Input/control border |
--control-focus | var(--surface-primary-foreground) | Control focus state color |
--control-selected-background | #111111 (gray-950) | Selected control background (checked) |
--control-selected-foreground | #ffffff (gray-000) | Selected control foreground (checkmark) |
--control-selected-border | #111111 (gray-950) | Selected control border |
--control-unselected-background | #ffffff (gray-000) | Unselected control background |
--control-unselected-border | #6a6a6a (gray-550) | Unselected control border |
--control-switch-background | #e3e3e3 (gray-100) | Switch toggle background (off state) |
Semantic tokens for alerts, toasts, badges, and status indicators.
| Variable | Color | Purpose |
|---|---|---|
--feedback-default-background | #1c1c1c (gray-900) | Default feedback background |
--feedback-default-foreground | #ffffff (gray-000) | Default feedback text |
--feedback-default-focus | var(--surface-primary-foreground) | Default feedback focus |
| Variable | Color | Purpose |
|---|---|---|
--feedback-secondary-background | #f5f5f5 (gray-050) | Secondary feedback background |
--feedback-secondary-foreground | var(--surface-primary-foreground) | Secondary feedback text |
| Variable | Color | Purpose |
|---|---|---|
--feedback-outline-background | #ffffff (gray-000) | Outline feedback background |
--feedback-outline-foreground | var(--surface-primary-foreground) | Outline feedback text |
--feedback-outline-border | #e9e9e9 (gray-075) | Outline feedback border |
| Variable | Color | Purpose |
|---|---|---|
--feedback-info-background | #206eec (blue-500) | Info alert background (filled) |
--feedback-info-foreground | #ffffff (gray-000) | Info alert text (filled) |
--feedback-info-secondary-background | #ffffff (gray-000) | Info alert background (outlined) |
--feedback-info-secondary-foreground | #206eec (blue-500) | Info alert text (outlined) |
| Variable | Color | Purpose |
|---|---|---|
--feedback-success-background | #2f7a10 (green-550) | Success alert background (filled) |
--feedback-success-foreground | #ffffff (gray-000) | Success alert text (filled) |
--feedback-success-secondary-background | #ffffff (gray-000) | Success alert background (outlined) |
--feedback-success-secondary-foreground | #368813 (green-500) | Success alert text (outlined) |
| Variable | Color | Purpose |
|---|---|---|
--feedback-warning-background | #ffd040 (yellow-150) | Warning alert background (filled) |
--feedback-warning-foreground | #493a0b (yellow-750) | Warning alert text (filled) |
--feedback-warning-secondary-background | #3b3b3b (gray-750) | Warning alert background (dark variant) |
--feedback-warning-secondary-foreground | #ffd040 (yellow-150) | Warning alert text (dark variant) |
| Variable | Color | Purpose |
|---|---|---|
--feedback-critical-background | #d70023 (red-550) | Critical/error alert background (filled) |
--feedback-critical-foreground | #ffffff (gray-000) | Critical/error alert text (filled) |
--feedback-critical-secondary-background | #ffffff (gray-000) | Critical/error alert background (outlined) |
--feedback-critical-secondary-foreground | #ef0028 (red-500) | Critical/error alert text (outlined) |
Box shadow and drop shadow tokens for elevation and depth.
| Variable | Value | Purpose |
|---|---|---|
--shadow-default | 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06) | Default shadow for cards and elevated elements |
--shadow-small | 0px 1px 2px 0px rgba(0, 0, 0, 0.05) | Small shadow for subtle elevation |
--shadow-medium | 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06) | Medium shadow for dropdowns and popovers |
--shadow-large | 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.05) | Large shadow for modals and prominent elements |
| Variable | Value | Purpose |
|---|---|---|
--dropshadow-default | drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.06)) | Default drop shadow filter |
--dropshadow-sm | drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05)) | Small drop shadow filter |
--dropshadow-md | drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.06)) | Medium drop shadow filter |
--dropshadow-lrg | drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) | Large drop shadow filter |
| Variable | Value | Purpose |
|---|---|---|
--focus-color | #c6c6c6 (gray-200) | Focus ring color |
--focus-width | var(--border-width-300) | Focus ring width (3px) |
--focus-border | oklch(70.8% 0 0) | Focus border color |
--disabled | var(--opacity-60) | Opacity for disabled elements (60%) |
| Variable | Value | Purpose |
|---|---|---|
--tx-s | varies | Short transition duration (0s if prefers-reduced-motion) |
--tx-m | varies | Medium transition duration (0s if prefers-reduced-motion) |
--tx-l | varies | Long transition duration (0s if prefers-reduced-motion) |
--tx-x | varies | Extra long transition duration (0s if prefers-reduced-motion) |
--tx-xx | varies | Extra extra long transition duration (0s if prefers-reduced-motion) |
--interactive-feedback | translateY(-.075em) scale(1.01) | Interactive element transform (none if prefers-reduced-motion) |
/* ✅ Good - Using semantic tokens */
.button {
background-color: var(--action-default-background);
color: var(--action-default-foreground);
border-radius: var(--corner-radius-75);
padding: var(--space-200) var(--space-400);
}
/* ⚠️ Use with caution - Direct color ramp usage */
.brand-highlight {
background-color: var(--sst-color-orange-400);
}
/* ✅ Good - Using spacing and typography tokens */
.card {
padding: var(--space-500);
font-size: var(--font-size-200);
line-height: var(--line-height-300);
border-radius: var(--corner-radius-200);
box-shadow: var(--shadow-default);
}Currently, styles only supports light mode. The :root element uses color-scheme: only light. Dark mode support may be added in future versions.