WellSourced · Design System v1

A commons,
not a storefront.

The visual system for WellSourced, an open-source product discovery engine for ethical shopping. Built to feel like trusted public infrastructure: fast, honest, and warm. Convenience leads; values follow.

Releasev1.0 · Feb 2026
Primary #0D7377 Deep Teal
TypeSatoshi · DM Serif Display · DM Sans · JetBrains Mono
Grid12 col · 1280 max · 4px base
01

Brand

Grounded organic meets clean modernity. Lowercase wordmark. A single-color mark that reads as a “w” folded into a well: origin, source, enclosed.

Primary lockup · reversed
wellsourced
▸ w-form ≈ double valley / source▸ dot = the origin point▸ enclosed = c, protected
Badge, embeddable on brand sites
Verified onwellsourced
Find us onwellsourced
Embed as an <iframe> or an <a>. Both include a citation link back to the brand profile.
mark / primary
mark / mono-light
mark / flat-mono
wellsourced
wordmark / reversed
02

Color

Teal as trust anchor; warm sand as the page temperature. Trust tiers use a calibrated gray → blue → green spectrum that maps to verification depth. Never to emotion.

Core palette
Deep Teal
#0D7377
Primary: CTAs, active links, logo, selected states.
Teal Light
#E6F5F5
Selected chips, hover bg, subtle highlights.
Warm Sand
#F5F0E8
Page background, away from Amazon-white.
Pure White
#FFFFFF
Card surfaces, modals, inputs.
Charcoal
#1A1A2E
Headings, body copy, primary text.
Slate
#64748B
Metadata, secondary text, descriptions.
Cloud
#F1F5F9
Dividers, inactive UI, card borders.
Sand Deep
#ECE4D4
Accent dividers on sand, subtle chips.
Trust tier, a calibrated spectrum
TIER 1 · #94A3B8
Self-Reported
Submitted by the brand. No third-party check. Treat with healthy skepticism.
TIER 2 · #3B82F6
Community Verified
A contributor researched this claim and cited sources. Open to review.
TIER 3 · #22C55E
Independently Audited
Confirmed via third-party certification or public filings. Highest trust.
Utility
Warning
#F59E0B
Conflict-of-interest flags, trust caveats.
Error
#EF4444
Form errors, out-of-stock, destructive.
Success
#22C55E
Confirmation, approved edits. Matches Tier 3.
03

Typography

Satoshi for structure; DM Serif Display for emphasis; DM Sans for reading; JetBrains Mono for data. A pairing that reads as both modern and institutional.

Display / Heading
Satoshi
Aa Bb Cc · 123
400 Regular500 Medium700 Bold900 Black
Accent · Emphasis
DM Serif Display
Aa Bb Cc · 123
400 Regular400 Italic
Body / UI
DM Sans
Aa Bb Cc · 123
400 Regular500 Medium600 Semibold700 Bold
Mono · contributor tools
JetBrains Mono
0O aA · 0xf3a
400 Regular500 Medium
DM Serif Display in use. Pair with Satoshi for editorial emphasis
Find great products from brands you can trust.
PULL-QUOTE · 400 italic
“A commons, not a storefront.”
SECTION EYEBROW · italic inline
The why behind every brand.
MANIFESTO LINE · 18px italic
We show data, not judgment, and we say so out loud.
// use italic sparingly: headlines, pull-quotes, one emphasized word per passage. never for body, UI labels, or data.
Display64 / 64 / Black
tracking -3.5%
Satoshi 900
Source the good stuff.
H140 / 44 / Bold
tracking -2%
Satoshi 700
Wireless earbuds from 38 brands
H232 / 38 / Semibold
tracking -1.5%
Satoshi 600
About this brand
H324 / 31 / Semibold
Satoshi 600
Ownership & structure
Emphasisinline / italic
tracking -1%
DM Serif 400i
brands you can trust
Body16 / 25 / Regular
DM Sans 400
WellSourced is a public tool for finding products from independent brands you can actually trust. We don't take a cut.
Small14 / 21 / Regular
DM Sans 400
HQ Portland, OR · Founded 2019 · 12 employees
Price20 / 24 / Semibold
DM Sans 600
$89.00
Badge label13 / 15 / Medium
uppercase · tracking 8%
DM Sans 500
Community Verified
Button15 / 15 / Medium
DM Sans 500
Buy Direct →
Mono14 / 22 / Regular
JetBrains 400
edit#a3f82c · verified 2026-01-18 · 3 sources
04

