DDB-000185 Animals & Nature
What do you call cows with no legs?
Reveal the punchline
Brand guide
Take the presentation seriously.
How dadabase. looks, sounds and behaves. Everything here is built from the same tokens the site uses.
01
Positioning
dadabase. is the internet’s unnecessarily serious collection of terrible jokes. The humor comes from the contrast between a professional presentation and a ridiculous subject.
Imagine a prestigious research institution dedicated exclusively to jokes that make people groan. The website, the books and the packaging should each look like they belong to it.
- Tagline
- Bad jokes. Excellent delivery.
- Positioning line
- The official-looking home of unofficially terrible humor.
- Personality
- Dry and deadpan. Playful without being childish. Confident and self-aware. Slightly absurd. Warm. Unnecessarily official.
02
Logo
The wordmark is bold, lowercase and simple, set in Archivo Black with slightly tightened spacing. The final period is part of the identity and never drops off.
The D. monogram
A geometric D with a full stop, drawn as paths on a 32 unit grid. Used for the favicon, social avatars, packaging, and small merchandise. It is not a database icon and never will be.
Do
- Keep clear space around the wordmark equal to the width of its period.
- Use Almost Black or Paper Cream for the letters, and Mustard or Tomato for the period.
- Set it as live text or from the supplied paths, never redrawn by hand.
Do not
- Add a mustache, tie, cartoon dad, or any clip art.
- Stretch, rotate, outline, shadow, or apply a gradient.
- Separate the period, or set the name in capitals.
- Show the monogram as a literal database icon.
03
Color
Cream and almost black dominate. Yellow is the accent. Red is used selectively. No gradients, ever. Every color
is a CSS variable in src/styles/global.css, and components use semantic tokens
rather than raw values.
- #F7F1E5
Paper Cream
--color-cream
Page background and large editorial sections.
- #24231F
Almost Black
--color-ink
Primary type, navigation, borders, dark sections.
- #F2BD42
Mustard Yellow
--color-mustard
The brand accent. Featured jokes, promotions, key buttons.
- #D94A38
Tomato Red
--color-tomato
Category markers and occasional emphasis. Fills and large type only.
- #6889A1
Faded Blue
--color-faded-blue
Secondary product variations and supporting fills. Large type only.
- #FFFDF7
Warm White
--color-warm-white
Elevated surfaces, product backgrounds, reading areas.
Text-safe variants
Tomato Red and Faded Blue are too light for small text on cream. These derived tones exist so small type stays readable. Use the pure brand tones for fills, markers and large display type.
- #B33A2A
Tomato Ink
--color-tomato-ink
Small red text on cream or warm white.
- #47657D
Blue Ink
--color-blue-ink
Small blue metadata text on cream or warm white.
- #5E5A50
Muted
--color-muted
Secondary body text.
- #D8CDB8
Line Soft
--color-line-soft
Quiet dividers. Never carries meaning on its own.
Contrast
| Pairing | Ratio | Use | Result |
|---|---|---|---|
| Almost Black on Paper Cream | 13.98 : 1 | Body text | Passes AA |
| Almost Black on Mustard Yellow | 9.09 : 1 | Body text, buttons | Passes AA |
| Paper Cream on Almost Black | 13.98 : 1 | Body text on dark | Passes AA |
| Mustard Yellow on Almost Black | 9.09 : 1 | Labels on dark | Passes AA |
| Tomato Ink on Paper Cream | 5.25 : 1 | Small red text | Passes AA |
| Blue Ink on Paper Cream | 5.45 : 1 | Small metadata | Passes AA |
| Muted on Paper Cream | 6.11 : 1 | Secondary text | Passes AA |
| Almost Black on Faded Blue | 4.26 : 1 | Large type only | Large text only |
| Almost Black on Tomato Red | 3.73 : 1 | Large type only | Large text only |
| Tomato Red on Paper Cream | 3.74 : 1 | Fills and large type only | Large text only |
04
Typography
Typography does most of the work. The jokes are the largest, boldest thing on every screen.
Display
Aa
Archivo Black
Headlines and jokes. Tight line spacing. One display face only.
Body
Aa
DM Sans
Reading text, navigation and buttons. Comfortable on a phone.
Utility
Aa
IBM Plex Mono
Joke IDs, categories, dates and archive references. Uppercase sparingly.
Scale
Display XL Hero headlines
Bad jokes. Excellent delivery.
Display L Section headlines
Bad jokes. Excellent delivery.
Display M Subsections
Bad jokes. Excellent delivery.
Display S Card titles
Bad jokes. Excellent delivery.
Lead Intro paragraphs
Bad jokes. Excellent delivery.
Body Reading text
Bad jokes. Excellent delivery.
Label IDs, categories, dates
DDB-000412 Food & Drink
05
Brand elements
A restrained kit. Each element has a job, and none of them is decoration.
Editorial dividers
Section
Joke ID and category marker
DDB-000412
Food & Drink
The ID is permanent and appears on every joke. The red square marks a category.
Badges
Archive Featured Volume 001
Archive stamp
At most one per view. Decorative, so hidden from assistive technology.
Groan rating
Specimen only. Ratings are editorial scores and render only when a joke has one. No joke has one yet, and community votes are never shown.
Ledger grid
010203
Hairline-separated cells, like a printed index. Used for jokes, categories and products.
06
Components
Flat, rectangular, tactile. A hard offset shadow, a 3px radius, and no gradients. Targets are at least 44px tall.
Buttons
On dark
Form field
Joke card
07
The joke
The setup is the largest thing on screen. The punchline stays hidden until asked for, and appears marked in yellow. This is the live component, using a real archive joke.
DDB-000633 Food & Drink
What do you call fake spaghetti?
An im-pasta!
08
Voice
- Short, confident sentences.
- Dry humor over exaggerated enthusiasm.
- No generic marketing language. No unnecessary exclamation marks.
- Navigation and checkout language stays plain and clear.
- Use humor strategically, not in every sentence.
- Never make the visitor work to understand an interface.
- Website headline
- The internet has enough problems. Here’s another one.
- Daily joke
- Today’s contribution to comedy.
- Email signup
- Make your inbox slightly worse.
- Shop
- Questionable purchases. Excellent gifts.
- Calendar
- 365 days of disappointing your family.
- Joke collection
- An extensive archive of questionable humor.
- 404 page
- We looked everywhere. Even under the couch.
09
Products
Every product shares one structure: cream or color-blocked paper, bold type, a small joke ID, and an occasional yellow or red accent. These are typographic mockups, not photographs of finished products.
10
Accessibility
- All body and control text meets WCAG AA contrast. Pairings that do not are limited to large type or fills.
- Every interactive element has a visible focus ring: 3px Almost Black, or Mustard on dark surfaces.
- The punchline reveal is a real button with expanded state, and focus moves to the punchline when it opens.
- Without JavaScript the punchline is simply visible.
- Animation is minimal, and is removed for visitors who prefer reduced motion.