Brand Design
Foundationswith AI

Find your brand voice. Give AI the one thing it can’t invent — taste. Build the foundation, hand it to the machine, ship a landing page that looks like you.

12 May 2026 · Norrsken House Barcelona

01 / 22

YOUR FACILITATORS

Co-led by Jasper & Lilibeth.

Two perspectives, one workshop. Tech + business design. Engineering + UX. Builder + curator.

Jasper Staats
Jasper Staats
LEAD ENGINEER · AI INSTRUCTOR

Head of Tech at Like a Human. 12+ years engineering at VanMoof, McLaren, DPG Media. Runs production AI agencies, teaches Claude Code.

Lilibeth Bustos
Lilibeth Bustos
BUSINESS DESIGNER · UX/UI

Business + product designer pairing service design with hands-on UX. Brings the human side of the brief.

02 / 22

WHO WE ARE

Like a Human AI

We teach what we build, and we build what we teach. Everything is connected to drive growth.

Education Public Workshops
Brand Design Foundations
With Norrsken · Barcelona
Today
Claude Code Masterclass
Devs & founders
Live
Private Programs
Claude Adoption for Business
Onsite for marketing, sales & ops
Claude Adoption for Developers
Onsite for engineering teams
Online
Online Academy
Self-paced
Soon
We teach
We build
Development
AI Agents
Workflow automation driving measurable ROI
AI-powered SaaS
Custom platforms with positive ROI from day one
AI-powered Dashboards
Operational tools tailored to your team
03 / 22
Monday · 12 May 2026

Your morning
at Norrsken.

Where
Norrsken House Barcelona
Red Room · ground floor
Length
2 hours
10:00 → 12:00
Today's one rule
“The only rule: play.”
A working session — not a lecture. Bring an idea, a laptop, an open tab. Hands raised any time.
04 / 22
The Problem

AI-generated design
looks generic.
Every time.

Same gradients. Same fonts. Same hero sections. Same buttons. You can spot it in a second — and so can your customers.

★ EXCLUSIVE OFFER ★LIMITED TIME ONLY!!!🚀 SCALE YOUR BUSINESS 10X 🚀★ EXCLUSIVE OFFER ★LIMITED TIME ONLY!!!🚀 SCALE YOUR BUSINESS 10X 🚀★ EXCLUSIVE OFFER ★LIMITED TIME ONLY!!!
NEW!
⚡ AI-POWERED ⚡
💫
🌟
Empower Your Synergy
with Innovative AI Solutions™
The all-in-one SaaS platform that revolutionizes how teams collaborate, iterate, and dominate in the modern digital landscape!
10,000+Happy Users
99.9%Uptime
24/7Support
Possibilities
🔥   LIMITED OFFER · SAVE 50% · ENDS TODAY · LIMITED OFFER · SAVE 50%   🔥
↑ this is what AI ships without foundations
06 / 22
The Agent How It Works Platform Solutions Company Request a Demo
Trusted by sustainability leaders

The AI Agent
for Sustainability.

SOMA's AI agent handles sustainability data end to end — from supplier outreach to audit-ready reporting — so your team can focus on reducing impact, not managing spreadsheets.

CSRD · CBAM ready Supplier outreach automated Audit-grade evidence
↓ this is what foundations look like
07 / 22
The diagnosis

The AI isn't the problem.
You don't have the
right foundations.

An AI tool only reflects the brief you give it.
Empty in, average out.

↓ here's what to put in that empty box.

Without foundations
Brief
empty
Output
Generic AI slop.
Average of the internet.
With foundations
Brief
  • Voice
  • Colors
  • Typography
  • References
complete
Output
Your brand.Every time.
08 / 22
Foundation 01

Write the one sentence
only you could write.

Your brand voice isn't a tone of voice doc. It's a stake in the ground. Here's what that looks like in the wild.

SOMA Sustainability AI
"Compliance is a data problem,
not a sustainability problem."
Why it works Reframes the entire category. Only SOMA could honestly own it.
Patagonia Outdoor apparel
"We're in business
to save our home planet."
Why it works A clothing brand picking a fight with capitalism. Competitors can't follow.
Aesop Skincare
"We don't make claims.
We make products."
Why it works In a category obsessed with claims, restraint becomes the position.
Your turn ↓   What's the sentence only you could honestly write?
09 / 22
Foundation 03 · Color

Pick eight.
Stop there.

