Live Demo

Trigger Dev

This is the Samson AI Lab developer-platform design system, organized around a Trigger.dev reference and generated as a Claude Design component package.

Components: 30
Tokens: 376
Guidelines: 25
Full pages: 2

Foundations

The visual decisions and reusable values that shape every interface.

color

246 tokens

--color-ink-100

#e8e9ec

--color-ink-200

#d7d9dd

--color-ink-300

#b5b8c0

--color-ink-400

#878c99

--color-ink-500

#5f6570

--color-ink-550

#4d525b

--color-ink-600

#3b3e45

--color-ink-650

#2c3034

--color-ink-700

#272a2e

--color-ink-750

#212327

--color-ink-775

#1c1e21

--color-ink-800

#1a1b1f

--color-ink-850

#15171a

--color-ink-900

#121317

--color-ink-950

#0d0e12

--color-ink-1000

#0b0c0f

--color-lime-100

#e4ffc9

--color-lime-200

#cfffa0

--color-lime-300

#bfff81

--color-lime-400

#afff62

--color-lime-500

#a8ff53

--color-lime-600

#82d134

--color-lime-700

#6fb12f

--color-lime-750

#5e932a

--color-lime-800

#45711a

--color-lime-850

#2e4e10

--color-lime-900

#20370a

--color-lime-950

#152506

--color-lavender-50

#f4f2ff

--color-lavender-100

#eae8ff

--color-lavender-200

#d7d4ff

--color-lavender-300

#bab2ff

--color-lavender-400

#826dff

--color-lavender-500

#7655fd

--color-lavender-600

#6532f5

--color-lavender-700

#5620e1

--color-lavender-800

#481abd

--color-lavender-900

#3d189a

--color-lavender-950

#230c69

--color-mint-50

#f0fdf4

--color-mint-100

#ddfbe6

--color-mint-200

#bdf5d0

--color-mint-300

#87eba9

--color-mint-400

#4fd97e

--color-mint-500

#28bf5c

--color-mint-600

#1b9e48

--color-mint-700

#197c3c

--color-mint-800

#196233

--color-mint-900

#16512c

--color-mint-950

#062d15

--color-sun-50

#fdfee8

--color-sun-100

#fdffc2

--color-sun-200

#ffff89

--color-sun-300

#fff852

--color-sun-400

#fdea12

--color-sun-500

#eccf06

--color-sun-600

#cca302

--color-sun-700

#a37505

--color-sun-800

#865b0d

--color-sun-900

#724b11

--color-sun-950

#432705

--color-amber-600

#d97706

--color-orange-400

#fb923c

--color-orange-600

#ea580c

--color-red-500

#ef4444

--color-rose-500

#f43f5e

--color-rose-600

#e11d48

--color-pink-500

#ec4899

--color-fuchsia-100

#fae8ff

--color-fuchsia-200

#f5d0fe

--color-fuchsia-500

#d946ef

--color-fuchsia-600

#c026d3

--color-fuchsia-700

#a21caf

--color-purple-500

#a855f7

--color-violet-500

#8b5cf6

--color-indigo-500

#6366f1

--color-blue-400

#60a5fa

--color-blue-500

#3b82f6

--color-teal-500

#14b8a6

--color-emerald-500

#10b981

--color-emerald-600

#059669

--color-green-500

#22c55e

--color-green-600

#16a34a

--color-accent-fill

var(--color-lavender-600)

--color-action

var(--color-lime-500)

--color-action-hover

var(--color-lime-400)

--color-background-deep

var(--color-ink-900)

--color-background-dimmed

var(--color-ink-850)

--color-background-bright

var(--color-ink-800)

--color-background-hover

var(--color-ink-750)

--color-surface-hover-subtle

var(--color-ink-750)

--color-background-raised

var(--color-ink-700)

--color-surface-selected

var(--color-ink-650)

--color-surface-selected-hover

var(--color-ink-600)

--color-surface-control

var(--color-ink-600)

--color-surface-control-hover

var(--color-ink-550)

--color-surface-control-active

var(--color-ink-500)

--color-surface-outline

transparent

--color-surface-outline-hover

var(--color-ink-750)

--color-input-bg

var(--color-ink-750)

--color-grid-hairline

var(--color-ink-775)

--color-grid-dimmed

var(--color-ink-750)

--color-grid-bright

var(--color-ink-700)

--color-border-hover

var(--color-ink-700)

--color-border-bright

var(--color-ink-600)

--color-border-brighter

var(--color-ink-550)

--color-border-brightest

var(--color-ink-500)

--color-success

var(--color-mint-500)

--color-warning

var(--color-sun-500)

--color-pending

var(--color-blue-500)

--color-error

var(--color-rose-600)

--color-badge-fill

