@texuli/tokens generator

Theme studio

Generate a light and dark theme from one brand color, mood words, or a local image. Retune roles, watch components update live, gate WCAG 2.x contrast, and export CSS or JSON. Nothing leaves this origin.

Source

Contrast target

Tune roles

AA check

Default seed loaded. All gated pairs meet WCAG AA (4.5:1 text).

Failing pairs: 0 · floor 4.5:1

No failures under the selected floor.

Live components

Default Secondary Outline Destructive

Harbor Notes preview

Fictional ferry briefing card on the studio theme.

Live components re-read CSS variables when you generate or retune a role. No network.

Sample link

Export

Output 
@layer tx.base, tx.components;

@layer tx.base {
  [data-tx-theme='theme-studio'][data-tx-mode='light'] {
    --tx-accent: #e6efff;
    --tx-accent-active: #f7ffff;
    --tx-accent-disabled: #f4f6fb;
    --tx-accent-focus: #2b6ce0;
    --tx-accent-foreground: #101a2d;
    --tx-accent-hover: #f7ffff;
    --tx-background: #fbfbff;
    --tx-border: #e1e1e5;
    --tx-border-strong: #929296;
    --tx-border-width: 1px;
    --tx-canvas: #f5f5f9;
    --tx-chart-axis: #62626a;
    --tx-chart-grid: #e1e1e5;
    --tx-density: 1;
    --tx-destructive: #cc2827;
    --tx-destructive-active: #a3000e;
    --tx-destructive-disabled: #e6b4ad;
    --tx-destructive-focus: #2b6ce0;
    --tx-destructive-foreground: #ffffff;
    --tx-destructive-hover: #ba0a15;
    --tx-destructive-soft: #fff2f0;
    --tx-destructive-soft-foreground: #540004;
    --tx-elevated: #ffffff;
    --tx-elevated-foreground: #15151b;
    --tx-elevation-style: soft;
    --tx-focus-ring-offset: 2px;
    --tx-focus-ring-style: ring;
    --tx-focus-ring-width: 2px;
    --tx-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --tx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tx-font-size-2xl: 1.5rem;
    --tx-font-size-3xl: 1.875rem;
    --tx-font-size-4xl: 2.25rem;
    --tx-font-size-5xl: 3rem;
    --tx-font-size-6xl: 3.75rem;
    --tx-font-size-7xl: 4.5rem;
    --tx-font-size-8xl: 6rem;
    --tx-font-size-9xl: 8rem;
    --tx-font-size-base: 1rem;
    --tx-font-size-lg: 1.125rem;
    --tx-font-size-sm: 0.875rem;
    --tx-font-size-xl: 1.25rem;
    --tx-font-size-xs: 0.75rem;
    --tx-font-weight-body: 400;
    --tx-font-weight-bold: 700;
    --tx-font-weight-heading: 600;
    --tx-font-weight-medium: 500;
    --tx-foreground: #15151b;
    --tx-glass-blur: 16px;
    --tx-glass-opacity: 82%;
    --tx-info: #0871c1;
    --tx-info-active: #005493;
    --tx-info-disabled: #abc4dd;
    --tx-info-focus: #2b6ce0;
    --tx-info-foreground: #ffffff;
    --tx-info-hover: #0062ab;
    --tx-info-soft: #eef6ff;
    --tx-info-soft-foreground: #002a4e;
    --tx-input: #86868a;
    --tx-input-active: #69696d;
    --tx-input-disabled: #cbcbcc;
    --tx-input-focus: #2b6ce0;
    --tx-input-hover: #77777b;
    --tx-letter-spacing-body: 0;
    --tx-letter-spacing-heading: 0;
    --tx-link: #195acc;
    --tx-link-active: #003da2;
    --tx-link-disabled: #a7bde1;
    --tx-link-focus: #2b6ce0;
    --tx-link-hover: #054abb;
    --tx-link-visited: #6f3691;
    --tx-motion: 1;
    --tx-motion-base: 200ms;
    --tx-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --tx-motion-fast: 150ms;
    --tx-motion-slow: 300ms;
    --tx-muted: #f3f3f7;
    --tx-muted-active: #ffffff;
    --tx-muted-disabled: #f8f8f9;
    --tx-muted-focus: #2b6ce0;
    --tx-muted-foreground: #62626a;
    --tx-muted-hover: #ffffff;
    --tx-overlay: rgb(9 9 11 / 0.5);
    --tx-primary: #2869dd;
    --tx-primary-active: #0349bb;
    --tx-primary-disabled: #adc3e7;
    --tx-primary-focus: #2b6ce0;
    --tx-primary-foreground: #ffffff;
    --tx-primary-hover: #1859cc;
    --tx-primary-soft: #f0f5ff;
    --tx-primary-soft-foreground: #002263;
    --tx-radius: 0.625rem;
    --tx-radius-scale: 1;
    --tx-radius-step-2: 2px;
    --tx-radius-step-4: 4px;
    --tx-radius-step-6: 6px;
    --tx-ring: #2b6ce0;
    --tx-scrim: rgb(9 9 11 / 0.32);
    --tx-secondary: #dbe9ff;
    --tx-secondary-active: #f2ffff;
    --tx-secondary-disabled: #f0f4fb;
    --tx-secondary-focus: #2b6ce0;
    --tx-secondary-foreground: #101a2d;
    --tx-secondary-hover: #f5f9ff;
    --tx-selection: #bdd5ff;
    --tx-selection-foreground: #101a2d;
    --tx-shadow: rgb(15 23 42 / 0.1);
    --tx-shadow-float: 0 10px 30px -8px var(--tx-shadow), 0 4px 10px -4px var(--tx-shadow);
    --tx-shadow-soft: 0 1px 2px 0 var(--tx-shadow), 0 1px 3px 0 var(--tx-shadow);
    --tx-sidebar: #f6f6fb;
    --tx-sidebar-border: #e1e1e5;
    --tx-sidebar-foreground: #23232a;
    --tx-sidebar-primary: #2869dd;
    --tx-sidebar-primary-active: #0349bb;
    --tx-sidebar-primary-disabled: #adc3e7;
    --tx-sidebar-primary-focus: #2b6ce0;
    --tx-sidebar-primary-hover: #1859cc;
    --tx-subtle: #e9e9ed;
    --tx-subtle-foreground: #4c4c54;
    --tx-success: #007f38;
    --tx-success-active: #005e28;
    --tx-success-disabled: #acc7b0;
    --tx-success-focus: #2b6ce0;
    --tx-success-foreground: #ffffff;
    --tx-success-hover: #006e30;
    --tx-success-soft: #dfffe4;
    --tx-success-soft-foreground: #003312;
    --tx-surface: #ffffff;
    --tx-surface-foreground: #15151b;
    --tx-surface-style: solid;
    --tx-warning: #916600;
    --tx-warning-active: #6d4c00;
    --tx-warning-disabled: #cdbfa9;
    --tx-warning-focus: #2b6ce0;
    --tx-warning-foreground: #ffffff;
    --tx-warning-hover: #7f5900;
    --tx-warning-soft: #fff4e1;
    --tx-warning-soft-foreground: #382500;
  }

  [data-tx-theme='theme-studio'][data-tx-mode='dark'] {
    --tx-accent: #152643;
    --tx-accent-active: #020e28;
    --tx-accent-disabled: #11161e;
    --tx-accent-focus: #2b6ce0;
    --tx-accent-foreground: #e6efff;
    --tx-accent-hover: #091a36;
    --tx-background: #0b0b0e;
    --tx-border: #323236;
    --tx-border-strong: #808084;
    --tx-border-width: 1px;
    --tx-canvas: #060508;
    --tx-chart-axis: #a4a4ac;
    --tx-chart-grid: #323236;
    --tx-density: 1;
    --tx-destructive: #ff645a;
    --tx-destructive-active: #ffa096;
    --tx-destructive-disabled: #5b342f;
    --tx-destructive-focus: #2b6ce0;
    --tx-destructive-foreground: #0a0a0a;
    --tx-destructive-hover: #ff8579;
    --tx-destructive-soft: #370404;
    --tx-destructive-soft-foreground: #ffc8c1;
    --tx-elevated: #212124;
    --tx-elevated-foreground: #f4f4fd;
    --tx-elevation-style: soft;
    --tx-focus-ring-offset: 2px;
    --tx-focus-ring-style: ring;
    --tx-focus-ring-width: 2px;
    --tx-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tx-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --tx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tx-font-size-2xl: 1.5rem;
    --tx-font-size-3xl: 1.875rem;
    --tx-font-size-4xl: 2.25rem;
    --tx-font-size-5xl: 3rem;
    --tx-font-size-6xl: 3.75rem;
    --tx-font-size-7xl: 4.5rem;
    --tx-font-size-8xl: 6rem;
    --tx-font-size-9xl: 8rem;
    --tx-font-size-base: 1rem;
    --tx-font-size-lg: 1.125rem;
    --tx-font-size-sm: 0.875rem;
    --tx-font-size-xl: 1.25rem;
    --tx-font-size-xs: 0.75rem;
    --tx-font-weight-body: 400;
    --tx-font-weight-bold: 700;
    --tx-font-weight-heading: 600;
    --tx-font-weight-medium: 500;
    --tx-foreground: #f4f4fd;
    --tx-glass-blur: 16px;
    --tx-glass-opacity: 82%;
    --tx-info: #4ba3f7;
    --tx-info-active: #88c3ff;
    --tx-info-disabled: #2d4257;
    --tx-info-focus: #2b6ce0;
    --tx-info-foreground: #0a0a0a;
    --tx-info-hover: #67b3ff;
    --tx-info-soft: #001b36;
    --tx-info-soft-foreground: #badbff;
    --tx-input: #717175;
    --tx-input-active: #8f8f93;
    --tx-input-disabled: #303031;
    --tx-input-focus: #2b6ce0;
    --tx-input-hover: #808084;
    --tx-letter-spacing-body: 0;
    --tx-letter-spacing-heading: 0;
    --tx-link: #7faeff;
    --tx-link-active: #b3cfff;
    --tx-link-disabled: #3a465a;
    --tx-link-focus: #2b6ce0;
    --tx-link-hover: #99bfff;
    --tx-link-visited: #d69afe;
    --tx-motion: 1;
    --tx-motion-base: 200ms;
    --tx-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --tx-motion-fast: 150ms;
    --tx-motion-slow: 300ms;
    --tx-muted: #212124;
    --tx-muted-active: #0b0b0d;
    --tx-muted-disabled: #141415;
    --tx-muted-focus: #2b6ce0;
    --tx-muted-foreground: #a4a4ac;
    --tx-muted-hover: #151518;
    --tx-overlay: rgb(0 0 0 / 0.65);
    --tx-primary: #4385fc;
    --tx-primary-active: #78a9ff;
    --tx-primary-disabled: #283957;
    --tx-primary-focus: #2b6ce0;
    --tx-primary-foreground: #0a0a0a;
    --tx-primary-hover: #5d97ff;
    --tx-primary-soft: #03183f;
    --tx-primary-soft-foreground: #c2d9ff;
    --tx-radius: 0.625rem;
    --tx-radius-scale: 1;
    --tx-radius-step-2: 2px;
    --tx-radius-step-4: 4px;
    --tx-radius-step-6: 6px;
    --tx-ring: #2b6ce0;
    --tx-scrim: rgb(0 0 0 / 0.5);
    --tx-secondary: #222e42;
    --tx-secondary-active: #0b1628;
    --tx-secondary-disabled: #15191e;
    --tx-secondary-focus: #2b6ce0;
    --tx-secondary-foreground: #e6efff;
    --tx-secondary-hover: #162235;
    --tx-selection: #264172;
    --tx-selection-foreground: #e6efff;
    --tx-shadow: rgb(0 0 0 / 0.5);
    --tx-shadow-float: 0 10px 30px -8px var(--tx-shadow), 0 4px 10px -4px var(--tx-shadow);
    --tx-shadow-soft: 0 1px 2px 0 var(--tx-shadow), 0 1px 3px 0 var(--tx-shadow);
    --tx-sidebar: #111114;
    --tx-sidebar-border: #2d2d31;
    --tx-sidebar-foreground: #e7e7f0;
    --tx-sidebar-primary: #4385fc;
    --tx-sidebar-primary-active: #78a9ff;
    --tx-sidebar-primary-disabled: #283957;
    --tx-sidebar-primary-focus: #2b6ce0;
    --tx-sidebar-primary-hover: #5d97ff;
    --tx-subtle: #2d2d31;
    --tx-subtle-foreground: #bdbdc5;
    --tx-success: #43b966;
    --tx-success-active: #67da85;
    --tx-success-disabled: #2d4732;
    --tx-success-focus: #2b6ce0;
    --tx-success-foreground: #0a0a0a;
    --tx-success-hover: #55c975;
    --tx-success-soft: #00220a;
    --tx-success-soft-foreground: #9ceead;
    --tx-surface: #161619;
    --tx-surface-foreground: #f4f4fd;
    --tx-surface-style: solid;
    --tx-warning: #cd9200;
    --tx-warning-active: #eeb23d;
    --tx-warning-disabled: #4c3d25;
    --tx-warning-focus: #2b6ce0;
    --tx-warning-foreground: #0a0a0a;
    --tx-warning-hover: #dea227;
    --tx-warning-soft: #261800;
    --tx-warning-soft-foreground: #ffcf7d;
  }
}