>_ brand styleguide · magazine

The brand, in full.

A neo-brutalist engineering terminal: pure black ground, white ink, one phosphor-green accent reserved for commitments, one monospace family, zero radius, 2px borders, hard offset shadows, and readouts that are real. It looks like an instrument, not a brochure. Everything below is rendered from the tokens and the brand data — swap the tokens and the whole document re-skins.

tokens: v0.1.0
source: brand/tokens.json · design-language.md
status: handoff artifact · noindex

>_ 01 / brand

Identity & voice

Voice is first person singular — I, never we. A plural voice asserts a team that does not exist. Claims sit next to evidence or are written as commitments; marketing adjectives without adjacent evidence are banned outright.

>_ locked copy

Hero headline: I build, modernise, and maintain the web software your business runs on.
Hero sub-line: One accountable person, end to end: I don't hand you off. Full-Stag Digital is a digital solutions studio in Eindhoven. Whether it's something new, something you've inherited, or something that's grown past its limits, you deal directly with the engineer who owns the result.
Primary CTA: Start the conversation
Closing CTA: Send me your problem
CTA claim line: Odd problem, weird integration, or no idea where to start — bring it.
Contact lead-in: Email is the way in:

>_ commitments — the one job green does

A paid feasibility report, a fraction of the build, before you commit to it. src: How I work · step 03
A fixed quote after it. src: How I work · step 04
New ideas mid-build don't quietly inflate the bill: they're planned into the next version, as your decision. src: stated commitment, no ledger exists yet

>_ voice — do / don't

First person singular

don't We engineer digital systems for forward-thinking teams.

do I build web software end-to-end, and I don't hand you off.

No marketing adjective without adjacent evidence

don't A seamless, cutting-edge, best-in-class platform.

do A written feasibility report and a fixed quote before you commit.

A claim sits next to its evidence, or is written as a commitment

don't Trusted by industry leaders worldwide.

do Requirement changes go to a ledger for the next version, not silent scope creep.

Banned adjectives: innovative, seamless, cutting-edge, world-class, best-in-class .

>_ 02 / brand

The mark

The stag head is the only illustrative element the brand owns. Base fill is white or currentColor — never solid green (one scoped exception: the favicon, Amendment E), never distorted. Shipped sizes (escalated 2026-07-06): CTA glyph 32px, nav 72px, footer 88px, hero up to 320px. Minimum 24px; clear space at least 25% of the mark's height.

cta glyph · 32pxinside the primary CTA (xl button) as identity framing

nav · 48px36px on small screens — the lockup leads the 72px (56px small) bar

footer · 88pxSiteFooter brand row

hero · 320px224px on small screens — the hero identity rail

glow trace (Amendment C)

Clear space At least 25% of the rendered mark height stays clear on all sides — no text, border, another mark, or busy texture enters the zone. At hero scale that is roughly two 40px grid units. A mark-plus-wordmark lockup (nav, footer) is one unit: clear space applies around the lockup, not inside it.

Minimum size 24px — the legibility floor (the smallest shipped rendering is the 32px CTA glyph). Below the floor the outline closes up: use the >_ prompt as the identity cue instead of a smaller mark.

Base fill is white or currentColor — never solid green, never distorted or cropped.
The only illustrative element the brand owns; icons are lucide, used only to disambiguate a label.
Amendment C glow trace is scoped to exactly this treatment on exactly this element; it generalises to nothing.
All motion on the mark is removed under prefers-reduced-motion.

>_ variant inventory (source → shipped)

The mark — source of truth: brand/assets/deer-head-outline-1.svgSingle closed compound outline, white fill. Every shipped rendering derives from it.
Live in-app mark: app/components/StagMark.vueoutline-1's path inlined verbatim; fill driven by tone (ink / accent / current); aria-hidden.
Static asset: public/brand/stag-mark.svgByte-identical copy of outline-1, served at /brand/stag-mark.svg.
Tab icon — Amendment E: public/favicon.svgoutline-1 on a black backdrop with the fill flipped to the accent green. The one green-filled rendering — ratified as a scoped exception at operator direction (Amendment E, 2026-07-06); like Amendment C it generalises to nothing else.
Full illustration: brand/assets/deer-head.svg → public/brand/stag-mark-full.svgThe detailed gradient-shaded rendering — a static asset for external/manual use, never the UI mark.
Unused alternates: brand/assets/deer-head-outline-{2,3}.svgSource options only; no shipped derivative traces to either.

>_ misuse — never

✕ Solid green fillGreen is the commitment signal, not a paint — a green mark spends the reservation.

✕ Recoloured to a status colourThe mark wears ink, white, or currentColor; no semantic colour may be borrowed.

