A private workspace for our team. Enter the access key to continue.
That key doesn't look right. Try again.
01 — Identity
CDC and Mike & Matty share one visual language. The only thing that flips is the mode — CDC reads clean and editorial on cream, Mike & Matty reads cinematic and moody on near-black.
Light Room
Editorial, warm, restrained. Think a premium print magazine: generous whitespace, serif display in italic, the palette pulled back to let the content breathe.
Dark Room
Cinematic, moody, contemplative. Think a documentary opener: deep charcoal field, a single source of light, hand-drawn textures glowing through pencil shade.
We explain the why behind the work — clear, considered, a little contrarian.
Never hype. Never clickbait. Never a 10-word sentence when 6 will do.
02 — Color
Every swatch is a one-click copy. Tier 1 is the foundation — almost every surface lives here. Tier 2 is the warm-earthy supporting cast. Tier 3 is for accents, highlights, and data visualization.
Use these for 90% of surfaces. Buttermilk is the CDC canvas. Pepper is the M&M canvas. Emerald is our brand accent (the glow color).
Warm, earthy, editorial. For section accents, print applications, and richer compositions. Never use more than two at once.
Both rooms run on a monochrome canvas (Pepper or Buttermilk) with one bold accent carrying the moment. Pick the accent by the topic's emotional temperature, not the room. One accent per scene. Never two. Mostly used in motion graphics and storyboard frames to make monochrome + a single accent really pop.
Defaults when in doubt: Walnut for dark rooms (M&M), Carnelian for light rooms (CDC). Never mix tiers — never combine a Tier 2 accent with a Tier 3 brights in the same frame. Never teal anywhere on M&M.
Bright, saturated, friendly. Use for data viz, highlights, badges, and motion-graphic flourishes. Honey is the go-to emphasis color in Mike & Matty lower-thirds.
03 — Typography
Lausanne carries structure, weight, and clarity. Larken adds emphasis and emotion. Every headline pairs the two — a structural phrase interrupted by a single expressive word in Larken italic.
Display · Emphasis
The system for thinking.
Italic for one word of emphasis.
Weights used: Regular 400, Medium 500, Italic.
Body · UI · Structure
Structure is a form of care.
Weights: 300 / 400 / 500 / 700.
Body copy, captions, lower-third descriptors, UI chrome, data viz labels.
Signature pairing
but what most people think is learning
White Lausanne Medium. Honey Larken Italic with a subtle glow behind the emphasis word. The single-word emphasis is the hook — never emphasize more than one word per line.
Pepper Lausanne Medium. Carnelian Larken Italic. The single-word emphasis is the hook — never emphasize more than one word per line.
04 — Canvases
Beyond Buttermilk and Pepper, we have four signature gradient canvases — each a deep saturated color washing into cream paper, with visible film grain. They're the bedrock for editorial covers, video thumbnails, deck title slides, and motion-graphic backgrounds. Each canvas is mapped to a content type so you don't have to guess.
Emerald
Our default canvas. The brand-emerald wash. Use for CDC editorial, strategy decks, motion-graphic halos, and the M&M hero frame.
Navy
For long-form research pieces, technical breakdowns, and any content where you want to signal “studious, considered, after-hours.” Pairs well with white type.
Maroon
Wine-purple wash for narrative-led pieces, founder stories, longform editorial, and end-of-year retrospectives. The most “magazine” of the four.
Orange
Carnelian-burnt-sienna wash for personal pieces, behind-the-scenes content, lifestyle and travel posts. The most approachable canvas.
Editorial room
The room every full-screen title sits in: emerald radial, olive glow, a faint grid and a vignette. The same background the Resolve templates build. 3840×2160 PNG. The light room and 10 s grain loops are in Downloads.
Keep the paper grain visible. The canvas is paper, not flat color.
Place type in the cream side of the wash where contrast is highest.
Mix two canvases in the same piece. Pick one and commit.
Recreate the gradient from scratch in CSS. Always use the source JPG.
For Style A storyboards and hero illustrations, default to Emerald vignette. It ties Style A to Style B visually so cuts feel cohesive.
Pepper
#211F20 — classic M&M canvas. Use when you want the figure isolated against pure dark.
Emerald vignette · M&M default
#1C2F2C → #0B0D0D radial. Default for storyboards. Gives depth and ties to Style B.
Buttermilk
#FAFAF3 — CDC default and occasional Instagram editorial moments.
05 — Logos
One brand, three logo systems. The wordmark is the universal identity — used everywhere except YouTube. The illustrated sticker mark is the YouTube channel avatar and channel card. The plain Lausanne text is the minimal fallback for footers and captions.
For CDC, decks, PDFs, web, print, and any context where the brand needs to read clean and editorial. Available horizontal and stacked, in four colorways.
Horizontal
Pepper on Buttermilk
Buttermilk on Pepper
Buttermilk on Emerald
White on photo
Stacked
Pepper on Buttermilk
Buttermilk on Pepper
Buttermilk on Emerald
White on photo
The illustrated hand-lettered mark with the green wave. Used as the YouTube channel avatar and inside channel-card pills only. Never use elsewhere — it's a sub-brand voice, not the universal identity.
YouTube avatar context
Just "Mike & Matty" set in Lausanne — the quietest version of the brand. For email signatures, footers, captions, video lower-thirds, and any context where even the wordmark would be too loud.
Mike & Matty
Lausanne 550 · Buttermilk on PepperMike & Matty
Lausanne 550 · Pepper on Buttermilk
Do Maintain clearspace equal to the cap-height of the "M".
MIKE & MATTY
Don't Distort, skew, recolor off-brand, or add effects.
Do On busy photography, use the white wordmark with a subtle drop shadow.
MIKE & MATTY
Don't Use the sticker mark anywhere except the YouTube channel.
06 — Motion
How everything moves now: story graphics, shortform, and the templates in the edit. Same room, same 12 fps clock, one accent. Use this section to brief a graphic, judge one, or build one. The earlier kits are folded away at the bottom.
The rules
Type and objects step 12 times a second. Footage stays smooth underneath. Every delay is multiplied by 1.5, so nothing rushes.
Enter for things arriving, glide for things travelling, pop for a payoff. Words rise about a third of their size and land in 0.35 s.
Pepper to emerald-deep, a vignette, grain re-seeded every frame. Type over footage sits in that grain, and the Editorial Lens finishes the whole frame: soft bloom, softer corners, never crisp pasted white. The light room is buttermilk with hairline grain and no glow.
One lit thing per frame. One Larken italic word per line, in honey (carnelian on light). Glow only in the dark room.
Buttermilk body, one flat shadow plane, a 3 px emerald-deep outline, a honey rim on the lit side. Cars, dumbbells, tiles, phones: same treatment.
Subject low, top band clear for a title, the bottom 180 px clear for subtitles. Slow pushes; for a short hook, a jump cut beats a zoom.
Story motion · 16:9
A script line becomes an everyday object with the same mechanism, so the point lands with the sound off. Five to fifteen seconds, beats timed to the words.
How to brief one
Then we pitch two or three metaphors in a sentence each and build one. Prefer the one whose payoff is physical: it stalls, spills, collapses or lights up.
Shortform · 9:16
Captions are whole phrases, not three-word chunks: each lands as you start it and holds until the next, about 1.4 s on average. Both rooms, one template with colour presets.
Never: shaky ink boil, the stamp style, black captions. One Larken word per line at most. Keep inside the Reels safe zone.
In the edit · DaVinci Resolve
56 templates for editors: titles, full-screen layouts, subtitles, transitions, multi-clip layouts and the Editorial Lens, in a dark and a light pack. These four play live and follow the room switch above.
Fonts, then double-click Editorial.drfx (and Editorial Light.drfx for white-backdrop shoots). Restart Resolve.
Edit page › Effects › search Editorial. Type in the Inspector; put the accent word in stars: *system*.
Editorial Subtitles styles the subtitle track. Editorial Layout builds Bento, Panels or Showcase from selected clips.
Kept for reference and for older projects. New work follows the rules above. The Motion Primitives builder (venn, bars, funnels and other shapes to screen-record) is archived but still opens at /motion-primitives/.
Style B — Clean Vox UI · Motion graphics
2px Emerald stroke with outer glow. Radial vignette behind. Use for data, process, explainers, lower-thirds — any moment where the geometry carries the meaning. The kit lives at brand.mikeandmatty.com/motion and is screen-recorded at 4K for delivery.
but what most people think is learning
they lack the system
One emphasized word per frame. Italic Larken on sans Lausanne.
One source of light per scene. Let darkness (or paper) do the rest.
Multiple colors of glow in the same frame. Pick accent OR emphasis.
Use flat mode for motion. Use halo mode for motion. Flat is for PDFs.
Export at 4K (3840×2160) for YouTube. Screen-record the HTML kit for animation.
Use canned After Effects templates. If it looks like Envato, it's off-brand.
Style A — Storyboard plates · Cinematic illustration
For cold opens, hero beats, and any moment where the meaning lives in atmosphere instead of geometry. Every plate starts as a real reference photo of canonical Matty in a real environment, then HEIST img2img re-renders it. Plates compose into a snap-clip HTML reel and get screen-recorded with named camera moves between shots.
The visual lock
Every Style A plate passes through HEIST as img2img with a real reference photo as the input. No text-to-image plates, ever — that’s the line that keeps Style A from looking like generic AI output. Pencil-shaded line work, soft warm fills, honest paper texture.
01
Reference photo in, stylized plate out. No exceptions. No text-to-image.
02
Single directional key — a window, a lamp, a sun direction. No flat ambient, no multi-source studio looks. Commit to one.
03
Plates are pure illustration. All copy gets added in post as motion graphics over the top.
04
Deep emerald falloff at the edges, brighter center. The dominant Style A look unless the scene calls for Pepper or Buttermilk.
05
Tier 2 accent for Style A in M&M is walnut. In light rooms (CDC), accent is emerald. Never teal anywhere on M&M, ever.
06
Same character across every plate. Denim chore jacket + ribbed white tank by default. Override explicitly when the scene demands it (e.g. track suit for AI Band).
Deep emerald with center falloff. The dominant Style A canvas. Use this unless there’s a specific reason not to.
Pure dark room, flat Pepper background. Use when the scene needs maximum gravity or cold tone. Drowning depths, late-night moments.
Light room variant. Sparingly, for tonal contrast or “after” / resolution beats. CDC defaults here. The drowning-in-content vibe lives in this canvas.
Briefs pull from a shared vocabulary — camera moves, reveal verbs, composition shorthand, and the four narrative arcs (Drowning, Reveal, Descent, Discovery). Vocabulary is maintained internally and lives on the brand hub.
Generate text-to-image plates. Every plate is HEIST img2img.
Put on-screen text inside a plate. Editor adds copy in post.
Use teal accents anywhere on M&M. Walnut for dark, emerald for light.
Mix tiers in the same plate — walnut and emerald together is wrong.
Light flat or with multiple sources. One directional key, every time.
Dress Matty off-canon unless the scene explicitly calls for it.
Three storyboards built under these rules, all live. Open them on a laptop — they’re snap-clip reels with named camera moves between plates. Toggle the room above to see each storyboard’s dark (M&M) and light (CDC) variant.
Style A · Reveal arc
5 plates, swap canvas per channel — Pepper for M&M, Buttermilk for CDC. Push → pull → drift → push → rise.
View live →
Style A · Descent arc
Monochrome canvas + single accent. Pepper room glows warm; Buttermilk room runs carnelian. Surface → deep → floor → reach.
View live →
Style A · Iceberg arc
Iceberg metaphor, descent reveal. Surface → systems → foundation. Persistent SVG holds across acts.
View live →
07 — Thumbnails
Thumbnails are where editors most often go off-brand. The rules are simple: one subject, one emphasis word, one source of light. Never more.
Cinematic library photo, 3–4 word headline in Lausanne 550 white with one Larken Italic emphasis word in Honey. Headline on top-third or bottom-third over the body — never on the face. Optional channel-card pill with the sticker mark. When the photo carries the whole idea — a strong expression, a charged moment, an unusual composition — drop the overlay and let the image do the work (use sparingly, ~1 in 5). Drag any slider to see the before / after grade.
Text grid: 3–4 words max. Place on top-third or bottom-third, never on the face.
Emphasis word in Larken Italic, Honey #FAC53A. Rest in Lausanne 550, Buttermilk.
Never all-caps. Never stroke outlines. Never full sentences.
YOU WON'T BELIEVE THIS!!!
How to think better about many things at once
watch this NOW
Mind Blown Truth
08 — Photography
Our visual identity isn't only logos and type — it's a specific room, a specific wardrobe, a specific lighting recipe. Library shelves, vintage hi-fi, plants, denim, tungsten warmth, teal-black shadow. The set is itself a brand asset.
The studio
Plywood walls, Persian rug, slatted shelving, big diffuser globe, hanging vintage workwear, vintage tripod with film camera. Two configurations: the close-up library set, and this wider studio frame.
Set
Library room. Warm-wood floor-to-ceiling shelves, paperbacks shot edge-on, vintage hi-fi speakers as symmetry anchors, vinyl, plants, ceramic vases, the silver YouTube plaque.
Lighting
Single warm key from camera-right at ~30°. Tungsten highlights, teal-black shadows. Practical lamps as ambient fill. Subtle film grain in shadows.
Wardrobe
Earthy workwear. Denim chore jackets, olive sherpa, emerald velour track jacket, charcoal canvas, grey crewnecks. No brights. No logos beyond their own pieces.
Camera
Eye-level, ~50mm feel. Medium-shallow depth of field. Subject sharp, room readable but soft. 16:9. Direct-to-camera or angled at the chalk-table.
Use the wide-vibe shots as hero images on websites and decks. The room sells the brand.
Use library close-ups for thumbnails. Tight crop, neutral expression, direct-to-camera.
Use the chalk-table duo shot for About pages, bios, and partnership decks.
Crop the photos to remove the room. The room IS the brand.
Apply heavy filters, B&W, or duotone. The existing color grade IS the look.
Add stock textures or graphic overlays on the photos. The photo is the design.
09 — Applications
The system scales from a 16:9 slide to a vertical carousel. Here are the patterns.
01 / 12
Creator decisions, explained.
Mike & Matty · 2026Slide · 16:9
Stop posting.
Start thinking.
Swipe →Carousel · 1:1
Output vs input
Infographic · 4:3
Jesse Rivera
FOUNDER · MIKE & MATTY
Lower-third · 16:9
On-Screen Graphics
56 RESOLVE TEMPLATES · BOTH ROOMS
The Editorial template pack for DaVinci Resolve — every title, transition and layout, looping, in both rooms, with how to use them.
10 — Downloads
The Editorial Resolve pack, the backgrounds, logos in four colorways, the headshot library in Canva, the canvas gradients, the color palette in Adobe Swatch format, and the approved thumbnail reference set. Everything you need to ship work that's on-brand.
The newest version, kept in the HARNESS folder. All the templates in both rooms, the Editorial Lens, the full-screen layouts, the Stage and Overhead set, the subtitle and layout scripts, fonts and the install guide.
Download →Beta, untested. An After Effects script that builds 13 Editorial titles as .mogrt templates for Premiere, plus fonts and the Premiere lens recipe.
Download →Adobe Swatch Exchange (.ase) + JSON + CSS variables
Download →Wordmark SVGs (4 colors, horizontal + stacked) + sticker mark
Download →Mike & Matty headshots in Canva · always-current set
Open in Canva ↗Reference set of approved Mike & Matty thumbnails
Download →Emerald, Navy, Maroon, Orange paper-gradient JPGs
Download →The background behind full-screen titles and stats. 3840×2160 PNG, no grain (add it in the edit).
Download →The buttermilk room for CDC and white-backdrop pieces. 3840×2160 PNG.
Download →10 s seamless 1080p loop with the house grain. For editors not on Resolve.
Download →The buttermilk room as a 10 s 1080p loop with hairline grain.
Download →Editors always get these wrong. One tap = copied to clipboard.
