coulomb-social/docs/design-extract/coulomb-social-design-language.md

# Design Language: Research | Coulomb

> Extracted from `https://coulomb.social` on August 9, 2026
> 3445 elements analyzed across 7 pages

This document describes the complete design language of the website. It is structured for AI/LLM consumption — use it to faithfully recreate the visual design in any framework.

## Color Palette

### Primary Colors

| Role | Hex | RGB | HSL | Usage Count |
|------|-----|-----|-----|-------------|
| Primary | `#d08728` | rgb(208, 135, 40) | hsl(34, 68%, 49%) | 8 |

### Neutral Colors

| Hex | HSL | Usage Count |
|-----|-----|-------------|
| `#000000` | hsl(0, 0%, 0%) | 5304 |
| `#efefef` | hsl(0, 0%, 94%) | 610 |
| `#616161` | hsl(0, 0%, 38%) | 556 |
| `#373737` | hsl(0, 0%, 22%) | 462 |
| `#171717` | hsl(0, 0%, 9%) | 401 |
| `#ffffff` | hsl(0, 0%, 100%) | 242 |
| `#e5e5e5` | hsl(0, 0%, 90%) | 217 |

### Background Colors

Used on large-area elements: `#ffffff`, `#e5e5e5`, `#171717`, `#f5f5f5`

### Text Colors

Text color palette: `#000000`, `#171717`, `#373737`, `#616161`, `#ffffff`

### Full Color Inventory

| Hex | Contexts | Count |
|-----|----------|-------|
| `#000000` | text, border, background | 5304 |
| `#efefef` | background | 610 |
| `#616161` | text, border | 556 |
| `#373737` | text, border | 462 |
| `#171717` | text, border, background | 401 |
| `#ffffff` | background, border, text | 242 |
| `#e5e5e5` | border, background | 217 |
| `#d08728` | background | 8 |

## Typography

### Font Families

- **Helvetica** — used for body (1739 elements)
- **Arial** — used for body (761 elements)
- **Times New Roman** — used for body (450 elements)
- **Inter** — used for body (397 elements)

### Type Scale

| Size (px) | Size (rem) | Weight | Line Height | Letter Spacing | Used On |
|-----------|------------|--------|-------------|----------------|---------|
| 50px | 3.125rem | 400 | 50px | normal | text |
| 42px | 2.625rem | 700 | normal | normal | input |
| 24px | 1.5rem | 600 | 36px | normal | a |
| 18px | 1.125rem | 600 | 18px | normal | div |
| 16px | 1rem | 400 | normal | normal | html, head, meta, title |
| 14px | 0.875rem | 500 | 19.6px | normal | div, a |
| 13.3333px | 0.8333rem | 400 | normal | normal | button, svg, use |

### Font Weights in Use

`400` (3048x), `500` (287x), `600` (102x), `700` (8x)

## Spacing

**Base unit:** 4px

| Token | Value | Rem |
|-------|-------|-----|
| spacing-1 | 1px | 0.0625rem |
| spacing-24 | 24px | 1.5rem |
| spacing-32 | 32px | 2rem |
| spacing-40 | 40px | 2.5rem |
| spacing-60 | 60px | 3.75rem |
| spacing-80 | 80px | 5rem |
| spacing-96 | 96px | 6rem |
| spacing-320 | 320px | 20rem |

## Border Radii

| Label | Value | Count |
|-------|-------|-------|
| sm | 4px | 119 |
| md | 8px | 122 |
| lg | 12px | 110 |
| lg | 15px | 6 |
| xl | 20px | 12 |

## Box Shadows

**sm** — blur: 4px
```css
box-shadow: rgb(170, 170, 170) 2px 2px 4px 0px;
```

**md** — blur: 8px
```css
box-shadow: rgba(23, 23, 23, 0.1) 2px 2px 8px 2px;
```

## CSS Custom Properties

### Colors

