Design System

Prospect

Maximum restraint. Monochrome at rest, color through action. Sage appears only on interaction.

Foundation

Colors

Black, white, grayscale. Accent reveals itself on hover and focus.

Background
Surface
Text
Muted
Border
Accent

Foundation

Typography

Light weights, generous spacing. Let the words breathe.

Heading One

Heading Two

Heading Three

Heading Four

Body text in near-black for maximum contrast. Links are underlined in gray until hovered, when they reveal the accent color.

Muted text for secondary information.

Small, subtle text for metadata.

Components

Buttons

Quiet at rest. Hover to see color appear.

Components

Forms

Minimal inputs. Focus reveals the accent.

We'll never share your email.

Components

Cards

Containers that recede. Content comes forward.

Basic Card

Subtle border, no shadow.

Cards provide structure without demanding attention.

Elevated Card

Slight shadow, no border.

For content that needs to lift slightly.

Components

Badges

Status indicators, tags, and labels.

Default Success Warning Error Accent

Components

Alerts

Contextual messages for user feedback.

Neutral

A standard message without emphasis.

Success

Your changes have been saved.

Warning

Please review before continuing.

Error

Something went wrong. Try again.

Info

Here's something you should know.

Components

Tables

Clean data presentation. Hover reveals accent.

Name Role Status
Alice Chen Engineer Active
Bob Martinez Designer Active
Carol Johnson Product Away

Components

Checkboxes & Radios

Selection controls with visible focus states.

Checkboxes

Radio buttons

Components

Code

Inline and block code with monospace styling.

Inline code

Use npm install prospect to add the package, or reference --color-accent directly.

Code block

/* Design tokens as CSS custom properties */
:root {
  --color-accent: #7C9A82;
  --color-background: #FAFAFA;
  --radius-sm: 2px;
}

Syntax highlighting

// Highlight.js with Prospect theme
function greet(name) {
  const message = `Hello, ${name}!`;
  return message;
}

const users = [1, 2, 3].map(id => fetchUser(id));

Overflow tests (400px container)

Inline code with long text should line-break:

Configure with --very-long-configuration-variable-name-that-should-definitely-wrap-to-the-next-line in your settings.

Code block with long line should show horizontal scrollbar:

const veryLongVariableName = "this is a very long string value that should definitely cause horizontal overflow and show a scrollbar";

Components

Scrollable Cards

Cards with fixed headers and scrolling content areas. Uses absolute positioning for Safari iOS compatibility.

Activity

2:45 PM — Deployed new release
2:30 PM — Merged pull request #42
1:15 PM — Created branch feature/auth
12:00 PM — Fixed login redirect bug
11:30 AM — Updated dependencies
10:45 AM — Reviewed PR from Alice
10:00 AM — Started sprint planning
9:30 AM — Fixed test failures
9:00 AM — Checked email

Small Height

200px tall

Item one
Item two
Item three
Item four
Item five
Item six

Large Height

400px tall

This card has more room for content.
The header stays fixed at the top.
Content scrolls independently below.
Useful for activity feeds, logs, or lists.
Line five
Line six
Line seven
Line eight
Line nine
Line ten
Line eleven
Line twelve

Components

Loading States

Spinners and skeleton placeholders for async content.

Spinners

Small

Default

Large

Skeleton placeholders

Components

Chat

Agent conversation rendering with tool call interleaving.

Basic conversation

What files are in the src directory?

User 2:45 PM
Assistant Claude 3.5 Sonnet

I'll check the src directory for you. There are 3 files: index.ts, utils.ts, and types.ts.

With tool calls

Read the contents of package.json

Assistant
Read Success

Input

{
  "file_path": "/project/package.json"
}

Output

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.0"
  }
}

The package.json shows this is a Node.js project called "my-project" at version 1.0.0. It has one dependency: Express.js version 4.18.0 or higher.

Multiple tool calls

Find all TypeScript files and check if tests pass

Assistant
Glob 3 files

Input

{ "pattern": "**/*.ts" }

Output

src/index.ts
src/utils.ts
src/types.ts
Bash Exit 0

Input

{ "command": "npm test" }

Output

PASS  src/utils.test.ts
PASS  src/index.test.ts

Test Suites: 2 passed, 2 total
Tests:       8 passed, 8 total

Found 3 TypeScript files in src/. All 8 tests pass across 2 test suites.

With thinking

How should I structure this React component?

Assistant
Thinking...

The user is asking about React component structure. I should consider: separation of concerns, reusability, state management patterns, and the specific use case they might have. Given this appears to be a form component based on context, I'll suggest a controlled component pattern with clear prop interfaces.

For a React component, I'd recommend separating concerns into three layers:

  1. Container component — handles state and logic
  2. Presentational component — renders the UI
  3. Custom hooks — extracts reusable logic

This makes testing easier and keeps each file focused.

Error handling

Run the deploy script

Assistant
Bash Exit 1

Input

{ "command": "./deploy.sh" }

Output

Error: ENOENT: no such file or directory
./deploy.sh not found

The deploy script doesn't exist yet. Would you like me to create one? I can set up a basic deployment workflow for Cloudflare Pages.