The site reads like a comic book, and the comic has a grammar: every piece means one thing, so a page can be loud without being confusing. The comic is also a volume of one kit: the Studio comic by default, the old comic at Press and the neon comic on Night and at Rave.
Rules#
Rules BB-COMIC-01 to BB-COMIC-12 are the comic page's rules C1 to C12; each has a test in the kit.
| Id | Rule | Why | Checked by |
|---|---|---|---|
| BB-COMIC-01Must | Set every word on a plate: a words panel, a balloon, a caption, a corner box, an editor's note or a card; art may run under a plate's edge, never under its text.Applies to: Site, Docs, Documents, Social, Slides, Print | This is the two-layer rule of the comic page (C1): the art can be as loud as the volume allows because no word ever sits on it. | Press checkrule 1, the walker |
| BB-COMIC-02Must | Print one hero per view: one splash or one SFX moment per view at Studio, and one shout balloon per view at every volume.Applies to: Site, Docs, Documents, Social, Slides, Print | Two heroes compete and neither lands (C2). The art budget counts them per view. | Press checkthe ART_BUDGET counts |
| BB-COMIC-03Must | Keep the reading order equal to the DOM order: panels left to right and top to bottom, plates in a panel from the top left; placement never reorders.Applies to: Site, Docs, Documents, Social, Slides, Print | Screen readers and keyboards follow the DOM, so a layout that reorders panels tells two stories (C3, WCAG 1.3.2 and 2.4.3). | Test21 §7, CK-01 |
| BB-COMIC-04Must | Hold a panel to 3 balloons, 1 caption and 60 words, and a balloon or caption to 35 words.Applies to: Site, Docs, Documents, Social, Slides, Print | Comic lettering is display reading (C4, D-D7): short, or it stops being a comic and becomes small print. | ComponentcheckBalloon |
| BB-COMIC-05Must | Point every tail at its speaker, or off the panel for the narrator; a tail never crosses another plate's text.Applies to: Site, Docs, Documents, Social, Slides, Print | The tail is how a reader knows who speaks (C5). Crossing text breaks both the speaker and the words. | Test21 §7, CK-02 |
| BB-COMIC-06Must | Keep words, plates and the words regions of frames at 0°; frames may slant and art may tilt.Applies to: Site, Docs, Documents, Social, Slides, Print | Square text (C6, D-B9): the page can lean and tumble around words that hold still. | Press checkrule 12, square text |
| BB-COMIC-07Must | Keep gutters paper (night on Night, pulp at Press) and 1 rem or wider; saturated panels never touch.Applies to: Site, Docs, Documents, Social, Slides, Print | Paper gutters separate the panels and stop two saturated plates from vibrating against each other (C7). | Press checkrule 9 and the gutter check |
| BB-COMIC-08Must | Set long reading (paragraphs, pricing, forms, legal) in Schibsted on a words panel, never in balloons or captions.Applies to: Site, Docs, Documents, Social, Slides, Print | Comic capitals are for a few lines (C8). Anything a reader must study gets the text family. | ComponentCaption lettering="auto" |
| BB-COMIC-09Must | Make actions hit keys or links with literal labels in the reading layer; an SFX may decorate a key, never replace its label.Applies to: Site, Docs, Documents, Social, Slides, Print | The key says what happens when you press it (C9). The SFX is the noise it makes. | Press checkthe walker and axe |
| BB-COMIC-10Must | On phones, run one column, keep tails to 24 px, scale SFX to the small or medium size clear of the text column, and break out by 24 px at most.Applies to: Site, Docs, MAX//OS | A phone column has no room for art to overlap words (C10). The page reads top to bottom and the art stays in its lane. | Test21 §7, CK-01 at phone width |
| BB-COMIC-11Must | Let the register follow the volume and the theme; a section may go one step louder than its page.Applies to: Site, Docs, Documents, Social, Slides, Print | The three comic directions are volumes of one kit (C11, D-F2): Studio comic, the old comic at Press and the neon comic on Night and at Rave. | Test21 §7 registers |
| BB-COMIC-12Must | Ship every comic fixture with long, short and empty content.Applies to: Site, Docs | Copy is never the length of the mock-up (C12). Long, short and empty cases show what fits before the words arrive. | Testthe fixture registry |
| BB-COMIC-13Must | Hide SFX from assistive technology with aria-hidden; a message an SFX carries also exists as text.Applies to: Site, Docs, MAX//OS | A screen reader announcing POW! adds noise and no meaning (D-F5). The text says what happened. | Press checkthe walker |
| BB-COMIC-14Never | Put comic panels, balloons or SFX on a document page with prices, terms or payment details.Applies to: Documents, Slides | A price is a promise. Comic art beside it makes the promise look like a joke. | Testthe documents' DOM check |
| BB-COMIC-15Must | Give balloons to named speakers only, and quote a client only when their words are held in writing.Applies to: Site, Docs, Documents, Social, Slides, Print | A balloon is a person talking. Putting words in a client's mouth that they never wrote is a claim nobody can check. | Manual review |
Specs#
What each piece means#
| Piece | Means | Render |
|---|---|---|
| Panel | A section of the page. Panels read left to right, top to bottom, in DOM order. | Four kinds of work, mostly websites. |
| Caption | The narrator: the studio's “I”, or a place and a time. | Toronto. Taking projects, Q4 2026. |
| Balloon | A named person speaking. A client's words only when they are held in writing. | Ordering went online on Monday. |
| SFX | A caused event: something landed, shipped or broke. Never on an error, a price or a field. | |
| Corner box | An aside: availability, a date, a count. | Q42026Taking projects |
| Editor's note | The links: where to read more. Literal, set in Schibsted. | *The full case study is on the examples page. -M. |
| Continued in | Points across pages, by the destination's name. |
The three directions are volumes#
Studio comic
Ordering went online on Monday.The old comic
Ordering went online on Monday.The neon comic
Ordering went online on Monday.
Lettering#
Balloons and captions are lettered in Shantell Sans capitals, sentence case in the source (the CSS sets the caps); SFX, splash titles and numerals in Anybody. A balloon or caption holds 35 words at most; anything longer, and anything a reader must study, moves to Schibsted on a words panel (BB-COMIC-04, BB-COMIC-08).
The volume matrix#
What one view may hold at each volume. The press check counts these on every comic template.
| Per view | Quiet | Studio | Press | Rave |
|---|---|---|---|---|
| SFX per view | 0 | 1 | 2 | 4 |
| Shout balloons per view | 1 | 1 | 1 | 1 |
| Speed and focus line groups | 0 | 1 | 2 | 4 |
| Impact flashes | 0 | 1 | 2 | 4 |
| Sparkles | 0 | 3 | 6 | 12 |
| Kirby krackle | 0 per view | 1 per page | 2 per view | 4 per view |
| Splash title | A plain heading | Splash panels | One per view | One per view |
| Slanted rows | 0 | 1 | Free | Free |
| Broken frames | 0 | 1 | 2 | Free |
| Stickers per view | Flat only | 3 | 5 | 8 |
| Tape per view | 0 | 2 | 4 | 6 |
| Cover sheet tilt | 0° | 0° | -2.2° | -2.2° |
| Entrances | None | One-shot | Scroll-linked on art | Scroll-linked on art |
| KeyPop | Never | Once per page view | Once per page view | Once per page view |
Comic per channel#
| Channel | Comic |
|---|---|
| Site | Per the volume matrix above, page by page |
| Docs | The comic kit's pages and examples; the reading column stays at Quiet |
| Documents | The proposal's cover and section openers only; never on a page with prices |
| Social | Quote cards and carousel covers |
| Slides | The comic slide, at most one in five slides |
| The POW! sticker | |
| None |
Do and don't#
Do
Built to be found
Don't
Built to be found
Do
I letter the short lines. The long ones go on a words panel.
Don't
Every order placed before six in the morning is baked the same day, packed in paper, and held at the counter until noon, after which it moves to the shelf by the window where the day's second batch waits for anyone who missed the morning.
Do
Ordering went online on Monday.
Don't
Related#
- The comic kit: every piece, with its props and its press check.
- Comic compositions: a site hero, a case study and a social card, built from the kit.
- Voice and humour: what the balloons and SFX may say.