Adobe Spectrum

Also called: Spectrum (classic), Spectrum 1, Creative Cloud UI

The classic Creative Cloud workspace: dark charcoal panels, compact 32px controls, 4px corners, outlined pill buttons, blue focus and a canvas you work on.

“Pro tool dark”Platform Design SystemsEra: 2017 → 2023 (Creative Cloud desktop apps)SeriousTechyCalm

Open full screen ↗

adobe-spectrum / landingEN

adobe-spectrum / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md4pxRadius lg4pxRadius xl8pxDensity×0.8Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

dark charcoal workspacecompact 32px controlsoutlined pill buttons4px panel cornersuppercase panel headersstatus-light dotstransparency checkerboardblue focus ring

Classic Spectrum is the interface of a professional creative tool. Neutral greys from #1D1D1D to #323232 frame the work so colour judgement is never polluted; panels have small uppercase headers, controls are compact (32px) with 4px corners, buttons are fully rounded with 2px outlines, and blue appears only for the call to action, selection and keyboard focus. Status is a tiny coloured dot beside text, big numbers are set light, and artwork sits on a transparency checkerboard with dashed selection marquees.

Best for

Creative and media editing tools (photo, video, audio, 3D)
Pro desktop or web apps with many panels and inspectors
Asset managers and review/approval tools for designers
Dense settings and property inspectors

Avoid for

Consumer marketing sites that need warmth
First-time or casual users who need big friendly targets
Brands built on vivid colour

✓ Do

