TROYDesign system v1
Theme
Density
Motion
Accent
Troy · Lunari Group

Signal pulled
out of noise.

Troy is an AI-supported marketing agency. Louin runs the operation; Troy runs the market. Both should read as the same engineering culture seen from a different room.

The ground is near-black because an agency’s actual product is signal pulled out of noise, and signal is only visible against dark. Every value below is measured from getComputedStyle inside the live theme. Flip the theme or the accent in the bar above and every badge on this page re-grades itself. A failing pair has nowhere to hide.

Identity

The Carrier

One 1px line threads the entire property as a single continuous signal — the nav underline, the rule beneath this headline, every section divider, the left rail of the active nav item, and the trace under the footer wordmark. It is not decoration applied to the brand. It is the brand, doing structural work.

idle<Carrier state="idle" />

Present, not speaking. The page's spine — section rules, the nav underline, the footer trace.

carrying<Carrier state="carrying" />

Moving data. Dashes travel with reading direction, and their speed is multiplied by scroll velocity — the line reads faster when the page is moving.

resolving<Carrier state="resolving" />

Working on it. A bright segment sweeps the measure. Loading, submitting, computing.

live<Carrier state="live" />

Connected. Solid, with a pip holding the end of the line. Live campaigns, active sessions, real-time figures.

Identity

The mark

The mark is a node on the Carrier, not a picture beside it. The line enters from the left, and where it meets the stem there is a node — which is also a T.

<TroyMark />One drawing, 16px to poster
16px
24px
32px
48px
72px
live
<TroyWordmark />The O is a ring, not a glyph
Carrier off below 1.25rem — a 1px rule inside a 0.7em ring is mud
Clear space & minimum sizeOne stem width on every side

Clear space is one stem width, measured from the outer edge of the carrier. Minimum sizes: 16px for the mark, 14px cap height for the wordmark. Below that the counter of the O closes up and it reads as a solid blob.

Endorsement lockupsBoth directions — pick by looking
Stacked
A Lunari Group company
Inline
Lunari Group
Standalone
The mark is a node on the CarrierClick to step the state
idle
MisuseEach of these has been done to a logo you know
Never stretch
Never rotate
Never recolour the mark
Never add effects
Foundations

Colour

Four surfaces, four inks, one accent and five protected meanings. The accent never impersonates a semantic colour and no semantic colour ever stands in for the accent.

Elevation ladder

On a dark ground, elevation is carried by the surface getting lighter — not by the shadow. Shadow only reinforces what the surface already says.

Voidmeasuring…
--troy-void
 

The page floor. Everything sits on this.

Surfacemeasuring…
--troy-surface
 

Cards — the default raised object.

Surface hovermeasuring…
--troy-surface-hover
 

Raised, under the cursor.

Overlaymeasuring…
--troy-surface-overlay
 

Dialogs, popovers, the command palette.

Wellmeasuring…
--troy-well
 

Sunken — tracks, empty bars, inset panels.

Bonemeasuring…
--troy-bone
 

The warm counter-surface for inverted sections. Carries its own ink.

Text ramp

Four steps, measured against the surface they most often sit on. Four is the ceiling — a fifth is always within measurement error of one of the others, and that is how you end up with two greys nobody can tell apart.

Primarymeasuring…
--troy-text
 

Headings, figures, body.

Secondarymeasuring…
--troy-text-secondary
 

Supporting body copy.

Mutedmeasuring…
--troy-text-muted
 

Captions, mono labels, axis ticks.

Faintmeasuring…
--troy-text-faint
 

Decorative, disabled, placeholder — never body text.

Signal ramp

Fill and ink are separate tokens on purpose. An accent bright enough to fill a button is unreadable as text on that same fill — so the fill token is never a text colour, and the text token is never a fill.

Signalmeasuring…
--troy-signal
 

THE accent. The carrier line, status pips, the focus ring, one primary button per screen — and nothing else.

Signal inkmeasuring…
--troy-signal-ink
 

The accessible text version of the accent.

Signal tintmeasuring…
--troy-signal-tint
 

Selection, active rows, subtle fills.

Hairlinemeasuring…
--troy-line
 

The primary structural primitive. Every card, chip, divider and input is defined by this before it is defined by anything else.

Semantic colours

A protected set. These five mean something specific, everywhere, forever.

Positivemeasuring…
--troy-pos
 

Up, won, live, delivered.

Negativemeasuring…
--troy-neg
 

Down, lost, failed, over budget.

Warningmeasuring…
--troy-warn
 

Off pace, expiring, needs a human.

Infomeasuring…
--troy-info
 

In flight — running, pending, processing.

