# Common — Design System
> A platform for decentralized communities to discuss, organize, and grow.
- **Canonical:** https://uiuxskills.com/library/common
- **Source:** https://www.common.xyz
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:12:58.010Z

---

---
version: alpha
name: Common
description: A platform for decentralized communities to discuss, organize, and grow.
tone: Modern, functional, and community-oriented.
color-scheme: light
colors:
  primary: "#0079CC"
  secondary: "#FF80D7"
  error: "#FF1F00"
  surface: "#FFFFFF"
  surface-container: "#F8F9FA"
  on-surface: "#3D3A3E"
  on-primary: "#FFFFFF"
  outline: "#E0E0E0"
  focus-ring: "#0079CC"
  success: "#28A745"
typography:
  display-lg:
    fontFamily: NeueHaasUnica
    fontSize: 48px
  display-md:
    fontFamily: NeueHaasUnica
    fontSize: 36px
  headline-lg:
    fontFamily: NeueHaasUnica
    fontSize: 32px
  headline-md:
    fontFamily: NeueHaasUnica
    fontSize: 24px
  headline-sm:
    fontFamily: NeueHaasUnica
    fontSize: 20px
  body-md:
    fontFamily: Silka
    fontSize: 16px
  label-sm:
    fontFamily: Silka
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#005FA3"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.1)
  md: 0 4px 6px rgba(0, 0, 0, 0.1)
  lg: 0 10px 15px rgba(0, 0, 0, 0.1)
---

## Overview

Common is a clean, functional platform built for decentralized communities. It prioritizes clarity and engagement through a structured, card-based layout and a high-contrast aesthetic that feels both professional and accessible.

## Colors

The color palette is functional and high-contrast, designed to guide users through community interactions while maintaining a clean, readable interface.

*   Primary (#0079CC): Key actions and branding elements.
*   Secondary (#FF80D7): Accent color for highlights and visual interest.
*   Error (#FF1F00): Semantic color for critical alerts.
*   Surface (#FFFFFF): Primary background color for the application.
*   Surface-container (inferred) (#F8F9FA): Subtle background for cards and containers to provide depth.
*   On-surface (#3D3A3E): Primary text color for high readability.
*   On-primary (inferred) (#FFFFFF): Text color for elements placed on primary-colored backgrounds.
*   Outline (inferred) (#E0E0E0): Border color for inputs and dividers.
*   Focus-ring (inferred) (#0079CC): Focus state indicator for interactive elements.
*   Success (inferred) (#28A745): Semantic color for positive indicators.

## Typography

The typography system pairs the geometric, authoritative NeueHaasUnica for headings with the clean, readable Silka for body text and labels.

*   Display-lg/md (inferred): NeueHaasUnica for hero and section titles.
*   Headline-lg/md/sm: NeueHaasUnica for page and card headings.
*   Body-md: Silka for standard paragraph content.
*   Label-sm (inferred): Silka for small UI labels and metadata.

## Layout

The platform utilizes a standard grid system with a max-width container to center content. Spacing relies on a 4px base unit, ensuring a consistent rhythm across sections. The page structure typically follows a flow of Nav → Hero → Trending → Recently Launched → Contests → Quests → Footer. Mobile-first responsive design is key, with navigation collapsing into a drawer on smaller screens.

## Elevation & Depth

Elevation is used sparingly to create a layered, card-based feel without overwhelming the interface.

*   {elevation.sm}: Subtle shadow for small UI elements.
*   {elevation.md}: Standard card lift.
*   {elevation.lg}: Reserved for modals or deeper overlays.

## Shapes

The design system uses a moderate border-radius scale to balance a professional tech aesthetic with a welcoming, community-focused tone. Components like cards and inputs rely on consistent rounding to maintain visual harmony.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Buttons
Primary buttons use `{colors.primary}` with `{typography.label-sm}` for high-impact actions. Secondary buttons use `{colors.surface-container}` and `{colors.on-surface}` for lower-priority actions.

### Cards
Standard containers use `{colors.surface}` with `{rounded.md}` and `{colors.outline}` borders. Use `{card-elevated}` when a component needs to stand out from the background with `{elevation.md}`.

### Inputs
Use `{input-field}` with `{colors.outline}` borders. On focus, the border must transition to `{input-field-focus}` using `{colors.focus-ring}` to ensure accessibility.

### Badges
Use `{badge}` for general tags. Use `{badge-error}` for critical states and `{badge-success}` for positive status updates, ensuring the correct `{typography.label-sm}` and `{rounded.sm}` are applied.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.error}` for non-critical UI elements. |
| Apply `{rounded.md}` to all card components for consistency. | Never use `{rounded.full}` on standard content cards. |
| Use `{typography.body-md}` for all standard paragraph content. | Avoid mixing `{typography.headline-lg}` with body text in the same container. |
| Maintain a minimum of `{spacing.md}` between major content sections. | Do not reduce spacing below `{spacing.sm}` in dense layouts. |
| Use `{colors.outline}` for all subtle dividers and input borders. | Avoid using low-contrast text colors on `{colors.surface}` backgrounds. |
| Ensure all interactive elements have a clear `{colors.focus-ring}` state. | Do not apply `{elevation.lg}` to small interactive elements like buttons. |
| Use `{badge-success}` for positive status updates. | Do not use plain text for status indicators. |
| Use `{input-field}` for text entry. | Do not use custom border styles outside of `{colors.outline}`. |

## Content Style

CTA style: Use imperative verbs (e.g., "Launch," "Join") in sentence case. Keep labels clear and direct to facilitate quick user decision-making.

Heading tone: Concise and benefit-oriented. Headlines should clearly state the value proposition or the purpose of the section.

Copy density: Keep text scannable. Use short paragraphs and frequent lists to break up information, ensuring the content remains accessible and easy to digest.

## Imagery & Icons

The visual language uses a mix of high-quality community-specific imagery and abstract SVG icons. Icons should be rounded and utilize a "multiply" blend mode to integrate with the brand colors, particularly when layering multiple shapes to create abstract graphics.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Common, a minimal, accessible platform for decentralized communities. Match its modern, functional, community-oriented tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font names.
2. Use only component variants listed under `components:`. Do not invent states, sizes, or variants the spec does not define.
3. Follow the Layout narrative for page structure (Nav → Hero → Trending → Recently Launched → Contests → Quests → Footer) and spacing rhythm. All paddings and gaps must draw from `{spacing.xs}` through `{spacing.2xl}`.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use token names for every color, font, radius, spacing, shadow, and motion value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them — especially `{colors.focus-ring}` on inputs and `{button-primary-hover}` on primary buttons.
- Apply `{elevation.md}` to elevated cards; reserve `{elevation.lg}` for modals and deep overlays only.
- Use `{typography.label-sm}` on buttons and badges; `{typography.body-md}` for all paragraph content.
- Render CTAs in sentence case with imperative verbs per the Content Style section.

**Must NOT:**
- Invent colors, fonts, radii, or spacing values absent from the spec.
- Use generic system defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a brand token exists.
- Apply `{rounded.full}` to standard content cards.
- Apply `{colors.error}` to non-critical UI elements.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite page copy, button labels, headings, or navigation items.
- Alter page structure or routes as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- If breakpoints are unspecified, apply mobile-first layout with a single breakpoint at 768px and navigation collapsing to a drawer below it.
- Inferred tokens are approximations; flag them if a product-authoritative source might differ.