#331e7b

--color-background-deep

#ffffff

--color-background-dimmed

#ffffff

--color-background-bright

#ffffff

--color-background-hover

#ebebed

--color-surface-hover-subtle

#f5f5f5

--color-background-raised

#f5f5f5

--color-surface-control

#f5f5f5

--color-surface-control-hover

#e4e4e7

--color-surface-control-active

#d4d4d8

--color-surface-outline

#ffffff

--color-surface-outline-hover

#f5f5f5

--color-surface-selected

#f5f5f5

--color-surface-selected-hover

#ebebed

--color-input-bg

#ffffff

--color-grid-hairline

#ececee

--color-grid-dimmed

#e8e8ea

--color-grid-bright

#e4e4e7

--color-border-hover

#c9c9ce

--color-border-bright

#e4e4e7

--color-border-brighter

#d4d4d8

--color-border-brightest

#a1a1aa

--color-success

var(--color-mint-600)

--color-warning

var(--color-sun-600)

--color-badge-fill

var(--color-lavender-100)

--color-cat-amber

var(--color-sun-400)

--color-cat-sun

var(--color-sun-500)

--color-cat-magenta

var(--color-fuchsia-500)

--color-cat-rose

var(--color-rose-500)

--color-cat-red

var(--color-red-500)

--color-cat-blue

var(--color-blue-400)

--color-cat-indigo

var(--color-indigo-500)

--color-cat-purple

var(--color-purple-500)

--color-cat-violet

var(--color-violet-500)

--color-cat-pink

var(--color-pink-500)

--color-cat-green

var(--color-green-500)

--color-cat-emerald

var(--color-emerald-500)

--color-cat-teal

var(--color-teal-500)

--color-cat-orange

var(--color-orange-400)

--color-cat-neutral

var(--color-ink-400)

--color-cat-amber

var(--color-amber-600)

--color-cat-sun

var(--color-sun-700)

--color-cat-rose

var(--color-rose-600)

--color-cat-blue

var(--color-blue-500)

--color-cat-green

var(--color-green-600)

--color-cat-emerald

var(--color-emerald-600)

--color-cat-orange

var(--color-orange-600)

--color-cat-neutral

var(--color-ink-500)

--color-cat-amber

var(--color-sun-500)

--color-cat-sun

var(--color-sun-600)

--color-cat-green

var(--color-green-600)

--color-cat-emerald

var(--color-emerald-600)

--color-cat-orange

var(--color-orange-600)

--color-cat-amber

#b45309

--color-cat-sun

var(--color-sun-800)

--color-cat-green

#15803d

--color-cat-emerald

#047857

--color-cat-orange

#c2410c

--diagram-well-bg

var(--color-background-deep)

--diagram-action-border

var(--color-lime-700)

--diagram-action-fill

var(--color-lime-950)

--diagram-action-label

var(--color-lime-300)

--diagram-control-border

var(--color-lavender-600)

--diagram-control-fill

var(--color-lavender-950)

--diagram-control-label

var(--color-lavender-200)

--diagram-router-border

var(--color-fuchsia-700)

--diagram-router-fill

#510634

--diagram-router-label

var(--color-fuchsia-200)

--diagram-parallel-border

var(--color-mint-600)

--diagram-parallel-fill

var(--color-mint-950)

--diagram-parallel-label

var(--color-mint-200)

--diagram-neutral-border

var(--color-ink-600)

--diagram-neutral-fill

transparent

--diagram-neutral-label

var(--color-ink-300)

--diagram-well-bg

#f8f8f8

--diagram-action-fill

var(--color-lime-100)

--diagram-action-border

var(--color-lime-600)

--diagram-action-label

var(--color-lime-800)

--diagram-control-fill

var(--color-lavender-100)

--diagram-control-label

var(--color-lavender-700)

--diagram-router-fill

var(--color-fuchsia-100)

--diagram-router-border

var(--color-fuchsia-600)

--diagram-router-label

var(--color-fuchsia-700)

--diagram-parallel-fill

var(--color-mint-100)

--diagram-parallel-label

var(--color-mint-700)

--diagram-neutral-border

var(--color-border-bright)

--diagram-neutral-label

var(--color-ink-600)

--code-border

transparent

--code-bg

var(--color-ink-750)

--code-bg-on-page

var(--color-ink-900)

--code-fg

#878c99

--code-line-number

#484c54

--code-plain

#d4d4d4

--code-comment

#6f736d

--code-keyword

#e888f8

--code-storage

#8271ed

--code-function

#d9f07c

--code-variable

#cccbff

--code-constant

#9c9af2

--code-string

#afec73

--code-number

#b5cea8

--code-builtin

#e5c07b

--code-attribute

#c39eff

--code-escape

#d7ba7d