Space, Radius & Elevation

4px base unit. Radii stay friendly but restrained. No pill-everything. Elevation is quiet; hover states earn attention.

Spacing scale · 4px base

4
8
12
16
24
32
48
64
96

Radius scale

8 · inputs, badges
12 · cards, buttons
16 · modals, hero
∞ · avatars, pills

Elevation

shadow-card · rest
shadow-hover · lift
Cards use either a 1px border or shadow-card. Never both. Hover promotes to shadow-hover with a -2px lift.

Layout grid · 12 col · 1280 max · 24 gutter

Desktop≥1024 · 12 col · 4 product cards/rowTablet768–1023 · 8 col · 3 cards/rowMobile<768 · 1 col · 2 cards/row
05

Iconography

Line icons, 1.75px stroke, rounded caps. Lucide as the base set. Custom marks only where semantics demand it: trust tiers, ownership types, the Buy Direct arrow.

search
browse
filter
sort
tier-1
tier-2
tier-3
buy-direct
indie
worker-owned
co-op
b-corp
certified
suggest-edit
source-cite
recent
06

Components

Ten components, each with required states. Built in this order because this is the order they’ll be used in anger: nav, search, chips, then product cards.

6.1 Navigation Bar

sticky · 64px · collapses on mobile
wellsourced
⌘K
Browse BrandsSubmit a BrandAbout
Contribute

6.2 Buttons

44px · 12px radius · 150ms ease-out
Primary
Secondary
Ghost
DestructiveUsed in contributor tools only. Never in shopper-facing flows.

6.3 Search Bar

landing · 56px · results · 40px
Landing, default
Enter ↵
Landing, focused with active query
Results, compact in header

6.4 Filter Chips

34px · full radius · horizontal scroll on mobile
Inactive
Active + sort

6.5 Trust Tier Badges

inline with brand · tooltip on hover or focus
BadgesSelf-ReportedCommunity VerifiedIndependently Audited
Tooltip, on hover/focus
Community Verified

6.6 Product Card

default · hover · loading · 4 per row on desktop
product shot · 1:1
Nomad Low-Latency Earbuds
$89.00
Signal & DriftVerified
Buy Direct state · default
product shot · 1:1
Kestrel All-Day Runner
$128.00
Orrery GoodsAudited
Buy Directstate · hover
state · loading

6.7 Brand Profile Header

/brand/[slug] · trust data summary per field
sd

Signal & Drift

Worker-Owned

Audio gear built for long walks and long attention. Designed and assembled in Portland, OR; repairable by default.

Price Range
$49 – $289
HQ
Portland, OR · USA
Categories
Audio · Electronics
Founded
2019
Ownership structureAudited
Certifications (B Corp, Fair Trade)Audited
Worker conditionsVerified
Manufacturing locationsSelf-Reported
last updated 2026-01-18

6.8 Category Cards

landing, browse entry point
Kitchen
342 products
Clothing
618 products
Beauty
204 products
Home
489 products
Pet
173 products
Outdoors
256 products
Electronics
148 products
Kids
212 products
Food & Drink
391 products
Office
97 products
07

Form Elements

Clean, restrained. Teal focus glow signals a live field. Errors help, never shame: helper text should tell you what to do next.

The public brand name as customers know it.
We'll use this to fetch your product catalog.
Token looks invalid. It should start with shpat_ and be 38 chars.
Plain language. No marketing superlatives. 240 char max.
08

Motion

Motion is structural, never decorative. We move things to confirm an action, surface a state, or hand off focus. Nothing swoops, nothing bounces. A shopper should never wait on an animation to complete.

8.1 Principles

