Spectrum 2

Also called: Adobe Spectrum 2, S2

Adobe’s friendlier system: light canvas, rounder 8–24px corners, filled pill buttons, heavy 800 headlines and confident pastel-plus-saturated colour.

“Friendly Adobe”Platform Design SystemsEra: 2024 → todayFriendlyPlayfulTrustworthy

Open full screen ↗

spectrum-2 / landingEN

spectrum-2 / 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 sm8pxRadius md10pxRadius lg16pxRadius xl24pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

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.

light and friendlyfilled pill buttonsrounder 16px cardsheavy 800 headlinespastel tinted tilesfuchsia-to-blue gradient2px field bordersdark neutral selection

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)

Not to be confused with

Adobe Spectrum →Classic Spectrum is a dark, compact pro workspace with 4px corners, outlined pills and light numbers; Spectrum 2 is light, round, filled and heavy.Material 3 Expressive →M3 Expressive derives every tint from one seed colour and uses scalloped shapes; Spectrum 2 mixes several hue families on a neutral white chrome with simple rounded rectangles.Dopamine Design →Dopamine design floods the whole page with saturated colour; Spectrum 2 keeps a white/grey interface and confines colour to tiles, charts and one gradient.

On mobile

Spectrum 2 is mobile-friendly by design: 44–48px filled pill buttons, 16px cards, pastel icon tiles in lists, a gradient featured card and a floating white pill tab bar whose active item is a near-black circle. Keep body text at 16px and corners consistent.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinFigtree · 700/800

The quick brown fox

Heading · ThaiPrompt · 600/700/800

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

Body · LatinFigtree · 400/500/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/700

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

