Design System

Marlowe Research — Color, Layout & CLS Reference

CLS 0.0239

Core Palette

CSS variables that define the color system. All values are theme-aware — they switch automatically between light and dark mode.

Background

--background

Page background — 60% of the UI

Foreground

--foreground

Primary text color

Card

--card

Card/panel surfaces — 30% of the UI

Card Foreground

--card-foreground

Text on card surfaces

Primary

--primary

CTA accent — 10% of the UI. Neon green in dark mode, Marlowe orange in light.

Primary Foreground

--primary-foreground

Text on primary-colored elements

Secondary

--secondary

Secondary actions and subtle backgrounds

Muted

--muted

Disabled states, placeholder backgrounds

Muted Foreground

--muted-foreground

Secondary/helper text

Accent

--accent

Hover highlights, subtle emphasis

Destructive

--destructive

Error states, delete actions

Border

--border

Default border color

Input

--input

Form input borders

Ring

--ring

Focus ring color

Alternate Palettes

Apply a palette class to the root element. All dark mode variants use neon green (#39ff14) as primary.

--primary

--chart-1

--chart-2

--chart-3

--chart-4

Neon Palette — Dark Mode

The Robinhood/Bloomberg institutional-meets-retail color system. Neon green (#39ff14) is reserved for interactive elements only.

#0a0f1a

Background

#111827

Card Surface

#39ff14

Primary (Neon Green)

#1e293b

Muted/Accent