One brand. One neutral. One accent — each light and dark. Anything else is decoration.

The trap When AI has 40 colors to choose from, it picks the wrong 6. When it has 8, it picks the right ones.
10 / 22
Foundation 04 · Type

Letters speak
before words.

Pick one display. One body. Three weights, max. The whole system. The AI uses whatever you give it — so give it less.

01
Scale — 7 sizes only. 12 · 14 · 16 · 20 · 28 · 40 · 64. Never 13, 15, 22.
02
Pair — not match. Serif display × grotesk body. Or one family, two weights. Contrast, never repetition.
03
Unique — not safe. Inter / Roboto / Poppins is the AI default. Pick a personality the algorithm wouldn’t.
11 / 22
Foundation 06 · Layout & Grid

Layout = grid. Storytelling = vary it every section. Creativity = break the pattern you set.

One page. Four grids. Each section earns a different rhythm — and one earns the right to break the rules the rest established.

Three laws of layout
01Establish the rules before breaking them
02Grid = structure. Whitespace = breath.
03Every section gets one rhythm only.
01Swiss gridstrict 12-col · asymmetric
Headline — 8 columns
Meta · 4 col
Body copy — full 12 columns
02Bento gridmasonry tiles · Apple-style
Feature hero
Stat
Quote
Case study
03Editorial split50/50 · massive type · manifesto
Big idea goes here.
04Break the gridearned disruption · overlap · rotate
Structure
Tension
Freedom
↗ earned
12 / 21
Foundation 05 · Imagery

Find your images & textures.

Decide the world your brand lives in — the AI will furnish it. The reference deck is the whole brief.

01

World

where it lives

Raw nature or polished studio? Editorial or industrial? Decide the place your brand inhabits before anything else.

02

Texture

what it’s made of

Concrete, linen, glass, soil, paper, skin. Surfaces carry personality — pick three and stick with them.

03

Feeling

the gap is the style

Pick 3 images you’d use. Pick 3 you’d reject. The space between them is your visual language.

Example · SOMA Society SOMA Society moodboard — reference example
Moodboard cosmos.so · pinterest · archive
Show, don’t tell. The AI pattern-matches your references — not your brand values.
Foundation 05
13 / 22
Foundation 07 · References

Find your references.

The AI doesn’t read your brand values — it pattern-matches your references. Pull 9 images. Make sure they share a soul. Hand them to the machine.

cosmos.so/brand-design
Cosmos.so
Curated by designers

Best for: brand voice, type pairings, editorial layouts. The quality bar is high — no SEO sludge.

awwwards.com/sites
studio — folio 9.0
portfolio — aw SOTD
Awwwards.com
Award-winning sites

Best for: production web excellence. Filter by SOTD & jury picks — see what world-class teams actually ship.

pinterest.com/brand-inspo
Pinterest.com
Volume + variety

Best for: textures, fashion, photography, broad mood. Cast wide, then heavily prune to your taste.

fontshare.com/families
Aa
Aa
Aa
Aa
Satoshi
Tanker
Bespoke
JetBrains
Fontshare.com
Free pro typefaces

Best for: real type. Pangram Pangram’s free arm — the foundry-grade alternative to Inter / Roboto. Worth more than Google Fonts.

fontpair.co/pairings
Aa
+
Aa
Aa
+
Aa
Fontpair.co
Display × Body

Best for: pairing two typefaces. Curated combinations of display + body so you don’t guess. See them in context before you commit.

dribbble.com/shots
Dribbble.com
UI + product shots

Best for: interaction patterns, dashboard layouts, app states. Lots of glossy noise — use as a starting filter.

The discipline Pull 9. Not 90. Curate like your brand depends on it — because it does.
Browse live
01 / 04 Awwwards Site of the Day · award-winning design
Open Awwwards
Awwwards homepage screenshot
02 / 04 Awwwards — Branding brand identity sites · filtered
Open Awwwards Branding
Awwwards branding screenshot
03 / 04 Fontpair.co Display × Body pairings
Open Fontpair.co
Fontpair.co screenshot
04 / 04 Dribbble SaaS dashboard UI patterns
Open Dribbble
Dribbble SaaS dashboard screenshot
14 / 21
Recuerda · The journey

Six choices.
One you.

Every foundation is a stake in the ground. Together they’re the brief you hand to AI — and the reason your brand stops looking like everyone else’s.

