reckon.by supermargin

The Reckon brand.

Editorial Swiss on warm paper: ink type, one serif-italic emphasis, a rationed burnt-orange accent, and a pastel taxonomy that codes the agents. Everything on this page renders from the product’s own tokens.

Token authority: frontend/DESIGN.md

Wordmark & mark

reckon.by supermargin
reckon.by supermargin

The mark is supermargin’s stacked-bars glyph; the lockup adds “reckon” with the orange full stop and “by supermargin” beneath. Keep the stack, never recolor the stop, and give it clear space equal to the mark’s height. SVG marks: black · white. The lockup lives in code as ReckonWordmark.

Color

Neutrals carry the page

Ink#111111

Type, dark surfaces. Never pure black.

Ash#6d6c6b

Body copy, secondary labels.

Stone#b1b1af

Muted labels, placeholders.

Pearl#ecebea

Quiet fills, tertiary buttons.

Cream#f6f5f3

The page canvas.

Paper#faf8f5

Soft section bands.

Charcoal#272625

Warm dark panels.

The taxonomy: tile, dot, soft

Each agent owns one triplet. The tile is a flat category fill, the dot is its saturated voice (markers, chart lines, wires), the soft wash is for annotation chips - always with a 1px border in the dot at 30% alpha. Never gradients, never text color.

coralAds agent
#ffd6c9 · #f4623a · #fde5dd
mintPatterns agent
#b7efb2 · #3e9c4b · #e3f7e1
canaryAudience agent
#ffef99 · #d7a507 · #fdf6d8
violetMarket agent
#e2ddfd · #8b5cf6 · #ece7fd
pinkBrand agent
#ffd7f0 · #db2777 · #fde9f4
aquaAmbient signals
#99fff9 · #14b8a6 · #ddf7f1

Brand orange #e8400d is punctuation. The wordmark’s stop, an italic word’s period, a leader line - at most one accent per viewport, and never a surface fill.

Typography

Lil Grotesk (self-hosted, OFL) for everything; Instrument Serif italic only for emphasis. Sentence case always - uppercase exists solely at label size with wide tracking.

Display
Lil Grotesk Black · clamp(40-66px) · -0.03em
Great ads aren't
Display accent
Instrument Serif Italic · 1em of display
guesses anymore.
Heading
Lil Grotesk Bold · clamp(32-52px) · -0.03em
The Reckon agent system
Lede
Regular · 17px / 1.65
Reckon's AI agents read every signal, then tell you what to make next.
Body
Regular · 14.5px / 1.6
Evidence on every recommendation, read-only access, revoke anytime.
Label
Bold caps · 10.5px · +0.14em
What to make next

Shape & components

Two radii define the language: 8px buttons, 12-16px cards (24px for hero-scale panels; full pills only for badges and avatars). On white, elevation is a hairline border - floating evidence gets one soft long shadow, never hard offsets.

See what to make nextSee a sample analysisThumb stop rate
What to make next

Short demo in first 3 seconds

The floating-card treatment: hairline border, one soft shadow, label in caps, serif emphasis in the claim.

Motion

One authored moment per section; motion explains structure - rise, draw, converge - and every animation respects prefers-reduced-motion. The GSAP layer registers these hooks (see components/landing/landing-motion-core.ts):

data-hero-wordheadline lines rise out of an overflow clip
data-reveal / data-reveal-groupsections fade-rise once on scroll
data-draw (+data-draw-delay)SVG strokes draw themselves in
data-floatambient vertical drift, staggered
data-magneticprimary CTAs lean toward a fine pointer
data-collagehero visual parallaxes slower than copy
.hero-hoverthe sculpture levitates (CSS, 7s)

Voice & claims

  • Sentence case everywhere; navigation links are lowercase.
  • One serif-italic emphasis per headline, often closed by the orange stop.
  • Claims stay provable: no invented stats, endorsements or client logos.
  • Demo content uses fictional brands: Sandee, LUMORA, SELAH, loopwear, Nightbrew, Fernway, bloomkit.
  • CTAs name the outcome: “See what to make next”, “Get early access”.

The tokens live in the repo

frontend/DESIGN.md is the machine-readable authority (standard DESIGN.md format) - agents and tools should read it before generating new screens. The runtime source of truth is components/landing/palette.ts plus the class constants in the landing page; this kit renders from those same values.