The collision check

The one test that decides whether an accent is usable. If the accent chip and a status chip read as the same thing at real size, the status system stops meaning anything. Switch accents in the bar above and watch this row.

Brand
Live
Semantic
WonRunningOff paceOver budget

Troy’s accent is Ultramarine. The alternatives stay switchable so the decision remains inspectable rather than remembered — and so the next person can see what was rejected, not just what was picked.

Foundations

Type

A hard boundary at 24px: Archivo above it, Geist below it, Geist Mono for everything that is a label rather than a sentence. No exceptions. Mechanical rules like this are what separate a system from a mood board.

Display — Archivo, 24px and above

The display scale is fluid, so these numbers are measured from what is rendering at your current viewport — not quoted from the clamp() formula. Resize the window and they change.

.t-display-xlmeasuring…Hero. One per page.

Signal pulled out of noise

.t-display-lgmeasuring…Section openers, CTA bands.

Built to be measured

.t-display-mdmeasuring…Section headings.

Performance, compounded

.t-display-smmeasuring…Card titles, sub-heads. The floor.

Where the display face stops

Body and meta — Geist, below 24px

Below 24px the display face is never used. Body copy is Geist; anything that labels rather than reads is Geist Mono, uppercase, with positive tracking.

.t-leadmeasuring…Opening paragraph.

Troy runs continuous optimisation across every channel a brand owns.

bodymeasuring…Default body copy.

Attribution windows, creative rotation and budget pacing are decided by the model and reviewed by a human every morning.

.t-monomeasuring…Labels, eyebrows, metrics.

Campaign performance · Q3

Numerals

Money is Geist with tabular numerals so it stays on-brand and still aligns in a column. Mono is reserved for identifiers, where character-level distinction matters more than the brand does.

Figures — tabular
$1,284.00$96,110.55$7.40$182,004.19

Digits share a width, so decimal points line up in a column.

Identifiers — mono
CMP-2026-0184TROY-AUD-0O1I8BSEG-EU-0042

Mono is why 0O and 1I stay distinguishable in a campaign code.

Foundations

Space, radius, elevation

The parts of the system with no colour in them — and the place the two registers are most visibly different.

Space

A 4-based scale, named by pixel so the name can never lie about the value.

2
4
6
8
12
16
20
24
32
40
56
72
96
128

Radius

This is the register split made visible. A dense surface is 8px and precise; a marketing surface is 18px and generous. Same token file, two jobs.

--r-xs · 4Dense
--r-sm · 6Dense
--r-md · 8Dense
--r-lg · 14Generous
--r-xl · 18Generous
--r-2xl · 24Generous

Elevation

Three levels, no more. A fourth would only ever be used by accident.

e1
--troy-e1

A card.

e2
--troy-e2

A card under the cursor.

e3
--troy-e3

Anything floating above the page.

Foundations

Motion

Two transitions. Not three. A component that needs a value between them is a component whose job is unclear — fix the component, not the token.

motion.hero
spring · bounce 0 · 1.1s · 20px

Headlines, hero choreography, the Carrier draw, section entrances. Long duration, short travel — the single most copyable premium signal in the reference set.

motion.ui
spring · bounce 0.18 · 0.42s · 10px

Chips, cards, buttons, nav, tabs, toasts — every hover and press. A trace of life, under half the duration.

Duration ladder — the CSS mirror
instant 120msquick 180msbase 280msenter 450mshero 1100ms
The three permitted curves
--ease-signal
cubic-bezier(0.22, 1, 0.36, 1)

Entrances. Arrive fast, settle.

--ease-gate
cubic-bezier(0.76, 0, 0.24, 1)

Wipes, reveals, clip-path, scroll scrub.

--ease-exit
cubic-bezier(0.32, 0, 0.67, 0)

Dismissals only.

Foundations

Voice and formatting

The part of a design system that is usually left out and then causes the most inconsistency. Most of the difference between a site that feels considered and one that feels assembled is in these rules, not in the colours.

Copy rules
Buttons name the outcome
NoSubmit · OK · Confirm
YesSend brief · End engagement · Start a project
Errors say what to do
NoInvalid input.
YesEnter a monthly figure. We use it to tell you honestly whether we are the wrong size for you.
Empty states name the next action
NoNo results found.
YesNo engagements match those filters — clear one and try again.
Claims carry their source
NoWe drive massive growth.
YesContribution margin up 38% over two quarters. Halden Field, 2026.
FormattingOne rule per kind, everywhere
KindRuleExample
MoneyTabular Geist, symbol first, no decimals above $100$184,250 · $7.40
Compact moneyAxis ticks and tight tiles only — never in a table$184k · $1.2M
PercentOne decimal. Deltas always signed97.2% · ↑12.4%
MultipleOne decimal, lowercase x4.2×
DateDay + short month. Year only when not this year18 Sep · 8 Dec 2025
Date + time24-hour, no seconds18 Sep, 09:14
RelativeUnder 7 days, then switch to absolute4 minutes ago
IdentifierMono, uppercase, hyphen-groupedCMP-2026-0184
RangeEn dash, no spaces41–60 of 237
Sentence case, everywhere

