Design System · V2

Your design system,
finally in one place.

Everything a build needs to look like us: night darks, cream lights, one bright orange, bold rounded headlines with an italic that carries the feeling.

✓Distilled from the editorial system. Tokens live in globals.css.

Foundations

Night darks, cream lights, one bright orange.

—— § 01 · Color

--color-night-950

#070D18 · hero depth

bg-night-950

--color-night-900

#0B1424 · dark sections

bg-night-900

--color-night-800

#16243A · panels on dark

bg-night-800

--color-ink

#101A28 · headlines

text-ink / bg-ink

--color-body

#4A5951 · body text

text-body

--color-caption

#7C8880 · captions

text-muted

--color-flame-500

#F2681E · buttons + glow

bg-flame-500

--color-flame-bright

#FF8A3D · emphasis on dark

text-flame-bright

--color-flame-emphasis

#B84507 · emphasis on light

text-flame-emphasis

--color-check

#34C75E · check dots

bg-check

--color-flame-tint

#FFF2E9 · verified pills

bg-flame-tint

--color-cream

#F7F3EA · alt sections

bg-cream

--gradient-hero

ember → rust → flame → amber → gold · hero italic text ONLY, clipped to type

bg-clip-text text-transparent [background-image:var(--gradient-hero)]

--color-surface / --color-border

#FFFFFF cards · #E6E1D5 hairlines

bg-white · border-border

Usage

Pages alternate section grounds: night-900 → white → cream. The accent never fills a section background — it lives in buttons, emphasis words, marks, and dots. The dark stripe need not be the hero: the home page opens on cream and puts its night bands where it is making its case. The gradient appears once per page at most, on the hero's italic line. Text on dark is white with on-dark-muted for body.

Built on two families

Bold heads, italic feeling.

—— § 02 · Typography

Everything your creative journey has been waiting for.

display
Poppins 700
60–68 / 1.12 / -1%

The world is becoming more automated. Trust is becoming rare.

h2
Poppins 700
44 / 1.18

Every artist is a real person.

h3
Poppins 600
24 / 1.3

This is where the work centralises its presence online. Track a portfolio, log accomplishments, and connect with a vibrant community. Body copy sets in Hanken Grotesk.

body
Hanken Grotesk 400
17 / 1.7

Why we built this · 01 · Verify · 2 connections · ✓ Verified

label / data
IBM Plex Mono 400
12 / caps / +18–22%

Usage

Every editorial headline carries exactly one italic emphasis phrase — flame-emphasis on light, flame-bright or the hero gradient on dark. Product headings (form labels, dialog titles, table headers, error states) run upright. Poppins never sets body copy; Hanken never sets headlines. Mono eyebrows are the accent and may be flanked by short dashes on light sections, or sit inside an outlined capsule on dark.

Actions

Warm glows, pills everywhere.

—— § 03 · Buttons & Nav

logo

arthelper

ArtArtistsLeaderboardCommunity Standards

nav · white bar / pill actions right / Poppins 600 links

See what's included ↓Jump in →

Get the Badge

Join the mission

→

floating CTA · fixed bottom-right on long pages
two-line label + white circular arrow

Primary pill — the one CTA that glows

<button className="inline-flex items-center gap-2.5 rounded-full px-7 py-[15px]
  font-display text-[15px] font-semibold text-white shadow-glow
  [background-image:var(--gradient-button)]
  transition duration-150 hover:brightness-[1.08] active:scale-[0.98]">
  Build your artist profile <span>→</span>
</button>

Outline pill · solid ink pill · disabled

// outline — secondary actions on light
"rounded-full border border-pill-border bg-transparent px-7 py-[15px]
 font-display text-[15px] font-semibold text-heading
 transition duration-150 hover:border-ink active:scale-[0.98]"

// solid ink — sign-up style
"rounded-full bg-ink px-7 py-[15px] font-display text-[15px]
 font-semibold text-white transition duration-150 hover:bg-night-900"

// on dark — border white/45, never a fill
"rounded-full border border-white/45 px-7 py-[15px] ... text-white"

// disabled — no glow, no gradient
"cursor-not-allowed rounded-full bg-disabled px-7 py-[15px] text-faint"

The dark surface

Three things we commit to, on every dark section.

§ 04 · Dark Surfaces

BRAND
SEAL
(asset)

01 · Verify

Every artist is a real person.

Numbered mono label in flame-400, bold head with italic emphasis, muted body. Columns divide with 1px white/12% rules — no card backgrounds.

02 · Protect

Your work is never training data.

Dark sections carry ambience: faint dashed circles, dashed connector lines between avatars, and a soft radial lift behind focal points.

03 · Connect