✕ DistortedNever stretched, squashed, or skewed — the geometry is the identity.

✕ CroppedThe full outline or nothing; a partial mark reads as an error.

✕ Soft glow or blurred shadowSoft shadows are banned brand-wide; Amendment C's traced glow is the only scoped exception.

✕ On busy groundClear space keeps textures, stripes, and text out; hazard stripes mark boundaries, not backdrops.

Wordmark lockups

Pending

Three dot-pattern wordmark lockups are planned (PLAN.md stage 0) but not on disk. They are documented here when the operator ships them — never mocked up in the meantime.

>_ 03 / brand

Colour

Colour carries meaning before branding. Every colour maps to a semantic role; no colour may be introduced without one. The binding rule is on the accent: green marks commitment and nothing else.

>_ semantic roles

StructureBorders, separators, grid lines#ffffff--color-bordertoken: color.edge.border

InformationPrimary narrative ink#ffffff--color-foregroundtoken: color.ink.foreground

ContextSecondary text, labels, metadata#a0a0a0--color-muted-foregroundtoken: color.ink.muted

CommitmentPromises, guarantees, primary actions, live evidence, focus#00ff41--color-accenttoken: color.accent.default

ViolationErrors and destructive actions only — never decoration#ff3131--color-destructivetoken: color.status.destructive

>_ surface steps

Background#000000--color-backgroundtoken: color.surface.background

Card#0a0a0a--color-cardtoken: color.surface.card

Elevated#141414--color-elevatedtoken: color.surface.elevated

>_ accent — one atomic state machine

Default, hover, and active change together or not at all. A lone default flip splits the press state's identity — measured: red at rest, green on hover. Hover and active are derived from the default in the skin.

Default#00ff41--color-accenttoken: color.accent.default

Hover#33ff66--color-accent-hovertoken: color.accent.hoverderived from default

Active#66ff88--color-accent-activetoken: color.accent.activederived from default

>_ status accents

Success#00ff41--color-successtoken: color.status.success

Warning#fbbf24--color-warningtoken: color.status.warning

Info#60a5fa--color-infotoken: color.status.info

Destructive#ff3131--color-destructivetoken: color.status.destructive

>_ 04 / brand

Typography

JetBrains Mono carries the whole identity. The distinction a second typeface would carry is expressed inside the mono family instead — through weight, case, colour, and tabular figures.

>_ four semantic levels

Narrative: Prose a human readsRegular weight, sentence case, foreground
Specification: Headings, section labelsBold, uppercase, wide tracking
Evidence: Numbers, metrics, code, commitmentstabular-nums, accent or foreground, source + date adjacent
Metadata: Labels, captions, provenance linesSmall, muted ink, uppercase where terse

>_ type scale (1.25 text · 1.618 display)

display: 5.11rem

Built end-to-end

h1: 3.16rem

One operator

h2: 1.953rem

A written feasibility report

h3: 1.5625rem

Email is the way in.

lead: 1.25rem

I build them end-to-end and I don't hand you off.

body: 1rem

Secondary detail and fine print.

small: 0.8rem

SRC: HOW I WORK · STEP 03

metadata: 0.64rem

>_ 05 / brand

Space, elevation, texture

Hierarchy is built from spacing (8px base), 2px borders, and surface steps, then — as the only sanctioned third dimension — a hard offset shadow. Soft or blurred shadows are banned globally; radius is 0 everywhere.

>_ radius & hard offset shadow

radius: 0

.brutal-shadow

.brutal-shadow-accent

.brutal-press (hover)

>_ texture

.brutal-gridEngineering grid: fine 5% lines on 40px, major 11% on 200px. Plotter paper behind sections.

.halftoneSingle-density 40px grid — a lighter structural wash.

.hazard-stripesMarks genuine boundaries (dev-only zones, destructive areas), never decoration.

.scanlinesOn probation — permitted only to mark a semantic zone (the /dev lab), not public content.

>_ 06 / brand

Motion

Motion communicates a state change — press, reveal, focus, load. Durations come only from tokens; no springs, no bounces, no scroll choreography. Three ambient signatures are sanctioned because they signal liveness, and all three vanish under prefers-reduced-motion.

>_ durations

fast90ms

normal180ms

slow320ms

>_ the three sanctioned signatures (live)

>_ terminal prompt.brutal-blink · cursor

tokens v0.1.0 · chrome.liveReadout.commitLabel 8487dc8 · chrome.liveReadout.builtLabel 2026-07-12 06:57 UTC · signature demo — a ticker carries a real readout, never decoration ·

.brutal-marquee · ticker

Amendment C glow trace .stag-trace · 16s loop

All three are removed entirely under prefers-reduced-motion.

>_ 07 / brand

Components