four rules, in order of priority
01 · HONEST
Motion reflects real state.
A spinner means we're actually fetching. A pulse means data is live. We never animate to imply speed we don't have.
02 · FAST
Under 250ms, almost always.
Shoppers click. Long animations feel like lag. If it can't be 250ms, it probably shouldn't animate.
03 · QUIET
No bounce, no overshoot.
We use cubic-bezier(.2,.7,.3,1) for everything. No spring, no elastic. This is research infrastructure, not a game.
04 · RESPECTFUL
Respects reduced-motion.
Every transition is gated by prefers-reduced-motion. No exceptions.

8.2 Duration scale

five timings: use these, don't invent new ones
80ms
instant
Tap feedback, focus ring, checkbox tick. Below perceptual threshold — feels immediate.
150ms
micro
Button hover, chip toggle, arrow nudge, color fade. Default for all interactive states.
200ms
small
Card lift, tooltip fade, filter chip dismiss. Things that change position a few pixels.
240ms
medium
Modal open, drawer slide, tooltip popover. Things that reveal new content.
320ms
page
Full-screen transitions only — route change, mobile search overlay. Used sparingly.
// anything above 320ms is reserved for skeleton loaders and data-streaming states

8.3 Easing

one curve, two edge cases
Standard, default for everything
cubic-bezier(.2, .7, .3, 1)
Confident entrance, quiet settle. Use for hover, fade, lift, slide. 99% of motion.
Symmetrical
cubic-bezier(.4, 0, .2, 1)
Content shifts that need to feel neutral: accordion open, skeleton pulse. No directional bias.
Exit
cubic-bezier(.4, 0, 1, 1)
For things leaving the screen: modal close, toast dismiss. Faster start, no lingering.
// NEVER use spring, elastic, or back-out. Bouncy motion reads as toy-like. We are a commons.

8.4 Patterns

interact with each: hover, click, wait
Acoustic Model 02
$189
Hover lift
Card rises 2px, shadow deepens. Signals “clickable.”
transform · box-shadow200ms standard
Arrow nudge
Arrow slides 2px right on hover. Direction-of-travel cue.
translateX(2px)150ms micro
Filter chip toggle
Background, border, and text color fade together. No pop.
background · border · color150ms micro
Skeleton pulse
Background fades between two neutrals. Honest loading. Only shown when we're actually fetching.
background opacity1400ms symmetric
Community Verified
A contributor researched this claim and cited sources. Hover to open
Tooltip popover
Fades in + translates down 4px. Closes on mouseleave.
opacity · translateY240ms medium
Staggered results entrance
Results fade up with a 40ms stagger. Max 8 items animate. The rest appear instantly.
opacity · translateY(6px)200ms standard

8.5 Don't

anti-patterns
✗
Parallax on scroll
Implies marketing. We're a product search engine, not a landing page.
✗
Number count-ups
“1,247 brands” appearing slowly reads as fake. Just show the number.
✗
Bouncy springs
Undermines the institutional tone. Leave overshoot to consumer apps.
✗
Decorative loops
Animated backgrounds, floating shapes, gradient pulses. All out. Motion means something happened.
09

Imagery

Imagery must earn its place. Product shots do the job, brand photography provides context, and everything else (stock illustrations of handshakes, planet icons, smiling families) is out. If an image doesn't tell the user something they can't read, delete it.

9.1 Principles

four rules: every image is evaluated against these
01 · USEFUL
Shows the product.
The shopper is scanning. Product-on-background wins every time over lifestyle context.
02 · SOURCED
From the brand itself.
Fetched from the brand's Shopify. Never stock photos, never AI-generated. Real or nothing.
03 · CREDITED
Attribution visible.
Every non-product photo names the photographer or source. No anonymous imagery on a transparency platform.
04 · HUMAN, NOT HAPPY
Documentary, not marketing.
When we show makers or facilities, show work. Hands, workshops, process. No cheerful founder portraits.

9.2 Image categories

five types: each has its own treatment
PRODUCT SHOT · 1:1 · 1200px
01 · Product
Used in: search cards, brand profile galleries, category browse.
  • ✓ Square crop, product centered, 15% padding min
  • ✓ Plain background or consistent brand treatment
  • ✗ No overlay text, no “SALE” stickers, no lifestyle clutter
