{"version":"1.0.0","date":"2026-10-24","areas":[{"area":"MARK","page":"/brand/mark","rules":[{"id":"BB-MARK-01","area":"MARK","level":"must","text":"Use the logo pack's files or the `Mark`, `Logo` and `Wordmark` components; never redraw, retrace or retype the mark or the wordmark.","why":"The files and the components draw from one geometry (`markGeometry`, `logoGeometry`), so the mark prints the same on the site, on paper and in documents.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-02","area":"MARK","level":"must","text":"Keep at least 1x of clear space around the mark and every lockup, and at least 2x from a trim edge in print; x is the side of one square at the size it prints.","why":"Clear space lets the mark read as a mark and not as part of the layout. Every logo pack file carries it as transparent padding, so a file edge is already the clear-space edge.","check":{"kind":"component","ref":"Logo; the press artwork tests keep the mark inside the trim"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-03","area":"MARK","level":"must","text":"Respect the minimum sizes: the mark 24 px on screen and 6 mm in print, the horizontal lockup 120 px (30 mm) wide, the stacked lockup 64 px (18 mm) wide, the wordmark 100 px (22 mm) wide; from 16 to 23 px the favicon drawing prints.","why":"Below these sizes the seams close up and the wordmark drops under the type floor. The favicon drawing is pixel-snapped for the sizes in between.","check":{"kind":"component","ref":"Mark and Logo warn in development; the logo pack tests"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-04","area":"MARK","level":"must","text":"Print the mark in the Process inks, or in one colour: ink on a light ground, paper on the slab or on Night.","why":"The four inks are the mark: M A over K R spells the press it prints on. The one-colour version exists for jobs that print one ink.","check":{"kind":"test","ref":"the logo pack's colour check"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-05","area":"MARK","level":"never","text":"Recolour the mark with an alternate, client or single ink, a tint or a gradient.","why":"A client colourway re-inks a case study's art, never the studio's mark (D-N73). A tint or a gradient turns the four inks into decoration.","check":{"kind":"test","ref":"the logo pack's colour check; the misuse grid"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-06","area":"MARK","level":"never","text":"Reorder the squares: M A over K R is fixed.","why":"Read across the rows, the squares spell the press they are printed on. Any other order spells nothing.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-07","area":"MARK","level":"never","text":"Stretch, rotate, tilt, skew, outline, shadow, glow, blur, texture, halftone or second-ink the 2D mark or the wordmark.","why":"The mark is flat ink on paper. Effects belong to the expressive layer, and the 3D blocks are the mark's only other pose.","check":{"kind":"lint","ref":"mk/glow; the rest by eye"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-08","area":"MARK","level":"never","text":"Place the mark on a photo, art, the ink field, halftone, a gradient or a line plate; over an image, set it on an opaque paper plate that holds its clear space.","why":"The squares need clean paper around them to read as four inks. A busy ground swallows the seams.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-09","area":"MARK","level":"must","text":"Print the letters on the squares only from 48 px on screen and 12 mm in print.","why":"Smaller letters fall under the type floor and blur into their squares; below the threshold the squares print without them.","check":{"kind":"component","ref":"Mark drops the letters below the threshold"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-10","area":"MARK","level":"must","text":"Spell the names as written: MAKR Labs, makrlabs.dev, MAX//OS, Overprint, and the line names Websites, Growth, Software and Custom apps.","why":"The names are part of the identity. One spelling keeps search results, documents and the site consistent.","check":{"kind":"lint","ref":"brand/name-spelling"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-11","area":"MARK","level":"must","text":"Choose the lockup by the box ratio: 2.5 to 1 or wider takes the horizontal lockup, 0.8 to 2.5 the stacked lockup, square slots and boxes below a lockup's minimum the mark alone; one lockup per view is the identifier.","why":"The ratio rule fits the lockup to its space, so nobody squeezes a horizontal lockup into a square or shrinks a stacked one into a strip.","check":{"kind":"component","ref":"Logo layout=\"auto\", MARK_SPECS.choose"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-MARK-12","area":"MARK","level":"must","text":"Treat the 3D block mark as an illustration: the 2D lockup appears in the same view.","why":"The blocks tumble, pile and light up. The flat lockup is the identifier people remember and search for.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-MARK-13","area":"MARK","level":"must","text":"On a line's own page, light only that line's square; everywhere else, light all four.","why":"A lit square says where you are. Lighting one square anywhere else claims a line the page is not about.","check":{"kind":"manual"},"appliesTo":["site","docs","product"]},{"id":"BB-MARK-14","area":"MARK","level":"must","text":"Co-brand only with the partner's written OK: both marks at equal optical height, 2x apart, a × in ink between them, the partner's mark on its own plate.","why":"Equal height and space keep either mark from reading as a sub-brand of the other, and the written OK keeps the studio from implying a partnership that does not exist.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-MARK-15","area":"MARK","level":"never","text":"Animate the mark outside its three moments (the press run prints it on a first visit, the pile tidies into it, card blocks hop), and never loop it.","why":"The mark is the fixed point of a lively system. A logo that loops is noise and costs the calm that makes the rest readable.","check":{"kind":"lint","ref":"mk/loop"},"appliesTo":["site","docs","product","slides"]},{"id":"BB-MARK-16","area":"MARK","level":"must","text":"Take favicons and app icons from the logo pack's icons folder.","why":"They are pixel-snapped from the same geometry and checked at their sizes; a favicon scaled by hand blurs.","check":{"kind":"manual"},"appliesTo":["site","docs","product"]},{"id":"BB-MARK-17","area":"MARK","level":"must","text":"Use the mark in use, option c (Key block); the other options are a record of the exploration and never print.","why":"One mark is the identity (D-P20). The explored options stay on the mark page so a later change is one decision with its own ledger row.","check":{"kind":"test","ref":"the logo pack ships the option in use only"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]}]},{"area":"COLOUR","page":"/brand/colour","rules":[{"id":"BB-COLOUR-01","area":"COLOUR","level":"must","text":"Take every colour from the tokens or `print.json`; never type a hex, RGB, OKLCH or CMYK value by hand.","why":"The derived set is checked for contrast and colour vision in every look; a value typed by hand drifts from it the day an ink changes.","check":{"kind":"lint","ref":"brand/raw-colour; docs/no-literal-values"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-COLOUR-02","area":"COLOUR","level":"must","text":"Use a line ink only where it means its line, always with its letter or its glyph.","why":"Colour is meaning (D-C2): magenta is Custom apps, aqua Software, red Growth, key Websites. The letter and the glyph keep the meaning for readers who do not see the hue.","check":{"kind":"press","ref":"rule 10, colour vision"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-03","area":"COLOUR","level":"must","text":"Keep yellow for the face of the one primary action per view and for the spot ink in art from Press up; never text, a status, or a plate wider than a call-to-action band.","why":"Yellow is the action ink. When it only ever means press here, the next step is always the loudest thing on the page.","check":{"kind":"manual","ref":"the press colour budget counts it"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-04","area":"COLOUR","level":"must","text":"Set text on colour in ink or paper through the sanctioned pairs.","why":"The pairs are solved for WCAG 2.2 AA and the APCA floor in every look; coloured text on a coloured plate fails one or the other.","check":{"kind":"press","ref":"rule 4; lint mk/colour-text"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-05","area":"COLOUR","level":"never","text":"Use traffic-light colours for status: a status is a glyph, a literal word and an ink treatment.","why":"Red is Growth and green is the live dot, and a colour alone says nothing to a colour-blind reader.","check":{"kind":"lint","ref":"mk/status-colour"},"appliesTo":["site","docs","product","documents"]},{"id":"BB-COLOUR-06","area":"COLOUR","level":"must","text":"Print Night as black paper with flat, opaque inks: no glow and no blur.","why":"Night is a stock with fluorescent inks (D-C8). A glow reads as a screen effect, and blur costs legibility.","check":{"kind":"lint","ref":"mk/glow"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-07","area":"COLOUR","level":"must","text":"Stay within the volume's colour budget and chroma cap.","why":"The budget keeps Studio calm enough to read and lets Rave be loud on purpose (D-B4, D-B5).","check":{"kind":"press","ref":"rules 7 and 8"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-08","area":"COLOUR","level":"never","text":"Let red or pink meet blue or violet above a chroma of 0.12 on a hard edge; keep at least 2 px of paper or ink between saturated areas.","why":"Those pairs vibrate on screen and on paper. A paper gutter stops it.","check":{"kind":"press","ref":"rule 9, no vibration"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-09","area":"COLOUR","level":"must","text":"Encode the series of a chart that is not about the lines by pattern first; never borrow a line ink for another meaning.","why":"A borrowed line ink would say Growth or Software where the chart means something else.","check":{"kind":"manual"},"appliesTo":["site","docs","product","documents","slides"]},{"id":"BB-COLOUR-10","area":"COLOUR","level":"must","text":"Make client colourways with `deriveColourway`; they replace the lead, support and spot inks only.","why":"The derivation keeps every pair legible in every look; the line inks, the action ink and the mark stay the studio's.","check":{"kind":"test","ref":"the helper's 50 fictional brands"},"appliesTo":["site","docs","social","slides"]},{"id":"BB-COLOUR-11","area":"COLOUR","level":"never","text":"Use Display P3 colour on text, solids, plates, tints or stocks, or anywhere in print.","why":"P3 only widens large art fields at Press and Rave. Text, plates and print need the sRGB values the pairs and the CMYK builds are solved from.","check":{"kind":"test","ref":"G7"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-COLOUR-12","area":"COLOUR","level":"should","text":"Use the lead pair, magenta and aqua, for art at Studio; add more inks from Press up.","why":"Two inks keep a Studio page calm; Press and Rave are where the full set prints.","check":{"kind":"press","ref":"rule 7's hue count"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-COLOUR-13","area":"COLOUR","level":"must","text":"Keep the overprint thirds, the colours where two inks multiply, as art: they never carry meaning and never sit under text.","why":"A third colour changes with the paper and the volume, so it cannot hold a meaning, and under words it would be art behind text.","check":{"kind":"press","ref":"rule 1, two layers"},"appliesTo":["site","docs","product","print","documents","social","slides"]}]},{"area":"TYPE","page":"/brand/type","rules":[{"id":"BB-TYPE-01","area":"TYPE","level":"must","text":"Use Anybody for display, Schibsted Grotesk for text, Shantell Sans capitals only in balloons and captions, and Geist Mono only in code.","why":"Each family has one job, so a reader learns the system in a page: posters shout in Anybody, reading happens in Schibsted, people talk in Shantell.","check":{"kind":"lint","ref":"mk/mono"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-TYPE-02","area":"TYPE","level":"must","text":"Write in sentence case everywhere; capitals only in stamps, SFX and comic lettering.","why":"Sentence case reads fastest and keeps the capitals for the moments that should feel printed.","check":{"kind":"lint","ref":"mk/uppercase; check:docs headings"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-TYPE-03","area":"TYPE","level":"must","text":"Meet the type floors of the type page for screen, print and slides.","why":"The floors are where text stops being comfortable to read: the APCA lookup on screen, the printer's minimums on paper, the back row of a room on slides.","check":{"kind":"press","ref":"rule 3; the press artwork and deck tests"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-TYPE-04","area":"TYPE","level":"must","text":"Print one display moment per view at Studio and one per section at Press; set the wide, condensed and italic voices on three words or fewer, on one line.","why":"One poster moment is a headline; three are a ransom note. The width extremes only read on a few words.","check":{"kind":"press","ref":"rule 11, type discipline"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-TYPE-05","area":"TYPE","level":"must","text":"Print the second ink only on display type of 2 rem or more (section heads from Press), and never under more contrast.","why":"Below 2 rem the offset reads as blur (D-D6); readers who ask for more contrast get one clean print.","check":{"kind":"lint","ref":"mk/second-ink-role"},"appliesTo":["site","docs","product","social","slides"]},{"id":"BB-TYPE-06","area":"TYPE","level":"must","text":"Set numerals tabular and lining; use a slashed zero only in codes and ids.","why":"Tabular figures line up in tables, prices and dates; a slashed zero in prose looks like a typo.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-TYPE-07","area":"TYPE","level":"must","text":"Keep running text to 70 characters a line with a leading of 1.5 or more, and balloons and captions to 35 words.","why":"Long lines and tight leading tire the eye; long balloons belong on a words panel in Schibsted.","check":{"kind":"press","ref":"rule 11, type discipline"},"appliesTo":["site","docs","product","documents","slides"]},{"id":"BB-TYPE-08","area":"TYPE","level":"never","text":"Use synthetic bold or italic, tracked body text or justified text.","why":"The families ship the weights and italics they need; faked styles, tracking and justification break the spacing the type was drawn with.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-TYPE-09","area":"TYPE","level":"never","text":"Send an editable file that needs the fonts installed; PDFs and decks embed them.","why":"A file that falls back to a system font loses the brand on the client's machine. Embedded fonts print the same everywhere.","check":{"kind":"test","ref":"pdffonts on every press PDF, document and deck"},"appliesTo":["print","documents","slides"]},{"id":"BB-TYPE-10","area":"TYPE","level":"must","text":"In email, set text in Helvetica, Arial, sans-serif and the wordmark as an image; it is the only sanctioned fallback.","why":"Email clients strip web fonts, so the signature names a stack every client has and carries the wordmark as a picture.","check":{"kind":"test","ref":"the signature tests"},"appliesTo":["email"]}]},{"area":"VOICE","page":"/brand/voice","rules":[{"id":"BB-VOICE-01","area":"VOICE","level":"must","text":"Write as the studio in the first person, \"I\", and to the reader as \"you\".","why":"MAKR Labs is one person. Writing as a team that does not exist would be the first claim nobody can check.","check":{"kind":"manual"},"appliesTo":["site","docs","product","documents","email","social","slides"]},{"id":"BB-VOICE-02","area":"VOICE","level":"must","text":"Keep jokes in the joke zone; the literal zone stays plain words.","why":"The humour is loud on purpose (D-I2), and the labels, prices, errors and legal lines stay literal so nobody has to decode them.","check":{"kind":"component","ref":"checkSfx and checkBalloon; the rest by eye"},"appliesTo":["site","docs","product","documents","email","social","slides"]},{"id":"BB-VOICE-03","area":"VOICE","level":"never","text":"Use an em dash anywhere.","why":"It is the most common tell of generated copy, and the voice is written to sound like one person typing.","check":{"kind":"lint","ref":"brand/em-dash"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-VOICE-04","area":"VOICE","level":"never","text":"Use the banned tells: setup and punchline headings, \"X, not Y\" pairs, runs of fragments, \"no A, no B, no C\" lists, or leaning on the words honest, straight or real.","why":"These patterns read as generated filler. Specific detail says the same thing better.","check":{"kind":"component","ref":"COPY_TELLS in the copy checks"},"appliesTo":["site","docs","product","documents","email","social","slides"]},{"id":"BB-VOICE-05","area":"VOICE","level":"must","text":"Make every claim checkable: a number carries its source and its date.","why":"Proof over promises: a reader can test the claim, and a dated number never goes quietly stale.","check":{"kind":"manual"},"appliesTo":["site","docs","product","documents","email","social","slides"]},{"id":"BB-VOICE-06","area":"VOICE","level":"must","text":"Write dates, times, money and numbers in the formats of the voice page.","why":"One format everywhere means a date or a total never has to be read twice.","check":{"kind":"test","ref":"formatDate and formatMoney"},"appliesTo":["site","docs","product","documents","email","social","slides"]},{"id":"BB-VOICE-07","area":"VOICE","level":"must","text":"Pass every SFX through `checkSfx`, and never put one on an error, a price, a legal line, a destructive confirmation or a form field.","why":"An SFX is a caused event. On a serious line it turns a fact into a joke at the reader's expense.","check":{"kind":"component","ref":"checkSfx; the press DOM check"},"appliesTo":["site","docs","product","social","slides","print"]},{"id":"BB-VOICE-08","area":"VOICE","level":"must","text":"Use fictional people and businesses in every example, sample and fixture.","why":"Real names in samples leak client details and publish people who never agreed to it.","check":{"kind":"test","ref":"check:docs (fictional emails and phone numbers)"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-VOICE-09","area":"VOICE","level":"never","text":"Publish a price on the site: prices live in quotes, proposals and invoices.","why":"Every job is quoted on its scope, and a published price would be the first number a client could not check against their own project.","check":{"kind":"manual"},"appliesTo":["site","social","slides"]},{"id":"BB-VOICE-10","area":"VOICE","level":"must","text":"Use the fixed words as written: the action labels \"Get a quote\", \"Send\" and \"Email it instead\", the status words \"In development\", \"Private preview\", \"Preparing release\" and \"Live\", and the stamp words.","why":"Fixed words are learned once. A creative label on a button costs the reader a second look at the exact moment they want to act.","check":{"kind":"component","ref":"QuoteForm, the product card's status schema and isStampWord"},"appliesTo":["site","docs","product","documents","email","social","slides"]}]},{"area":"COMIC","page":"/brand/comic","rules":[{"id":"BB-COMIC-01","area":"COMIC","level":"must","text":"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.","why":"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.","check":{"kind":"press","ref":"rule 1, the walker"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-02","area":"COMIC","level":"must","text":"Print one hero per view: one splash or one SFX moment per view at Studio, and one shout balloon per view at every volume.","why":"Two heroes compete and neither lands (C2). The art budget counts them per view.","check":{"kind":"press","ref":"the ART_BUDGET counts"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-03","area":"COMIC","level":"must","text":"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.","why":"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).","check":{"kind":"test","ref":"21 §7, CK-01"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-04","area":"COMIC","level":"must","text":"Hold a panel to 3 balloons, 1 caption and 60 words, and a balloon or caption to 35 words.","why":"Comic lettering is display reading (C4, D-D7): short, or it stops being a comic and becomes small print.","check":{"kind":"component","ref":"checkBalloon"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-05","area":"COMIC","level":"must","text":"Point every tail at its speaker, or off the panel for the narrator; a tail never crosses another plate's text.","why":"The tail is how a reader knows who speaks (C5). Crossing text breaks both the speaker and the words.","check":{"kind":"test","ref":"21 §7, CK-02"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-06","area":"COMIC","level":"must","text":"Keep words, plates and the words regions of frames at 0°; frames may slant and art may tilt.","why":"Square text (C6, D-B9): the page can lean and tumble around words that hold still.","check":{"kind":"press","ref":"rule 12, square text"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-07","area":"COMIC","level":"must","text":"Keep gutters paper (night on Night, pulp at Press) and 1 rem or wider; saturated panels never touch.","why":"Paper gutters separate the panels and stop two saturated plates from vibrating against each other (C7).","check":{"kind":"press","ref":"rule 9 and the gutter check"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-08","area":"COMIC","level":"must","text":"Set long reading (paragraphs, pricing, forms, legal) in Schibsted on a words panel, never in balloons or captions.","why":"Comic capitals are for a few lines (C8). Anything a reader must study gets the text family.","check":{"kind":"component","ref":"Caption lettering=\"auto\""},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-09","area":"COMIC","level":"must","text":"Make actions hit keys or links with literal labels in the reading layer; an SFX may decorate a key, never replace its label.","why":"The key says what happens when you press it (C9). The SFX is the noise it makes.","check":{"kind":"press","ref":"the walker and axe"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-10","area":"COMIC","level":"must","text":"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.","why":"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.","check":{"kind":"test","ref":"21 §7, CK-01 at phone width"},"appliesTo":["site","docs","product"]},{"id":"BB-COMIC-11","area":"COMIC","level":"must","text":"Let the register follow the volume and the theme; a section may go one step louder than its page.","why":"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.","check":{"kind":"test","ref":"21 §7 registers"},"appliesTo":["site","docs","documents","social","slides","print"]},{"id":"BB-COMIC-12","area":"COMIC","level":"must","text":"Ship every comic fixture with long, short and empty content.","why":"Copy is never the length of the mock-up (C12). Long, short and empty cases show what fits before the words arrive.","check":{"kind":"test","ref":"the fixture registry"},"appliesTo":["site","docs"]},{"id":"BB-COMIC-13","area":"COMIC","level":"must","text":"Hide SFX from assistive technology with `aria-hidden`; a message an SFX carries also exists as text.","why":"A screen reader announcing POW! adds noise and no meaning (D-F5). The text says what happened.","check":{"kind":"press","ref":"the walker"},"appliesTo":["site","docs","product"]},{"id":"BB-COMIC-14","area":"COMIC","level":"never","text":"Put comic panels, balloons or SFX on a document page with prices, terms or payment details.","why":"A price is a promise. Comic art beside it makes the promise look like a joke.","check":{"kind":"test","ref":"the documents' DOM check"},"appliesTo":["documents","slides"]},{"id":"BB-COMIC-15","area":"COMIC","level":"must","text":"Give balloons to named speakers only, and quote a client only when their words are held in writing.","why":"A balloon is a person talking. Putting words in a client's mouth that they never wrote is a claim nobody can check.","check":{"kind":"manual"},"appliesTo":["site","docs","documents","social","slides","print"]}]},{"area":"IMAGE","page":"/brand/imagery","rules":[{"id":"BB-IMAGE-01","area":"IMAGE","level":"must","text":"Keep proof untouched: no crop beyond the frame, no recolour, no halftone and no retouching.","why":"Screenshots of client sites are proof (D-I1). Changing them would make the proof a picture.","check":{"kind":"component","ref":"ProofTreatmentError"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-IMAGE-02","area":"IMAGE","level":"must","text":"Print every other photo through the photo pipeline: duotone by default, a 7 px cell, screens at 45° and 75°.","why":"Printed photos sit in the brand's inks like everything else, and the pipeline makes them the same way every time.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-IMAGE-03","area":"IMAGE","level":"never","text":"Use stock photography, or a generated image presented as a person, a place or a piece of work.","why":"Every picture is either proof or plainly art. A stock photo or a fake portrait is neither.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-IMAGE-04","area":"IMAGE","level":"never","text":"Put an image behind text.","why":"Text sits on plates (D-B1). An image under words costs contrast at every point where the picture changes.","check":{"kind":"press","ref":"rule 1, two layers"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-IMAGE-05","area":"IMAGE","level":"must","text":"Draw icons and illustration from the shape alphabet and the kits; no other icon set.","why":"One alphabet in 2D and 3D (D-G2) is a large part of what makes the brand recognisable.","check":{"kind":"lint","ref":"brand/import"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-IMAGE-06","area":"IMAGE","level":"must","text":"Give every image literal alt text, and mark decorative art `aria-hidden`.","why":"Alt text is the literal zone: it says what the image shows, so a screen reader user gets the same page.","check":{"kind":"press","ref":"axe"},"appliesTo":["site","docs","product","documents","email","social"]},{"id":"BB-IMAGE-07","area":"IMAGE","level":"must","text":"Use photos of people only with their consent, and client logos only inside proof or with written permission.","why":"A face or a logo on the studio's materials reads as an endorsement. Consent and permission make it true.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-IMAGE-08","area":"IMAGE","level":"must","text":"Caption every MAX//OS screenshot \"Fictional demo data\".","why":"The demo cast is made up. The caption says so, so nobody mistakes it for someone's account.","check":{"kind":"manual"},"appliesTo":["site","docs","product","social","slides"]},{"id":"BB-IMAGE-09","area":"IMAGE","level":"must","text":"Show 3D only as print-shaded blocks: stills in documents, email, social and slides, and live 3D only on the site and the docs.","why":"One material keeps the blocks recognisable at every size (D-G1), and stills keep files light and identical everywhere.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-IMAGE-10","area":"IMAGE","level":"must","text":"Make case covers from project data with `caseCover`; never draw one by hand.","why":"A cover drawn from data is deterministic: the same project always prints the same cover.","check":{"kind":"manual"},"appliesTo":["site","docs","product","print","documents","social","slides"]}]},{"area":"LAYOUT","page":"/brand/layout","rules":[{"id":"BB-LAYOUT-01","area":"LAYOUT","level":"must","text":"Set everything on its medium's grid; art may bleed, text never does.","why":"The grid is what makes a loud page still look built. Text in the bleed is lost to the trim or the screen edge.","check":{"kind":"press","ref":"rule 14 at 320 px; the press artwork tests"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-LAYOUT-02","area":"LAYOUT","level":"must","text":"Print one hero per view, with paper gutters of 16 px or more (4 mm in print) between saturated areas.","why":"One hero is a focal point (D-B10); a gutter keeps saturated areas from vibrating against each other.","check":{"kind":"press","ref":"rules 7 and 9"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-LAYOUT-03","area":"LAYOUT","level":"must","text":"Keep text square at rest.","why":"Words that lean are harder to read and look accidental (D-B9). The art around them can lean instead.","check":{"kind":"press","ref":"rule 12; lint mk/tilt"},"appliesTo":["site","docs","product","print","documents","social","slides"]},{"id":"BB-LAYOUT-04","area":"LAYOUT","level":"must","text":"Keep print type 5 mm or more inside the trim on cards and stickers, and nothing meaningful in the bleed.","why":"The guillotine and the die drift by a millimetre or two; the safe area keeps every word on the card.","check":{"kind":"test","ref":"the press artwork's type boxes"},"appliesTo":["print"]},{"id":"BB-LAYOUT-05","area":"LAYOUT","level":"must","text":"Keep social text inside the safe zones; on a story, clear of the top 220 px and the bottom 260 px.","why":"Platforms print their own chrome over those strips; text there disappears behind it.","check":{"kind":"test","ref":"the card layout tests"},"appliesTo":["social"]}]},{"area":"MOTION","page":"/brand/motion","rules":[{"id":"BB-MOTION-01","area":"MOTION","level":"must","text":"Give every motion a cause; words never move once they land, and nothing reflows on hover.","why":"Motion explains what happened (D-H1). Words that keep moving, or a layout that jumps under the pointer, cost the reader their place.","check":{"kind":"press","ref":"motion; lint mk/hover-reflow"},"appliesTo":["site","docs","product","slides"]},{"id":"BB-MOTION-02","area":"MOTION","level":"must","text":"Let reduced motion always win.","why":"Some readers get sick from motion. The volume never overrides their setting.","check":{"kind":"press","ref":"the motion spec under reduced motion"},"appliesTo":["site","docs","product","slides"]},{"id":"BB-MOTION-03","area":"MOTION","level":"must","text":"Let ambient motion settle within 5 s at Quiet and Studio; loops at Press and Rave show a pause control.","why":"WCAG 2.2.2: anything that moves on its own for longer than five seconds needs a way to stop it.","check":{"kind":"press","ref":"the rAF counter"},"appliesTo":["site","docs","product"]},{"id":"BB-MOTION-04","area":"MOTION","level":"never","text":"Use glow, confetti, or more than 3 flashes a second.","why":"Flashes can trigger seizures (WCAG 2.3.1), and glow and confetti are the generic effects the system was built to avoid.","check":{"kind":"lint","ref":"mk/confetti; the release flash review"},"appliesTo":["site","docs","product","social","slides"]},{"id":"BB-MOTION-05","area":"MOTION","level":"must","text":"Animate slides only with the panel arrival, at Studio, and not at all at Quiet or under reduced motion; PDFs, email and social images stay still.","why":"A deck is read in a room; one arrival per slide keeps attention on the speaker.","check":{"kind":"test","ref":"the deck tests"},"appliesTo":["slides","documents","email","social"]},{"id":"BB-MOTION-06","area":"MOTION","level":"must","text":"Animate transform, opacity, clip-path and the registered custom properties only; never a layout property.","why":"Layout animation shifts the page and drops frames; the compositor properties stay smooth and cost no layout shift.","check":{"kind":"press","ref":"the layout-shift and long-frame checks"},"appliesTo":["site","docs","product"]}]},{"area":"SOUND","page":"/brand/motion","rules":[{"id":"BB-SOUND-01","area":"SOUND","level":"must","text":"Keep sound off by default behind a visible toggle; Quiet mutes, and only the kit's voices play.","why":"Sound is a toy a visitor turns on (D-H4). Unexpected noise in an office or on a train loses the visitor.","check":{"kind":"press","ref":"the sound gating; the voices by ear"},"appliesTo":["site","docs","product"]},{"id":"BB-SOUND-02","area":"SOUND","level":"never","text":"Autoplay sound or video.","why":"Autoplay takes the choice away from the reader and fails WCAG 1.4.2 for sound.","check":{"kind":"manual"},"appliesTo":["site","docs","product","social","slides"]}]},{"area":"VOLUME","page":"/brand/volume","rules":[{"id":"BB-VOLUME-01","area":"VOLUME","level":"must","text":"Pick the volume from `CHANNEL_VOLUMES`; a section may go one step louder, never two.","why":"The channel table is the brand's loudness map. One step of contrast between sections reads as rhythm; two reads as a different site.","check":{"kind":"press","ref":"the template pins; the generators read the same table"},"appliesTo":["site","docs","product","print","documents","email","social","slides"]},{"id":"BB-VOLUME-02","area":"VOLUME","level":"must","text":"Print prices, legal lines, forms and document body pages at Quiet.","why":"Where the reader decides or signs, nothing should compete with the words.","check":{"kind":"test","ref":"the documents' DOM check"},"appliesTo":["site","product","documents","slides"]},{"id":"BB-VOLUME-03","area":"VOLUME","level":"must","text":"Keep Rave for the 404, easter eggs, launches, campaigns and editions.","why":"Rave is a party. Used everywhere it stops being one (D-B3).","check":{"kind":"manual"},"appliesTo":["site","docs","social","slides"]},{"id":"BB-VOLUME-04","area":"VOLUME","level":"must","text":"Keep the reading layer identical at every volume; only the expressive layer moves.","why":"Text, controls and data read the same at Quiet and at Rave (D-B2), so turning the dial never costs legibility.","check":{"kind":"press","ref":"A10, the reading layer by computed style"},"appliesTo":["site","docs","product","print","documents","social","slides"]}]},{"area":"PRINT","page":"/brand/print","rules":[{"id":"BB-PRINT-01","area":"PRINT","level":"must","text":"Build CMYK only from `print.json` for the job's stock; a printer's own profile replaces ours by regenerating the file.","why":"The builds are measured through ICC profiles with their colour difference recorded. A build guessed by eye prints a different colour on every press.","check":{"kind":"test","ref":"pnpm print:check"},"appliesTo":["print"]},{"id":"BB-PRINT-02","area":"PRINT","level":"must","text":"Print type and rules in K only; floods of 10 mm or more in the rich black of `print.json`, with CMY pulled back 0.15 mm from knockouts.","why":"Four-colour black on fine type misregisters into a coloured blur; rich black makes large floods deep, and the pullback hides any misregistration.","check":{"kind":"test","ref":"the Ghostscript separations"},"appliesTo":["print"]},{"id":"BB-PRINT-03","area":"PRINT","level":"must","text":"Keep total ink within the profile's limit, and rich black at 260 % or less.","why":"Too much ink smears, dries slowly and offsets onto the next sheet.","check":{"kind":"test","ref":"the Ghostscript separations"},"appliesTo":["print"]},{"id":"BB-PRINT-04","area":"PRINT","level":"must","text":"Print the Night side as a rich black flood with knockouts: inks print on paper inside them, and the K square knocks out to paper.","why":"CMYK inks are transparent, so a light ink printed on black disappears. Knockouts give every ink its own paper.","check":{"kind":"test","ref":"the business card's separations"},"appliesTo":["print"]},{"id":"BB-PRINT-05","area":"PRINT","level":"never","text":"Simulate the fluorescent Night inks in CMYK; they print only as approved spot inks.","why":"Fluorescent inks have no CMYK equivalent; a simulation prints as a dull version and loses the point of the neon.","check":{"kind":"manual"},"appliesTo":["print"]},{"id":"BB-PRINT-06","area":"PRINT","level":"must","text":"Use a spot ink only after Max approves it against a current physical guide and a printer's drawdown.","why":"Spot candidates are matched by eye on a screen; only paper under real light shows whether they match (D-P9, DF-66).","check":{"kind":"test","ref":"the spot entry's status in print.json"},"appliesTo":["print"]},{"id":"BB-PRINT-07","area":"PRINT","level":"must","text":"Send the press pipeline's CMYK PDF: fonts embedded, trim and bleed boxes, bleed, marks outside the bleed, no RGB objects, rasters at 300 ppi or more at size.","why":"That is what a print shop's preflight asks for; a file that passes it prints without a phone call.","check":{"kind":"test","ref":"pnpm print:check"},"appliesTo":["print"]},{"id":"BB-PRINT-08","area":"PRINT","level":"must","text":"Give stickers the `CutContour` spot path (0.25 pt, overprint), 2 mm of bleed past the cut and a 3 mm white border.","why":"The cutter follows the named spot path, and the border and bleed hide the cutter's drift.","check":{"kind":"test","ref":"pnpm print:check"},"appliesTo":["print"]},{"id":"BB-PRINT-09","area":"PRINT","level":"must","text":"Approve colour from a hard proof or a press check under D50 light, never from a screen.","why":"Screens emit light and paper reflects it. No monitor shows what the press will print.","check":{"kind":"manual"},"appliesTo":["print"]},{"id":"BB-PRINT-10","area":"PRINT","level":"never","text":"Imitate Bone with a printed tint; choose a warm white stock.","why":"A tint flood greys the paper and changes every ink printed on it. The stock is the paper colour.","check":{"kind":"manual"},"appliesTo":["print"]},{"id":"BB-PRINT-11","area":"PRINT","level":"never","text":"Print halftone dots under 0.3 mm or rules under 0.25 pt at size.","why":"Smaller dots and rules fill in or drop out on press.","check":{"kind":"test","ref":"the press artwork tests"},"appliesTo":["print"]},{"id":"BB-PRINT-12","area":"PRINT","level":"must","text":"Print business cards with a Bone front at Studio and a Night back at Press, on the uncoated profile, from the press pipeline.","why":"The card is the brand in one hand: the calm front carries the contact lines, the back carries the mark.","check":{"kind":"test","ref":"the business card tests"},"appliesTo":["print"]}]},{"area":"DOC","page":"/brand/templates/documents","rules":[{"id":"BB-DOC-01","area":"DOC","level":"must","text":"Make quotes, proposals, invoices and letters only with the templates, from JSON.","why":"The templates carry the type, the layout and the arithmetic; a document made by hand drifts from all three.","check":{"kind":"manual"},"appliesTo":["documents"]},{"id":"BB-DOC-02","area":"DOC","level":"must","text":"Let totals come from the template's arithmetic, never typed.","why":"Integer cents rounded half up at every step (`computeTotals`) give the same total every time; a typed total is one typo from a wrong invoice.","check":{"kind":"test","ref":"computeTotals"},"appliesTo":["documents","slides"]},{"id":"BB-DOC-03","area":"DOC","level":"must","text":"Number documents Q-YYYY-NNN, P-YYYY-NNN and INV-YYYY-NNN, and give status as a literal word with an optional stamp (Sent, Approved, Paid).","why":"A number and a word are what a client's bookkeeper files. The stamp is the fun beside it.","check":{"kind":"test","ref":"the document schemas"},"appliesTo":["documents"]},{"id":"BB-DOC-04","area":"DOC","level":"must","text":"Keep real client and payment details outside this repo; the repo holds fictional samples only.","why":"The repo is shared with agents and contractors. Real details live in Max's studio profile on Max's machine.","check":{"kind":"test","ref":"check:docs; the rest by eye"},"appliesTo":["documents","email","print"]},{"id":"BB-DOC-05","area":"DOC","level":"must","text":"Enter tax lines as inputs (label, rate, registration number); the template never decides tax.","why":"Tax depends on the client and the province. The person sending the document knows it; the template does not.","check":{"kind":"test","ref":"the invoice schema"},"appliesTo":["documents"]},{"id":"BB-DOC-06","area":"DOC","level":"must","text":"Print documents on Letter by default and A4 on request, as tagged PDFs with the fonts embedded; press runs go through the press pipeline.","why":"Letter suits a Toronto studio with North American clients. A tagged PDF is accessible, and screen documents are RGB while press artwork is CMYK.","check":{"kind":"test","ref":"pdfinfo Tagged and the page size"},"appliesTo":["documents"]}]},{"area":"EMAIL","page":"/brand/templates/email-signature","rules":[{"id":"BB-EMAIL-01","area":"EMAIL","level":"must","text":"Use the generated signature, with no other images, banners, quotes or social icons.","why":"Every extra image is a remote load, a spam signal and one more thing a client's email app can break.","check":{"kind":"manual"},"appliesTo":["email"]},{"id":"BB-EMAIL-02","area":"EMAIL","level":"must","text":"Keep the signature to 5 lines, text at 14 px or more, in ink and ink-2 only, with links underlined and a plain-text twin.","why":"Email clients invert colours in dark mode; ink and ink-2 survive the inversion, and the plain-text twin covers clients that show no HTML.","check":{"kind":"test","ref":"the signature tests"},"appliesTo":["email"]},{"id":"BB-EMAIL-03","area":"EMAIL","level":"never","text":"Add tracking pixels or remote fonts.","why":"A signature is a courtesy. Tracking pixels and remote fonts spy on the reader and get blocked anyway.","check":{"kind":"test","ref":"the signature tests"},"appliesTo":["email"]},{"id":"BB-EMAIL-04","area":"EMAIL","level":"must","text":"Host the signature's mark at an absolute HTTPS address with alt text, and keep the HTML to 10,000 characters or fewer.","why":"Email clients load images only from absolute addresses, and Gmail cuts signatures longer than its limit.","check":{"kind":"test","ref":"the signature tests"},"appliesTo":["email"]}]},{"area":"SOCIAL","page":"/brand/templates/social","rules":[{"id":"BB-SOCIAL-01","area":"SOCIAL","level":"must","text":"Make posts with the card templates: text on the paper plate, 26 px or more at 1080 wide.","why":"Feeds show posts small. The templates keep the words on paper and big enough to read on a phone.","check":{"kind":"test","ref":"G2's card tests"},"appliesTo":["social"]},{"id":"BB-SOCIAL-02","area":"SOCIAL","level":"must","text":"Print at most one SFX per card, never beside a price, and one display moment.","why":"A card is one view: one shout and one headline.","check":{"kind":"test","ref":"the card tests"},"appliesTo":["social"]},{"id":"BB-SOCIAL-03","area":"SOCIAL","level":"must","text":"Post with the `cardAlt` alt text, and make the caption's first line say what the post is.","why":"The image is the joke zone; the alt text and the first line are the literal zone that says what the post is about.","check":{"kind":"manual"},"appliesTo":["social"]},{"id":"BB-SOCIAL-04","area":"SOCIAL","level":"must","text":"Hold a carousel to 10 images: a cover, 1 to 8 slides and an end card with a literal action.","why":"Platforms cap carousels at 10; the end card says what to do next in plain words.","check":{"kind":"test","ref":"the carousel schema"},"appliesTo":["social"]}]},{"area":"SLIDES","page":"/brand/templates/deck","rules":[{"id":"BB-SLIDES-01","area":"SLIDES","level":"must","text":"Make decks from the deck template, with 40 words or fewer on a content slide and body type of 32 px or more on the 1920 × 1080 canvas.","why":"The room reads a slide in seconds. The template's grid and type roles are sized for the back row.","check":{"kind":"test","ref":"the deck schema and tests"},"appliesTo":["slides"]},{"id":"BB-SLIDES-02","area":"SLIDES","level":"must","text":"Print price and timeline slides at Quiet with no SFX.","why":"The price slide is where the client decides. Nothing on it should look like a joke.","check":{"kind":"test","ref":"the deck's DOM check"},"appliesTo":["slides"]},{"id":"BB-SLIDES-03","area":"SLIDES","level":"must","text":"Send decks as a PDF, and present from the HTML file or the PDF.","why":"Both carry the fonts and the art. An editable copy would need the fonts on every machine.","check":{"kind":"manual"},"appliesTo":["slides"]},{"id":"BB-SLIDES-04","area":"SLIDES","level":"must","text":"Keep comic slides to one in five slides of a deck.","why":"A comic strip is a pause in the pitch. More than one in five turns the pitch into a comic.","check":{"kind":"test","ref":"deckInputSchema"},"appliesTo":["slides"]}]}],"downloads":["/brand/downloads/makr-labs-logo-pack.zip","/brand/downloads/makr-labs-colours.zip","/brand/downloads/makr-labs-fonts.zip","/brand/downloads/makr-labs-business-card-na.pdf","/brand/downloads/makr-labs-business-card-iso.pdf","/brand/downloads/makr-labs-stickers.zip","/brand/downloads/makr-labs-brand-spec-sheet-a4.pdf","/brand/downloads/makr-labs-brand-spec-sheet-letter.pdf","/brand/downloads/makr-labs-templates.zip","/brand/downloads/makr-labs-social-samples.zip","/brand/downloads/samples/fernlight-quote.pdf","/brand/downloads/samples/pebblepath-proposal.pdf","/brand/downloads/samples/fernlight-invoice.pdf","/brand/downloads/samples/letter-sample.pdf","/brand/downloads/samples/deck-pebblepath.pdf","/brand/downloads/samples/deck-pebblepath.html","/brand/downloads/samples/email-signature.html","/brand/downloads/samples/email-signature.txt","/brand/email/mark-96.png","/samples/poster-fernlight-a3.pdf","/samples/poster-fernlight-tabloid.pdf","/samples/one-pager-fernlight-a4.pdf","/samples/one-pager-fernlight-letter.pdf"]}