Brand system · v2.0 · July 2026

repley.

Sharp, quiet, self-assured. Never loud.
This manual is rendered by the design system it describes.

Supersedes the v1.0 playbook. Everything on this page is live: the surface moves, the meters run, the buttons are the production buttons.

01

Foundation.

The essence, in one sentence

AI customer service for Shopify operators. Repley answers in 0.4 seconds, in your voice, A to Z. One flat fee.

The promise that carries it everywhere: Recover revenue while you sleep.

The enemy

The support treadmill: the 1 AM inbox, the VA that costs more every month and sleeps through the midnight sale, and “sorry for the inconvenience” sent to a customer holding a €500 order.

Positioning law

Repley is not team-workspace software. You buy the work itself: the AI does the replies at a fraction of the cost. Every competitor forces two options: pay for the dashboard and do the work yourself, or pay for the dashboard plus a meter on their AI. Repley is the third option. Never sell seats. Never say “helpdesk.” The console is a review surface.

Autonomy law

Repley sends automatically and handles tickets A to Z. There is no routine human review. Only two kinds of cases escalate: legal questions and truly furious customers, plus the operator’s own thresholds and confidence floor as safety controls. Banned phrasings: “you review,” “draft-first,” “auto-send is opt-in.”

02

Voice.

Sharp, quiet, self-assured. We talk the way one operator talks to another: direct, factual, without ornament. Numbers do the bragging.

The rules

  • Sentence case, everywhere. Headlines end with a period.
  • Numbers instead of claims: “0.4 seconds”, “73%”, “€4,280/mo”.
  • Two-beat rhythm: setup, then payoff. “Three moves. One webhook. Zero plugins.”
  • The poster grammar: white statements, one orange line: the payoff or the pain.
  • English only. Decimal point (0.4s), euro as €4,280.

Never

  • “Revolutionary”, “game-changing”, “next-gen”, “cutting-edge”.
  • Exclamation points. Anywhere.
  • Title Case Headlines.
  • Hedging (“we believe”, “world-class”). If we can’t measure it, we don’t claim it.
  • Selling seats, teams, or “workflows for your agents”.
  • Em-dashes. House punctuation is the period, the comma, and the colon.

Wrong → Repley

✗ wrong✓ repley
“Our revolutionary AI-powered solution streamlines workflows”“Repley answers in 0.4 seconds. A to Z. Done.”
“Leverage our comprehensive platform”“73% of the tickets. Resolved automatically. While you slept.”
“Best-in-class support automation”“One webhook. No plugins. Live in 15 minutes.”
“Empower your support team!”“Nobody ‘works’ in Repley. The AI does the replies.”
04

Color.

Six colors. One law: ink 80 · cream 15 · orange 5. Orange is a signal, not a decoration. Where it appears, something is alive.

5%
Repley Orange #F05F20 · rgb 240 · 95 · 32

The pulse. CTAs, accents, the one alive element per view.

80%
Ink Black #1A1612 · rgb 26 · 22 · 18

The canvas. Primary background: warm, never pure #000.

15%
Cream #F5F1EB · rgb 245 · 241 · 235

The daylight room. Light sections only.

Dark Amber #3D1A0A · rgb 61 · 26 · 10

Gradient layers, the silk’s deep tones.

Muted Brown #6B5F52 · rgb 107 · 95 · 82

Secondary text on cream.

Mid Gray #BABABA · rgb 186 · 186 · 186

Tertiary text on ink.

Derived surfaces

--bg-0 page base
--bg-1 raised · cards
--bg-2 panels · inner UI
--amber-lift hover amber
--cream-2 cards on cream