MAKER PORTRAIT · 4:5 · documentary
02 · Maker & workshop
Used in: brand profile header, ownership sections, contributor evidence.
  • ✓ Working portraits: hands, tools, process
  • ✓ Natural light, minimal color grading
  • ✗ No staged smiles, no corporate headshots
DOCUMENT SCAN · 16:10 · cropped
03 · Document & evidence
Used in: trust tier sources, audit trail, verification receipts.
  • ✓ Real scans: B Corp certificates, SEC filings, cooperative bylaws
  • ✓ 8px corners, subtle shadow, always with source URL
  • ✗ No mocked-up documents, no stock “paperwork” photos
PLACE · 16:9 · workshop / origin
04 · Place of origin
Used in: HQ location cards, manufacturing context, transparency sections.
  • ✓ Wide establishing shots: the actual factory, farm, or studio
  • ✓ Include geographic context (map pin, region label)
  • ✗ No generic city skylines, no stock “factory” photos
BRAND LOGOMARK · 1:1 · SVG preferred
05 · Brand logomark
Used in: product cards, brand profile headers, search autocomplete.
  • ✓ SVG where possible, PNG with transparent background as fallback
  • ✓ Sits on white. Never on warm sand, never on teal
  • ✗ No cropping wordmarks, no recoloring brand assets

9.3 Treatment

ratios, corners, color handling
Aspect ratios
1:1Product, logo
4:5Maker portrait
16:10Document, hero
16:9Place, video
Corner radius
8pxEvidence, docs
12pxProduct cards (default)
16pxHero, full-bleed
FullContributor avatars only
Color handling
NaturalDefault, shoot as-is
Warm tintBrand photography only
DuotoneNever, implies styling
B&WHistorical context only
File & loading
FormatWebP + AVIF; JPG fallback
Max file size200KB product · 400KB hero
Resolution2× for retina; max 2400px
Loadingloading="lazy" below fold
Alt textRequired. Describes product, not brand.
PlaceholderWarm sand skeleton with subtle pulse

9.4 Do & Don't

the calibration check
DO
Product-on-white · edges breathing
Clean, centered, product speaks for itself. Shopper's eye lands on the object.
DON’T
35% OFF
Sale stickers · lifestyle clutter
Overlays imply a marketplace. We link out. Pricing lives on the brand's store.
DO
Hands at work · natural light
Process over person. What they make is more interesting than how they smile.
DON’T
Stock founder portrait · crossed arms
Pose photography reads as PR. We are not the brand's agency.
DO
Scanned B Corp certificate · with URL
Real evidence. Source visible. Contributor name attached.
DON’T
🌿
Generic leaves, handshakes, globes
Sustainability clip art is the greenwashing tell. The data earns trust, not the icon.

9.5 Missing imagery

placeholder, not a default image
No product image yet
No maker photo yet
When an image is missing, say so.
A warm-sand tile with a monospace label is better than a broken image, a stock fallback, or an AI-generated guess. It's also an honest invitation. Contributors can see what's missing and submit it.
// if it can’t be real, it can wait. placeholders are a feature, not a failure.
10

Empty & Error States

Never apologize. Just hand the user the next useful action. Illustration is an open magnifying glass, not a sad face.

No results for “purple widgets”

Try a broader search, or browse by category. Every brand here is indexed. If you can't find it, help us add it.

11

Sample Composition

A partial search results view: nav, sticky search, active filter chips, three product cards at their real size. The system validating itself.

wellsourced.io / search?q=wireless+earbuds
wellsourced
Browse BrandsSubmit a BrandAbout

Wireless earbuds

Showing 38 products from 14 brands
earbuds · matte black
Nomad LL Earbuds
$89.00
Signal & DriftAudited
Buy Direct
earbuds · moss
Kestrel Open-Ear Pro
$148.00
Orrery GoodsVerified
Buy Direct
earbuds · fog gray
Fieldnote Bud · Gen 2
$72.00
Northlane Co-opVerified
Buy Direct
// system check: nav height consistent · chips active-color matches teal · cards maintain 1:1 image · trust badges readable at 12px · Buy Direct arrow nudges right on hover