Headings, buttons, labels, table columns and nav items are all sentence case. Title Case is a decision that has to be re-made for every string, which means it will be made inconsistently — and the inconsistency is more visible than either choice.

Components

Actions

Six variants, and only one of them is loud. A screen with three primary buttons has no primary action at all — that constraint is what the whole set is built around.

<Button variant />One primary per screen
<Button size />md follows the density switch
<Button loading />Click it — the width holds
Read the measurement note
<ButtonGroup />Reads as one control
Components

Signals

Status, tags, pips and deltas. A status resolves its tone from one map, so it means the same thing in a case study, a dashboard and a proposal without anyone remembering to keep three files in sync.

<StatusBadge status />Tone resolved from one map, never per screen
LiveRunningScheduledOn paceOff paceOver budgetDraft
<Badge tone /> · <Tag />Semantic vs editorial
Live nowArchivedIn review
Performance mediaCreativeAnalytics
<StatusPip state />The smallest place the system appears
idlelivewarnfault
<Delta invert />Down is good for cost per acquisition
Revenue+12.4%-6.1%0%
Cost per acquisition+12.4%-6.1%0%
Components

Content

The blocks the marketing site is actually assembled from. Capabilities and work are editorial index rows rather than card grids — the grid is what you reach for when the copy is not strong enough to carry the layout.

<ServiceRow />Editorial index, not a card grid
01

AI strategy & orchestration

We map where a model actually beats a human in your funnel, then wire the handoffs so both do the part they are good at.

Opportunity auditAgent designHuman review loops
02

Performance media

Budget pacing, bid strategy and creative rotation decided nightly by the model and signed off every morning by a strategist.

Paid searchPaid socialRetail media
03

Creative production

Concepts built to be varied. We ship the system that generates the next two hundred cuts, not a single hero film.

ConceptingMotion & videoVariant systems
<WorkRow />Hover draws the Carrier across the rule
01

Halden Field

Outdoor equipment

Rebuilt the measurement layer, then let it decide the media split for two quarters.

Performance mediaAnalytics
+38%
Contribution margin
2026
02

Norlind

B2B SaaS

Replaced a 14-person content desk with a system of six agents and two editors.

ContentAI strategy
4.2×
Publishing throughput
2026
03

Vessel & Co

Direct to consumer

Creative variant system took the brand from 9 live assets to 340 without a new shoot.

CreativePerformance media
−54%
Cost per acquisition
2025
<StatTile />Counts up on first view
184M
Media under management
USD, annualised
62
Active engagements
Across 11 markets
340k
Creative variants shipped
Trailing 12 months
9 yrs
Median client tenure
Top 20 accounts
<TestimonialCard />
They rebuilt our measurement before touching a single campaign. Nobody else was willing to spend the first quarter on plumbing.
Devin Alarcón
VP Growth, Halden Field
The agents do the volume, our editors do the judgement. Troy was clear about which was which from the first workshop.
Priya Raghunathan
Head of Content, Norlind
Every generated line is traceable to a source document. That is the only reason legal let us run it.
Marcus Oyelaran
CMO, Ardent Health
<ProcessStep />Connected by the Carrier
01

Instrument

We fix measurement first. Every recommendation after this depends on the numbers being real, so nothing else starts until they are.

02

Orchestrate

We decide what the model owns, what a human owns, and where the handoff sits — written down, with a named reviewer on each loop.

03

Compound

The system runs nightly and is reviewed every morning. Performance is a slope, not a launch.

<TierCard featured />Featured inverts onto bone — it does not grow or glow

Audit

$18,000
one engagement

For teams who suspect the numbers are wrong and need to know before they spend another quarter.

  • Measurement teardown
  • Channel incrementality read
  • AI opportunity map
  • 90-day plan

Operate

Most taken
$32,000
per month

For brands ready to hand over the day-to-day and keep the strategy in-house.

  • Everything in Audit
  • Performance media
  • Creative variant system
  • Nightly optimisation
  • Named strategist

Embed

From $60,000
per month