Every component is the real shipped one, rendered live in its variants and states — not a screenshot. This is the implementation reference.

>_ BrutalButton — variants

>_ the primary CTA — focal point (Amendment D)

Start the conversation

The one green-stays-green button. Variant "cta" walks the accent atomic group (default → hover → active) instead of inverting to transparent, sits one elevation tier above every other block (8px shadow + the matching deep press), and carries the stag glyph as identity framing. One per page — the closing "Start the conversation" (and the hero's, on the homepage). Nav, form submits, and utility buttons keep the quieter variants so the focal point stays focal.

>_ ServiceCard (teaser) & ServiceBrief (with inspection layer)

01
Web apps & SaaS
Custom software shaped around the way your business actually works: yours to own outright, and built to grow with you.
How I work
I design the data model before the interface, so everything you see is built on a foundation that's already right.
What you get
Software that scales with your business instead of hitting a costly rebuild, because the planning is done up front.
02
E-commerce
An online store that's easy to buy from and takes payment reliably, every time. Built to sell.
I've been in commerce since my school years (e-commerce education, 2012–2017), and the point hasn't moved since: the store has to take money reliably. I build the catalog, the checkout, and the payments, and I test the exact paths where a failure would cost you an order, automatically, before every release.
Who it's for: For anyone selling products or services online who needs the checkout to work every time, not most of the time.
What you get
- A working catalog and checkout
- A payment integration through an established processor (Stripe or Mollie)
- Automated tests (Playwright, Vitest) on the checkout paths that cost you an order
Promo visual
Technical schematic
How I work
Payments run through an established processor (Stripe or Mollie, chosen for your market), so card data never touches your system and the security burden never becomes yours.
What you get
A checkout that takes money reliably, with the compliance and fraud risk carried by the processor, not you.

>_ ProcessStep (with commitment)

03: Feasibility report
A written recommendation that de-risks the build for you: the direction I'd take, what it involves, and an honest cost, so you commit with confidence. A paid service, priced at a fraction of what building blind would cost.
Outcome
A written recommendation you can take to any developer.
What I need from you
Honest steers on priorities, constraints, budget, and timeline, so the recommendation reflects your reality.
A paid feasibility report, a fraction of the build, before you commit to it.
Fig.03Feasibility report

>_ FactList

Education

2017 –
Software engineering, Fontys ICT, Eindhoven
Since September 2017.
2024
Digital Experience Design minor certificate, Fontys ICT
Minor certificate, completed 2024.

>_ PendingSlot (honest absence)

VAT (BTW) number

Pending

Not yet designated for publication. Renders visibly pending — never a fabricated value.

>_ LegalEntry

Trade name: Full-Stag Digital

>_ ContactForm (disabled prototype preview)

>_ CtaBlock

Bring me the problem. I'll find the solution that fits your business.

The first conversation is free and in plain words. Then the paid feasibility report gives you the direction, the honest cost, and the right way forward, so you commit with confidence instead of building blind. source: How I work · step 03

Start the conversation

>_ SiteNav — index links · accent hover · active underline

The real component in a static frame (in situ it is the sticky header at the top of this page). Each link takes a position-derived 01/02… index and fills with the accent on hover; the link matching the current route carries a 2px underline via aria-current — visible on the live nav when you are on a linked page, not on this unlisted styleguide. Below 1024px the links collapse behind the menu toggle; nothing is hover-only.

>_ SiteSection — the index-rail section shell

Section rail

The shared full-width section shell: an oversized index block, a terminal-style title, and a contained inner wrapper. The homepage sections compose from it.

SEC.00

Content dropped into the default slot sits in the contained inner wrapper. The index is display text kept in sync by hand — section wayfinding, so it renders in the accent only as a sanctioned index, never as a commitment.

>_ InspectionLayer — persistent aside ≥1024px · disclosure below

How I work: Payments run through an established processor (Stripe or Mollie, chosen for your market), so card data never touches your system and the security burden never becomes yours.
What you get: A checkout that takes money reliably, with the compliance and fraud risk carried by the processor, not you.

The brand's interaction signature: Constraint / Decision / Tradeoff rows are always reachable. At ≥1024px it is a persistent aside (shown open here); below 1024px it collapses behind a real [+] / [-] disclosure button that is keyboard-focusable — never hover-only. This is the same layer embedded in ServiceBrief above.

>_ SiteFooter

Live in situ at the foot of every page. Brand colophon, the sitemap and legal columns, and the confirmed studio line (Eindhoven, KvK) — first-person, no marketing adjectives, the same voice invariant the whole site holds.

>_ 08 / brand

Block grammar

Pages compose from typed blocks; blocks compose from primitives (Claim, Evidence, Constraint, Decision, Commitment, Action, Context, Reference, Outcome, Tradeoff). Each block states what it must contain and what it may add.

Block	Requires	Optional
Hero	Claim, Action	Commitment, live Evidence
Service	Claim (plain layer)	Constraint, Decision, Tradeoff (inspection layer)
Process step	Claim, Outcome	Commitment, Evidence
Ledger row	Outcome, Evidence (with provenance)	Reference, Tradeoff
CTA	Action, Commitment	Constraint
Contact	Action, Context (real facts only)	Commitment

>_ 09 / brand

Honesty & evidence

Every visual element is honest or load-bearing, or it goes. Data shown is real; a readout that cannot be made real is removed, not faked. These are the mechanics that keep the terminal aesthetic true.

Provenance label src: How I work · step 03 Muted, never green — a label is navigation, not a commitment. A step inside a page is cited as "page · step NN" and anchor-links to the step itself; the bare "/ NN" form is retired because section numbers are site-canonical, so it read as a nav coordinate.

Honest absence src: stated commitment — no ledger exists yet No statistics exist yet; the slot says so rather than inventing one.

Disabled control [ prototype — submission pending, use email above ] A live-looking dead control is a lie; it renders visibly disabled.

Killed under the rule fake coordinates · SYS/OK strings · booking slots · HUD rings Ornament that measures nothing fails the honesty rule.

Live-data readout — real sources or absent The salvaged terminal panel (Amendment D): self-metrics from real sources only. Today that is the git short-hash (dirty-suffixed when the tree was) and the UTC clock, self-computed at dev-server start and at build; Lighthouse scores, pipeline status, and availability stay absent until a real source exists. Green marks the value — live evidence, rendered confident; the label and the src line stay muted. Terminal chrome frames real values; it never pretends to be data.

>_ 11 / brand

Invariants & governance

Invariants come in two classes. Presentational ones are reversible values with no truth content — bendable under a sanctioned experiment. Truth invariants are never bendable; the correct response to a request that breaks one is refusal with citation.

PresentationalRadius, colour values, type, borders — reversible values with no truth content. Under a sanctioned experiment they may be bent, measured, and reverted.

TruthNo fabrication, provenance, the first-person voice. Never bendable — the correct response to a request that breaks one is refusal with citation.

>_ tier 1 — machine-checked

01Colours only from tokens — no arbitrary hex, rgb, or unknown utility classes.
02border-radius is 0 everywhere; no soft box-shadow outside the .brutal-shadow layer.
03Motion durations/easings only from tokens; no infinite loop outside the three sanctioned signatures.
04Every Evidence node carries source and date (content-schema gate).
05Copy contains no first-person plural and no banned marketing vocabulary (prose linter).
06Templates pass accessibility linting; public pages emit JSON-LD.

>_ tier 2 — judgment-checked

01Classify every element REQUIRED / SUPPORTING / DECORATIVE / MISLEADING — delete the last two.
02Strip test: with CSS off, the page still makes its argument in order.
03Survival test: would this element exist if colour, motion, and branding were removed?
04Third-reader test: could an agent, given only this page, answer the buyer question and act?

>_ transformation rules

Hierarchy: Spacing, then borders, then surface steps, then a hard offset shadow. Never a soft shadow or colour wash.
Emphasis: Weight and case, then size, then accent — only if it is a commitment. Never a new colour.
Grouping: Whitespace, then a border. Never a rounded card.
Delight: Make a readout real, or expose a decision. Never add an ornament.
Trust: Add evidence with provenance, or a commitment. Never add an adjective.

>_ forbidden outright

Fabricated data of any kind — fake telemetry, coordinates, booking slots, statistics.
Hover-only information (excludes keyboard and touch).
Decorative symbolic artefacts — spheres, HUD rings, ornament that measures nothing.
Soft or blurred shadows; rounded corners.
Marketing adjectives without adjacent evidence.
Any colour without a semantic role.

Change control

A request that breaks a presentational invariant is answered refuse → formal amendment → implement : the reviewing agent refuses with citation until the operator issues a scoped amendment, then implements it exactly. The accent index numerals and the mark's glow trace both entered this way.

>_ 12 / brand

Colophon

This magazine renders from the brand's own source of truth. Nothing here is hand-copied — the values trace to the tokens, the components are the shipped ones, and the copy is the ratified deck.

Token source: brand/tokens.json · v0.1.0; Values read live via app/utils/brand.ts.
Content source: design-language.md · agent-kit · site.ts; Copy is the operator-ratified deck.
Templatable: Swap the tokens, re-skin the document.; Fully real once the token build script lands; today @theme is hand-synced with the source and CI diffs it.
Framework seam: A disciplined internal design system.; Build the renderer once; every future brand instance earns its own magazine by swapping tokens.