Find the people behind the work.

Glowing marks (the accent glow, inset highlight plus a warm drop) are reserved for the brand seal and primary CTAs. Section markers sit right-aligned.

✓

the network motif · avatar circles with accent ring + check dot,
joined by 1px dashed white/30% connectors

Components

Cards, badges, and the quote.

—— § 05 · Cards & Badges

✓

Tina Gattermann

Hamburg-Nord, Germany

artwork

2 connections

✓ Verified

artist card · white / r20 / soft shadow / thumbs r8

“Who actually made this?”

The one question every fan, buyer, and collector is now asking.

The answer →

A mark, a verification, a person at the other end of the line.

✓ VerifiedThe global networkBuilt for creativesLive

Usage

Cards are always white — even on cream — radius 20, one soft shadow. The VERIFIED pill is mono caps on check tint — the one component that stays green. Quotes get a 3px accent left border and bold italic Poppins. Capsule badges (outline + tracked mono caps) are eyebrows; dash-flanked mono eyebrows introduce light sections.

Card shell · verified pill · quote block

// every content card — white even on cream
"rounded-[20px] border border-card-border bg-white p-5 shadow-card"

// verified pill — the badge of the whole system
"inline-flex items-center gap-1.5 rounded-full border
 border-flame-tint-border bg-flame-tint px-3 py-1.5
 font-mono text-[10px] tracking-[0.18em] text-flame-600"

// quote — 3px accent rule, bold italic Poppins
"border-l-[3px] border-flame-500 py-2 pl-7"
"font-display text-[32px] font-bold italic leading-[1.25] text-heading"

Certificate of Humanity

★ Authentic ★

N°1172

Issued2026 · 07 · 24

HolderTina Gattermann

StatusActive

certificate card · night / mono ruled rows / r20

✓

Tavares Gibson

Photography · 1h

Tony and Chelsea Northrup's gear reviews tend to cut through the hype pretty efficiently, and this one on the Insta360 Luna Ultra is no exception. Worth a look if you're curious…

♡ 4● 12 repliesReply

community post · avatar / mono meta / 2-line excerpt

TrendingWeek of Jul 20 · 2026

Open call: your art in a Creator Clash

166 people in this thread · by Taylor Sinople

Jump in →

When someone sends a photo of your work in their home

23h · Art Business · by Nora Beckett

Success by not giving up

Jul 16 · #SmallWins · by Terri Abrahamsen

trending list · numbered rows, 01 highlighted in the accent

Structure

Layout, spacing, forms.

—— § 06 · Structure

Spacing · 4px base

8 · 12 · 16

24 · 32 · 48

72 · 120

Sections pad 120px vertical. Cards pad 20–24. Content maxes at 1240px with centered heroes.

Radii

8 thumbs

16 panels

20 cards

pill

Artist namePrimary medium

Open to commissions

forms · white / r12 / accent focus ring / mono accent labels

Field + label

<label className="font-mono text-[11px] uppercase
  tracking-[0.18em] text-flame-emphasis">Artist name</label>

<input className="rounded-xl border border-border bg-white px-4 py-3.5
  text-[15px] text-heading outline-none transition
  focus:border-flame-500 focus:shadow-[0_0_0_3px_var(--color-flame-tint)]" />

// error state: swap border + label to text-danger / border-danger

That doesn't look like a full address.

Motion

150ms ease. Hover: brighten the accent 8%, darken solids one step, links → accent. Press: scale .98. Glow only on primary CTAs and the seal. No parallax, no bounces.

Content patterns

Numbers that tell the story.

—— § 07 · Patterns

01 / Portfolio

A portfolio built around your work

Feature blocks index with mono NN / LABEL (slash form). § markers are reserved for page-level sections; the slash form counts features within one.

Résumé rows

01Curated portfolio with gallery, artist info, and activity

02Verified history of exhibitions, residencies, and pressComing soon

03Endorsements from collaborators inside your nicheComing soon

Stat trio

Works

Connections

Followers

Inline stats — bold the number phrase

730 verified artists on the network · 113 conversations started today · Followed by 72 artists

Category chips

Creative Lifestyle 41Painting 32Photography 26Digital Art 10

chip · white / hairline / accent mono count · selected inverts to ink

For developers

Every token, as you type it.

—— § 08 · Tokens in Code

Everything above is backed by a token in app/globals.css under the Tailwind v4 @theme block. Reference the token; never re-hardcode a hex that already exists.

Type

--font-displayfont-displayPoppins · headlines only

--font-sansfont-sansHanken Grotesk · body + UI

--font-monofont-monoIBM Plex Mono · counted / official

Radius — bigger surface, softer corner

8pxrounded-lgthumbnails

