Helm · Design System

Style guide, v0 draft.

The complete reference for Helm's primitives. Editorial / legal-brief register. Inter throughout. Black on white. Square corners. No glow. Print-grade by default.

Version
0.1.0-draft
Locked
2026-05-27 19:35 UTC
Owner
Designer
Source
helm-company/design/
The brief

What this is, and isn't.

The product is a case file. It should feel like something a lawyer would respect across the table from a funder, not something that looks like "I asked an AI and it gave me magic numbers."

Reference aesthetics: legal briefs, SEC filings, court exhibits; Financial Times / Stratechery / Asymco; Ink & Switch / arXiv preprints; Robert Bringhurst's Elements of Typographic Style; Patrick Collison's pre-rebrand stripe.com; Massimo Vignelli's Swiss restraint.


Avoid
  • Gradient blobs / mesh gradients / aurora backgrounds
  • Sparkle ✨ / magic-wand / lightning-bolt iconography
  • "Powered by AI" badges, AI-generated stamps
  • Glassmorphism, frosted-glass cards, backdrop-blur
  • Floating particles, animated swirls, parallax
  • Robot / brain / synaptic mascots
  • Chat-bubble UI as the primary surface
  • Neon greens, electric blues, glow on buttons
Aim for
  • Editorial / legal-brief register
  • Generous margins, single-column body
  • Restrained chrome, content-first
  • Hierarchy from weight and size, not color
  • Citations as first-class typography
  • Print-grade from token-1
  • Square corners (the input 2px exception aside)
  • Motion only for state-change clarity
Tokens · Color

Color.

Two-color base, two semantic accents, no gradients.

Base
--color-ink
#000000
--color-paper
#FFFFFF
--color-muted
#5C5C5C
--color-subtle
#8A8A8A
--color-rule
#D6D6D6
Semantic accents
--color-warning
#8B0000
destructive · missed deadline
--color-citation
#1A237E
contract clauses · links
--color-highlight
#FFF8C7
matched copy marker
Tokens · Type

Type.

Inter throughout. JetBrains Mono for IDs, timestamps, and numeric columns. Hierarchy from weight + size + tracking + leading, never family contrast.

Headings — Bringhurst weights

H1 · Reconciliation case file.

H2 · Section.

H3 · Subsection.

H4 · Block.

H5 · Header.
H6 · Header.
Body

Lead paragraph. The brief at the top of a case file, where the reader needs to land before the chronology begins.

Body text. The chronology itself, the depositions, the running analysis — long-form reading in Inter at 16px / 1.6 line-height with a subtle negative tracking (-0.011em). This is where most of the reading happens; we tune it to be effortless.

Small text. 14px. Notes, secondary context, footnoted asides.

Caption. 13px, muted. Image captions, timestamps when not set in mono.

Inline variants

Inline marker classes: .muted for de-emphasized running copy, .subtle for the next level down, .warning for destructive emphasis, and .mono for IDs and inline numeric values. Tabular numbers via $1,234.56 when columns need to line up.

small caps via .smcp class · uses Inter's smcp feature with extra tracking.

Overline marker · uppercase tracked · for section labels and rail headers.

Primitives · Links and citations

Links and citations.

Citations are first-class. When we cite a contract clause, that gets its own primitive.

Inline link

See the funder behavior table for what Forward Financing typically does with surplus payments.

Citation — inline

The contract requires monthly reconciliation per Article 4.2(b) within 30 days of receipt of bank statements.

Citation — block (for quoted contract language)
Merchant shall be entitled to a reconciliation of the actual receipts against the daily payments and shall be refunded the difference upon request, in accordance with the terms hereof. FundCo MCA Agreement, § 4.2(b)
Primitives · Buttons

Buttons.

Square corners, hairline border, weight from typography. No glow, no shadow, no animation beyond color transitions.

Variants
Sizes
Primitives · Inputs

Inputs.

Hairline border, single 2px radius exception (iOS rounding), no inner shadow. Focus state is the only motion.

We'll send case-file updates here.

Numeric fields use tabular monospace.

Amount must be greater than zero.

Primitives · Lists

Lists.

Definition lists are first-class — case files are dense definition surfaces.

Definition list — case-file metadata example
Funder
FundCo Capital, LLC
Contract date
2024-08-17
Original advance
$80,000.00
Factor rate
1.42
Payback amount
$113,600.00
Reconciliation
Monthly, per Article 4.2(b)
Primitives · Tables

Tables.

Legal-style: column rules instead of zebra stripes. Tabular monospace in numeric columns.

Date Description Amount Running balance
2026-04-01 ACH debit — FundCo (daily) −418.52 82,109.44
2026-04-02 ACH debit — FundCo (daily) −418.52 81,690.92
2026-04-03 ACH debit — FundCo (daily) −418.52 81,272.40
Primitives · Notices

Notices.

Single-color bands with a hairline rule on the left. Not cards, no shadow.

Default notice. Informational. Hairline rule on the left, black ink on white paper.
Deadline approaching. The reconciliation request window for April closes in 4 days. Filing late forfeits the surplus refund under Article 4.2(b).
Citation reminder. Surplus reconciliation under the FundCo agreement is governed by the merchant's monthly statement of receipts vs. daily debits.
Primitives · Dividers

Dividers.

Hairline rule

Strong rule