```css
--color_primary_default: rgba(2, 5, 211, 1);
--color_primary_default_rgb: 2, 5, 211;
--color_primary_contrast_default: rgba(255, 255, 255, 1);
--color_primary_contrast_default_rgb: 255, 255, 255;
--color_text_default: rgba(9, 23, 71, 1);
--color_text_default_rgb: 9, 23, 71;
--color_surface_default: rgba(255, 255, 255, 1);
--color_surface_default_rgb: 255, 255, 255;
--color_background_default: rgba(255, 255, 255, 0);
--color_background_default_rgb: 255, 255, 255;
--color_destructive_default: rgba(255, 0, 0, 1);
--color_destructive_default_rgb: 255, 0, 0;
--color_success_default: rgba(23, 219, 78, 1);
--color_success_default_rgb: 23, 219, 78;
--color_alert_default: rgba(250, 181, 21, 1);
--color_alert_default_rgb: 250, 181, 21;
--color_danger_default_rgb: rgba(176, 32, 12, 1);
--color_bTRUr_default_rgb: 208,135,40;
--color_bTOCs_default: rgba(55,55,55,1);
--color_bTHZK_default_rgb: 229,229,229;
--color_bTOCs_default_rgb: 55,55,55;
--color_bTINZ_default_rgb: 23,23,23;
--color_bTRUs_default_rgb: 227,230,235;
--color_bTINZ_default: rgba(23,23,23,0.36);
--color_bTRUr_default: rgba(208,135,40,0.1);
--color_bTHZK_default: rgba(229,229,229,1);
--color_bTHfJ_default_rgb: 97,97,97;
--color_bTMap_default: rgba(113,2,139,1);
--color_bTHfJ_default: rgba(97,97,97,1);
--color_bTMap_default_rgb: 113,2,139;
--color_bTRUs_default: rgba(227,230,235,1);
```

### Typography

```css
--font_default: 'Lato';
--font_bTRUx_default: "Inter";
--font_bTRUt_default: "Inter";
```

### Semantic

```css
success: [object Object];
warning: [object Object];
error: [object Object];
info: [object Object];
```

## Transitions & Animations

**Durations:** `0.25s`

### Common Transitions

```css
transition: all;
transition: background 0.25s;
```

### Keyframe Animations

**highlight-in**
```css
@keyframes highlight-in {
  0% { background-color: rgb(200, 0, 0); }
}
```

**fa-spin**
```css
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}
```

**opacity-70-25-0-13**
```css
@keyframes opacity-70-25-0-13 {
  0% { opacity: 0.25; }
  0.01% { opacity: 0.25; }
  0.02% { opacity: 1; }
  70.01% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
```

**opacity-70-25-1-13**
```css
@keyframes opacity-70-25-1-13 {
  0% { opacity: 0.25; }
  7.70231% { opacity: 0.25; }
  7.71231% { opacity: 1; }
  77.7023% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
```

**opacity-70-25-2-13**
```css
@keyframes opacity-70-25-2-13 {
  0% { opacity: 0.25; }
  15.3946% { opacity: 0.25; }
  15.4046% { opacity: 1; }
  85.3946% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
```

**opacity-70-25-3-13**
```css
@keyframes opacity-70-25-3-13 {
  0% { opacity: 0.25; }
  23.0869% { opacity: 0.25; }
  23.0969% { opacity: 1; }
  93.0869% { opacity: 0.25; }
  100% { opacity: 0.25; }
}
```

**opacity-70-25-4-13**
```css
@keyframes opacity-70-25-4-13 {
  0% { opacity: 0.258349; }
  30.7792% { opacity: 0.25; }
  30.7892% { opacity: 1; }
  0.779231% { opacity: 0.25; }
  100% { opacity: 0.258349; }
}
```

**opacity-70-25-5-13**
```css
@keyframes opacity-70-25-5-13 {
  0% { opacity: 0.340766; }
  38.4715% { opacity: 0.25; }
  38.4815% { opacity: 1; }
  8.47154% { opacity: 0.25; }
  100% { opacity: 0.340766; }
}
```

**opacity-70-25-6-13**
```css
@keyframes opacity-70-25-6-13 {
  0% { opacity: 0.423184; }
  46.1638% { opacity: 0.25; }
  46.1738% { opacity: 1; }
  16.1638% { opacity: 0.25; }
  100% { opacity: 0.423184; }
}
```

**opacity-70-25-7-13**
```css
@keyframes opacity-70-25-7-13 {
  0% { opacity: 0.505602; }
  53.8562% { opacity: 0.25; }
  53.8662% { opacity: 1; }
  23.8562% { opacity: 0.25; }
  100% { opacity: 0.505602; }
}
```

## Component Patterns

Detected UI component patterns and their most common styles:

### Buttons (643 instances)