Hard bans

  • Blue. Never. It is the color of every competitor.
  • Pure #000000 backgrounds. Ink is always warm.
  • Orange above ~15% of any composition.
  • Green/red status colors outside functional UI (destructive: #E85D3A).
05

Typography.

Display · PP Neue Montreal

Authority.

Weights 500 · 600. All headlines, the wordmark, numerals. ⚠ Renders as Inter Tight until licensed; the swap is one file.

Body · Inter

Clarity.

Variable, 400–600. Copy, UI, buttons, navigation. Readable, neutral, trustworthy.

Technical · JetBrains Mono

precision · 0.42s

Variable, 400–500. Eyebrows, timers, counters, logs, receipts, footnotes. Always tabular-nums when it ticks.

The scale: one, fluid, no exceptions

stepsizeweightuse
Displayclamp(2.875rem → 6.25rem)600Hero statements. Heroes may exceed via local poster scale.
H1clamp(2.375rem → 4rem)600Section statements.
H2clamp(1.75rem → 2.75rem)600Sub-sections.
H3clamp(1.25rem → 1.5rem)500–600Card titles.
Leadclamp(1.0625rem → 1.25rem)400Intros, max 34em.
Body1rem400Copy, max 38em.
Small0.875rem400–500Support text, buttons.
Eyebrow0.75–0.8125rem400–500Mono labels.

Letter-spacing −0.02em on display sizes (−0.03em at poster scale). Leading: 1.05 display · 1.12 headings · 1.6 body.

Eyebrow, primary: mono brackets

The growth problem

JetBrains Mono, uppercase, 0.22em tracking, orange brackets. The default section label.

Eyebrow, secondary: pulse dot

The growth problem

Tracked uppercase with the breathing orange dot, used where the mono brackets would repeat.

06

The surface.

The site’s skin, running behind this very page: the drape. A molten ribbon pouring down the right side in a slow S-curve. Satin bands and razor speculars run along the flow; deep ink lives between them. It breathes like honey. Nothing scrolls, nothing flickers.

Construction

  • WebGL2 fragment shader; a serpentine spine x(y), cross-flow satin bands, downward-drifting warp.
  • Ramp: ink → dark amber → burnt sienna → molten orange → warm cream. All warm; no gray, no blue.
  • The body leans right; text lives on the ink left.
  • Rendered at 0.6× and upscaled; DPR capped (1.5 desktop / 1.25 phone).

Usage rules

  • One surface per site: it is the skin, not a section background.
  • Text over a bright crest gets a local radial scrim (near-ink 0.8 → transparent), one per text block.
  • Reduced motion: a single static frame. No WebGL2: the CSS amber gradient fallback.
  • Never a second competing surface, never noise/turbulence fields, never rings.
07

Motifs.

The pulse: 0.4s made visible

A flat gray trace, one orange spike. The brand-essence diagram as a living element: it fires once per composition. Also the language of wires, rails, and timelines: thin lines that draw with intent, pulses that travel them.

The AI beam, live below

where the beam orbits, the AI is working

A crisp orange line with a hot core riding a card’s border, a blurred halo behind it. 4.5s per lap, forever. Reserved for AI moments: the Repley model card, the 73% proof, the featured tier.

The night clock

02:47 · while you sleep

The breathing orange dot + mono time. Marks anything happening overnight, on its own. Breath cycle: 2.4s.

The ember

warmth entering from a corner

An orange radial bleeding in from a corner: the standard way light enters a dark component. Never a full orange fill outside the featured card.

08

Cards.

Soft-rounded warm charcoal. No hairline borders as decoration. Light lives inside the card: embers, rings, molten fills. Radius 24px (16px for inner media). Dark cards stay dark, even on cream.

Base

Quiet charcoal (--bg-1), generous padding. Feature grids.

Ember

Corner glow, for cards carrying a number or a promise.

Ring

Thin warm gradient outline: the pricing-tier treatment.

Stat card

0.4s
Median draft time Big display numeral, bold label, muted body. Numbers count up on reveal.

Content card anatomy

  • Media panel first (16px radius, flush in a 12px-padded shell), then meta → headline → body.
  • Media panels hold micro-animations, never stock imagery.
  • Subtle 1px rgba(255,255,255,0.08) shell border is allowed on content cards only.
09

Buttons.

One primary per screen, always the same words: Start free trial.

The primary: the “realism” anatomy

  • 2px shiny border: white light source at top-right fading to warm ink.
  • Soft glow floating behind the top-right; swells on hover.
  • The ember blob in the bottom-left corner. It grows 50→90px on hover.
  • Inner panel: warm dark face with top sheen; pops to 1.08 on hover.
  • Variants: --sm (nav) · --block (cards). Hover it above.

Supporting set

  • Secondary: transparent, 1px orange border, orange text, 8px radius.
  • Ghost: frosted translucent, white text, for low-priority paths.
  • Destructive (#E85D3A): delete/cancel only, product UI only.
  • Never two primaries in one view. Never new CTA copy per section.
10

Motion.

Calm and weighty, never bouncy. Motion is an argument, not a decoration: every animation demonstrates the thing its copy claims.

The craft laws

  • One focal element per scene, generous negative space.
  • Bare mono labels. Never pill or badge chips as decoration.
  • Real numbers: ticking timers, eased counters, tabular-nums.
  • Thin 1.5–2px lines with beautiful easing; pulses travel wires.
  • Seamless loops: fade the trail, never hard-reset a scene.
  • Typography itself may animate (the rewrite, the rotating word).

The physics

  • Every loop is IntersectionObserver-gated; nothing runs off-screen.
  • Standard reveal: IO at 0.15, opacity + 26px rise, 90ms stagger.
  • Scroll-driven elements are depth-driven and finish inside their own section.
  • prefers-reduced-motion: finished stills, instant reveals. Always designed, never broken.
  • Layout never moves: fixed slots for rotating words, hard-fixed heights for changing content, width-pinned containers.

Timing tokens

tokenvalueuse
--ease-outcubic-bezier(0.16, 1, 0.3, 1)the house ease: calm, weighty, never bouncy
--dur-fast200mshovers, color shifts
--dur-med450msreveals, state changes
--dur-slow900mslarge choreography
11

Layout.

Structure

  • Container 1280px · gutters clamp(1.25rem → 3rem). Heroes may go full-bleed with 5vw padding.
  • Section padding clamp(6rem → 10rem); spacing on a 4px scale (--s-1…--s-10).
  • Radii: 8px buttons/inputs · 16px media/inner · 24px cards · pill for toggles.
  • Hairlines: rgba(255,255,255,0.08); structural frames get corner nodes.

Composition

  • One wow per page. Everything else is calm typography on the surface.
  • Section grammar: eyebrow → headline (period) → one short paragraph → the element.
  • Text left on the ink, the silk owns the right.
  • Nav: 4 items + log in + the primary. Footer ends every page with the same ask.

The structural frame: hairlines with corner nodes.

12

Applications.

Web

  • Every page: arrival loader (“repley.” breathing in over a filling hairline), Lenis smooth scroll (1.15, expo-out).
  • Diagrams: framed icon tiles (rounded charcoal, hairline, soft top-light) wired with traveling pulses.
  • FAQ: charcoal accordions, orange plus → ×, one open at a time. FAQPage schema always.
  • Legal pages: the prose system; conspicuous clauses stay uppercase.

Social & posters

  • 4:5 feed · 9:16 story. The surface or cinematic amber glass as background; film grain 15–20%.
  • Poster grammar: stacked white statements, one orange line. Display Bold, bottom-left.
  • “REPLEY.IO” top-left in orange caps. Always.
  • No stock photos of handshakes. No screenshots-as-design. Max 2 typefaces per artwork.
13

Governance.

Copy law

COPY.md is the single source of truth for every word on the site. When copy changes on the site, it changes there the same minute. Every metric is ⚠ until the founder approves it.

Originality law

Process and skeletons may be reused; visual signatures are never copied, from anyone, including our own builder’s other brands. Match a reference’s geometry and intent, then build it native to Repley.

Evidence law

Approve on evidence, not promises: layouts on screenshots, motion on frame sequences, performance on measured FPS, claims on dated sources. Competitor numbers carry their fetch date and assumptions, printed.

Repley brand system v2.0 · July 2026 · supersedes the v1.0 playbook · maintained alongside the website. If this page and a new section disagree, one of them is wrong; decide, then update both.