Cover the logo Is the brand still obvious? Then your foundations are working.
15 / 22
Your playground

Bring one idea.
Leave with a landing page.

Coffee shop. Side project. Workshop. Service. Whatever’s in your head — we’ll turn it into a real page, with your own DLS, in Google Stitch.

01

Find direction

Pick two that match. One display. One body. Your whole type system in a single pairing.

02

Build the DLS

Pick 8. One per role — background, surface, text, muted, border, accent, CTA, highlight. The palette that carries everything.

03

Ship the page

Pick 3–5 images that give the theme. One feeling, one atmosphere. This is your brand’s visual world.

By 12:00 A landing page you didn’t have at 10:00 — that looks like you, not the AI.
16 / 22
<\!-- SLIDE: YOUR DESIGN.MD — the deliverable -->
Your deliverable · DESIGN.md

One file.
Every AI tool.

Everything you build today collapses into a single markdown file. Drop it into any AI with a context window and it generates on-brand — every time.

DESIGN.md
Open spec · Google Labs
# Acme Studio — Design Language
 
## Voice
Essence: “Compliance is a data problem, not a brand problem.”
We are: warm · editorial · grounded · considered
We are not: corporate · loud · generic · rushed
 
## Color
Primary: #12345A headlines, buttons, dark surfaces
Background: #FFF8E7 main surface, never pure white
Accent: #DEFEB3 CTAs, highlights
 
## Typography
Display: Montserrat 900 · -0.035em · clamp(40px, 4.5vw, 64px)
Body: Montserrat 400 · 16-18px · 1.6 line-height
 
## References
Admire: Aesop · Patagonia · Linear
Mood: warm · editorial · slow · analog
Avoid: Canva defaults · bright SaaS blue · stock energy
Works in
Google Stitch
Native DESIGN.md support — paste and generate
Native
Claude Design
Upload — auto-applies your full system
Claude Projects
Add as project file — always-on brand context
Fontpair Pro
Generate a starter DESIGN.md from your brand
Tip
Any AI
Paste as system prompt — Gemini, GPT, all of them
17 / 22
In practice · Google Stitch

Paste your DESIGN.md.
Watch it build.

labs.google/stitch — free, no account needed. Native DESIGN.md support.

01

Paste your DESIGN.md as context

The whole file — voice, color, type, references — before you write a word. Stitch reads it natively.

02

Write the one-sentence brief

What the page is, who it’s for, how it should feel. Generate. The foundations do the rest.

03

Correct with your vocabulary

“More [voice word].” “Only [palette name] for headlines.” Reference your DESIGN.md — not just your gut.

04

Ship before it’s perfect

A live URL you improve beats a local file you never send.

Also works in Claude Design & Claude Projects — upload DESIGN.md as a project file and every conversation starts on-brand.
labs.google/stitch
DESIGN.md · context loaded
# Acme Studio — Design Language
## Voice
Essence: “Compliance is a data problem…”
We are: warm · editorial · slow
## Color
Primary: #12345A #FFF8E7 #DEFEB3
## Typography
Display: Montserrat 900 · -0.035em
Your prompt
Landing page for Acme Studio. Hero with headline “Compliance, simplified.” One CTA. Use DESIGN.md palette and voice throughout.
Generate — foundations first
18 / 22
You’ve got this.

Your brand already exists.
AI just needs to find it.

01

AI knows everything. You know you.

The model has seen every brand and defaults to the average of all of them. Your job is to make the brief so specific that average becomes impossible.

02

Taste is a decision, not a vibe.

Document what you reject as carefully as what you love. The “no” list is often more useful than the “yes” list when briefing an AI tool.

03

Consistency compounds.

Every aligned output makes the next correction easier. Start strict with your foundations. Loosen later — never the reverse.

“Design without foundations is decoration.
Design with foundations is communication.”

19 / 22

STAY CONNECTED

Let’s keep building.

What we build next, you hear first. Scan to connect — the QR appears in a moment.

Jasper Staats

Jasper Staats

Like a Human · Head of Tech

likeahuman.ai · hello@likeahuman.ai
Engineering, Claude Code, AI workflows

QR — Jasper Staats on LinkedIn
linkedin.com/in/jasperstaats
Lilibeth Bustos

Lilibeth Bustos

SOMA AI · Founder & CEO

Business designer · UX/UI
Brand foundations · AI-friendly DLS