```css
.button {
  background-color: rgb(239, 239, 239);
  color: rgb(0, 0, 0);
  font-size: 13.3333px;
  font-weight: 400;
  padding-top: 1px;
  padding-right: 6px;
  border-radius: 0px;
}
```

### Cards (36 instances)

```css
.card {
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  box-shadow: rgb(170, 170, 170) 2px 2px 4px 0px;
  padding-top: 4px;
  padding-right: 4px;
}
```

### Inputs (16 instances)

```css
.input {
  color: rgb(23, 23, 23);
  border-color: rgb(255, 255, 255);
  border-radius: 8px;
  font-size: 16px;
  padding-top: 2px;
  padding-right: 2px;
}
```

### Links (130 instances)

```css
.link {
  color: rgb(23, 23, 23);
  font-size: 16px;
  font-weight: 500;
}
```

### Modals (78 instances)

```css
.modal {
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  padding-top: 24px;
  padding-right: 0px;
  max-width: 280px;
}
```

## Component Clusters

Reusable component instances grouped by DOM structure and style similarity:

### Button — 55 instances, 1 variant

**Variant 1** (55 instances)

```css
  background: rgba(0, 0, 0, 0);
  color: rgb(55, 55, 55);
  padding: 0px 0px 0px 0px;
  border-radius: 4px;
  border: 0px none rgb(55, 55, 55);
  font-size: 13.3333px;
  font-weight: 400;
```

### Button — 1 instance, 1 variant

**Variant 1** (1 instance)

```css
  background: rgb(239, 239, 239);
  color: rgb(0, 0, 0);
  padding: 1px 6px 1px 6px;
  border-radius: 0px;
  border: 2px outset rgb(0, 0, 0);
  font-size: 13.3333px;
  font-weight: 400;
```

## Layout System

**123 grid containers** and **1256 flex containers** detected.

### Container Widths

| Max Width | Padding |
|-----------|---------|
| 1200px | 0px |
| 100% | 0px |
| 992px | 0px |

### Grid Column Patterns

| Columns | Usage Count |
|---------|-------------|
| 1-column | 122x |
| 2-column | 1x |

### Grid Templates

```css
grid-template-columns: 592px 592px;
gap: 16px;
grid-template-columns: 32px;
grid-template-columns: 32px;
grid-template-columns: 32px;
grid-template-columns: 32px;
```

### Flex Patterns

| Direction/Wrap | Count |
|----------------|-------|
| column/nowrap | 470x |
| row/nowrap | 71x |
| row/wrap | 715x |

**Gap values:** `0px 12px`, `0px 20px`, `0px 24px`, `0px 4px`, `0px 8px`, `0px normal`, `12px normal`, `16px`, `18px normal`, `24px`, `24px normal`, `4px normal`, `8px normal`

## Interaction States

### Button States

**""**
```css
/* Focus */
outline: rgb(208, 135, 40) none 3px → rgba(0, 0, 0, 0) dotted 0px;
```

### Link Hover

```css
text-decoration: none → underline;
```

## Accessibility (WCAG 2.1)

**Overall Score: 100%** — 0 passing, 0 failing color pairs

## Design System Score

**Overall: 85/100 (Grade: B)**

| Category | Score |
|----------|-------|
| Color Discipline | 100/100 |
| Typography Consistency | 50/100 |
| Spacing System | 100/100 |
| Shadow Consistency | 100/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 100/100 |
| CSS Tokenization | 100/100 |

**Strengths:** Tight, disciplined color palette, Well-defined spacing scale, Clean elevation system, Consistent border radii, Strong accessibility compliance, Good CSS variable tokenization

**Issues:**
- 4 font families — consider limiting to 2 (heading + body)
- 140 !important rules — prefer specificity over overrides
- 81% of CSS is unused — consider purging
- 6545 duplicate CSS declarations

## Z-Index Map

**35 unique z-index values** across 3 layers.

