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

box-shadow: rgb(170, 170, 170) 2px 2px 4px 0px;

md — blur: 8px

box-shadow: rgba(23, 23, 23, 0.1) 2px 2px 8px 2px;

CSS Custom Properties

Colors

--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

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

Semantic

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

Transitions & Animations

Durations: 0.25s

Common Transitions

transition: all;
transition: background 0.25s;

Keyframe Animations

highlight-in

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

fa-spin

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

opacity-70-25-0-13

@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

@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

@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

@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

@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

@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

@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

@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)

.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)

.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)

.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)

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

Modals (78 instances)

.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)

  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)

  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

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

""

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

Link Hover

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