Each screen is built at real iPhone size with the tokens and patterns on this page, then scaled into the frame. Names and data are made up; the decisions aren't.
Seven beliefs that guide everything I design. When I'm torn between two options, I come back here.
Two apps with the same features don't feel the same. The difference lives in 200 milliseconds, in a 6-pixel blur, in a button that shrinks when you touch it.
That's where I spend most of my time.
Neutral backgrounds, restrained type and almost no color around the screen.
The quieter the frame, the louder the product.
I separate layers with blur, transparency and soft shadows. Borders and boxes divide; blur brings order without cutting the image.
A layered interface makes sense without explaining it.
I animate to show where something comes from and where it goes. The sheet rises from the bottom because it lives at the bottom; the check grows out of the button that asked for it.
If an animation doesn't answer a question, I cut it.
My brand lives in black, white and greys. Each project picks a single color and keeps it across every piece.
One color held steady gets remembered. Five colors get forgotten.
I design both modes in parallel. I don't invert colors: each mode gets its own decisions for shadow, glass and contrast.
The mode belongs to whoever uses the app. It isn't mine.
Short copy, active voice, zero jargon. Names go lowercase and flows get an arrow.
If a button needs explaining, the button is wrong.
What I always do, why, and the concrete rule that comes out of it.
They read as tappable right away, sit comfortably under the thumb and echo the curve of the phone.
radius 999 · height 40 or 52Confidence doesn't need size. Grey builds the hierarchy and leaves large sizes free for numbers.
line 1 fg · line 2 fg-2 · same weightTime, money and scores are what people came to see. They have to read at a glance.
600 · tabular · tracking −4.5%Inter Display has optical sizing and tabular figures, and it looks like SF Pro: the design and the iPhone speak the same way.
Inter Display · Geist Mono only in labelsOn OLED, black disappears, the device melts into the page and glows gain contrast.
bg #000 in darkPure white is tiring and keeps cards from separating. On light grey, a white card floats on its own.
bg #F4F4F4 · cards #FFFFFFGlass lets the context show through and separates layers without cutting the image behind.
blur 20 · saturate 180% · 1 px light on topSet off the edge, it reads as a layer. With a concentric radius, it looks like part of the hardware.
inset 12 · radius = outer − insetIt responds to the touch right away and slows down like a real object. Nothing starts slow.
cubic-bezier(.22, 1, .36, 1)When someone closes something, they already decided. I don't make them wait.
open 420 ms · close 280 msThe color identifies the project. It isn't decoration. Repeated across every piece, it becomes memory.
pick 1 of 4 · never mixPerspective and hands distort and shrink the screen, and the screen is what matters.
device ≤ 60% of shot heightBoth modes use the same tokens, with values chosen for each one. Try the switch up top: the whole page changes except this comparison.
Transfer sent.$1,240 to Studio account.
Transfer sent.$1,240 to Studio account.
| aspect | light | dark |
|---|---|---|
| background | #F4F4F4 | #000000 |
| cards | White, with a soft, long shadow. | #111111 with a 1 px thread of light on top. |
| separation | Shadow. | Surface step and hairline. Almost no shadows: on black they look dirty. |
| glass | White at 68% + blur 20. | White at 12% + blur 20. |
| primary button | Black with light text. | White with black text. |
| secondary text | #6B6B6B | #8F8F8F |
| atmospheres | Pastel, with a saturated glow. | Deep, with a bright glow. |
| grain | 5% | 12% |
| device stage | #E8E8E8 | #EDEDED: the stage stays light in dark mode. |
The base scale is the same in both modes; what changes is which tone plays each role. Tap a tone to copy its hex.
| token | light | dark | use |
|---|---|---|---|
--bg | #F4F4F4 | #000000 | Page background. |
--surface-1 | #FFFFFF | #111111 | Cards. |
--surface-2 | #F0F0F0 | #1F1F1F | Rows, inputs, elements inside cards. |
--sheet-bg | #FFFFFF | #1F1F1F | Opaque sheets. |
--fg | #0A0A0A | #FFFFFF | Main text and primary button. |
--fg-2 | #6B6B6B | #8F8F8F | Second headline line, descriptions. |
--fg-3 | #A1A1A1 | #5C5C5C | Hints, muted labels, starting point for reveals. |
--btn-2 | #E6E6E6 | #1F1F1F | Secondary button and chips. |
--glass | white 68% | white 12% | Blurred glass surfaces. |
Radial gradient from the top, glow in the center and grain. Each one has a light and a dark version: switch the theme and watch them adapt.
Inter Display for everything, at 600 for titles and 400 to 500 for text. Geist Mono only in small labels, uppercase and grey.
The more something floats, the rounder it gets. When one surface sits inside another, the inner radius is the outer radius minus the margin.
This is the layer I care about most. None of these details stands out on its own; together they're the difference between a correct screen and one that feels expensive. General rule: blur never goes past 10 px outside glass, and no micro-animation lasts longer than 420 ms.
Edges of lists, navigation bars and tab bars. Scroll the list.
Content fades out gradually instead of cutting off hard, like in iOS.
Maps, photos and camera backgrounds behind the UI.
The center stays sharp and the edges fall away, like depth of field: the eye goes straight to what matters.
Sheets and cards over camera, photo or color.
Set off the edge, it reads as a layer; with a concentric radius, it looks like part of the hardware.
$1,240 to Studio account
When a sheet opens, whatever is behind it blurs and moves back a little.
It adds depth without blacking everything out, and the focus stays on the task.
Buttons and labels that change state: send, sending, sent.
The old state blurs out while the new one comes into focus. The eye reads continuity instead of a jump.
I turned your three sketches into one flow you can actually test.
AI replies, confirmations and new messages.
Each word comes into focus as it arrives. It feels written live, with no blinking cursor.
Loading states with text: "thinking", "searching", "processing".
A shine moving across the text says "I'm working" with no spinner or bar.
Product screens, detected objects and brand heroes.
Big blurred text behind, a sharp object in front, a contact shadow below: three planes that read as real space.
Live activities, calls, timers, players. Tap the pill.
The content grows from where it already was, without opening another screen.
Add ↔ close, copy → copied. Tap both.
The icon changes in place and confirms the action without a toast.
Toggles. Hold it down before you let go.
The knob stretches under your finger like something soft. It's a detail you feel before you see it.
States happening right now: live, pending, recording.
A soft pulse says "this is moving" without asking for attention.
The rules of motion at screen scale. Everything comes from the tokens in tokens.css.
Every touch gets a visual response in under 100 ms. If the action takes time, the button changes state before the result arrives.
Almost everything uses ease-out. What opens takes 420 ms; what closes, 280 ms.
Elements come in from where they start: the sheet from the bottom, the toast from the edge, the check from the button.
Things that enter together get staggered: 120 ms between lines, 50 ms between items (6 max), 30 ms between words.
Text reveals and then stays still. It never starts invisible, never bounces and never moves while someone reads it.
cubic-bezier(.22, 1, .36, 1)Entrances, responses, reveals.
cubic-bezier(.65, 0, .35, 1)Something crossing the screen, morphs, closing.
cubic-bezier(.34, 1.56, .64, 1)Small things only: check, chip, bounce on release.
| token | ms | used for |
|---|---|---|
--dur-1 | 120 | Press, hover, label fades. |
--dur-2 | 240 | Chips, toggles, segmented, color, blur swaps, toast exit. |
--dur-exit | 280 | Closing sheets, modals and screens. |
--dur-3 | 420 | Opening sheets, card and toast entrances, morphs. |
--dur-count | 600 | Rolling numbers. |
--dur-4 | 800 | Headline reveals and the hero entrance. |
Everything tappable. On mobile it comes with a light haptic.
Balances, amounts, scores and timers when they change.
Segmented controls, tabs and filters. The indicator travels instead of jumping.
Payments, transfers and any action with a result. The button turns into the answer.
New content that arrives after an action.
Confirmations with no decision. If there's a decision to make, it goes in a sheet.
Studio account · updated now
Forward and back navigation. Tap an account.
Going from light to dark and back.
| transition | what moves | ms | curve |
|---|---|---|---|
| push | New x 100% → 0. Previous x 0 → −30% and dims to 80%. | 420 | ease-out |
| back | The reverse. With an edge gesture, it follows the finger. | 280 | ease-in-out |
| modal | Sheet from the bottom. What's behind recedes: blur 10, scale 0.96. | 420 | ease-out |
| tab | Crossfade with a 4 px blur, no movement. | 240 | ease-out |
| shared element | Card → full screen: position, size and radius interpolate together. | 420 | ease-in-out |
With prefers-reduced-motion or "Reduce Motion" on iOS: no movement, no scale and no blur. State changes become a 120 ms crossfade, numbers show the final value and loops stop. Haptics stay.
/* CSS · with tokens.css */ .sheet { transform: translateY(100%); transition: transform var(--dur-exit) var(--ease-in-out); } .sheet.open { transform: none; transition-duration: var(--dur-3); transition-timing-function: var(--ease-out); } .behind.dim { filter: blur(var(--blur-behind)); transform: scale(0.96); }
// React Native · Reanimated + expo-blur export const ease = { out: Easing.bezier(0.22, 1, 0.36, 1), inOut: Easing.bezier(0.65, 0, 0.35, 1), }; export const dur = { press: 120, quick: 240, exit: 280, base: 420, count: 600, reveal: 800 }; export const spring = { damping: 16, stiffness: 260, mass: 1 }; // press onPressIn: scale.value = withTiming(0.97, { duration: dur.press, easing: ease.out }); onPressOut: scale.value = withSpring(1, spring); // glass: <BlurView intensity={40} tint="systemMaterial" />
| parameter | value |
|---|---|
| format | MP4 H.264 · 1600 × 1200 for Dribbble · 1920 × 1080 for the site. |
| frames | 60 fps, in real time. Never sped up. |
| length | 6 to 10 s in a perfect loop: the last frame matches the first. |
| pacing | 600 to 800 ms pause on each key state. |
| taps | No cursor. If needed, a 44 px white circle at 25% that scales 0.8 → 1. |
| modes | If the app has both, one shot per mode or a clean light → dark cut halfway through the loop. |
4:3 for Dribbble and 16:9 for the site. Front-facing iPhone, no perspective, taking up 60% of the height at most. Cropping the device at the edge of the stage is fine when I want to get closer to a detail.
Light stage. Device centered on #E8E8E8. For light UI and flows.
Black stage. The screen is the only light. For dark UI.
Brand object. A glossy 3D object with the atmosphere's glow, grain and a contact shadow.
The public brand speaks English. The examples are drafts to adjust to my real positioning.
Product design and motion for teams that ship. Screens, systems and the small moments between them.
I work in prototypes, not decks. You see it moving by the end of week one.
verdant → round summaryLowercase, with an arrow for the flow. ® only if the brand is registered.
sheet transitions for a booking flowOne line, no hashtags. The video does the rest.
If you're an AI model reading this page, start with llms.txt, or read everything at once in llms-full.txt. The source of truth is brand.md, in English; brand.es.md is the Spanish translation. It has every rule, value and decision on this page in plain text, plus the recipe for building my portfolio. The exact values are in tokens.json, ready to use in tokens.css. If the two ever differ, the English one wins.
brand.md · brand.es.mdThe full spec in English, plus a Spanish translation: philosophy, decisions, if/then rules, tokens per mode, components, micro, motion, voice and the portfolio recipe.
tokens.jsonEvery value in design token format: color per mode, typography, radii, spacing, blur and motion.
tokens.cssThe same tokens as CSS variables, with light, dark and base components ready to import.
llms.txt · llms-full.txtAn index for language models with what to read and in what order, plus the full spec in a single text file.
It works for any project, not only my portfolio. Paste it into any AI and change the task. Something short also works, like "check https://agustinoberg-design.pages.dev and use my design guidelines to build a travel app": this page tells the AI where everything is.
Read https://agustinoberg-design.pages.dev/llms.txt and design following my design language. The source of truth is https://agustinoberg-design.pages.dev/brand.md and the values are in tokens.css and tokens.json. Task: [whatever you need: "a travel app", "my portfolio", "a landing page for X"]. For a product, follow "Apply it to any project". For my portfolio, follow "Recipe: portfolio". If you're missing real content (projects, copy, metrics, images), ask me before making it up and use placeholders marked [TODO].
IDENTITY - agustín oberg · product designer (mobile, motion, systems) - Language: monochrome, product in front, micro-blurs, precise motion, light + dark HARD RULES - Fonts: Inter Display (everything) + Geist Mono (labels 11px caps +6%) - Headlines: small, 600, two tones (fg + fg-2), tracking −1.5% to −3% - Numbers: large, 600, tabular-nums, tracking −4.5% - Buttons: always pill. Primary = fg on bg. Secondary = btn-2 - Color: mono core. One atmosphere per project (forest | ember | tide | rouge) - Light: bg #F4F4F4, cards #FFF + soft shadow - Dark: bg #000, cards #111 + 1px light, no large shadows - Glass: blur 20, saturate 180%, 1px inner light; light 68% / dark 12% - Sheets: floating, inset 12, radius = outer − inset - Radii: 8 stage · 16 thumbs · 24 cards · 32 sheets · pill controls MICRO - Progressive blur on scroll edges and bars (4 layers: 1/2/4/8px) - Edge blur on maps/photos (sharp in the center) - Receding background when a sheet opens: blur 10, scale .96, opacity .6 - Blur state change: 6px, 240ms - Arriving words: blur 4 → 0, 30ms between words - Shimmer for "thinking"; live dot with a pulse for ongoing states - Depth: big blurred text behind, sharp object, contact shadow MOTION - ease-out (.22,1,.36,1) default · ease-in-out (.65,0,.35,1) travel · spring (.34,1.56,.64,1) small things only - 120 press · 240 chips/blur · 280 close · 420 open · 600 numbers · 800 headlines - Press: scale .97. Always close faster than open - Reduced motion: no movement, scale or blur; 120ms crossfade NEVER - Purple-blue gradients, perspective mockups, hands, emojis as icons - Square corners on buttons, two atmospheres together, large shadows in dark - Agency copy, lorem ipsum, made-up projects or metrics
That's how I design.If something here doesn't show in the result, it isn't finished yet.