# Adobe Spectrum > The classic Creative Cloud workspace: dark charcoal panels, compact 32px controls, 4px corners, outlined pill buttons, blue focus and a canvas you work on. - Nickname: Pro tool dark - Also called: Spectrum (classic), Spectrum 1, Creative Cloud UI - Category: Platform Design Systems - Moods: Serious, Techy, Calm - Industries: Creative & Portfolio, Media & Entertainment, SaaS - Style page: https://uilingo.dev/styles/adobe-spectrum/ 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) ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Adobe Spectrum" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line The classic Creative Cloud workspace: dark charcoal panels, compact 32px controls, 4px corners, outlined pill buttons, blue focus and a canvas you work on. Design keywords: dark charcoal workspace, compact 32px controls, outlined pill buttons, 4px panel corners, uppercase panel headers, status-light dots, transparency checkerboard, blue focus ring. ## Visual language The classic Creative Cloud desktop workspace. Everything is neutral charcoal — a #1D1D1D canvas well, #323232 panels, #2A2A2A panel headers — so the user's artwork owns all the colour. Density is professional: 32px controls, 13–15px Source Sans, 4px corners on panels and fields, 1px #4A4A4A strokes and tiny bold panel titles (uppercase in Latin). Buttons are fully rounded with 2px outlines, blue (#1473E6) is reserved for the call to action, selection, focus, progress and chart series 1, status is a small coloured dot beside text, headings are 700 and big numbers a light 300 — nothing heavier than 700. Artwork sits on a grey transparency checkerboard with a dashed selection marquee. ## Signature details (must be visible) - Layered neutral greys: canvas #1D1D1D, panels #323232 with 1px #4A4A4A stroke, headers #2A2A2A separated by a 1px #1D1D1D line. Named extras beyond the tokens: field well #262626, field border #5A5A5A, hover border #6E6E6E, neutral status/checkbox grey #909090, checkerboard #3A3A3A / #2E2E2E - Panel headers: a 36px #2A2A2A strip at the top of every card (feature cards included). Latin label: 11px uppercase 700, letter-spacing .06em, colour #B9B9B9. On Thai pages write the label in Thai at 12px 700, no tracking, no case change (e.g. the Thai words for 'Properties' and 'Layers') - Buttons: border-radius = height/2 (16px at 32px, 20px at 40px, 12px at 24px), 2px border; CTA filled #1473E6, hover #0D66D0, pressed #095ABA; secondary = transparent with 2px #E3E3E3 outline that fills on hover. Radius tokens: sm 2px (checkbox), md and lg both 4px (panels, fields, tags), xl 8px only for the workspace window frame and the featured price plan - Blue budget: #1473E6 / #378EF0 = CTA, selection, focus ring, progress fill and chart series 1. Never UI chrome, icons, tabs, checkboxes or text links in body copy - Status lights: badges have no fill — an 8px coloured dot + plain text (green #2D9D78, orange #E68619, red #EC5B62, grey #909090) - Type weights: headings (display included) 700; KPI, stat and price values 300 at 2–2.2rem. Source Sans 3 and Sarabun load only 300/700 for headings — never 800/900 - Transparency checkerboard: repeating-conic-gradient(#3A3A3A 0 25%, #2E2E2E 0 50%) 0 0/16px 16px behind artwork, with a 1px dashed selection rectangle and 7px square corner handles - Keyboard focus: 2px #378EF0 outline offset 2px on every control; tool rail = 52px dark column of 18px grey icons, active tool in a #1D1D1D well with a 1px inset stroke ## Design tokens — use these exact values Colours (dark mode): - background #1D1D1D - surface #323232 - surface-2 #2A2A2A - text #E3E3E3 - text-muted #B9B9B9 - primary #1473E6 (text on it #FFFFFF) - secondary #E3E3E3 (text on it #1D1D1D) - accent #378EF0 - border #4A4A4A - success #2D9D78 · warning #E68619 · danger #EC5B62 - chart series #378EF0, #0FB5AE, #F68511, #DE3D82, #7E84FA Radius: sm 2px, md 4px, lg 4px, xl 8px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(0,0,0,0.3)`, md `0 1px 4px rgba(0,0,0,0.35)`, lg `0 6px 20px rgba(0,0,0,0.5)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.8 density Motion: 130ms cubic-bezier(0.45, 0, 0.4, 1) ## Typography (Latin + Thai) - Headings: Source Sans 3 300/700 with Thai fallback Sarabun 300/700 - Body: Source Sans 3 400/600/700 with Thai fallback Sarabun 400/600/700 - Mono: Source Code Pro - Google Fonts URL: 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 - CSS stacks: heading `"Source Sans 3", "Sarabun", system-ui, sans-serif`; body `"Source Sans 3", "Sarabun", system-ui, sans-serif`; mono `"Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Sarabun — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.25rem, 4.5vw, 3.6rem), heading weight 700, heading tracking 0 (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Text field: #262626 fill, 1px #5A5A5A border, 4px radius, 32px tall; hover #6E6E6E; focus = blue border + 1px blue ring - Checkbox: 14px, 2px #909090 border, 2px radius; checked fills #E3E3E3 with a dark tick (neutral, not blue) - Switch: 28×14 track #5A5A5A with a 14px thumb ringed in 2px #909090; on = track #E3E3E3 - Tabs: 700-weight labels, 2px light-grey indicator under the selected tab (not blue), on a 2px #4A4A4A rule - Action group / segmented: joined 1px-stroked buttons with 4px outer corners; selected = #4A4A4A fill - Tags/chips: 24px, 4px radius, 1px #5A5A5A stroke on #262626; selected = #E3E3E3 fill with dark text - Tables: 11px uppercase headers, 8px rows, hover row #4A4A4A - Alerts: dark panel with a 4px coloured left edge - Charts: 1.5px lines, solid grid, square bars and square heatmap cells with 2px gaps, Spectrum categorical colours (blue, seafoam, orange, magenta, indigo) - Progress: 4px blue bar on a #5A5A5A track ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → showcase → steps → testimonials → pricing → cta. Feature section as grid. Landing pages look like the app: a compact 48px charcoal app bar with an underlined current link, and a split hero with a 700-weight headline (same as all headings; big numbers at 300) beside a product shot framed as a desktop workspace — a 36px title bar with three window dots, a 44px tool strip of grey icons on the left, and the artwork area on the checkerboard where the main card is wrapped in a 1px dashed selection rectangle with 7px square handles. Features are a grid of panels, each with a 36px header strip and an outlined icon square; sections alternate between #1D1D1D and #262626 wells, steps use outlined number circles, the featured price plan has a 2px blue frame, and in the CTA panel the right 40% shows the checkerboard, masked with linear-gradient(90deg, transparent, #000 60%). Dashboard: 52px tool rail, compact top bar, panels with header strips, light-weight KPI numbers, line, bars, heatmap and activity at 8px gaps. ## Content Use realistic product copy (fictional brand) suited to: Creative and media editing tools (photo, video, audio, 3D). Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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) - Filled grey secondary buttons, 8–16px radii on panels or heavy 800/900 headlines — that is Spectrum 2 - Tinting the UI chrome with brand colour or gradients on panels - Pure black backgrounds and neon glows — that is OLED dark mode - Large, airy spacing and 44px+ controls in the desktop UI - Filled coloured badge pills instead of status lights - Using blue for anything other than CTA, selection, focus, progress and chart series 1 - Letter-spaced or English uppercase panel labels on Thai pages ## Stack notes One self-contained HTML file with a