--code-object-key

#8b89ff

--code-language

#9b99ff

--code-regexp

#d16969

--code-invalid

#f44747

--code-border

#e4e4e7

--code-bg

#f8f8f8

--code-bg-on-page

#f8f8f8

--code-fg

#333333

--code-line-number

#a8a8ad

--code-plain

#2e2e4b

--code-comment

#767a81

--code-keyword

#b114d3

--code-storage

#b114d3

--code-function

#6532f5

--code-variable

#404040

--code-constant

#1e1e1e

--code-string

#262626

--code-number

#262626

--code-builtin

#3080e0

--code-attribute

#222222

--code-escape

#222222

--code-object-key

#222222

--code-language

#b114d3

--code-regexp

#dc3545

--code-invalid

#dc3545

--page-gutter

var(--space-6)

--page-gutter-lg

var(--space-8)

--section-py

var(--space-16)

--section-py-md

var(--space-24)

--section-py-lg

var(--space-32)

--heading-block-mb

var(--space-12)

font

66 tokens

--font-sans

"Geist Variable", "Helvetica Neue", Helvetica, Arial, sans-serif

--font-mono

"Geist Mono Variable", Monaco, Consolas, "Lucida Console", monospace

--color-text-display

var(--color-ink-100)

--color-text-bright

var(--color-ink-200)

--color-text-chip

var(--color-ink-300)

--color-text-dimmed

var(--color-ink-400)

--color-text-faint

var(--color-ink-500)

--color-text-link

var(--color-lavender-400)

--color-text-link-hover

var(--color-lavender-300)

--color-action-text

var(--color-ink-900)

--color-badge-text

var(--color-lavender-200)

--color-text-display

#09090b

--color-text-bright

#18181b

--color-text-chip

#3f3f46

--color-text-dimmed

#52525b

--color-text-faint

#71717a

--color-text-link

var(--color-lavender-600)

--color-text-link-hover

var(--color-lavender-800)

--color-badge-text

var(--color-lavender-800)

--diagram-label-size

var(--text-xxs)

--code-type

#f770c6

--code-type

#b114d3

--text-xxs

0.65rem

--leading-xxs

0.75rem

--tracking-xxs

-0.01em

--text-xs

0.75rem

--leading-xs

1rem

--tracking-xs

0

--text-2sm

0.8125rem

--leading-2sm

0.875rem

--tracking-2sm

-0.01em

--text-sm

0.875rem

--leading-sm

1.25rem

--tracking-sm

0

--text-base

1rem

--leading-base

1.5rem

--tracking-base

0

--text-lg

1.125rem

--leading-lg

1.75rem

--tracking-lg

0

--text-xl

1.25rem

--leading-xl

1.75rem

--tracking-xl

-0.01em

--text-2xl

1.5rem

--leading-2xl

2rem

--tracking-2xl

-0.015em

--text-3xl

1.875rem

--leading-3xl

2.25rem

--tracking-3xl

-0.02em

--text-4xl

2.25rem

--leading-4xl

2.5rem

--tracking-4xl

-0.02em

--text-5xl

3rem

--leading-5xl

1.1

--tracking-5xl

-0.025em

--text-6xl

3.75rem

--leading-6xl

1.05

--tracking-6xl

-0.03em

--text-7xl

4.5rem

--leading-7xl

1

--tracking-7xl

-0.03em

--font-weight-normal

400

--font-weight-medium

500

--font-weight-semibold

600

--tracking-wide

0.05em

--container-section-text

440px

other

15 tokens

--hero-glow

radial-gradient(closest-side, rgba(168,255,83,0.08), rgba(168,255,83,0))

--hero-backdrop-filter

blur(8px) brightness(0.35)

--hero-glow

radial-gradient(closest-side, rgba(228,255,201,0.85), rgba(228,255,201,0))

--hero-backdrop-filter

blur(8px) brightness(1.04) saturate(0.6)

--code-line-height

1.6

--duration-hover

150ms

--duration-disclosure

200ms

--duration-carousel

300ms

--duration-layout

200ms

--duration-reveal

400ms

--ease-default

ease

--ease-out

ease-out

--ease-reveal

cubic-bezier(0.16, 1, 0.3, 1)

--transition-default

150ms ease

--marquee-duration

40s

radius

5 tokens

--radius-xs

3px

--radius-sm

4px

--radius-md

6px

--radius-lg

8px

--radius-full

9999px

shadow

9 tokens

--shadow-card

none

--shadow-card-hover

none

--shadow-panel

0 4px 12px rgba(0,0,0,0.3)

--shadow-modal

0 16px 48px rgba(0,0,0,0.45)

--text-shadow-on-image

1px 1px 1px rgba(0,0,0,0.5)

--shadow-card

