00 /

Brand Guidelines

The standing order. A handmade studio / workshop look — show the workings, label everything, keep it square. One rule underneath: don't hide how it was made.

This is the internal reference. Not a public page. Covers: colour, typography, the full kit of parts, layout system, component library, voice rules, and the eight moves that hold everything together.

VERSION 2.0 MMXXVI ONE RED · ONE SANS NOINDEX
CraigStanley
Studio
Primary mark · Red box The red box is the identity. Helvetica Neue Black, white on red, rounded corners at 14px radius.
Brand Position

Solving problems with technology and creativity. The studio is a one-person operation. The work is the identity — not a logo, not a palette. The object proves itself.


01 /

Colour

5 values · 3 usable
Signal Red
--red
HEX #CC2018
RGB 204 32 24
Primary accent
Ink
--ink
HEX #141414
RGB 20 20 20
Default text, borders
Paper
--paper
HEX #F4F1E9
RGB 244 241 233
Page background
White
--white
HEX #FFFFFF
RGB 255 255 255
Hover states, forms
Grey
--grey
HEX #6F6A60
RGB 111 106 96
Secondary text
One red per page, on the single thing that matters most. Never two reds. No gradients. No tints.
The One Red Rule
Red marks the single most important action or element. If everything is red, nothing is.

One red per page. Use it on the primary CTA, the page stamp, or the key figure — never on more than one element per view. On dark (ink) backgrounds, white is the accent; red is the signature only.

Ink Inversions
Featured item Dark section

Featured cards, hero sections, and "dark" callouts flip to ink background with paper text. Red stamps and labels still work on ink. Reduce opacity for secondary text: rgba(244,241,233,.6).

Accessible Pairs
Red on White — 5.3:1 ✓
Ink on Paper — 16.3:1 ✓

All standard pairings meet WCAG 2.1 AA (4.5:1 for normal text). Never place red text on ink, or grey text on paper below 14px regular weight.

Contrast Ratios

Foreground Background Ratio Normal text Large / bold text Use case
Ink #141414Paper #F4F1E916.3:1AA ✓AAA ✓Body copy, headings
Paper #F4F1E9Ink #14141416.3:1AA ✓AAA ✓Inverted panels
White #FFFFFFRed #CC20185.3:1AA ✓AA ✓Red buttons, stamps
Red #CC2018White #FFFFFF5.3:1AA ✓AA ✓Red links on white
Grey #6F6A60Paper #F4F1E94.7:1AA ✓AA ✓Secondary text ≥16px
Red #CC2018Ink #1414143.2:1FailAA ✓Red stamps on ink only
Grey #6F6A60Ink #1414143.4:1FailFailAvoid — decorative only
/* brand.css — colour tokens */
:root {
  --red:   #CC2018;  /* Signal red — one per page */
  --ink:   #141414;  /* Default text, borders */
  --paper#F4F1E9;  /* Page background */
  --white#FFFFFF;  /* Hover states, form inputs */
  --grey:  #6F6A60;  /* Secondary text only */
}

02 /

Typography

One sans · no serifs · no display

Helvetica Neue only. Weight 400 (body) and 800 (headers/labels). No 300, no 500, no 600. No italic except structural labels. No serif typefaces. No custom display fonts. The constraint is the identity.

Poster / Box title The Moves
800 weight
clamp(48–80px)
uppercase
letter-spacing: -.01em
line-height: .95
Section title Audio
800 weight
clamp(28–48px)
uppercase
letter-spacing: -.01em
line-height: 1
Card / item title Issue 03 — The Debate
800 weight
17px
uppercase
letter-spacing: -.01em
Body copy Short sentences. Lead with the answer. No padding. The roughness is in the record.
400 weight
16px
sentence case
line-height: 1.55
Small body / captions Published twice monthly. Plain text. No formatting except bold.
400 weight
13–14px
--grey
line-height: 1.6
Labels / spec text FMT-04 · Audio · 2026
700 weight
10–12px
UPPERCASE
letter-spacing: .1em
Label-maker text RUN 001 · A5 · RISO
700 weight
11px
UPPERCASE
letter-spacing: .2em
ink background
Monospace / code --red: #CC2018; /* Signal red */
monospace
10–12px
code blocks only
never in copy
Tabular numbers 001 · 014 · 080
800 weight
font-variant-numeric:
tabular-nums
for counts + indexes
Hierarchy rules
Headers always uppercase, 800 weight.
Body always sentence case, 400 weight.
Labels always uppercase, tracked, 700 weight.
Two weights only: 400 and 800.
One size jump between hierarchy levels.
Never do this
Italic body copy — structural labels only.
Mixed case headings — always uppercase.
Weight 300, 500, 600, 700 on headings.
Serif typefaces for any purpose.
Tight leading on body (below 1.5).