For companies rebuilding the whole marketing function around a model, with Troy inside the team.

  • Everything in Operate
  • Lifecycle & CRM
  • Warehouse & pipelines
  • Agent development
  • Quarterly board reporting
<LogoWall />Pauses on hover; stops under reduced motion
  • Halden Field
  • Norlind
  • Vessel & Co
  • Ardent Health
  • Kestrel Labs
  • Marrow
  • Ostend
  • Brightwater
Components

Input

Two rules run through all of it. Error state lives on the field wrapper, not on five children that each have to remember. And the focus ring is the only place the accent appears in a form.

<Field> + <Input> / <Textarea> / <Select>Error lives on the wrapper

Who we would be working with.

Enter a number. We use it to tell you honestly whether we are the wrong size for you.

Shown to the strategist who picks this up.

<Checkbox> · <Radio> · <Switch>
Nightly optimisation
Auto-approve creative variants
Unavailable on this plan
Components

Disclosure and states

Accordions, loading, empty and callouts — the parts of a site that are usually left until last and then decide whether it feels finished.

<Accordion />Answers stay in the DOM when closed

It means a model does the volume work — variant generation, bid adjustment, segmentation, first-draft copy — and a named human signs off on anything that reaches an audience. We write down which is which for every engagement, and you get that document.

<Skeleton /> · <SkeletonCard />
Loading
<EmptyState />Names the next action
No engagements match those filters

Three sectors and two service lines is a narrow cut. Clear one and try again.

<Callout tone />
Components

Chrome

The nav and the footer — the two components every page carries, and the only two that have to work over every surface the site owns.

<Nav />mix-blend-mode: difference — it inverts itself

The nav above is one component. Flip the section beneath it and it inverts on its own — no scroll listener, no per-section theme state, no boundary to get wrong.

<Footer />The Carrier exits the page here
Components

Overlays

Dialog, drawer, tooltip, toast and the command palette. Five surfaces, one dismiss contract — Escape closes, Tab cycles inside, and focus returns to whatever opened it.

<Dialog /> · <Drawer /> · <CommandPalette /> · <ToastStack />Escape closes, focus is trapped and returned

Every overlay here shares one dismiss behaviour: Escape closes it, Tab cycles inside it, and focus returns to whatever opened it. The version that gets skipped is always the one written a fourth time, so it is written once.

<Tooltip />Opens on hover AND on focus
340k variantsTab to either control — the tooltip opens. Information that only exists behind a hover does not exist for a lot of people.
Components

Motion surfaces

The interactive components the homepage is built from, and the signal bus that drives them. Flip Motion to Reduced in the bar above and every one of them falls back — which is the point of having the switch.

lib/design/scroll.ts · onFrame()One clock, one signal bus
v+0.000scroll this page — signed, normalised −1…1, smoothed
<WordRibbon />Speed and direction follow the scroll
  • Strategy
  • Paid media
  • Creative
  • Content
  • Lifecycle
  • Measurement
<RevealText /> · <ScrambleText />CSS-driven, so it runs before hydration
Built to be measured,line by line.
CMP-2026-0184 · RESOLVED · 4 FIXES RANKED
<MarketingScore />Product preview
Choose a business

Healthy creative and steady pacing, held back by tracking gaps that make every other number less trustworthy than it looks.

Product preview · illustrative scenarios, not real accounts

61Troy Score / 100

Online store: Troy Score 61 out of 100.

  • Creative71
  • Targeting58
  • Measurement44
  • Pacing80
Top three fixes
  1. 01Repair purchase tracking on mobile checkoutHigh
  2. 02Retire the nine ads that have not converted in 30 daysHigh
  3. 03Add a win-back email for lapsed buyersMedium
  • Do it yourself · Free instructions, always
  • Agent drafts it · Invite-only, from 2027
  • Hand it to Troy · Available now
<HelpDial />The business model, as an interaction
Setting the strategy: Troy's team
Making the creative: Agents
Running paid media: Agents
Reporting and analysis: Agents
Approving what ships: Troy's team
Troy's team · Available now
From $4,000per month, all in

Companies that want outcomes rather than software, with a named strategist accountable for them.

Talk to a strategist

Troy’s team is available today. The other two ways to buy are being built, and their prices are indicative until they open.

<AgentConsole />Halts until a person decides
Product preview · scripted demonstrationAgents working
  1. Starting…
<SignalField /> · <PlatformTour /> · <OutputGallery />Pinned — they own the viewport

Three components pin the viewport and are scrubbed by scroll, so they cannot be shown honestly inside a document. See them on the homepage. Each is one DOM with two layouts: pinned on a wide screen with motion allowed, and plainly stacked on a phone or under reduced motion.