KarlaRentería
This is a curated cut.
I design brands and the way they move. Identity systems, campaigns and motion, built so that a logo and a micro-interaction feel like the same voice.
Identity systems, start to finish.
Strategy, mark, type, color, art direction and rollout across web, social and print.
Muchi. Mexican snacks for the US market.
Identity and packaging for chile gummies and peanut mixes with intense flavors. Nostalgia through a current lens: expressive graphics, type with character, and color as the lead.
Oracle. Motion for an AI workspace.
Oracle is bringing AI into every product. My motion work serves three goals set by leadership, and each piece below is tagged with the one it moves forward.
AI features that feel clear and trustworthy, not bolted on.
Every product moves the same way, through the Redwood design system.
Motion that helps people finish tasks, for every user, including keyboard and reduced-motion users.
Card overlay, animated vs. static
Hover reveal for a learning catalog. The card lifts and opens in place to show detail and actions, tested side by side against a static version.
G.3 · User first Decided with evidence: tested animated against static before shipping.
Co-branding
The product wearing a customer's brand. Search opens into results and hands off to the next page without breaking the brand moment.
G.2 · Cohesion Customer brands live inside one consistent Oracle system.
Racetrack morph
The search icon morphs into Oracle's racetrack shape on mobile. The brand mark as a motion moment.
G.2 · Cohesion The Oracle mark becomes a shared motion moment across products.
Analytics assistant
The AI conversation builds in, the generated chart grows into place, then iterates on request.
G.1 · AI everywhere Makes AI output easy to follow and trust.
Guided process, auto overview
The process overview steps aside as step one opens, so the user always knows where they are in the flow.
G.3 · User first Keeps users oriented in long, multi-step flows.
Add item, slide down
New notifications push the list down so they get noticed without the reader losing their place.
G.3 · User first Updates get noticed without the user losing their place.
App Builder toolbar
Collapses toward its center when switching between edit and preview.
G.2 · Cohesion One toolbar behavior across edit and preview modes.
Every motion ships with a spec.
Timelines per property, easing curves, delays and usage rules, so engineering builds exactly what was designed. Part of Oracle's Redwood Design System.
MxD spec: Waterfall detail skeleton behavior
The motion on the left, its spec on the right. Skeletons reshape to fit each incoming panel and cards cascade in order, so the frame is never empty until all data has loaded.
G.2 · Cohesion Specs feed Redwood, so every product team ships the same motion.
Open full spec ↗
Click to view full size ↗
Motion that respects the user's time.
How I decide timing and when not to animate at all.
- Storyboard firstSpeeds are set by reviewing the motion storyboard, then locked into the spec for engineering.G.2 · Cohesion
- Asymmetric timingEntrances and exits never share the same speed, so motion feels dynamic instead of mechanical.G.3 · User first
- Never make users waitIf the information is ready, it shows immediately. Animation never stands between a user and their data.G.3 · User first
- Purpose over decorationNo motion that only adorns. Extra animation costs time and makes the product feel slow.G.3 · User first
Accessible by default.
Every motion I design goes through Oracle's accessibility review before it ships. These are the rules I design to, mapped to the WCAG criteria behind them.
- 5-second ruleLoops and auto-playing motion end or can be paused within five seconds.WCAG 2.2.2
- No joltsEased, short distances. No abrupt jumps, big zooms or parallax that can trigger vestibular reactions.WCAG 2.3.3
- Reduced motionEach spec includes a reduced-motion version where states change instantly, with no movement, for users who choose it.WCAG 2.3.3
- Keyboard firstEvery interaction works without a mouse, in a logical focus order, with no unnecessary clicks.WCAG 2.1.1 · 2.4.3
- Visible focusFocus stays visible and is never hidden behind an animating panel.WCAG 2.4.7 · 2.4.11
- Clear labelsButtons and icons have names that say what they do, matching the visible label.WCAG 4.1.2 · 2.5.3
Oracle work shown for review only. Please don't share or distribute.
How I use AI.
AI is a tool for my mind, not the other way around.
The craft is in the direction, the edit and the finish. Nothing I deliver should look generated.