Keep the chrome neutral grey (#1D1D1D canvas, #323232 panels) so the artwork owns the colour
Use 32px controls, 4px corners and 11px uppercase bold panel headers
Reserve blue #1473E6 for the call to action, selection and the 2px focus ring
Headings 700, big numbers 300 — nothing heavier than 700

✕ Don't

Don’t tint the UI greys with brand colour
Don’t use large radii or filled grey secondary buttons — classic Spectrum outlines them
Don’t use heavy display type; big numbers are set light (300)

Not to be confused with

Spectrum 2 →Spectrum 2 is light by default with 8–16px corners, filled grey buttons, heavy 800 headlines and pastel colour; classic Spectrum is a dark compact workspace with outlined pills and light numbers.Dark Mode (OLED) →OLED dark mode is pure #000 with glowing accents; Spectrum uses layered mid-greys (#1D1D1D–#323232) and almost no glow.Linear-style Dark SaaS →Linear-style dark SaaS adds indigo glows, gradient borders and marketing polish; Spectrum is a utilitarian pro-tool shell with panel headers and outlined buttons.

On mobile

Treat the phone as a companion to the desktop tool: dark charcoal screens, compact list rows with plain grey icons and status-light dots, a #323232 bottom bar with a white active item, and outlined pill buttons. Keep the checkerboard only behind artwork previews.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSource Sans 3 · 300/700

The quick brown fox

Heading · ThaiSarabun · 300/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinSource Sans 3 · 400/600/700

Clear words make shared decisions.

Body · ThaiSarabun · 400/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Source Sans 3 is Adobe’s own open humanist sans (a cousin of Adobe Clean); Sarabun shares its calm humanist rhythm and stays legible at the compact 13–14px sizes of a tool UI.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 4px · xl 8px · pill 999px`
Border	`1px`
Shadow	`0 1px 4px rgba(0,0,0,0.35)`
Display	`clamp(2.25rem, 4.5vw, 3.6rem)`
Motion	`130ms cubic-bezier(0.45, 0, 0.4, 1)`
Density	`×0.8`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Adobe Spectrum (adobe-spectrum) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&family=Source+Code+Pro:wght@400;500&family=Sarabun:wght@300;400;600;700&display=swap
 */
:root {
  --radius: 4px;
  --background: #F5F5F5;
  --foreground: #2C2C2C;
  --card: #FFFFFF;
  --card-foreground: #2C2C2C;
  --popover: #FFFFFF;
  --popover-foreground: #2C2C2C;
  --primary: #1473E6;
  --primary-foreground: #FFFFFF;
  --secondary: #4B4B4B;
  --secondary-foreground: #FFFFFF;
  --muted: #FAFAFA;
  --muted-foreground: #6E6E6E;
  --accent: #FAFAFA;
  --accent-foreground: #2C2C2C;
  --destructive: #D7373F;
  --border: #CACACA;
  --input: #CACACA;
  --ring: #1473E6;
  --chart-1: #1473E6;
  --chart-2: #0FB5AE;
  --chart-3: #F68511;
  --chart-4: #DE3D82;
  --chart-5: #4046CA;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #2C2C2C;
  --sidebar-primary: #1473E6;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #FAFAFA;
  --sidebar-accent-foreground: #2C2C2C;
  --sidebar-border: #CACACA;
  --sidebar-ring: #1473E6;
}

.dark {
  --background: #1D1D1D;
  --foreground: #E3E3E3;
  --card: #323232;
  --card-foreground: #E3E3E3;
  --popover: #323232;
  --popover-foreground: #E3E3E3;
  --primary: #1473E6;
  --primary-foreground: #FFFFFF;
  --secondary: #E3E3E3;
  --secondary-foreground: #1D1D1D;
  --muted: #2A2A2A;
  --muted-foreground: #B9B9B9;
  --accent: #2A2A2A;
  --accent-foreground: #E3E3E3;
  --destructive: #EC5B62;
  --border: #4A4A4A;
  --input: #4A4A4A;
  --ring: #1473E6;
  --chart-1: #378EF0;
  --chart-2: #0FB5AE;
  --chart-3: #F68511;
  --chart-4: #DE3D82;
  --chart-5: #7E84FA;
  --sidebar: #323232;
  --sidebar-foreground: #E3E3E3;
  --sidebar-primary: #1473E6;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #2A2A2A;
  --sidebar-accent-foreground: #E3E3E3;
  --sidebar-border: #4A4A4A;
  --sidebar-ring: #1473E6;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Adobe Spectrum (adobe-spectrum) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&family=Source+Code+Pro:wght@400;500&family=Sarabun:wght@300;400;600;700&display=swap
 */
@theme {
  --color-bg: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #FAFAFA;
  --color-text: #2C2C2C;
  --color-text-muted: #6E6E6E;
  --color-primary: #1473E6;
  --color-on-primary: #FFFFFF;
  --color-secondary: #4B4B4B;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0D66D0;
  --color-border: #CACACA;
  --color-success: #268E6C;
  --color-warning: #CB6F10;
  --color-danger: #D7373F;
  --color-chart-1: #1473E6;
  --color-chart-2: #0FB5AE;
  --color-chart-3: #F68511;
  --color-chart-4: #DE3D82;
  --color-chart-5: #4046CA;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 1px 4px rgba(0,0,0,0.35);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.5);
  --font-heading: "Source Sans 3", "Sarabun", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Sarabun", system-ui, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

.dark {
  --color-bg: #1D1D1D;
  --color-surface: #323232;
  --color-surface-2: #2A2A2A;
  --color-text: #E3E3E3;
  --color-text-muted: #B9B9B9;
  --color-primary: #1473E6;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E3E3E3;
  --color-on-secondary: #1D1D1D;
  --color-accent: #378EF0;
  --color-border: #4A4A4A;
  --color-success: #2D9D78;
  --color-warning: #E68619;
  --color-danger: #EC5B62;
  --color-chart-1: #378EF0;
  --color-chart-2: #0FB5AE;
  --color-chart-3: #F68511;
  --color-chart-4: #DE3D82;
  --color-chart-5: #7E84FA;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Adobe Spectrum (adobe-spectrum). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700&family=Source+Code+Pro:wght@400;500&family=Sarabun:wght@300;400;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9608,
            0.9608
          ],
          "hex": "#f5f5f5"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9804,
            0.9804,
            0.9804
          ],
          "hex": "#fafafa"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1725,
            0.1725
          ],
          "hex": "#2c2c2c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4314,
            0.4314,
            0.4314
          ],
          "hex": "#6e6e6e"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.451,
            0.902
          ],
          "hex": "#1473e6"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2941,
            0.2941,
            0.2941
          ],
          "hex": "#4b4b4b"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.4,
            0.8157
          ],
          "hex": "#0d66d0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7922,
            0.7922,
            0.7922
          ],
          "hex": "#cacaca"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.5569,
            0.4235
          ],
          "hex": "#268e6c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7961,
            0.4353,
            0.0627
          ],
          "hex": "#cb6f10"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8431,
            0.2157,
            0.2471
          ],
          "hex": "#d7373f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.451,
            0.902
          ],
          "hex": "#1473e6"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.7098,
            0.6824
          ],
          "hex": "#0fb5ae"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.5216,
            0.0667
          ],
          "hex": "#f68511"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8706,
            0.2392,
            0.5098
          ],
          "hex": "#de3d82"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.251,
            0.2745,
            0.7922
          ],
          "hex": "#4046ca"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.1137,
            0.1137
          ],
          "hex": "#1d1d1d"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1961,
            0.1961,
            0.1961
          ],
          "hex": "#323232"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1647,
            0.1647
          ],
          "hex": "#2a2a2a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8902,
            0.8902
          ],
          "hex": "#e3e3e3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.7255,
            0.7255
          ],
          "hex": "#b9b9b9"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.451,
            0.902
          ],
          "hex": "#1473e6"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8902,
            0.8902
          ],
          "hex": "#e3e3e3"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.1137,
            0.1137
          ],
          "hex": "#1d1d1d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2157,
            0.5569,
            0.9412
          ],
          "hex": "#378ef0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2902,
            0.2902
          ],
          "hex": "#4a4a4a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.6157,
            0.4706
          ],
          "hex": "#2d9d78"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.5255,
            0.098
          ],
          "hex": "#e68619"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.3569,
            0.3843
          ],
          "hex": "#ec5b62"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2157,
            0.5569,
            0.9412
          ],
          "hex": "#378ef0"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.7098,
            0.6824
          ],
          "hex": "#0fb5ae"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.5216,
            0.0667
          ],
          "hex": "#f68511"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8706,
            0.2392,
            0.5098
          ],
          "hex": "#de3d82"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.5176,
            0.9804
          ],
          "hex": "#7e84fa"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.3
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 4,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 20,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Source Sans 3",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Source Sans 3",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Source Code Pro",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 130,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.45,
      0,
      0.4,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.8
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!