# Spectrum 2 > Adobe’s friendlier system: light canvas, rounder 8–24px corners, filled pill buttons, heavy 800 headlines and confident pastel-plus-saturated colour. - Nickname: Friendly Adobe - Also called: Adobe Spectrum 2, S2 - Category: Platform Design Systems - Moods: Friendly, Playful, Trustworthy - Industries: Creative & Portfolio, Education, Media & Entertainment, Startup & Tech, SaaS - Style page: https://uilingo.dev/styles/spectrum-2/ Spectrum 2 takes the professional Spectrum foundation and makes it approachable for a much wider audience. The default is light, corners grow (8px fields, 16px cards, 24px feature blocks), buttons become filled pills — primary blue #3B63FB for the main action, near-black #292929 secondary and soft grey #E9E9E9 for tertiary actions — and headlines go heavy and large. Colour is more expressive: fuchsia, indigo, seafoam and orange tints fill feature cards and icon tiles, and a fuchsia-to-blue gradient marks the hero moments, while the interface chrome stays clean white and grey. ## Best for - Creative apps aimed at beginners and casual makers - Template, social-content and quick-design tools - Education and learning platforms for creatives - Marketing sites for creative SaaS ## Avoid for - Dense pro tools that need maximum canvas space - Serious finance or legal products - Brands that need strict monochrome restraint ## Do - Use filled pills: primary blue #3B63FB for the main action, near-black #292929 secondary, grey #E9E9E9 for tertiary - Give feature cards 16–24px corners and a pastel tint with a saturated icon tile - Set headlines heavy (800) and large; keep body at a comfortable 16px ## Don't - Don’t default to dark charcoal panels or outlined buttons — that is classic Spectrum - Don’t use the gradient on more than one or two hero elements per view - Don’t mix more than four tint families on one screen (the gradient is not a tint family) ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Spectrum 2" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Adobe’s friendlier system: light canvas, rounder 8–24px corners, filled pill buttons, heavy 800 headlines and confident pastel-plus-saturated colour. Design keywords: light and friendly, filled pill buttons, rounder 16px cards, heavy 800 headlines, pastel tinted tiles, fuchsia-to-blue gradient, 2px field borders, dark neutral selection. ## Visual language Adobe's friendlier 2024 system language: a light #F8F8F8 canvas with clean white cards, generous 16–24px corners and heavy, tightly tracked 800-weight headlines. Every button is a filled pill — primary blue #3B63FB for the main action, secondary near-black #292929, neutral grey #E9E9E9 pill for tertiary actions — never outlined. Colour is expressive but contained: feature tiles and icon tiles use pastel tints of indigo, fuchsia, seafoam and orange with a saturated glyph, and one fuchsia → violet → blue gradient (built from the accent token #B62FC5's family) marks exactly three places on a landing page. Selection is shown with near-black #292929 fills, focus with a 2px blue ring. ## Signature details (must be visible) - Colour roles (names match the tokens): primary #3B63FB = blue, the main CTA; secondary #292929 = near-black secondary buttons and selection; accent #B62FC5 = fuchsia, used only inside the gradient and the fuchsia tints; neutral grey #E9E9E9 pill (hover #DCDCDC) for tertiary actions - Button states: primary #3B63FB → hover #274DEA → pressed #1E3FCC + scale .97; secondary #292929 → hover #3A3A3A; tertiary #E9E9E9 → hover #DCDCDC. White on #3B63FB is 4.8:1, so it passes AA — keep white text - Gradient budget (page-structural): linear-gradient(100deg, #D7148E, #9B3BE8 45%, #3B63FB) is used exactly three times per landing page — the hero headline text, the 2×2 bento tile and the featured price plan. Stats, testimonials and the CTA use pastel tints (CTA = indigo #EDEEFF block with the blue primary pill) - Gradient text: apply it to the whole h1 (display:inline; -webkit-background-clip:text; -webkit-box-decoration-break:clone) or to one key phrase only; for Thai add padding-block .08em and line-height ≥1.3 so tone marks aren't clipped - Pastel tint families for tiles and badges (bg / text): indigo #EDEEFF/#3E43C2, fuchsia #FBEAFD/#962AA3, seafoam #DDF6F1/#08766B, orange #FFEEDD/#9E4600. Colour-coded stats: each stat number uses one family's text colour in order — indigo, fuchsia, seafoam, orange. The hero eyebrow pill is fuchsia #FBEAFD/#962AA3 - Geometry: token radii sm 8px (fields, status badges), md 10px (chips), lg 16px (cards), xl 24px (bento tiles, plans) plus named extras: icon tile 14px, step square 14px, feature block / product-shot frame / CTA 32px, checkbox 6px. The hero eyebrow is the only pill-shaped label. Extra greys: #E9E9E9 grey pill, #DADADA field border, #B1B1B1 field hover, #8F8F8F checkbox border - Type: Figtree 800 at −0.03em (the token) for display, h1 and h2, Figtree 700 for h3/h4; Thai: Prompt 800 for display/h1/h2 and Prompt 700 for h3/h4, 0 tracking; body 16px+ - Dark-neutral selection: active tab, nav item (landing and dashboard), chip, checkbox and switch all fill with #292929 and white text ## Design tokens — use these exact values Colours (light mode): - background #F8F8F8 - surface #FFFFFF - surface-2 #F1F1F1 - text #222222 - text-muted #636363 - primary #3B63FB (text on it #FFFFFF) - secondary #292929 (text on it #FFFFFF) - accent #B62FC5 - border #DADADA - success #007A4D · warning #B95300 · danger #D31510 - chart series #3B63FB, #C038CC, #0FA899, #F68511, #7A6FF0 Radius: sm 8px, md 10px, lg 16px, xl 24px, pill 999px Border width: 1px Shadows: sm `0 1px 4px rgba(0,0,0,0.08)`, md `0 2px 10px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.14)`, lg `0 12px 32px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.14)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 200ms cubic-bezier(0.45, 0, 0.4, 1) ## Typography (Latin + Thai) - Headings: Figtree 700/800 with Thai fallback Prompt 600/700/800 - Body: Figtree 400/500/700 with Thai fallback Anuphan 400/500/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;700;800&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;700&display=swap - CSS stacks: heading `"Figtree", "Prompt", system-ui, sans-serif`; body `"Figtree", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.8rem, 6.4vw, 5.25rem), heading weight 800, heading tracking -0.03em (Latin only), sentence-case labels. - 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: Prompt’s round, geometric heavy weights match Figtree’s friendly 800 headlines; Anuphan keeps body text open and loopless like Figtree’s text weights. ## Components - Text field: 2px #DADADA border, 8px radius, 44px tall; hover #B1B1B1; focus = dark border + 2px blue outline offset 2px; search fields are grey #E9E9E9 pills - Buttons: filled pills, 40px (52px large), weight 700 — primary #3B63FB, secondary #292929, tertiary #E9E9E9 with dark text; states as in the signature; never outlined - Checkbox: 20px, 2px #8F8F8F border, 6px radius; checked = #292929 with white tick - Switch: 40×22 outlined pill with a small grey thumb; on = #292929 track and white thumb - Tabs and segmented controls are pills: selected tab = #292929 pill with white text; segmented = white pill on a #E9E9E9 track - Badges: 8px radius (not pills), tinted backgrounds with bold coloured text (seafoam success, orange warning, red danger) - Cards: white, no border, 16px radius, shadow 0 1px 4px rgba(0,0,0,.08) at rest and 0 12px 32px rgba(0,0,0,.12) on hover/floating - Bento: 4 columns on desktop, 2 below 900px — the 2×2 gradient tile (copy bottom-aligned, large white glyph in a translucent white 32px-radius tile top-right) plus 1×1 tiles cycling the four pastel families with a saturated 48px icon tile; the last tiles span 2 columns when needed so no cell is empty - Steps: #292929 48px squares at 14px radius with white 800 numbers, on white 16px cards. Testimonials: white 16px cards, 40px round avatar in the fuchsia tint, fuchsia quote mark, quote at ~18px weight 500 - Top navigation app shell: white bar with pill nav items, active = #292929 pill; KPI icons in tinted 28px tiles. Charts: 3px lines, 8px donut stroke, bars with 8px top corners, Spectrum colours (blue, fuchsia, seafoam, orange, indigo). FAQ: white 16px cards with a round +/− button that turns #292929 when open ## 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: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → logos → features → steps → stats → testimonials → pricing → faq → cta. Feature section as bento. Landing: floating white pill navigation (active link = #292929 pill with white text), centred hero with the fuchsia eyebrow pill, a huge 800-weight headline filled with the fuchsia→blue gradient, a primary blue pill and a grey #E9E9E9 pill button, then the product shot inside a 32px frame washed fuchsia #FBEAFD → indigo #EDEEFF → seafoam #DDF6F1 (a soft wash, not the gradient, and not counted as a tint family). Below: logo row, the bento of features (one 2×2 gradient tile, every row filled), steps with black 14px rounded-square numbers, colour-coded stat numbers, testimonials on white cards, pricing whose featured plan is the gradient block, FAQ cards and an indigo-tint CTA block with a blue primary pill. Dashboard: white top navigation with pill links (active = #292929), KPI cards with tinted icon tiles, donut, line chart, table with tinted badges and a comparison widget. ## Content Use realistic product copy (fictional brand) suited to: Creative apps aimed at beginners and casual makers. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use filled pills: primary blue #3B63FB for the main action, near-black #292929 secondary, grey #E9E9E9 for tertiary - Give feature cards 16–24px corners and a pastel tint with a saturated icon tile - Set headlines heavy (800) and large; keep body at a comfortable 16px ## Don't - Don’t default to dark charcoal panels or outlined buttons — that is classic Spectrum - Don’t use the gradient on more than one or two hero elements per view - Don’t mix more than four tint families on one screen (the gradient is not a tint family) - Dark charcoal default chrome, 4px corners, outlined pill buttons or light-weight numbers — that is classic Spectrum - Gradient anywhere beyond the three landing uses (headline, 2×2 bento tile, featured plan) - Colourful saturated page backgrounds; colour lives in tiles, charts and the gradient only - Thin or light headlines - Hairline 1px field borders (fields use 2px) - Pill-shaped status badges (they are 8px) or grey active nav items (selection is #292929) - Shape-library blobs or scalloped icons — that is Material 3 Expressive ## Stack notes One self-contained HTML file with a