# Superfluid Team Brand & Design

This covers the visual identity used across **Superfluid team products** (Dashboard, Claim App, Explorer, Tokens site, etc.). The Superfluid Protocol ecosystem is broader — third-party apps (GoodDollar, Flow State, Streme, etc.) use their own branding. Apply these design tokens only when explicitly asked to match the Superfluid team's style.

## Color Palette

### Gray

Foundation of the color system. Used for text, form fields, backgrounds, dividers.

| Name           | Hex       |
| -------------- | --------- |
| Light Grey     | `#F7F8FA` |
| Platinum Grey  | `#E9E9E9` |
| Alto Medium    | `#879399` |
| Alto Grey      | `#5F6E75` |
| Dark Alto Grey | `#27313A` |
| Black          | `#080909` |

### Brand (Green)

The primary color. Used across all interactive elements — buttons, links, inputs, focus rings.

| Name          | Hex       |
| ------------- | --------- |
| Pale Green    | `#D6FAC8` |
| Light Green   | `#BDFFA3` |
| Primary Green | `#86EE1E` |
| Rich Green    | `#0A6643` |
| Dark Green    | `#002019` |
| Black Green   | `#001713` |

### Error

Used for error states and destructive actions.

| Name        | Hex       |
| ----------- | --------- |
| Light Error | `#F6A19B` |
| Error       | `#EC4236` |
| Dark Error  | `#3D110E` |

### Warning

Used for potentially destructive or on-hold states, confirmations.

| Name          | Hex       |
| ------------- | --------- |
| Light Warning | `#FFECA7` |
| Warning       | `#F1C320` |
| Dark Warning  | `#3F3101` |

### Secondary Colors

Used sparingly as accents in pills, alerts, labels. Primary green takes precedence.

**Pink / Violet:**

| Name               | Hex       |
| ------------------ | --------- |
| Light Pink         | `#FDB1FC` |
| Secondary Violet   | `#D0B1FD` |
| Complimentary Pink | `#FD0EF9` |
| Secondary Violet   | `#8330FD` |
| Deep Violet        | `#21014D` |

**Blue:**

| Name          | Hex       |
| ------------- | --------- |
| Light Blue    | `#9EAEFF` |
| Tertiary Blue | `#2323FF` |
| Dark Blue     | `#0A0A47` |

## Typography

- **Official font:** GT Walsheim Pro (paid). Used for headings and brand-forward text.
- **Free alternative:** Open Sans — similar feel, use when GT Walsheim Pro is unavailable.
- **Body text fallback:** Inter, system-ui, sans-serif.
- **Monospace / code:** JetBrains Mono.

## Design Characteristics

- **Dark and light themes** — all products support both. Use the gray scale and brand greens for each mode. Light theme: Light Grey backgrounds, dark text. Dark theme: Black/Dark Alto Grey backgrounds, light text.
- **Clean, minimal aesthetic** — generous whitespace, clear hierarchy, flat design with subtle borders.
- **Primary Green as the accent** — interactive elements (buttons, links, toggles, active states) consistently use Primary Green `#86EE1E` or its lighter/darker variants.
- **Rounded corners** — UI components (cards, buttons, inputs) use moderate border-radius.

## External Resources

- **Media Kit:** https://drive.google.com/drive/folders/1T9PNFLpT7XeBRig23jMcbceUCRPf2YJW (requires Google account access)
- **Figma Brand Assets:** https://www.figma.com/design/4FNr2P5rV4bYTSbP2MIEvH/Brand-Assets (requires Figma access)

## Superfluid Team Apps (Visual References)

These apps use the design system above and can serve as style references:

- **Dashboard** https://app.superfluid.org — Stream management (the flagship app)
- **Explorer** https://explorer.superfluid.org — Protocol block explorer
- **Claim** https://claim.superfluid.org — SUP token claiming and reserves
- **Tokens** https://tokens.superfluid.org — Super Tokens overview, Clear Signing, listing
- **Campaigns** https://campaigns.superfluid.org — NFT campaigns with SUP rewards
- **x402** https://x402.superfluid.org — HTTP 402 subscriptions via Superfluid streams
- **8004 Agent Pool** https://8004-demo.superfluid.org — AI agent pool demo