0 1px 2px rgba(9,9,11,0.05)

--shadow-card-hover

0 2px 6px rgba(9,9,11,0.09)

--shadow-panel

0 4px 12px rgba(9,9,11,0.08)

--shadow-modal

0 16px 48px rgba(9,9,11,0.12)

spacing

35 tokens

--grid-texture-size

32px

--space-05

2px

--space-1

4px

--space-15

6px

--space-2

8px

--space-25

10px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

--space-32

128px

--container-page

1280px

--container-reading

768px

--container-hero

960px

--gap-dense

var(--space-4)

--gap-cards

var(--space-6)

--gap-split

var(--space-8)

--gap-feature-row

var(--space-16)

--nav-height

56px

--nav-height-lg

64px

--pattern-card-width

390px

--pattern-card-media-height

185px

--tab-rail-width

240px

--bp-sm

640px

--bp-md

768px

--bp-lg

1024px

--bp-xl

1280px

--bp-2xl

1536px

--border-width

1px

Components

Manifest-driven component groups and their generated live previews.

code

3 components

Trigger Dev code component preview Syntax-highlighted code well, showcase split, vertical tab rail

CodeBlock
CodeShowcase
VerticalTabs

core

6 components

Trigger Dev core component preview Button sizes and variants, icon buttons, capability chips, wordmark, theme toggle

Button
CapabilityChip
Icon
IconButton
ThemeToggle
Wordmark

diagram

3 components

Trigger Dev diagram component preview Node grammar: action, control, router, parallel, neutral — solid vs dotted paths

Diagram
DiagramArrow
DiagramNode

layout

4 components

Trigger Dev layout component preview Sticky nav with dropdown, section header pattern, hairline rails

Footer
NavBar
Section
SectionHeader

marketing

14 components

Trigger Dev marketing component preview Announcement pill, chip row, pattern card, stat triplet, extension card, testimonial

AlternatingFeature
AnnouncementPill
Carousel
ChipRow
ClosingCTA
ExtensionCard
FeatureIndex
Hero
LogoMarquee
MediaFeatureCard
MetricRow
PatternCard
StatTriplet
TestimonialCard

Guidelines

Live reference cards for the system's visual and interaction decisions.

Brand

4 references

Arrow conventions Arrows carry meaning and are not interchangeable

Focus & hover states Inset 1px focus ring in the link color; surfaces step up one level, cards brighten their border

Motion timing 150ms is the house default. Motion confirms, it doesn't perform.

Wordmark No logo file was supplied, so the glyph slot is empty: plain type plus the lavender suffix

Colors

13 references

Border ladder All borders are 1px — weight is expressed by color. Structural rails are subtler than card borders.

Warm hues step down on white Yellow, amber, green, emerald and orange fall below 3:1 in light mode; cool hues stay put

Categorical key Permanently assigned hues. A key, not a palette — never rotate for variety, never use as a large fill.

Code syntax — light Deliberately low-saturation: only keywords and functions carry hue; a direct port of dark is garish

Code syntax — dark Genuinely polychrome: magenta keywords, chartreuse functions, green strings, periwinkle keys

Ink ramp — neutrals The structural spine: ~90% of every screen. Fine steps between 600 and 850 carry all elevation.

Lavender ramp — links Links, control nodes, the wordmark suffix and the announcement badge

Lime ramp — action lime-500 is the signature and always takes ink-900 text, in both themes

Mint & sun ramps Mint: success, production, parallel execution. Sun: warnings, scheduling, agent iconography.

Light surface stack White page, white surfaces separated by border plus a 1px lift, one muted grey for wells and hovers

Marketing surface stack The page is the darkest thing and cards rise out of it. Don't mix stacks within one surface.

Product surface stack Inverted: the page sits one step up and wells drop below it

Status colors success, warning, pending, error — the only saturated colors allowed to carry state

Spacing

3 references

Radii 3px controls, 6px cards, 8px max — the system reads as technical because it is not rounded

Grid rails in use 1px vertical rules down both container edges, continuous through a section, page color in the gutters

Spacing scale 4px base unit. Tight interiors, wide gutters.

Type

5 references

Body & UI scale sm is product body, base is marketing body. Weights in use are 400 / 500 / 600 only.

Brightness hierarchy Four levels, one of each per visual cluster. Only the hero headline uses text-display.

Display scale Negative tracking scales with size — large type gets progressively tighter

Mono specimen Mono appears wherever content is literally code, an identifier, a version, a metric or a node label

Section header pattern 440px text column left, contextual link right-aligned and baseline-aligned to the last line

Full-page examples

Complete, interactive product surfaces rendered from the generated package.

Marketing site Complete landing page in the canonical section order

Product surface Sidebar, dense table and detail panel in the product stack