Contents
Design system, issue 1
Every colour, type size and component on the site lives here. Change a style and every page follows; edit a main component and every copy updates.
Colour
20 colour styles in three folders, named by what they look like. Text only ever uses Text/Black or Text/White; quieter text lowers the layer’s opacity.
Brand: panels, titles and bursts
Red
#C0282F
Red titles, buttons, the curtain and one comic panel colour.
Dark Red
#8A1A1F
Halftone dots in red titles, button edges and the curtain folds.
Orange
#DC5A2C
A comic panel colour, client stickers and the Branding strip.
Yellow
#FFC738
Panels, tape, form fields and the FAQ and newsletter slabs.
Gold
#EDAA00
Yellow titles and their dots, and the page-transition word.
Light Yellow
#F7D774
Client stickers, captions and soft panels.
Pink
#F4BBAE
Client stickers and Team panels.
Blue
#2D6A7A
The showreel, a comic panel colour and dark panels.
Navy
#1E4A57
The footer's night sky and dark panels such as the About hero.
Sky
#5AA8B9
Story and step panels, client stickers and the Websites strip.
Green
#3E9468
The Process strip and the newsletter's sent state.
Text: every word on the site
Black
#1D1C1B
Every text on light fills: headings, body, labels and buttons.
White
#FBF4DF
Every text on dark fills: the footer, dark panels, captions on photos.
Neutral: ink, paper, shadows and glows
Ink
#1D1C1B
Outlines, title drops and dark fills. Text uses Text/Black.
Ink 42%
#1D1C1B 42%
Cast shadows, placeholders and quiet borders.
Ink 10%
#1D1C1B 10%
Thin dividers, dots and the comic book's spine.
Paper
#FBF4DF
Light fills and the rings around titles. Text uses Text/White.
Newsprint
#F5EACB
Older paper: this sheet, the comic page and the origin story.
White 50%
#FFFFFF 50%
Crisp highlights: the push button's shine and tape rims.
White 10%
#FFFFFF 10%
The footer sky's dots and soft glows on dark fills.
Type
Luckiest Guy for headings, Comico for everything else. Fifteen styles, each with its HTML tag. Sizes read desktop / tablet / phone.
Comic titles: every page and section heading
Made with the Comic Title code component, never a text style: Ring Paper 5, Outline Ink 6, Drop Ink 9 by 10, Dot Size 9. Tag H1 for the page title (84 to 130 px on desktop), H2 for section titles (64 to 96 px). Set Size on each breakpoint, about 80% on tablet and 55% on phone. A line break in Text splits a title over two lines.
Red title
Fill Brand/Red, Dots Brand/Dark Red. On light panels: Paper, Newsprint, Yellow, Sky, Pink.
Used on: most section titles
Gold title
Fill and Dots Brand/Gold. On dark or strong panels: Navy, Blue, Red, Orange.
Used on: dark and strong panels
Paper title
Fill and Dots Neutral/Paper, no ring (Ring Width 0), Outline and Drop Ink. On a red panel, where gold would clash.
Used on: the hero, the comic cover
Display
Luckiest Guy 200 / 150 / 88, p
H1
Luckiest Guy 112 / 88 / 54, h1
Tape
Luckiest Guy 100 / 76 / 40, h1
H2
Luckiest Guy 68 / 56 / 40, h2
H2 - Small
Luckiest Guy 56 / 46 / 34, h2
H3
Luckiest Guy 34 / 30 / 26, h3
H3 - Small
Luckiest Guy 24 / 22 / 20, h3
Heading 4
Comico 22, h4
Button Label
Luckiest Guy 20, p
Button Label Small
Luckiest Guy 16, p
Paragraph Large
Comico 22 / 20 / 18, p
Paragraph Medium
Comico 17, p
Paragraph Small
Comico 15, p
Label
Comico 14, p
Label Small
Comico 12, p
Links: four link styles, for text that is a link
Editorial Link
Red with a thin wavy underline; on hover Ink with a straight line.
Use it: inside paragraphs and articles
Nav Link
Ink; on hover, and on the current page, Red.
Use it: lists of links
Inverse Link
Paper on dark fills; on hover a thick wavy Red underline.
Use it: text links on dark panels
Footer Link
Paper; on hover a 2 px Red underline.
Use it: the footer
Shape & spacing
Square panels, thick Ink lines and hard shadows with no blur, like ink on cheap paper, on a steady spacing scale.
Borders
Always Ink: 3 px on chips, 4 on buttons, 5 on panels and strips, 6 on feature cards.
Used on: everything
Hard shadows
Ink, no blur, down and to the right: 3 px on chips, 6 on buttons, 7 to 8 on panels and cards.
Used on: buttons, panels, cards
Corners
Square by default. Only chips, speech bubbles and round stickers curve.
Used on: everything
Panel gutters
Sections meet at slanted, hatched gutters drawn by Panel Edge: 5 px line, 18 px side gutter, slant -22 on desktop.
Used on: every section
Spacing
Gaps and padding come from 8, 12, 16, 20, 24, 32, 40, 48, 56, 72, 88, 96, 120, 140 and 160. Sections get 140 / 120 / 88 above and below.
Use it: every gap and padding
Widths
Desktop from 1200 px, tablet 810 to 1199, phone below 810. Content sits in a centred 1600 px column with 40 / 32 / 20 px sides (48 on inner pages); panels run full width.
Use it: every section
Site-wide pieces
In Main Layout or on every page.
Meanwhile, at the hiring desk…
Page Opener
The first section of a new page: dotted panel, corner caption, comic title (the H1), intro and an optional button. Variants: Desktop, Tablet, Phone.
Use it: every new page
Button
The comic button: Ink border, hard shadow and an ink blob. Variants: Primary, Light, Big, Small, with hovers.
Used on: every page
Menu
Close
Menu Toggle
The word and the icon swap between Menu and Close. Variants: Menu, Close, with hovers.
Used on: the navigation
Nav Panel
A big link panel in the open menu. Variants: Dark, Light, Big Dark, Big Light, with hovers.
Used on: the menu
Meanwhile, back at the studio…
Narration
The caption box tucked into a section's top-left corner. Variants: Default, Small, Corner, Corner Small.
Used on: every section after the hero
Shh! It's starting.
Speech Bubble
A comic speech bubble; Talk Lines types its sentences. Variants: Tail Left, Tail Right, Thought, Shout.
Used on: Home, 404
Mail Caption
The footer's email address as a caption box. Variants: Default, Phone, with hovers.
Used on: the footer
Street Sign
A footer link painted on a street sign. Variants: Default, Small, with hovers.
Used on: the footer
Social Chip
A social link as an ink chip. With a hover.
Used on: the footer
Home
The comic page: hero, showreel, comic book, origin story, clients, testimonials and the process.
Don't
press
Push Button
The big red button in the hero; pressing it frees the page. With a hover.
Used on: Home's hero
Roll tape! 0:58
Video Panel
A video in a comic frame: plays in view, opens full screen.
Used on: Home
Meanwhile, at a farm shop outside Lisbon...
Larder & Co.
Packaging
2025
We built one patterned system in bright colours, one colour per product family, so the whole range reads as one shelf.
Comic Spread
Two facing pages of the comic book, one project each. Variants: Spread, Medium, Stacked.
Used on: Home's comic book
Yuzzu Soda
Cover Cell
A cell on the comic book's contents cover. With a hover.
Used on: Home's comic book
Back
Next
Book Tab
The side tabs that turn the book's pages. Variants: Right, Left, with hovers.
Used on: Home's comic book
Contents Row
A row of the contents page, with a commentator's remark. Variants: Default, Phone, with hovers.
Used on: Home
Can you do our packaging too?
68% of clients come back for a second job.
Story Panel
A slanted panel of the origin story strip. Variants: Speech, Thought, Burst, Call, Thought Wide, Burst Wide, Speech Wide, Call Wide, Thought Phone, Burst Phone, Speech Phone, Call Phone.
Used on: Home
Client Sticker
A client's logo as a sticker in the album. Variants: Square, Round, Empty, Small, with hovers.
Used on: Home
Quote Card
A client's quote as a comic panel. Variants: Default, Invite, with hovers.
Used on: Home
The tees sold out before the festival opened.
Tom Okafor
Musse Design Week
Talking Head
A person drawn in comic style beside their words. Variants: Default, Phone.
Used on: Home
Silhouette
An inked cut-out figure.
Used on: Home
Step 1
Week 1
Say hello
A call or a coffee. We tell you honestly if we're the right studio.
Done!
Draw Step
A process step whose badge draws itself. Variants: Guide, Sketch, Inked, Printed.
Used on: Home's process
A rough idea, even a scribble
Need Item
One line of the You'll need list.
Used on: Home's process
About & Projects
The About page’s cast, timeline and lift, and the project pages.
Theo Marsh
Illustrator
Team Panel
A cast member: cut-out photo over a colour panel. Variants: Default, Phone, Open, Open Phone, with hovers.
Used on: About
2019
Benday opens
Theo and Nuno leave agency life to design for small companies.
Milestone
A year on the timeline. Variants: Up, Down.
Used on: About
Award Clipping
A press clipping, stamped once it is on screen. Variants: Default, Stamped, Stamped Late, Waiting Late, with hovers.
Used on: About
Street
Benday
Call
Benday
Ding!
Welcome to Benday. Mind the gate!
Press me
Lift
The lift to the studio: doors, gate and call buttons. Variants: Closed, Open, Phone Closed, Phone Open.
Used on: About
Call
Call
Call Button
The lift's call button, idle or lit. Variants: Idle, Lit, with hovers.
Used on: inside the Lift
Project Panel
A project as a comic panel with its tags. Variants: Landscape, Portrait, Square, with hovers.
Used on: /projects, project pages
Journal & Pricing
The journal’s strips and filters, the article page, and the pricing page.
Journal Strip
An article as a comic strip: cover, title and topic colour. Variants: Default, Featured, Split, Stacked, Open, Open Tablet, Open Phone, with hovers.
Used on: Journal, articles
Branding
Filter Chip
A topic chip above the journal. Variants: Off, On, with hovers.
Used on: Journal
Signup Button
The newsletter button, with Sending, Sent and Error. Variants: Default, Sending, Sent, Error, with hovers.
Used on: Journal, articles
“Three rounds in clay before a single pixel. Weird. Worked.”
Tom Okafor, Musse Design Week
Pull Quote
A quote placed inside an article's text.
Used on: inside article text
Monthly partner
No.1
£2,500
From, a month
Two design days a week
One shared request board
Most picked!
Power Card
A pricing plan as a trading card. Variants: Default, Featured, with hovers.
Used on: Pricing
How long does it take?
A sprint is five days. Most brand and website projects take six to ten weeks, planned week by week with you before we start.
Who owns the work?
Tap for the answer
FAQ Strip
A question; a tap opens the studio's answer beside it. Variants: Open, Closed, Closed Phone, Open Phone, with hovers.
Used on: Pricing
Contact & 404
Theo’s chat form and the Wanted poster.
Hi, I'm Theo! What should I call you?
Chat Bubble
A message in Theo's contact chat.
Used on: Contact
First…
Same day
A real person on the team reads every note and replies within a day.
Step Panel
A step of the contact form.
Used on: Contact
Send Burst
The Send button that bursts into Sent. Variants: Default, Sending, Sent, Error, with hovers.
Used on: Contact
Motion & code
Code components and overrides in Codes/. Their controls take colour styles; fonts come from the font picker.
Comic Title
An outlined comic heading: dotted fill, ring, outline and a deep drop. Set Size per breakpoint.
Used on: Every page
Comic Photo
Redraws a photo as comic art in the six inks, or shows the real photo.
Used on: Home, About, Contact, 404
Burst
The starburst behind sound effects and badges; a Comic Title goes on top.
Used on: Home, project pages, 404
Rays
The sunburst background with fading Ben-Day dots; with both stripes one colour, a dotted panel.
Used on: Home, Pricing, articles, footer
Comic Panels
A section background cut into slanted comic panels that open one by one.
Used on: Home
Panel Edge
Turns a section into a comic panel: hatched gutter, ink line, slanted top and bottom.
Used on: Every section
Panel Shape
A panel cut on a slant, with fill, dots and speed lines.
Used on: Story Panel
Explosion
The closing panel's blast behind the Start a project button.
Used on: Every page
Smoke
Puffy two-tone clouds that billow and back off from the blast.
Used on: Every page
Explosion Transition
The page change: a link goes off like the blast, then the smoke clears on the new page.
Used on: Every page
Ink Cursor
The pointer: a paper arrow, a starburst over links, a bubble on project and email links.
Used on: Every page
Searchlight
The footer's rooftop lamp throwing the logo onto a cloud.
Used on: The footer
Skyline
The footer's night city with lit windows.
Used on: The footer
Comic Reel
The showreel screen: plays silently in view, full screen with sound on a click; YouTube too.
Used on: Home, Video Panel
Comic Book
Turns the project list into a book: cover, page turns, tabs, keys and swipe.
Used on: Home
Commentary
Hands each Contents Row's remark to the commentator's speech bubble.
Used on: Home
Curtains
Theatre curtains that part when the section scrolls in.
Used on: Home
Speech Bubble
The bubble shape inside the Speech Bubble component.
Used on: Speech Bubble
Talk Lines
Types a bubble's sentences one by one; a tap skips ahead.
Used on: Speech Bubble
Scroll Lock
Holds the page still until the hero's button is pressed.
Used on: Home's hero
Draw Badge
The process badge that draws itself up to its Stage.
Used on: Draw Step
Pencil Trail
A dotted pencil line joining the process badges.
Used on: Home's process
Timeline
Moves the timeline sideways as the page scrolls.
Used on: About
Slot Machine
Finishes a sentence one fact at a time; a tap spins the reel.
Used on: About
Contact Sheet
A big print beside small frames; hover a frame to print it.
Used on: About
Stamp On View
Stamps each Award Clipping once it is on screen.
Used on: About
Lattice
The criss-cross metal of the lift gate.
Used on: Lift
Gallery Lightbox
The project gallery: a tilted masonry that opens into a slideshow.
Used on: Project pages
List Comma
Hides the last comma of a repeated list.
Used on: Project Panel
Topic Filter
The journal chips: filters the strips in place and keeps ?topic= in the address.
Used on: Journal
Article Contents
The article's table of contents, built from its H2s.
Used on: Articles
Share Buttons
X, LinkedIn, Facebook, email and Copy link for the page.
Used on: Articles
Typed Path
Shows the address the visitor typed on the 404 poster.
Used on: 404