Prompt’s round, geometric heavy weights match Figtree’s friendly 800 headlines; Anuphan keeps body text open and loopless like Figtree’s text weights.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 10px · lg 16px · xl 24px · pill 999px`
Border	`1px`
Shadow	`0 2px 10px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.14)`
Display	`clamp(2.8rem, 6.4vw, 5.25rem)`
Motion	`200ms cubic-bezier(0.45, 0, 0.4, 1)`
Density	`×1.05`

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 · Spectrum 2 (spectrum-2) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * 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=Figtree:wght@400;500;700;800&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;700&display=swap
 */
:root {
  --radius: 16px;
  --background: #F8F8F8;
  --foreground: #222222;
  --card: #FFFFFF;
  --card-foreground: #222222;
  --popover: #FFFFFF;
  --popover-foreground: #222222;
  --primary: #3B63FB;
  --primary-foreground: #FFFFFF;
  --secondary: #292929;
  --secondary-foreground: #FFFFFF;
  --muted: #F1F1F1;
  --muted-foreground: #636363;
  --accent: #F1F1F1;
  --accent-foreground: #222222;
  --destructive: #D31510;
  --border: #DADADA;
  --input: #DADADA;
  --ring: #3B63FB;
  --chart-1: #3B63FB;
  --chart-2: #C038CC;
  --chart-3: #0FA899;
  --chart-4: #F68511;
  --chart-5: #7A6FF0;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #222222;
  --sidebar-primary: #3B63FB;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F1F1F1;
  --sidebar-accent-foreground: #222222;
  --sidebar-border: #DADADA;
  --sidebar-ring: #3B63FB;
}

.dark {
  --background: #111111;
  --foreground: #F2F2F2;
  --card: #1E1E1E;
  --card-foreground: #F2F2F2;
  --popover: #1E1E1E;
  --popover-foreground: #F2F2F2;
  --primary: #3B63FB;
  --primary-foreground: #FFFFFF;
  --secondary: #F2F2F2;
  --secondary-foreground: #111111;
  --muted: #262626;
  --muted-foreground: #ADADAD;
  --accent: #262626;
  --accent-foreground: #F2F2F2;
  --destructive: #FF6B5B;
  --border: #3A3A3A;
  --input: #3A3A3A;
  --ring: #3B63FB;
  --chart-1: #7B9AFF;
  --chart-2: #E06DF0;
  --chart-3: #3DD9C8;
  --chart-4: #FFA24D;
  --chart-5: #A79EFF;
  --sidebar: #1E1E1E;
  --sidebar-foreground: #F2F2F2;
  --sidebar-primary: #3B63FB;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #F2F2F2;
  --sidebar-border: #3A3A3A;
  --sidebar-ring: #3B63FB;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Spectrum 2 (spectrum-2) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * 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=Figtree:wght@400;500;700;800&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #F8F8F8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F1F1;
  --color-text: #222222;
  --color-text-muted: #636363;
  --color-primary: #3B63FB;
  --color-on-primary: #FFFFFF;
  --color-secondary: #292929;
  --color-on-secondary: #FFFFFF;
  --color-accent: #B62FC5;
  --color-border: #DADADA;
  --color-success: #007A4D;
  --color-warning: #B95300;
  --color-danger: #D31510;
  --color-chart-1: #3B63FB;
  --color-chart-2: #C038CC;
  --color-chart-3: #0FA899;
  --color-chart-4: #F68511;
  --color-chart-5: #7A6FF0;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.14);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.14);
  --font-heading: "Figtree", "Prompt", system-ui, sans-serif;
  --font-body: "Figtree", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #111111;
  --color-surface: #1E1E1E;
  --color-surface-2: #262626;
  --color-text: #F2F2F2;
  --color-text-muted: #ADADAD;
  --color-primary: #3B63FB;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F2F2F2;
  --color-on-secondary: #111111;
  --color-accent: #E06DF0;
  --color-border: #3A3A3A;
  --color-success: #2FBF86;
  --color-warning: #FF9E3D;
  --color-danger: #FF6B5B;
  --color-chart-1: #7B9AFF;
  --color-chart-2: #E06DF0;
  --color-chart-3: #3DD9C8;
  --color-chart-4: #FFA24D;
  --color-chart-5: #A79EFF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Spectrum 2 (spectrum-2). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725,
            0.9725,
            0.9725
          ],
          "hex": "#f8f8f8"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9451,
            0.9451
          ],
          "hex": "#f1f1f1"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.1333,
            0.1333
          ],
          "hex": "#222222"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3882,
            0.3882,
            0.3882
          ],
          "hex": "#636363"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.3882,
            0.9843
          ],
          "hex": "#3b63fb"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1608,
            0.1608,
            0.1608
          ],
          "hex": "#292929"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7137,
            0.1843,
            0.7725
          ],
          "hex": "#b62fc5"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8549,
            0.8549,
            0.8549
          ],
          "hex": "#dadada"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.4784,
            0.302
          ],
          "hex": "#007a4d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.3255,
            0
          ],
          "hex": "#b95300"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.0824,
            0.0627
          ],
          "hex": "#d31510"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.3882,
            0.9843
          ],
          "hex": "#3b63fb"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.2196,
            0.8
          ],
          "hex": "#c038cc"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.6588,
            0.6
          ],
          "hex": "#0fa899"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.5216,
            0.0667
          ],
          "hex": "#f68511"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.4353,
            0.9412
          ],
          "hex": "#7a6ff0"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.0667
          ],
          "hex": "#111111"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.1176,
            0.1176
          ],
          "hex": "#1e1e1e"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.149,
            0.149
          ],
          "hex": "#262626"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.949
          ],
          "hex": "#f2f2f2"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6784,
            0.6784,
            0.6784
          ],
          "hex": "#adadad"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.3882,
            0.9843
          ],
          "hex": "#3b63fb"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.949,
            0.949
          ],
          "hex": "#f2f2f2"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0667,
            0.0667
          ],
          "hex": "#111111"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.4275,
            0.9412
          ],
          "hex": "#e06df0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.2275,
            0.2275
          ],
          "hex": "#3a3a3a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.749,
            0.5255
          ],
          "hex": "#2fbf86"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6196,
            0.2392
          ],
          "hex": "#ff9e3d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.3569
          ],
          "hex": "#ff6b5b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.6039,
            1
          ],
          "hex": "#7b9aff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.4275,
            0.9412
          ],
          "hex": "#e06df0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2392,
            0.851,
            0.7843
          ],
          "hex": "#3dd9c8"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6353,
            0.302
          ],
          "hex": "#ffa24d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6549,
            0.6196,
            1
          ],
          "hex": "#a79eff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "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.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 4,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 1,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 32,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 1,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Figtree",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.45,
      0,
      0.4,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
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!