>_ 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: Web software built end-to-end by one operator.
Hero sub-line: I'm Stanimir Nikolov. Full-Stag Digital is my one-operator studio in Eindhoven, Netherlands — web apps, online stores, booking sites. I build them end-to-end and I don't hand you off.
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 written feasibility report before any commitment. src: How I work · step 03
A fixed quote after it. src: How I work · step 04
Requirement changes go to a ledger for the next version instead of silently expanding scope. 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 · 72px48px on small screens — the lockup leads the 112px (80px 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 (provisional)

display-max: 6rem

display: 4.5rem

Built end-to-end

h1: 3rem

One operator

h2: 2rem

A written feasibility report

h3: 1.5rem

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.875rem

SRC: HOW I WORK · STEP 03

metadata: 0.75rem

>_ 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 · commit 3bac74d-dirty · built 2026-07-08 11:45 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 web applications built end-to-end — data model to interface. Type-safe, fast, and yours to own.
Constraint
I define the data model before any UI work begins.
Tradeoff
Higher upfront technical planning, in exchange for faster long-term iteration.
02
E-commerce
Online stores that take payment reliably and don't fight you at checkout. Built to sell, not to impress other developers.
My secondary education was e-commerce (2012–2017); the point hasn't moved since: the store has to take money reliably. I build the catalogue, the checkout, and the payment integration, and I write automated tests (Playwright, Vitest) for the exact paths where a failed step costs you an order.
Promo visual
Technical schematic
Constraint
Payments go through an established processor (Stripe or Mollie, chosen for your market); I never hand-roll payment handling.
Tradeoff
Processor fees, in exchange for the processor carrying PCI compliance and fraud handling.

>_ ProcessStep (with commitment)

03 — Feasibility report
A written recommendation: the direction I'd take, what it involves, and an honest cost — before you commit.
Outcome
A written recommendation you can take to any developer.
A written feasibility report before any commitment.
Fig.03Feasibility report

>_ FactList

Education

2017 –
Software engineering, Fontys ICT, Eindhoven
Since September 2017 — graduation in progress.
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

Not sure it's even possible? That's what the first conversation is for.

You get a written feasibility report and an honest cost before you commit to anything. src: 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, an optional corner pattern accent, 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

Constraint: Payments go through an established processor (Stripe or Mollie, chosen for your market); I never hand-roll payment handling.
Tradeoff: Processor fees, in exchange for the processor carrying PCI compliance and fraud handling.

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.