A system for building
AI-native software, without theatre.
Brand essence
We are builders. AI-native from day one. We believe the next great software company will look nothing like the last one.
We operate lean and ship working software: Solutions for people, Factory for products, Labs for what comes next, sharing one quiet, confident master brand.
The system speaks builder-direct: evidence over poetry, clear over clever, confident without theatre.
Anatomy, construction grid, sub-brands, scale, applications, anti-patterns: the full spec for the canonical Dinnartec mark.
Voice & tone
The system speaks like a builder writing, confident, specific, never decorative. No literary metaphors borrowed from other crafts. Below: four principles, three headline examples, two body-copy examples, and a banned-phrase table that exists because we get asked, often.
Principles
We sound like an engineer writing, not a marketer pitching. No metaphors borrowed from other crafts (no essays, no presses, no editors). Long sentences are fine when they earn it; bullet lists only when items are genuinely parallel.
Name the company. Name the number. Name the year. Name the technology. Abstraction is what people use when they have nothing to say.
“We ship,” not “we innovate.” “We build,” not “we leverage.” The language of someone at a keyboard, not someone in a meeting.
No Title Case Headlines. No ALL-CAPS for emphasis (except mono labels). No exclamation marks. No emoji. The work carries the weight.
Headlines, sentence case, no exceptions
Sentence case + concrete count + concrete structure. Title case + abstract verb is corporate cold.
Specific number, specific outcome. The bad one could be any company.
Names the relationship and arrangement. The bad one tells you nothing.
Body copy, concrete or silent
We built a single source of truth in 11 weeks and recovered $340K in uninvoiced revenue in the first quarter of operation.
Our innovative solution helped the client achieve significant operational efficiencies and unlock new revenue streams.
Real numbers, real timeline. Vague verbs hide that you have nothing to say.
Two founders. AI-native from day one. One internal agent (NAVI) operating behind three branches.
A passionate team of seasoned professionals delivering best-in-class solutions globally.
Concrete count, concrete operating model, concrete structure. Buzzword density signals you are hiding.
Banned phrases & substitutes
| Don’t write | Write instead |
|---|---|
| Leverage synergies | Use what we have. Combine X and Y. |
| Empower founders | Build for founders. Help founders ship. |
| Unlock the power of | (just describe what it does) |
| Cutting-edge | (name the specific tech) |
| Game-changing | (name the specific change) |
| AI-powered | (don’t advertise it, show it) |
| World-class | (provide evidence) |
| Best-in-class | (provide evidence) |
| Innovative solution | (say what it actually is) |
| Seamless experience | (describe the actual flow) |
Typography
Cadet type foundry, BIPRK. A geometric display with Latin-American warmth in its curves, the ‘a’ and ‘g’ are quietly imperfect. We chose Syne because it is institutional when set at 700, playful at 800, and carries a builder’s attitude.
Omnibus-Type, open source. A grotesque with generous counters that reads calmly at every size. Rigorous without being cold, the system’s voice of reason.
Mono
The engineers’ typeface, by engineers. Mono carries coordinates, labels, status, code, timestamps, the scaffolding around editorial prose.
Type scale
| Token | Font | Size | Line | Tracking | Weight | Use |
|---|---|---|---|---|---|---|
| hero | Syne | clamp(80, 12vw, 200px) | 0.95 | -0.045em | 400 / 700 | Brand hero, one per page |
| h1 | Syne | clamp(64, 9vw, 144px) | 0.95 | -0.035em | 700 | Page opener |
| h2 | Syne | clamp(40, 5.2vw, 72px) | 1.05 | -0.02em | 400/700 mixed | Section title |
| h3 | Syne | 30px | 1.15 | -0.02em | 600 | Card title |
| h4 | Syne | 22px | 1.2 | -0.02em | 600 | Sub-card |
| lead | Archivo | 19px | 1.7 | 0 | 400 | Standfirst paragraph |
| body | Archivo | 16px | 1.55 | 0 | 400 | Prose |
| small | Archivo | 14px | 1.5 | 0 | 400 | Captions |
| micro | Archivo | 12px | 1.3 | 0.18em | 500 / UPPER | Buttons, labels, nav |
| meta | JetBrains Mono | 11px | 1.4 | 0.08em | 400 / UPPER | Coordinates, eyebrows, status |
Color
Dinnartec operates on dark. The ground is not pure black: it’s an ink with 3% warmth so it never reads as a browser default. Each vertical gets a single accent color, never mixed with another vertical’s accent in the same composition.
Core palette. The ground the whole system sits on
Vertical accents. One per sub-identity
Contrast-passing usage
| Accent | On Ink (#0A0A0B) | On Paper (#FAFAF7) | Approved use | Avoided use |
|---|---|---|---|---|
| Core paper | 19.87 : 1 · AAA | N/A | All text on ink. Borders. Icon strokes. | Large flood as a brand signal (it's type). |
| Solutions indigo-violet | 4.84 : 1 · AA-small | 3.90 : 1 · AA-large only | Accent text/rules on ink. Underlines. CTA bg. | Body text on paper. Small icons on paper. |
| Factory cobalt | 5.05 : 1 · AA-small | 3.72 : 1 · AA-large only | Status dots. Data accents. CTA bg. | Body text on paper. Small text on paper. |
| Labs steel | 7.53 : 1 · AAA-large · AA-small | 2.50 : 1 · FAIL | Code links. Citation marks. Diagram strokes. | Anything on paper. Steel fails on bone. Use ink variant. |
The inversion is not #ffffff. It’s #F4F2EC, a warm bone. Ink goes to #0A0A0B. Accents deepen one step for contrast on bone: indigo-violet → #3D2D85, cobalt → #2A3FA0, steel → #3D4A5C. Dark is the default; light is for reading-heavy Labs papers, PDFs, and print.
Spatial system
Generous space is non-negotiable. Restraint reads as confidence. Every surface sits on a 4px grid; every container breathes.
12 columns, 24 → 64px gutter
Mobile collapses to 4 columns. Tablet to 8. Desktop 12. Asymmetric splits (7/5, 5/7, 8/4) are preferred over perfect halves.
Three widths, no more
| narrow | 960px | Labs papers, technical specs, legal. |
| default | 1320px | Marketing, product marketing. |
| wide | 1560px | Data, dashboards, galleries. |
Gutter is max(24px, 3.2vw), scales with viewport.
Spacing scale, base 4px, geometric where it matters
4
8
12
16
24
32
48
64
96
128
Breakpoints
| Token | Min | Grid | Typical hero |
|---|---|---|---|
| xs | 0 | 4 col, 16px gutter | hero @ 80px |
| sm | 640 | 6 col, 20px gutter | hero @ 96px |
| md | 960 | 8 col, 24px gutter | hero @ 128px |
| lg | 1280 | 12 col, 32px gutter | hero @ 168px |
| xl | 1600 | 12 col, 48px gutter | hero @ 200px |
Motion
Every transition has a reason. If it doesn't tell the user something, where they came from, what's arriving, what's stable, it shouldn't exist.
Motion tells a story of cause and effect. If removing it doesn’t change what the user understands, it shouldn’t exist.
Entrance ease is generous (expo-out, 520ms). Exit ease is curt (expo-in, 200ms). Respect time; don’t waste it on goodbye.
We use scroll-linked animation for long-arc storytelling, one idea per section, revealed in sequence. Parallax is banned. Only position, scale, opacity.
Easings, named, not anonymous
Default. 80% of all transitions. Calm, professional, unshowy.
Content arriving on page, scroll-reveal. Expo-out.
Content leaving. Expo-in, slow pull, fast release.
UI state change, hover, focus. Direct, no overshoot.
Scroll-linked arcs. The "cinematic" ease.
When prefers-reduced-motion: reduceis set, we preserve opacity fades but clamp translate/scale/rotate to zero and collapse durations to 1ms. The edge rule’s pulsing dot freezes on. No parallax, no marquee, no autoplay ever.
Component primitives
Buttons, primary, secondary, ghost
--paper--ink--paper-muted--edge-strong--ring--d-base--ease-precise.vertical-{accent}One primary CTA per surface. Secondary actions go ghost or text-link. The eye lands once, then chooses.
Two primaries on the same surface. The user pauses; the page now has two equally loud options instead of one and a fallback.
Cards
1px edge, ink-raised fill. No shadow, no radius. Hairline does the work.
Border goes from 10% to 22%. Background lifts 3% toward paper. 320ms, precise ease.
Left-edge 2px accent signals which vertical owns the card.
--ink-raised--edge--edge-strong--s-10--d-base--ease-precise.card[data-v]Layout primitives, Stack · Cluster · Grid
Vertical flow with consistent gap. Replaces hand-rolled <div style={{display:flex,flexDirection:column,gap:N}}>.
Inline group, wraps by default. align, justify, wrap as props.
display:flex,gap,flexWrapcols takes a number (repeat) or template string. responsive collapses to 1 col below 768px.
cols="2fr 1fr" for asymmetricgap uses the 4px scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48.◊ Default
gap={4} = 16px. Default wrap on Cluster is true.◊ Each primitive renders a
<div>; pass style for one-off overrides.◊ Replaces 80% of the inline
style={{display:flex,gap}} hand-rolls.--ds-gap--ds-cols--s-{0..48}.ds-stack.ds-cluster.ds-gridStat, display value + mono label
vertical colors the value. emphasis="hero" jumps to t-h2 (clamped 40-72px).◊ Use sparingly, three stats in a row is the natural rhythm. More than four crowds.
◊ Numbers above 6 digits get hard to read; format
$340K not $340,000.--f-display--t-h3--t-h2--paper--paper-muted--tr-snug.ds-stat[data-v]SpecRow, Apple-style spec table
- v2.3.1
- Live
- Operations · SaaS
- August 2025
- v0.1.3
- MIT · OSS
- Hace 2 semanas
◊
value accepts JSX, pass a <Badge> for status, mono text for versions.◊ Pair with a heading above (product name, release codename), the spec row alone is too dense.
--ds-spec-cols--edge--edge-strong--f-display--f-mono--t-bodyFooter, every Dinnartec surface
The <Footer> below this card is the same component used on /. Props: brand, slogan, columns, showThemeSwitch, copyright, legal, langSwitch.
{href}) or plain text (no href).◊
columns.length drives the grid template via CSS var, 1, 2, or 3 columns adapt.◊ Mobile: collapses 4-col → 2-col → 1-col at 860 / 480.
◊ Bottom row only renders if
copyright, legal, or langSwitch are set.--ink-deep--paper--paper-muted--paper-dim--paper-faint--ds-footer-colsProductSignature, unified attribution across Factory products
© 2026 Real Estateby Dinnartec
© 2026 Fitnessby Dinnartec
© 2026 Brickendby Dinnartec
© 2026 NAVIby Dinnartec
© {year} {product} · by Dinnartec◊ The master brand
Dinnartec renders in --paper (full strength); the rest in --paper-dim.◊ Lives at the bottom of every Factory product page, closes the brand loop quietly.
◊ Use instead of plain
copyright text on Factory surfaces; on the Dinnartec master site itself, use the standard <Footer> copyright.◊ Override
parent only if the structure ever needs it (default Dinnartec).--f-mono--paper--paper-dim--paper-faintInputs
--edge-strong--paper--paper-dim--status-error--f-body--t-bodyBadges & status pills
Badges are rectangles, never capsules. 1px border, mono label, 6px status dot. Live dots pulse 2s infinite.
--edge-strong--paper-muted--status-{live,beta,error,neutral}.badge[data-v]Navigation
◊ Wordmark + nav links + lang switch + CTA
◊ Active link → label in vertical accent
◊ Hover → label paper-muted → paper, 320ms precise
◊ Scroll > 8px → bg ink/80 + blur(8) + edge
◊ Links + lang + CTA hidden, hamburger appears
◊ Tap burger → full-screen overlay (ink-deep)
◊ Numbered list, mono nums + display labels
◊ Closes on Escape, tap outside, route change
--ink--edge--paper--paper-muted--ring.vertical-{accent}backdrop-filterTheme switch
Click any icon to flip the theme of this entire doc. Choice persists in localStorage. System follows the OS via prefers-color-scheme.
◊ Active option inverts (paper bg + ink fg)
◊ Inactive sits in paper-dim, hover → paper-muted
◊ Sets
data-theme on every .ds-root◊ Light mode swaps ink ↔ paper-ground for the core tokens
◊ Vertical accents swap to
--*-ink variants on light (AA on bone)◊ Status colors (live/beta/error) also recalibrate, bright reds/greens fail on light
◊ Reduced motion respected; transitions clamp to 1ms
◊ Accessible via
role="radiogroup", aria-label, titledata-theme--ink-raised--paper--ink--paper-dim--paper-muted--ringForms, composing inputs into a request
◊ Labels in mono, uppercase, paper-dim. Above the input, never floating.
◊ Submit button never centered. Always left-aligned.
◊ Hint text in mono 11px, 6px below the input.
◊ Error message in mono 11px, prefixed with em-dash.
◊ Errors are written, not generic. “Required” is the worst possible error message.
◊ Submit disables until all errors clear.
◊ Never use placeholder as label, placeholders disappear on focus.
◊ Validation runs on blur, not on every keystroke.
◊ Success state is a confirmation message, not a redirect.
◊ Loading state replaces the submit button label, doesn’t spin next to it.
◊ One required field per row. Optional fields marked explicitly.
◊ The form’s width matches its longest expected input, don’t stretch to container.
Signature moves
Three behaviors that, taken together, make any surface recognizably Dinnartec, even without the wordmark.
A 40px horizontal hairline always pinned to the top of the viewport, containing live metadata: locale coordinates, current section, build timestamp, status. It replaces the typical marketing nav’s ambient role with engineering evidence.
◊ Mid · current section num + name
◊ Right · locale + date + status dot
◊ Pulses on “shipping”, freezes on reduced motion
◊ Scrolled: adds 8px backdrop-blur, 1px bottom edge
The rule re-renders on every route change and on every IntersectionObserver section switch.
We build AI-native software,
without theatre.
Every hero headline is structured as discrete fragments: a regular prefix, a dim aside, a bold accent, and a clean final clause. On page load the fragments arrive in sequence, ~180ms apart, each with an expo-out entrance. No typewriter, no blur, just orderly composition, as if someone is typesetting the sentence in front of you.
◊ Only opacity + 12px translateY animate
◊ Total assembly ≤ 1.2s, never more
◊ Scroll-triggered for non-hero H2s
Every block of prose is wrapped in engineering evidence, coordinates, section numbers, timestamps, commit hashes, set in JetBrains Mono at 11px, 8% tracking. The scaffolding never appears inside prose; it lives above, beside, or below, like annotations on a build log.
◊ Uses ◊ glyph as list bullet
◊ Dates in ISO-8601 (2026.06.06)
◊ Commit hashes: 7 characters, lowercase
Crepes & Waffles came to us with a reconciliation problem. We built a single source of truth in 11 weeks and recovered $340K in uninvoiced revenue in the first quarter of operation.
Imagery & iconography
Imagery is geometry, type, diagrams, mono coordinates, accent rules, and MarkField. Photography is governed by Plate. Product reality is governed by EvidenceFrame. Every visual surface stays scarce, captioned, and tied to proof.
MarkField: organic identity texture
v1.5 keeps one identity primitive for now: MarkField. It is built from repeated mark units and reserved for quiet brand signal, not decorative illustration.
Photography: sanctioned only via <Plate />
When the page discusses a specific thing or person and the reader gains something from seeing the actual object, render it through the Plate primitive. Duotone treatment locks the photograph into the system palette; the numbered caption forces a deliberate count per surface. Decorative or ambient photography remains rejected: portraits, offices, hands at keyboards, stock, and screenshots.
- Subject-isolated. The thing being discussed is the dominant element. Clean ground or contextual environment that serves it.
- Duotone always. Treatment matches the host vertical (Solutions / Factory / Labs) or defaults to Paper / Ink.
- Scarce by surface. One per long-form page or landing section. Social canvases may use one dominant Plate.
- Numbered caption.«PLATE 0X» is required. The count is the discipline.
- Banned subjects. Staff portraits, offices, hands at keyboards, stock photography, screenshots.
Iconography, outline, 1.5px, 24px grid
Heroicons v2 Outline. 24×24 grid, 1.5px stroke, round caps and joins, currentColor. Never filled, never duotone. Icons always trail text in CTAs, never icon-only buttons.
Imagery v1.5
v1.5 does not restyle Dinnartec. It adds two controlled visual capabilities to the current system: better photographic plates, and subtle identity fields built from the mark.
Same system. More ways to show real material.
- Syne, Archivo, and JetBrains Mono.
- Ink, paper, and the three vertical accents.
- Radius 0, 1px hairlines, rectangular modules.
- Type-first composition and evidence-first imagery.
Photography remains scarce.
Plate now has density, grain, and crop intent. It still accepts only real photographs that help the reader inspect a thing.
A field, not an illustration.
MarkField extends the dot-grid into a branded organic texture. It supports composition, but never competes with the message.
Surface matrix
| Surface | Plate | MarkField | Rule |
|---|---|---|---|
| Landing hero | Rare | Rare | Type remains the default hero material. |
| Landing section | Allowed | Allowed | Use when the image proves the section. |
| Blog post | Allowed | Rare | Plate carries real references and objects. |
| Social export | Allowed | Allowed | One idea per canvas. No screenshots. |
| Open Graph | Rare | Allowed | Prefer type, metadata, and low-density signal. |
Capability layer, not a new skin.
If a piece needs a different font, a different palette, rounded containers, tilted mockups, or screenshots to work, it does not belong in v1.5.
Evidence artifacts
The system can show product reality without becoming a SaaS template. Evidence artifacts are the sanctioned way to reveal ledgers, traces, diagrams, release notes, and case proof. They are not screenshots. They help the reader judge the work.
- +18%
- 14,220
- 0
tx_8922 pending -> owner review
tx_8923 matched -> lease_203
A system state may be shown when the artifact is built inside the DS. No screenshots, tilted mockups, glass cards, or ambient desktop scenes.
Manual reconciliation, duplicated rows, invoices without a shared source of truth.
Single operational record, exception queue, weekly finance review.
A case artifact compresses the situation, the intervention, and the measurable result. It should feel like a clean work file, not an ad.
MODEL
POLICY
TOOLCALL
if actor.scope.allows(task): plan = planner.expand(task) run(plan, boundary=actor.scope) else: request_handoff(actor, task)
Labs artifacts can be denser. They earn that density with structure: method, diagram, pseudo-code, constraint, source.
NAVI artifacts may use the midnight treatment, but the information still has to be inspectable: who acted, why, and under which permission scope.
Method artifacts
Use MethodArtifact when a section needs to explain how Dinnartec works. It gives Open Design and production code the same grammar: inputs, system maps, checklists, logs, and outputs.
◊ Never mention a channel or tool unless the section is about that exact channel or tool.
◊ Each artifact must answer one question: what enters, what changes, what ships, or what improves.
When to use an artifact frame
| Type | What it must show | Where it belongs |
|---|---|---|
| System state | A ledger, system trace, release artifact, or abstract product state. | Factory pages, product launches, demos. |
| Case proof | Before and after numbers, timeline, client context, operational artifact. | Solutions pages and case studies. |
| Research note | Diagram, pseudo-code, benchmark, method note, prior art reference. | Labs papers and docs. |
| Agent protocol | Task state, handoff, permission boundary, trace or message schema. | NAVI product and internal tooling. |
If an image only says "technology", reject it. If it lets the reader inspect a real state, a real constraint, or a real result, rebuild that evidence as a Dinnartec artifact. The character stays Dinnartec because the surface remains rectangular, captioned, measured, and scarce.
Textures & surfaces
The TextureSurface primitive defines four sanctioned background patterns. Every texture must signal, count, or label something. Decoration without function is the failure mode. If the surface still reads after removing the texture, remove it.
PATTERN 01
Dot-grid
Drafting paper · diagram ground · technical surface.
Reads as "esto es un plano". Standard (16px) para superficies normales; tight (8px) para detalle cercano; loose (28px) para fondos amplios.
PATTERN 02
Hatch
Errata · zona cancelada · cita marginal.
Convención de plano técnico: rayado = marcado, no eliminado. Reservado para callouts y bloques de cita. Nunca como fondo de hero.
PATTERN 03
Grain
Hero · respiración · superficie larga.
Ruido SVG, opacidad bakeada por densidad. Tone se ignora. Úsalo para evitar sensación de "rectángulo plano" en heroes; nunca como decoración secundaria.
PATTERN 04
Halftone
Banda perimetral · sub-rule · marcador de contenido.
Hereda lenguaje del print de revista. Útil como banda inferior de sección o degradación de Plate. El accent se permite cuando la banda vive dentro de un vertical específico.
Patrones haciendo trabajo
Si la textura no se nota cuando se quita, no estaba haciendo trabajo. Cuatro ejemplos de texturas en su rol real.
DOT-GRID · diagrama de arquitectura
El parámetro retry_after dejó de aceptar segundos en v1.2. Usar milisegundos.
HATCH · zona errata / cancelado
F.02 · OPERATOR ARM
Treinta y siete
articulaciones,
una intención.
GRAIN · hero · superficie larga
HALFTONE · banda perimetral
MarkField is separate from TextureSurface.
TextureSurface signals surface roles: diagram, errata, grain, or perimeter band. MarkField signals Dinnartec identity through tiny repeated mark units. Use it less often than dot-grid.
- Function first. Cada textura señala, cuenta o etiqueta. Si pudiera quitarse sin perder información, no entra al sistema.
- One per surface. Nunca apiles patrones. Una superficie, una textura.
- Default tone is faint. Strong se reserva para callouts y errata, no para énfasis decorativo.
- Accent is locked to vertical context. Solutions/Factory/Labs accent solo en superficies que ya viven en ese vertical.
- Grain ignores tone. Su opacidad va bakeada por densidad. Documentado en el primitivo.
Sub-identity playbook
Each vertical inherits typography, grid, motion and primitives. They differ only in four dimensions: accent, density, voice, and imagery cue.
| Dimension | Core (master) | Solutions | Factory | Labs |
|---|---|---|---|---|
| ACCENT | Paper #FAFAF7 | Indigo-violet #836CDA | Cobalt #5B7BE0 | Steel #8FA3BD |
| DENSITY | Generous. 192px section pad. Narrow container for prose. | Generous. Wide column. Outcome numbers up front. | Dense. Product-page density. 96–128px pad. Tables, data. | Academic-dense. 960px narrow container. Footnotes common. |
| VOICE | Institutional. Third-person plural. "We at Dinnartec." | Warm, first-person-plural. "We partner with you." Case studies named. | Product-first, benefits-led. "One ledger. Every number." | Technical, reverent of prior art. "This builds on the work of…" |
| IMAGERY | Typography-driven. Editorial frames, mono coordinates, dot-grid texture. No photos. | Outcome numbers in display type. Accent rules, 1px frames, named cases. No portraits. | Product as abstracted architecture by default. Real UI states only inside EvidenceFrame. | Diagrams. Pseudo-code blocks. Architecture in 1px lines on dot-grid. |
| DATA DISPLAY | Sparingly. Revenue, team size. Mono. | Outcome numbers ($340K recovered, 11 weeks). Specific cases, named. | Live dashboards, uptime, MRR, row count. Mono, cobalt accents. | Benchmarks, tables, formulas. Steel highlights. Monospace-first. |
| CTA | "Let’s talk" | "Hablemos / Let’s talk" · indigo-violet bg | "Try demo" · cobalt bg · always paired with pricing | "Read the paper" / "View on GitHub" · steel bg |
Three heroes, one system
Anti-patterns
The default 2023–24 “AI product” palette. Floating orbs, laser gradients on hero backgrounds. Instant cliché. Single exception: NAVI surfaces. The internal AI agent owns the only gradient in the system, a midnight mesh of all three vertical hues at night (cobalt + violet + steel) on a deep ink ground (token --navi-gradient, scoped via .navi-surface). Theme-independent on purpose. Outside NAVI, still cliché. The rule strengthens by being scarce.
We are AI-native. We don’t advertise it. If we have to tell you, we haven’t shown you.
Tiny people next to oversized laptops. Fuchsia buildings. Anything from a SaaS template. Never.
We are rectangles. border-radius: 0 is a brand decision. Exception: status dots.
Zero emoji. If you need a visual mark, use the ◊ glyph or an outline icon.
Sentence case only. Title case is corporate cold, and we are not.
We use a 1px hairline. Shadows belong on the hero image, nowhere else. No 0 10px 25px blurs.
We don’t fake physics. Motion is narrative. If it wouldn’t happen in a live theater blocking, it doesn’t happen here.
"Leveraging synergies." "Empowering founders." "Unlock the power of…" All banned. Write like a builder writing.
No offices at night, no founders in their space, no warm-light hands at a keyboard, no stock, no floating mockups. Two sanctioned exceptions: <Plate /> for subject-isolated photographs and <EvidenceFrame /> for ledgers, traces, diagrams, and case proof built inside the DS. Both are captioned, scarce, and tied to something the reader can inspect.
One surface, one accent. Solutions indigo-violet and Factory cobalt never touch on the same page. Labs silver does not appear on a Factory page.
Our ink is #0A0A0B. It has 3% warmth. Not #1e1e1e, not #121212 as ground. Commit to black.
Patterns are surfaces, not garnish. Never stack two textures on the same surface (no hatch over dot-grid, no grain over halftone). One surface, one texture. And every texture must signal, count, or labelsomething: dot-grid means «technical surface», hatch means «errata / cancelled», grain means «hero respiration», halftone means «perimeter sub-rule». If you can remove the texture and the surface still reads, remove it. Use the <TextureSurface /> primitive. Ad-hoc backgrounds bypass the discipline.
No product screenshots, browser chrome, app windows, dashboard crops, or UI pasted into a frame. Product reality is rebuilt as <EvidenceFrame />. Visual identity comes from type, Plate, TextureSurface, and <MarkField />.
Sample hero
A working spec a designer or frontend engineer can execute without guessing. The layout, the tokens, the motion sequence.
◊ Nav row, 72px tall · border-bottom edge-faint
◊ Hero body, grid 1.1/.9 · gap 48px · align-items: end
◊ Headline, clamp(56, 10vw, 168) · Syne · -0.045em
◊ Standfirst, 20px lead · Archivo · max-width 42ch
◊ CTA row, 36px gap from standfirst
◊ Vertical rail, 3 cols · each accent + label + h4
◊ Section height, 100vh on ≥ lg · 88vh on md · auto on sm
◊ 80ms · nav links fade in, 200ms
◊ 220ms · accent rule + eyebrow 12px→0 entrance, 520ms
◊ 320ms · headline fragment 1 “We build” · 520ms entrance
◊ 480ms · headline fragment 2 “AI-native”
◊ 640ms · headline fragment 3 “software.” · 720ms entrance
◊ 820ms · standfirst paragraph 20px→0 · 520ms
◊ 1040ms · CTA row 12px→0 · 520ms
◊ 1180ms · vertical rail staggered, 80ms delta per cell
◊ 1400ms · mono margin-note fades in
◊ 1500ms · status dot begins 2s pulse