QR — Lilibeth Bustos on LinkedIn
linkedin.com/in/lili-bustos
Workshop slides & resources
almost.likeahuman.ai
20 / 22
Resources · The library

Your toolkit for the long game.

Everything we use at Like a Human. Free first, paid where it earns its keep. Open every link in a new tab — this slide is your home base after today.

01

The six pillars — tools per foundation

free-first · opens in new tab
03

Typography

not Inter. not Montserrat.
02

Feed your DESIGN.md to AI builders

copy · paste · ship

Claude Projects

claude.ai →
persistent context
Settings  Project knowledge
Add file  DESIGN.md
# every chat in this project
# now follows your DLS

Claude Design

claude.ai/design →
single-page generation
New design  first message:
“Use this design language:
[paste DESIGN.md]
Build a [hero / pricing] section.”
workshop tool of the day
Starting prompt:
“Follow this design language exactly:
[paste DESIGN.md]
Generate a landing page for [brief].”

Lovable

lovable.dev →
full-stack AI
Initial prompt  paste DESIGN.md
Then: “Build [feature]
following this DLS.”
# pin in chat across sessions

v0 by Vercel

v0.dev →
component-first
v0.dev  New chat
First message:
“Follow this design language:”
[paste DESIGN.md]  submit

Cursor / Claude Code

repo-level →
long-term project
# repo root
$ touch CLAUDE.md
# paste DESIGN.md content
# AI auto-loads it every session

Bolt.new

bolt.new →
browser-native dev
First message  paste DESIGN.md
Then: “Build with this
design language.”
# edits persist across iterations

Replit Agent

replit.com →
deploy-ready
New project  Agent chat
First message:
“Design language follows:
[paste]. Apply on every change.”
IDE with Cascade
Cascade  Rules  Add Rule
[paste DESIGN.md]
Save  applied workspace-wide

neuform.ai

neuform.ai →
AI-native forms
Setup  Design Profile
[paste DESIGN.md]
# generated forms inherit
# your DLS automatically
03

Power-ups for Claude Code

skills · plugins · libs
Skill collection

impeccable.style →

Distinct, production-grade UI generation. Avoids the AI-default look. Available as a Claude Code skill pack.

Anthropic official plugin

frontend-design

Creates award-quality interfaces from a brief. Comes with the claude-plugins-official bundle.

remotion.dev

Remotion →

Programmatic video in React. AI writes the components, Remotion renders the MP4. Killer for branded reels.

gsap.com

GSAP + skills →

Animation library with a complete Claude Code skill pack — ScrollTrigger, timelines, React integration.

ui.shadcn.com

shadcn/ui →

Composable components. Copy into your repo, restyle with your DLS, AI picks up the tokens automatically.

tailwindcss.com

Tailwind CSS →

Utility-first styling that maps 1:1 to your design tokens. Every AI tool speaks Tailwind fluently.

04

AI generators — image, video, audio

right tool, right output

Image

Midjourney illustration · atmospheric · sref-lockable brand styles
Krea.ai multi-model (Flux, Imagen, Seedream) · pipelines · upscaling
Gemini · Nano Banana photoreal via CLI · high fidelity
Ideogram text-in-image · type-led posters

Video

Higgsfield.ai cinematic motion · Soul-ID character continuity
Runway Gen-4 · image-to-video · motion brush
Pika stylised motion · effects-first
Krea video Veo / Kling / Hailuo unified UI

Audio

Suno songs from a prompt · vocal + instrumental
Udio music generation · reference-driven
ElevenLabs voice cloning · AI narration · SFX
Artlist licensed stock music + footage

3D / Spatial

Luma Labs Dream Machine · image-to-video · NeRF capture
Marble · World Labs 3D world generation · explorable scenes
World Labs spatial AI research · Fei-Fei Li lab
Luma Genie text-to-3D · mesh export
One file · Every tool

Your DESIGN.md speaks every machine’s language.

Take it anywhere. Pin it. Copy-paste it. The tools will keep changing — your foundations stay the same. That’s the whole point.

Book your free Brand Foundation session
21 / 22
Toolkit · Bookmark this

Take the full library home.

Every link from today, always at hand. Scan to open. Share with the team. Send it to the next founder you meet.

almost.likeahuman.ai
Resources QR — workshop resources
Scan to open almost.likeahuman.ai
Our events QR — Like a Human events on Luma
Join the next one luma.com/likeahuman
21 / 21