12pxrounded-xlinputs

16pxrounded-2xlpanels

20pxrounded-[20px]cards

999pxrounded-fullpills

Elevation & gradients

--shadow-cardshadow-cardwhite cards only

--shadow-glowshadow-glowprimary CTA + seal only

--gradient-button[background-image:var(--gradient-button)]primary pill fill

--gradient-hero[background-image:var(--gradient-hero)]hero italic, ≤1× per page

Section scaffold — grounds alternate, never the accent

{/* white */}
<section className="mx-auto max-w-page px-6 py-[72px] sm:px-12">

{/* cream — the alternating band */}
<section className="bg-cream px-6 py-[72px] sm:px-12">

{/* night — text flips to on-dark, rules to white/12% */}
<section className="bg-night-900 px-6 py-[72px] text-on-dark sm:px-12">

Headline — exactly one italic accent phrase

<h2 className="font-display text-[44px] font-bold leading-[1.18] text-heading">
  The world is becoming{" "}
  <em className="italic text-flame-emphasis">more automated</em>. Trust is rare.
</h2>

// on dark, the emphasis token changes: text-flame-bright

Eyebrow + § marker — the editorial furniture

// dash-flanked mono eyebrow (light sections)
<div className="flex items-center gap-2.5 font-mono text-xs uppercase
  tracking-[0.22em] text-flame-emphasis">
  <span aria-hidden className="h-px w-5 bg-flame-emphasis" />
  Foundations
  <span aria-hidden className="h-px w-5 bg-flame-emphasis" />
</div>

// right-aligned page-section marker
"font-mono text-xs uppercase tracking-[0.18em] text-muted"  →  —— § 01 · Color

// within a section, count features with the slash form instead: 01 / PORTFOLIO

Usage