| Layer | Range | Elements |
|-------|-------|----------|
| modal | 1503,2105 | div.b.u.b.b.l.e.-.e.l.e.m.e.n.t. .C.u.s.t.o.m.E.l.e.m.e.n.t. .b.a.T.a.K.a.Q.a.X. .f.l.o.a.t.i.n.g.-.g.r.o.u.p. .b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .c.o.l.u.m.n, div.b.u.b.b.l.e.-.e.l.e.m.e.n.t. .C.u.s.t.o.m.E.l.e.m.e.n.t. .b.a.T.a.K.a.Q.a.X. .f.l.o.a.t.i.n.g.-.g.r.o.u.p. .b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .c.o.l.u.m.n, div.b.u.b.b.l.e.-.e.l.e.m.e.n.t. .C.u.s.t.o.m.E.l.e.m.e.n.t. .b.a.T.a.K.a.Q.a.X. .f.l.o.a.t.i.n.g.-.g.r.o.u.p. .b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .c.o.l.u.m.n |
| sticky | 10,30 | div.b.u.b.b.l.e.-.e.l.e.m.e.n.t. .G.r.o.u.p. .b.a.T.a.N.a.I.d. .b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .r.o.w, div.b.u.b.b.l.e.-.e.l.e.m.e.n.t. .T.e.x.t. .b.a.T.a.N.a.I.q, textarea.b.u.b.b.l.e.-.e.l.e.m.e.n.t. .M.u.l.t.i.L.i.n.e.I.n.p.u.t. .a.1.7.8.6.2.3.1.7.9.1.3.3.1.x.5.4.4.4 |
| base | 0,9 | div.b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .c.o.l.u.m.n, div.b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .c.o.l.u.m.n, div.b.u.b.b.l.e.-.r.-.c.o.n.t.a.i.n.e.r. .f.l.e.x. .c.o.l.u.m.n |

## SVG Icons

**7 unique SVG icons** detected. Dominant style: **filled**.

| Size Class | Count |
|------------|-------|
| md | 4 |
| lg | 2 |
| xl | 1 |

**Icon colors:** `rgb(0, 0, 0)`

## Font Files

| Family | Source | Weights | Styles |
|--------|--------|---------|--------|
| FontAwesome | self-hosted | normal | normal |
| Material Icons | self-hosted | 400 | normal |
| Material Icons Outline | self-hosted | 400 | normal |
| Inter | google-fonts | 300, 400, 500, 600, 700 | normal |

**Google Fonts URL:** `https://fonts.googleapis.com/css?family=Inter:300%7CInter:regular%7CInter:500%7CInter:600%7CInter:700`

## Image Style Patterns

| Pattern | Count | Key Styles |
|---------|-------|------------|
| thumbnail | 28 | objectFit: contain, borderRadius: 8px, shape: rounded |
| general | 1 | objectFit: cover, borderRadius: 20px, shape: pill |

**Aspect ratios:** 1:1 (28x), 2:3 (1x)

## Motion Language

**Feel:** mixed · **Scroll-linked:** yes

### Duration Tokens

| name | value | ms |
|---|---|---|
| `sm` | `250ms` | 250 |

## Component Anatomy

### button — 56 instances

**Slots:** label, icon

## Brand Voice

**Tone:** neutral · **Pronoun:** third-person · **Headings:** unknown (tight)

### Top CTA Verbs

- **content** (25)
- **favorite** (25)
- **format** (1)
- **filter** (1)
- **add** (1)
- **arrow** (1)
- **note** (1)

### Button Copy Patterns

- "content_copy" (25×)
- "favorite_border" (25×)
- "format_line_spacing" (1×)
- "filter_list" (1×)
- "add_circle_outline" (1×)
- "arrow_drop_down" (1×)
- "note_alt" (1×)

## Page Intent

**Type:** `landing` (confidence 0.45)
**Description:** A tool to brainstorm, discuss, refine implement and promote ideas.
A social network for building stuff and influencing how stuff is built.
A marketplace for challenges, methods and solutions.
A platfo

## Material Language

**Label:** `flat` (confidence 0)

| Metric | Value |
|--------|-------|
| Avg saturation | 0.101 |
| Shadow profile | soft |
| Avg shadow blur | 0px |
| Max radius | 20px |
| backdrop-filter in use | no |
| Gradients | 0 |

## Imagery Style

**Label:** `mixed` (confidence 0)
**Counts:** total 29, svg 0, icon 1, screenshot-like 0, photo-like 0
**Dominant aspect:** square-ish
**Radius profile on images:** soft

## Quick Start

To recreate this design in a new project:

1. **Install fonts:** Add `Helvetica` from Google Fonts or your font provider
2. **Import CSS variables:** Copy `variables.css` into your project
3. **Tailwind users:** Use the generated `tailwind.config.js` to extend your theme
4. **Design tokens:** Import `design-tokens.json` for tooling integration