Brand Guidelines
Studio
Version 2.0 · April 2026
01 · Positioning

Why we exist

We close the gap between who you are and how you look.

Brand and web systems built as one system, not in pieces. 15 years of design, motion, and systems thinking · combined with AI-augmented workflows · at small-studio speed with agency-grade output.

Audience: Business owners at companies with 10–100 employees. They’re winning contracts and scaling · but their website still looks like 2019.

02 · Voice & Tone

How we speak

Direct. Specific. Confident. Warm but never soft. Like a trusted advisor who’s seen this a hundred times.

ContextToneExample
WebsiteConfident, editorial“Your business grew. Your brand didn’t. Let’s get it there.”
Client PortalWarm, clear, guiding“Welcome to your project portal.”
SocialSharp, opinionated“If you’re embarrassed to share your website, that’s your brand audit.”
ProposalsProfessional, no fluff“You get: brand guidelines, logo system, design system in Figma, and a live website.”

Voice Rules

✓ Always use “we” · studio scale, not founder solo
✗ Never use “I” or “our founder” · that’s michdealva.com
✓ Contractions are fine · write like you speak
✗ No buzzwords: synergy, leverage, disrupt
✓ Concrete: “8-page bilingual site”
✗ No abstractions: “comprehensive digital solution”
✓ Frame client work as growth, not criticism
✗ Never use before/after comparisons
✓ 15 years · specific, not “10+ years”
✗ Never name-drop past employers (Sonar, BBVA, etc.)
✓ AI mentioned once as methodology, never as pitch
✗ Over-talk AI · “AI-powered studio” – avoid
03 · Color

Palette

Monochromatic only. Three colors. No secondary accents · ever.

Midnight
#0F0F0F
Primary dark
Parchment
#F0EDE8
Primary light
Neon Cyan
#00FFE5
Accent • glow
Cyan Dim
#00E0C9
Hover state
Deep Cyan
#009E8F
On cream
Ash
#7A7A7A
Muted on dark
Slate
#4A4A4A
Muted on cream
04 · Typography

Type system

Display
Clash Display Bold
-0.03em • LH 0.9
Your brand
didn’t.
Heading
Clash Display Semibold
-0.02em • LH 0.95
Real transformations.
Body
Inter Regular
0 tracking • LH 1.6
We close the gap between who you are and how you look. Brand and web systems for businesses that have outgrown their image.
Label
Inter Medium
0.15–0.35em • Uppercase
Selected work  •  Built as one system  •  What we do
05 · Spacing

8px grid

All spacing in multiples of 8. Consistent rhythm.

xs
8px
sm
16px
md
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
06 · Effects

Glow system

Glow is a premium signal · not a default. Only primary CTAs pulse. Secondary teal stays flat. By restricting glow to where the user should act, we recover premium by contrast.

Neon Glow
Pulsing box-shadow on all CTAs. 2.5s infinite.
Text Glow
Pulsing text-shadow on accent headlines.
the gap?
Dot Glow
Small pulsing indicators.
Border Glow
Pulsing inset on badges and tags.
Built as one system
Animated Grain
SVG feTurbulence. 0.8s steps(4). Always present.
← Look at the background
Glass Morphism
blur(24px) saturate(180%). Navbar only.
Frosted panel
07 · Logo

Mark usage

The script “embi” mark is handcrafted, warm, personal.

EMBI Studio
On dark · cream at 50–80% opacity
EMBI Studio
On cream · dark at full opacity
Rules: Always pair with “STUDIO” in uppercase, tracked wide. Minimum clear space: 2× the height of the “e”. Never stretch, rotate, or add effects to the logo.
08 · Rules

Do’s & Don’ts

Do

✓
Use neon glow only on primary CTAs + hover states
✓
Keep secondary teal elements flat (no glow)
✓
Keep copy short, specific, outcome-driven
✓
Show the system · visualize pieces assembling
✓
Frame client work as growth
✓
Respect prefers-reduced-motion everywhere
✓
Use “we” voice · studio scale
✓
Use grain texture on every surface
✓
Let whitespace breathe
✓
Max 2 Clash Display headlines per view

Don’t

✗
Use before/after comparisons
✗
Add secondary accent colors
✗
Use generic stock photography
✗
Write in buzzwords
✗
Remove the grain texture
✗
Glow every teal element (pre-2.0 rule, reversed)
✗
Use em dashes in copy – use mid-dots or periods
✗
Box shadows on cards · flat borders only
✗
Colored accent bars on card edges
✗
Emojis anywhere · editorial aesthetic
✗
Use Clash Display for body text
09 · Applications

Where it lives

Website
Dark + cream Services
Full glowGrainGlass nav
Client Portal
Dark throughout
Glow CTAsStepper dotsGrain
Case Studies
Dark + bento grids
Bento layoutEditorial photos
Social Posts
Dark preferred
Clash headlineGrain overlay
Proposals
Dark cards on cream
Subtle grainTeal accents
Email
Minimal dark
Inter onlyNeon underline
10 · Motion

Timing & easing

Easing
cubic-bezier(0.22, 1, 0.36, 1)
All entrance animations
Entrances
0.7s
Hovers
0.35s
Micro
0.2s
11 · Interactive patterns

How it responds

Interaction is part of the system. Every touchpoint reacts to the user · with restraint. Never a gimmick; always reinforcing “this studio thinks differently”.

Repulsion field
Pieces inside a composition flee the cursor within ~160px, falloff curve. Used in OneSystem, Services, About toolkit.
lib/useRepulsion.ts
Scroll-linked parallax
3 depth layers move at different rates while card traverses viewport. Work section mockups.
±20px content, ±12px glow, ±6px label
Word-by-word reveal
Each word’s opacity tied to section scroll progress. 0.18 → 1 as section enters. Manifesto heading.
progress = (85vh − rect.top) / (85vh − 30vh)
Scramble text
Characters decode on hover over ~700ms. Used sparingly on editorial headers (Work “Real transformations”).
triggerOnce per element
Particle field
24–80 teal ambient particles in Hero bg. Gentle drift + cursor attraction within 160px.
Canvas 2D · DPR-aware
Magnetic CTAs
Primary buttons translate up to 6px toward cursor. Navbar Audit pill + Contact submit.
dx · 0.15 clamped ±6
Intro reveal
Once per session: logo scales in, pauses, flies to navbar position. sessionStorage-gated.
~2.5s total · skip if URL has hash
Scroll progress bar
2px teal bar fixed at top, scaleX driven by scroll ratio. Soft 12px glow.
Global · layout.tsx
Custom cursor
Teal dot + ring with mix-blend-difference. Ring scales on interactive targets. Desktop only.
z 10000 · hidden on touch
Motion budget: One signature interaction per section max. The home uses 4 (OneSystem repulsion, Work parallax, Manifesto reveal, Hero particles). More than that compounds into noise. When adding new sections, ask: does this REPEAT an existing pattern, or does it earn a new one?