Two names to watch. text-muted is caption text (#7C8880) while bg-muted is shadcn's cream fill — they are deliberately split, and new code should prefer text-caption. And never restyle a vendored component in components/ui/ or components/ai-elements/: fix the alias layer in globals.css instead — one mapping, every component follows.

Tournament components

The bracket set, rendered live.

—— § 09 · Tournament

The permanent tournament components from components/bracket/ and components/share/, rendered with inline fixture data — no database behind any of them. Artwork boxes show each component's own no-image state on purpose: this page keeps its no-photograph rule.

share button · pill + 44px icon · OS sheet, clipboard fallback · “Link copied” announced via role=status

Verified

Morning on the Marsh

Tina Gattermann2,340 Human-Made Art

Harbour in Winter

Tavares Gibson

Morning on the Marsh

Tina Gattermann

entry byline, three states · with signals: the green Human-Made Art ring, 💎 reputation, and badges in ArtHelper’s own colours · an artist with no ArtHelper account renders plain text and no chips, never a dead link or a zero · a surface that passes no signals (the bracket cell) is unchanged

96% of predictors picked this piece — 216 of 225

3 of 5 predictors called this

prediction tally line · percent + sample above the N floor (25) · raw counts below it · renders nothing when nobody predicted

Artist

Tina Gattermann

Reputation2,340 Human-Made Art

Oil painter working small, from a shed at the bottom of a Hamburg garden. Marsh light, boat paint, and the North Sea in winter — one panel a day, sold once, never printed.

Follow on ArtHelper

artist block · compact · avatar 48 with the Human-Made Art ring / linked name / badge + reputation chips / three-line bio clamp / follow CTA

The artist

Tina Gattermann

Reputation2,340 Human-Made Art

Oil painter working small, from a shed at the bottom of a Hamburg garden. Marsh light, boat paint, and the North Sea in winter — one panel a day, sold once, never printed.

Follow on ArtHelper

artist block · final · cream-wash panel, avatar 64 ringed, name at heading scale, named badge chips, full bio — the creator-clash treatment

Morning on the Marsh

Tina Gattermann

Harbour in Winter

Tavares Gibson

312 votes so far · closes 8 Aug, 18:00 UTC

matchup card · open · turnout only, never direction · overlay button names both artworks and the action

Morning on the Marsh

Tina Gattermann

92%

Advances · 1,396 votes

Harbour in Winter

Tavares Gibson

Reached round 1 · 121 votes

1,517 votes

matchup card · decided · public split with its sample size · the loser keeps a record, not a strike-through

The draw

This is the shape of the season and when each round closes.

pre-start bracket · promotion stage · the shape and the dates, no field yet — dashed places, no seed numbers, nothing claimed

The draw

All sixteen, in the places they will play from.

Scroll sideways to follow a wing to the final

pre-start bracket · drawn stage · real pairings and seeds before round 1 opens · scrolls sideways under ~560px, never zooms

For artists

Ask to be in the field

The field is picked by hand rather than by open call, so this puts you on the list of artists who want in — not in the bracket. No entry fee, no jury, and no portfolio review.

An ArtHelper account
Free, and a minute. Art Madness runs on ArtHelper, so the account you vote with is the account you compete with.
Your work and your profile
Upload the pieces, write the bio, add your links. It is what a matchup page shows off when your work comes up.
Ask to be in this season
The button below. No jury, no entry fee, no portfolio review — and no guarantee: the field is picked by hand.

For everyone

Play the bracket

Vote every matchup, argue in the threads, and fill out a prediction before round 1 locks. We will tell you the moment it opens.

signup panels · not yet asked · primary pill for the artists' ask, outline for the fans' · signed out, both raise the wall

For artists

Ask to be in the field

The field is picked by hand rather than by open call, so this puts you on the list of artists who want in — not in the bracket. No entry fee, no jury, and no portfolio review.

An ArtHelper accountDone
Free, and a minute. Art Madness runs on ArtHelper, so the account you vote with is the account you compete with.
Your work and your profile
Upload the pieces, write the bio, add your links. It is what a matchup page shows off when your work comes up.
Ask to be in this season
The button below. No jury, no entry fee, no portfolio review — and no guarantee: the field is picked by hand.

You are on the list for Summer 2026. We will be in touch before the field is set — nothing else to do.

For everyone

Play the bracket

Vote every matchup, argue in the threads, and fill out a prediction before round 1 locks. We will tell you the moment it opens.

You are on the list for Summer 2026. We will mail you the moment round 1 opens.

signup panels · both asked · flame tint, never the check island — that palette means human-verified and nothing else

Summer 2026 · final result

The podium

Voting is closed and this page is permanent. Nothing comes down — the whole bracket below stays open to read, every matchup keeps its result, and every artwork keeps the round it reached.

Summer 2026 Grand Winner

Morning on the Marsh

4-0 · 4,562 votes across the season

The artist

Tina Gattermann

Reputation2,340 Human-Made Art

Oil painter working small, from a shed at the bottom of a Hamburg garden. Marsh light, boat paint, and the North Sea in winter — one panel a day, sold once, never printed.

Follow on ArtHelper

podium · champion card · final-variant artist block + season record + share — the permanent winner page's centrepiece

Grand winner

Tina Gattermann

Hamburg, Hamburg, Germany · On ArtHelper since August 2025

Reputation2,340 Human-Made Art

View profile Follow Connect

Works published

1,284

Followers

Connections

Website ↗Instagram ↗

Oil painter working small, from a shed at the bottom of a Hamburg garden. Marsh light, boat paint, and the North Sea in winter — one panel a day, sold once, never printed.

Low Water, Elbe
Boatyard, February
Sleet on the Jetty

artist card · live · the winner, runner-up and standings pages' full treatment — location and joined date, reputation, works / followers / connections, their own outbound links, full bio. Three CTAs, all deep-linking to the ArtHelper profile, each tagged with its own campaign content so the funnel can tell them apart

Grand winner

Tina Gattermann

Reputation2,340 Human-Made Art

View profile Follow Connect

Oil painter working small, from a shed at the bottom of a Hamburg garden. Marsh light, boat paint, and the North Sea in winter — one panel a day, sold once, never printed.

artist card · degraded · the same card with the profile read unavailable. What is stored on the entry survives — name, bio, verification, the profile link — and every field that read owned is absent rather than zero. The badges are still here because signals are a second, independent read: the two fail separately, so the card has to degrade in two places rather than one. A results page must never 500 because another service is down

✓ Write like this

Build your artist profile · Exclusively for Human-Made Art. No AI-generated work, ever. · Who actually made this?

✕ Never like this

UNLOCK Your Creative Potential! Supercharge your art journey · Sign Up NOW!!!

DESIGN SYSTEM · V2 · POPPINS / HANKEN GROTESK / PLEX MONO

NIGHT #0B1424 · FLAME #F2681E · CREAM #F7F3EA

Your design system,finally in one place.

Night darks, cream lights, one bright orange.

Bold heads, italic feeling.

Warm glows, pills everywhere.

Three things we commit to, on every dark section.

Every artist is a real person.

Your work is never training data.

Find the people behind the work.

Cards, badges, and the quote.

Layout, spacing, forms.

Numbers that tell the story.

A portfolio built around your work

Every token, as you type it.

The bracket set, rendered live.

The draw

The draw

Ask to be in the field

Play the bracket

Ask to be in the field

Play the bracket

Morning on the Marsh

Tina Gattermann

Tina Gattermann

Your design system,
finally in one place.