03 /

The Kit of Parts

8 components

Each component comes from printmaking, publishing, or the workshop. Use them as stamps, labels, tape flags, and crop marks — never as decoration for its own sake. Every component earns its place by naming or locating something.

01 — The Red Box · Primary mark
Craig
Stanley
CraigStanley

The identity mark. Red (#CC2018) background, white Helvetica Neue 800 uppercase, border-radius 14px. Two sizes: header (padding 18px 22px) and footer (padding 12px 18px). Never stretched, never recoloured. The red box is always the primary red on any page.

.cs-redbox { background: var(--red); color: #fff; border-radius: 14px; }
02 — Label-Maker Strip · Navigation & metadata
RUN 001 · A5 · RISO FMT-04 · Audio 03 Images

The nav and labelling system. Ink background, white text, Helvetica 700, letter-spacing .2em, 3px radius. Used for: navigation links, format codes (FMT-01), run labels, issue numbers, page metadata. The hover state switches to red background.

.cs-labelmaker { background: var(--ink); letter-spacing: .2em; font-weight: 700; }
03 — Rubber Stamp · Status & edition marks
First edition Sold out In production Published

Status marks only. 2px border, red (#CC2018) default, Helvetica 800 uppercase, letter-spacing .05em. Use for: editions, status (published/sold/in production), counts. Variant: ink border/ink colour for neutral status on ink panels. Never used as decoration.

.cs-stamp { border: 2px solid var(--red); color: var(--red); font-weight: 800; }
04 — Tape Strip · Asides & callouts
Handle with care Audio files load when published. The list is the index.

The aside or editorial note. Warm yellow background (rgba 220,210,170,.9), dashed left/right borders. Used for notes, asides, warnings, status messages. Never used for primary content — it is always supplementary. Do not use inline in body copy.

.cs-tape { background: rgba(220,210,170,.9); border-left: 1px dashed #9a8f63; }
05 — Red Tick · Signed work mark
All work signed

The signature mark. Red, Helvetica 800. Used in the footer and on completed/signed items. Signals work that has been authored and signed — not a generic success state. One per page footer, alongside the "All work signed" label.

.cs-tick { color: var(--red); font-weight: 800; }
06 — Crop Marks · Printed-object corners
This cell has crop marks.
The corner ticks are the ::before / ::after pseudo-elements.

The suggestion of a physical printed object. Applied to containers that represent a zine page, a card, or a physical format. The marks are 16px L-shapes at each corner via CSS pseudo-elements. Use sparingly — one crop-marked container per page section.

.cs-crop::before { top: 14px; left: 14px; border-left: 2px solid var(--ink); }
07 — Section Rule · 4px ink divider

4px border-top, var(--ink), full width. Separates every major section.

Full-width 4px ink top border. Used at the start of every top-level section. The weight (4px) distinguishes it from card borders (2px) and table rules (1px). Never used for sub-section separation — that uses a 1px rule or no rule.

.section-rule { border-top: 4px solid var(--ink); margin: 0; }
08 — Breadcrumb · Page location

Page location indicator. 11px, Helvetica 700, uppercase, letter-spacing .12em, --grey. Placed at the top of every detail page hero, above the H1. "/" separator. Parent links are anchor tags in --grey that go red on hover.

.breadcrumb { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--grey); }

04 /

Layout

Grid · spacing · section structure

Container

Max-width: 1200px · Padding: 0 32px (mobile: 0 16px)
.site-wrap — 1200px max, auto margins, 32px padding

Work Grid Variants

.work-grid-4 — default for zines, experiments (collapses 4→2→1)
Card
Card
Card
Card
.work-grid-3 — audio hub, sub-format grids (collapses 3→2→1)
Featured
Card
Card
.page-hero-grid — 2fr / 1fr, details page hero
Title + intro (2fr)
Specs / stamp (1fr)

Spacing Scale

2pxGrid gap between cards and items. The tight seam between printed objects.
5pxImage knolling grids. Slightly more breathing room.
8pxSmall gaps: badges, button rows, inline elements.
16pxCard inner padding for compact cards and list items.
24pxStandard card padding. Site-wrap mobile padding.
32pxSite-wrap desktop padding. Section internal padding.
48pxSection bottom padding. Hero padding. Major breaks.
64pxLarge breaks on landing pages. Hero section padding.

Section Anatomy

Every top-level section follows this pattern
─────── <hr class="section-rule"> — 4px ink rule ───────
01 / SECTION TITLE Count or spec →
Optional intro paragraph — max 2 sentences, grey, max-width 560px
Grid content
Grid content
Grid content
Grid content

05 /

Components

Buttons · cards · forms · modals

Buttons

/* Standard button — ghost */
<a class="cs-btn" href="#">Label</a>

/* Primary / red button */
<a class="cs-btn red" href="#">Label</a>

Work Item Cards

FMT-01b · Standard Standard Card
Paper background

Default work item. Paper background, ink border. Hover lifts to --white background.

Status →
FMT-01c · Placeholder Coming Soon

Dashed border signals "coming". Opacity .7. Used for items in production.

/* Featured (inverted) card */
<a class="work-item featured" href="…">…</a>

/* Standard card */
<a class="work-item" href="…">…</a>

/* Placeholder / in-progress card */
<div class="work-item" style="border-style:dashed">…</div>

Forms

2px ink border on inputs, white background, 15px font. Focus ring: 3px red outline. Labels: 11px, 700, uppercase, letter-spacing .14em.

Sub-navigation

Used on all sub-section pages. Parent label (grey) + arrow + item chips. Active item uses ink background. Border-bottom 2px ink rule below the row.


06 /

Voice

Plain · short · honest

The one voice rule

Plain English. Short sentences. Lead with the answer; caveats after, briefly. Dry wit from the studio idea, never from exaggeration. No exclamation marks for emphasis. Cite present-day facts; quote the line when drawing from a document.

Structure
Lead with the claim.
Evidence or example second.
One idea per sentence.
Max three sentences per paragraph.
Bold only the key term, once.
Tone
Direct without being rude.
Dry wit is fine. Sarcasm is not.
Precise over impressive.
Honest about what's not done yet.
Studio voice, not corporate voice.
Proof
Cite source if quoting research.
Name the year for statistics.
Paraphrase honestly.
Acknowledge what's contested.
Never invent a number.

Before / After

Wrong ✕

We're incredibly excited to unlock the power of seamless AI-driven transformation and leverage cutting-edge solutions to supercharge your workflow and drive impactful results.

Right ✓

Eight instrumental tracks made in the studio. No samples. No beds. Made with the machine already running.

Wrong ✕

Dive in and explore our robust, innovative, game-changing new zine series that will revolutionize the way you think about AI!

Right ✓

A five-issue series on AI and creativity. Each issue puts one argument against its opposite. Sources cited. No conclusion forced.

Banned Words — never use

seamless cutting-edge leverage supercharge unlock powerful robust game-changing transform dive in stunning incredible revolutionary innovative exciting journey ecosystem synergy solution disruptive

07 /

The Moves

8 principles · the studio code

The studio code — the principles behind how the work is made. Not aspirational values. Not a manifesto. Operational rules: the moves the studio actually makes. Every brand and content decision traces back to one of these.

01 Sign the work Every piece carries the mark. The red box, the stamp, the footer. No anonymous output. The studio is the signature.
02 Show the seams Don't hide how it was made. The crop marks, the tape strips, the draft notes — they stay in. Transparency is the aesthetic.
03 Label everything FMT codes, run numbers, issue counts, format specs. The label-maker is the identity. Everything is indexed. Nothing is unnamed.
04 One red One accent per page on the one thing that matters. Constraint forces the decision. If everything is red, you haven't made a decision.
05 Sent beats perfect Work ships before it's finished. The roughness is in the record. A live document is more useful than a perfect one that never arrives.
06 Keep it square No gradients, no curves in content, no excess decoration. Grid-based. Structured. The rigour is the warmth.
07 Both sides of the argument The Debate format. Every claim gets its opposite. No conclusion forced. The reader decides. Intellectual honesty is non-negotiable.
08 The object proves itself No pitch decks, no positioning statements for the studio itself. The zine, the track, the essay — the work is the argument. Always.

08 /

Do / Don't

✓ Do
Use one red per page, on the most important element.
Keep headings uppercase, 800 weight only.
Use the label-maker class for all navigation and metadata.
Lead with the claim; support it in the next sentence.
Use 2px borders for cards, 4px for section rules.
Use the paper (#F4F1E9) background for all pages.
Show in-progress work with dashed borders and opacity .7.
Cite sources and dates on all factual claims.
Use tabular numerals (.cs-num) for all counts and indexes.
Keep the red box as the wordmark — never modify it.
Use preload="none" on all audio elements.
Gap: 2px between cards (the tight seam).
✕ Don't
Use red on more than one element per page.
Use mixed-case or sentence-case headings.
Add a second typeface or display font.
Use gradients, shadows (box-shadow), or drop filters.
Use font-weight 300, 500, 600, or 700 on headings.
Place grey text on ink backgrounds in body copy.
Use exclamation marks for emphasis.
Use the banned word list (seamless, innovative, etc.).
Stretch, rotate, or recolour the red box wordmark.
Use more than two actions (buttons) per card.
Link to non-existent pages — use contact.html as placeholder only.
Create pages without noindex if they are internal-only.

09 /

Quick Reference

CSS · tokens · classes

CSS Custom Properties

/* Colours */
--red: #CC2018;
--ink: #141414;
--paper: #F4F1E9;
--white: #FFFFFF;
--grey: #6F6A60;

/* Font stack */
--sans: "Helvetica Neue", Helvetica,
  Arial, system-ui, sans-serif
;

Utility Classes

/* Kit of parts */
.cs-redbox    — Primary mark
.cs-labelmaker — Nav & labels
.cs-stamp     — Status mark
.cs-tape      — Aside/note
.cs-tick      — Signed mark
.cs-crop      — Crop marks
.cs-poster    — 800 uppercase heading
.cs-label     — Tracked caps label
.cs-num       — Tabular numerals
.cs-btn       — Ghost button
.cs-btn.red   — Primary button

Layout Classes

.site-wrap         — Max 1200px container
.page-hero         — Detail page hero
.page-hero-grid    — 2fr / 1fr
.work-grid         — Cards container
.work-grid-4       — 4 columns
.work-grid-3       — 3 columns
.work-grid-2       — 2 columns
.work-item         — Standard card
.work-item.featured — Inverted card
.section-rule      — 4px divider
.section-header    — Num + title row
.sub-nav           — Sub-section nav
.prose             — Long-form text block
.reveal            — Scroll animation

Breakpoints

/* Mobile-first, two breakpoints */
/* Tablet/desktop */
@media (max-width: 900px) {
  /* 4-col → 2-col, hero stacks */
}

/* Mobile */
@media (max-width: 600px) {
  /* 2-col → 1-col, 16px padding */
}

Page Template

<header class="site-header">
  <!-- wordmark + nav + social -->
</header>

<section class="page-hero">
  <!-- breadcrumb + h1 + specs -->
</section>

<section>
  <hr class="section-rule">
  <!-- section-header + content -->
</section>

<footer class="site-footer">
  <!-- wordmark + links + stamp -->
</footer>
Assets & Files
Stylesheets
assets/brand.css
→ all tokens + components
JavaScript
assets/site.js
→ nav, reveal, modals
Favicon
/favicon.svg
→ SVG, scalable, red box