Aa
#F3F1E9Working with evidence
Opening Brand Studio
Loading your next page.
Working with evidence
Opening Brand Studio
Loading your next page.
Brand Studio / Field guide
A working guide to the type, color, components and small details that make this product feel like itself. The examples below use the same production components as the pages.
01 / Identity
Keep the varied editorial collage, expressive letterforms and black ink. Bring order through composition and hierarchy, not by stripping out the character.
Use the existing asset, at its original aspect ratio. The product is Brand Studio, not a parent-company reskin.
Warm canvases, square cards, thin rules and tactile offset shadows. Color can distinguish pieces; labels carry meaning.
One obvious primary action. Room for complete phrases. No huge headings squeezed into a narrow rail.
Inspect the shared SVG ↗02 / Color
Paper is the setting. Ink does the reading. Lime identifies the next action; blue, pink, teal and orange belong to the cutouts and evidence details.
#F3F1E9#F5EFE6#FDFCF9#191813#3B3A33#716F65#E2DFD4#D9E856#2457D6#F37CAC#25BDB2#F05A2AUse
Body ink on either paper canvas. Ink on lime, pink, teal and orange. White on blue. Distinct focus outlines and text labels.
Avoid
White text on pink. Pale rules as the only control border. Muted text on the darker paper canvas: it falls just below the normal-text contrast target.
03 / Typography
Inter carries the conversation. JetBrains Mono identifies a label, value or source. The font stacks below are the actual shared declarations; host font loading must also be verified.
Inter / sans
One link in.
A world of character.
Inter, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, sans-serifJetBrains Mono / mono
SOURCE / 001
Aa Bb Cc 012345
Observed · Reviewed
JetBrains Mono, ui-monospace, SF Mono, Menlo, monospaceclamp(2.25rem, 1.35rem + 3vw, 3.75rem) / 1.06One primary H1; short whole phrases, never a narrow 90px stack
One link in.
clamp(1.75rem, 1.3rem + 1.25vw, 2.5rem) / 1.14Section H2; 28–40px at a 16px root
Keep the source attached.
1.25rem / 1.25Card / H3; 20px
Keep the source attached.
1.125rem / 1.6Hero lead; 18px
Keep the source attached.
1rem / 1.6Body; 16px
Keep the source attached.
0.875rem / 1.55Informational description / provenance; 14px floor
Keep the source attached.
0.75rem / 1.5Compact mono identifiers only; 12px floor
SOURCE / 001
clamp(2rem, 1.6rem + 1vw, 2.5rem) / 1.15Utility/workflow H1 for Breakdown, auth and roadmap; 32–40px
Keep the source attached.
1.5rem / 1.25Dense utility H2; 24px, not the marketing display scale
Keep the source attached.
Informational descriptions start at 14px; compact identifiers at 12px, with a 16px root. Small text inside the decorative collage is artwork, not required information, and is hidden from assistive technology. Do not use that exception for UI copy.
04 / Spacing & layout
Use a consistent rhythm. Let content set the height instead of stretching every section to a full-screen stage.
space-10.25remspace-20.5remspace-30.75remspace-41remspace-51.5remspace-62remspace-73remspace-84remspace-96rem78remclamp(1rem, 3vw, 3rem)clamp(3rem, 5vw, 4.5rem)clamp(1.5rem, 3vw, 3rem)60ch2.75remColumns become a readable single stream on narrow screens. Tables keep their actual columns inside a labeled scroll region, not as page overflow. Test 320px, 200% text resizing and increased text spacing.
05 / Components
These are the real shared buttons, source states, website entry and paper surfaces. This guide’s form is local-only.
Component demo. Nothing is sent from this page.
Readable state
Keep the field and action stationary. Explain what a click will do before it happens.
Attention, not alarm
Use an explicit state and one useful next action, not a vague red banner.
Use native disclosures for supporting caveats. The label, main action and essential scope stay visible without opening them. Keyboard users can toggle this with Enter or Space.
State design
Use one visible next step. A failed balance lookup is unknown, not zero. These examples are local; the button sends no request.
A clear next step
Your saved work may still be available. Retry the list, or return to the report link.
06 / Evidence & assets
Show originals, visible values and their source context. An observation is not automatic approval, and a font declaration is not a license.
A value is present in a cited source. This does not establish ownership, correctness or approval.
An interpretation of observed inputs; retain the basis and method.
A named person checked a stated aspect at a recorded time. Approval remains a separate record.
Not available in this capture or supplied source. Do not substitute a plausible guess.
Keep the value and where it appeared.
A declared font is not a license.
Page → asset → observation
Unclear or missing evidence stays visible.
07 / Writing
plainspoken · evidence-led · confident without overclaiming · technical but readable · helpfully specific. Lead with what the person can do or inspect; keep internal implementation language in supporting detail.
Use Read my site — free
Avoid Unlock your brand’s true potential.
Use A declared typeface was found on the homepage.
Avoid We found your official brand typography.
Use No public logo file was found in this read.
Avoid Logo complete.
Use Explore a proposed SEO workload in the cost planner.
Avoid SEO and AI visibility are included in every report.
Preferred: brand context, source-backed, capture, evidence, observed, normalized, needs attention, local-first.
Avoid: brand truth, complete archive, guaranteed, blocked on client-facing pages, AI-powered magic, scrape everything.
Separate observed facts, deterministic derivations, model inference, and human approval.
Never invent a brand claim, audience, tone, metric, right, or approval.
Avoid repetitive em-dash phrasing and generic AI transitions.
Use the source brand's language when a named brand package is active.
Keep raw IDs, schema names, and internal blocker language out of the primary client-facing flow.
08 / Motion
Seven different papers, independent directions and small rotational overshoots. The composition finishes in 2.32 seconds. The form, navigation and reading copy do not animate.
Motion reduced. Papers shown in their settled positions.
| Piece | Arrival | Delay / duration | Settles |
|---|---|---|---|
| Nebula | -180%, -30% / -26° | 0 / 1160 ms | -8° |
| Alder Sparkling Water | 5%, -170% / 21° | 160 / 1160 ms | 6° |
| Letterform study | 170%, -65% / -14° | 330 / 1220 ms | 9° |
| loom | 140%, 90% / 24° | 520 / 1190 ms | -4° |
| N°27 perfume | -120%, 140% / -18° | 690 / 1150 ms | 5° |
| Frame | -35%, 190% / 17° | 870 / 1160 ms | -3° |
| Ridge R-004 | 170%, 140% / -20° | 1060 / 1260 ms | 4° |
Replay restarts only the artwork. Pause holds it in place while arriving. There is no infinite drift. Reduced motion shows the settled composition immediately and hides motion controls.
09 / Source & upkeep
The existing design record owns these tokens. Its generator updates the production CSS, the guide data and the per-piece motion projection together.
brand/brand-studio/design.jsonbrand/brand-studio/writing.jsonscripts/generate-design-tokens.mjshosted-app/content/studio-system.generated.jsonThe Stage 1 generic utility-card hero was rejected. This system uses the varied multi-brand collage; the source slice is not visual approval.
The provided mark is unchanged. The product’s local font stylesheet remains /fonts/fonts.css; font assets and actual rendered faces are checked in the host, not inferred from a font-family declaration.
Breakdown is a planning catalog, not checkout. Its 111 items, sources and calculator are preserved. DataForSEO and AI visibility remain parked in runtime. Current paid alpha uses site, standard search and scoped public social evidence.
The generated record is a presentation projection, not a collector switch, account setting or billing instruction. Stable package export remains planned. Model-backed review costs must not be treated as free.
Run token drift tests after generation. The full generator intentionally fails when a registered surface is missing; the explicit hosted-only mode checks only the supplied hosted surface.