Positioning
RealWorldUX is a one-principal UX consultancy. It sells senior judgment applied at speed, not production capacity.
What it is. A UX design practice led by Ryu Sakai that embeds inside a client's multidisciplinary team, defines the experience, and delivers it as a working front end built in the real framework — not as a Figma file to be reinterpreted later.
What's different. Most consultancies hand over screens. RealWorldUX hands over a running app. AI is the force multiplier that makes that economical for a single senior designer, and direction is the thing being sold: anyone can generate an app, far fewer can decide what it should be.
Product and website UX, design systems, and real-code prototypes that double as the handoff.
Enterprise and deep-tech product teams — robotics, genomics, data infrastructure — plus founders who need a site that states a value proposition.
Decades of shipped work across Sony, Samsung, Veritas, Myriad Genetics and InOrbit. Ten utility patents filed.
The name is the thesis
"Real world" is not decoration. It is the argument the whole practice rests on, and it works three ways.
Not the portfolio version
Noisy, cold data centers. Secure sites with no network. Teams still carrying printed flip cards. The brand points at the conditions users are actually in, where real UX value sits beneath the surface.
Not a click-through
Prototypes load actual data and render dynamically, so the behavior under test is the behavior that ships — not a static screen pretending to be one.
Not a disposable file
Built in production front-end frameworks. The prototype is the deliverable, and engineers extend it rather than rebuild it from a spec.
Core values
Six commitments, each one drawn from a decade of published writing rather than invented for this document. Sources are listed at 14.
User first, ego last
Products serve users, not designers. Attachment to your own work is treated as a trap, and design that calls attention to itself has failed at its job. Design is a vehicle to deliver a message — not a designer's playground.
From 12 traits of a great UX designer and How to visualize layered data
Observe before you conclude
Watch what people do instead of asking what they'd do. Stay inside the user's position rather than judging from an expert's distance — because experts default to expert mode without noticing.
From Competitive analysis, 12 traits and The user experience of public restrooms
Feasible, or it isn't design
A design nobody can afford to build has no value. Engineers come in at requirements, not at handoff, and the designer stays on after handoff to catch what implementation drops.
From UX/PM/engineer collaboration
Show the reasoning
Keep the record while the project is live, because detail and nuance fade fast. Why a decision was made matters as much as what was decided — and what didn't work gets written down too.
From The importance of process documentation in a UX project
Handle information responsibly
Scales must match what the data represents, uncertainty gets stated, and context travels with the number. Visual processing beats careful reading, which is exactly why a misleading chart does damage.
From What I learned from COVID-19 data visualization
The unglamorous work counts
An install app for field engineers in a cold data center is worth more than another beautiful consumer concept. Impact comes from solving a real problem for someone under pressure.
From Not so fancy (but meaningful) enterprise UX work
Without empathy, UX is just decoration.Ryu Sakai, "12 traits of a great UX designer", 2020 — the single line that anchors the value set
Design principles
How the values turn into working method. Use these to settle arguments about the work itself.
See the big picture first
Understand what a product is fundamentally for before inspecting a single component. Details are where projects get lost.
Evaluate from within
Experience is product, user and context together. Judge it by standing in the user's position, never from a distance.
The prototype is the front end
A prototype that must be rebuilt from scratch is waste. Build it so engineers extend it.
Simplicity is the key
Consistent, repeated patterns let people learn by use until the design becomes transparent and the content is all that's left.
Just enough, just-in-time
Give people what the moment requires, where they are, at the size they can act on. Nothing more.
Partner, don't hand off
UX cannot exist on its own. Sit with PM and engineering continuously; design handoff is the start of implementation, not the end of design.
AI practice
The current service model. State it in this order — the first point is the one that reframes the category.
AI-friendly, spec-based design
Anyone can create an app with AI. That makes how you direct it the thing that determines quality, and a strong vision plus AI fluency is what a client is actually buying.
Human–AI collaboration
AI writes thousands of lines and hundred-page reports in seconds. Deciding what to make, why, and in which direction stays human.
Multi-agent process
The designer works as a director, running parallel work streams across multiple agents against one clear strategy.
Data-driven interaction
Prototypes load real data and render on the fly, so dynamic behavior can be tested instead of described.
Real app as deliverable
Real frameworks instead of Figma. The prototype is true to implementation and doubles as the handoff.
Discover new possibilities
Directed AI makes exploration of genuinely new experiences affordable at unusual speed, quantity and quality.
Voice & tone
The published writing is remarkably consistent: first person, candid about failure, concrete, and free of hype. Protect that — it is the differentiator in a category full of claims.
Candid
Admits what went wrong and what was learned the hard way. Authority comes from experience, including the failures, not from assertion.
Plain
Short declarative sentences. Emphasis used sparingly and then landed hard — "Engineers build it. Full stop."
Grounded
Every claim carries a concrete example: a cold data center, a urinal decal, a Y-axis that should have run to 100%.
Generous
Teaches rather than gatekeeps. Credits teammates and specialists by role, mentors graduate students, and says plainly when a critique isn't meant as one.
✓ Write this way
- "We create prototypes using real frontend frameworks instead of Figma."
- Name the constraint before the solution: noisy site, no network, engineer on the clock.
- Use "I" in articles and talks; use "we" or "at RealWorldUX" for the practice.
- Open with a question when you want the reader to self-select.
- Give the number, then what it does and does not prove.
✕ Not this way
- "Revolutionary AI-powered design transformation at scale."
- Claiming outcomes the case study can't evidence.
- Design-trend vocabulary used as proof of taste.
- Positioning AI as the author of the work rather than an instrument of it.
- Treating enterprise work as something to apologize for.
The wordmark
A single typographic lockup, no symbol. Its whole idea is the weight contrast between "RealWorld" and "UX", plus the superscript trademark.
| Master artwork | Specification |
|---|---|
| primary | RealWorldUX_logo_blue.svg — fill #0071BC |
| light | RealWorldUX_logo_lightgray.svg — fill #DBDBDB, identical geometry |
| viewBox | 0 0 913 175 |
| aspect-ratio | 5.217 : 1 |
| construction | 13 outlined paths in 2 groups — 11 for the wordmark, 2 for the ™. No live text, no strokes, no gradients |
| location | rwux-website/public/image/ |
| favicon | Separate assets — favicon.ico and RWUX-favicon-16x16.png |
Rules
One flat color only — place the blue file or the light-gray file, never a third color. Minimum width 120px on screen, 25mm in print. The ™ is drawn into the artwork and is never removed. Where the mark must sit on a busy image, place it on a solid panel rather than adding a shadow or outline.
Misuse
Don't re-typeset it, recolor it, stretch or condense it, split "RealWorld" from "UX", add effects, rotate it, enclose it in a shape, or place the blue mark on a mid-blue field.
Color
One blue, one ink, a lot of white. The palette is deliberately narrow so that blue always means the same thing: this is the thing to act on.
Accessibility
Signal Blue on white clears AA for normal text at 5.1:1 but misses AAA. For blue text under 16px, step down to Blue Pressed. Never use Sky on a light surface. Never rely on blue alone to carry state — pair it with a label or a shape.
Dark surfaces
The public site is light-only. Where a dark UI is required, keep Ink as the ground and promote Sky to the accent. This document does exactly that — switch the theme to see the rule applied.
Typography
One family does everything: Inter Tight, variable, 100–900, with italics. Helvetica and Arial are explicitly excluded from the stack.
| Setting | Value |
|---|---|
| family | "Inter Tight", sans-serif |
| source | Google Fonts — ital,wght@0,100..900;1,100..900 |
| body line-height | 1.6 (32px at 20px) |
| letter-spacing | Not set on the live site. Recommended: −0.02em on display sizes, +0.06em on uppercase labels |
body, forms, hero copy
nav, quotes, captions
links, labels, buttons
all headings
not used — keep it that way
Space, shape & motion
A four-step spacing scale, three radii that each mean something, and motion that confirms rather than announces.
| Token | Value | Applied to |
|---|---|---|
| --spacing | 32px | Section rhythm, major gaps |
| --spacing-s | 24px | Card and grid gutters |
| --spacing-2s | 8px | Label-to-field, inline groups |
| --spacing-3s | 4px | Tightest optical adjustment |
| --header-height | 52px | Fixed navigation band |
| --border-radius | 8px | Images, video, quotes, work cards |
| control radius | 6px | Inputs and buttons — tighter than media, on purpose |
| panel radius | 16px | The hero text panel only |
Four speeds
0.2s controls and form borders · 0.25s navigation · 0.3s containers and content · 0.4s ease-out large imagery.
Barely there
Work cards scale to 1.03, large images to 1.05. The gesture should register as responsiveness, not as animation.
Glass, not shadow
Layering is expressed with backdrop-filter: blur(10px) on the header and blur(3px) behind hero text. Drop shadows are not part of the system.
The particle field
The single most distinctive thing the brand owns — and it is a system, not an effect. One WebGL cloud of 12,000 points runs the length of the home page, re-forming into a different shape and a different color for every section. The hero of this document is a reproduction of its first formation.
Treat the field as identity, on the same footing as the wordmark. It carries the positioning argument without a word of copy: the cloud is one body of material being directed into successive shapes, which is exactly what the practice sells. Nothing else in the brand says that as quickly.
Every plate below runs the production generator out of hero-particles.js — the same geometry, the same clamp(1 − |p|/4 × 0.6, 0.2, 1) density falloff and the same exp(−d²·18) soft dot — redrawn in 2D at specimen scale. The field turns continuously, so each plate is one real instant of that rotation, held still. Always on white: the ground is part of the effect, not a container.
| Section | Formation | Color | Why this shape |
|---|---|---|---|
| Hero headline | Cross / plus | #66B8FF | The signature. Dense core, four arms — stable, centered, unmistakable at a glance. |
| AI-friendly spec-based design | Vortex / funnel | #3BE38F | Scatter pulled down a single axis. Direction imposed on volume. |
| Human–AI collaboration | Galaxy | #FA9F89 | Three arms orbiting one center — distinct bodies, shared gravity. The disc is thin, so the page sees it edge-on, as a band. |
| Multi-agent process | Flowing streams | #B993F8 | Four parallel currents, each on its own sine, moving independently in one direction. |
| Data-driven interaction | Double helix | #FF9CFD | Structured, paired, legible — data with a shape to it. |
| Real app as a prototype | Cross (reprise) | #C5E69A | The hero shape returns in a new color. The promise, delivered. |
| Discover new possibilities | Core → tentacles | #66B8FF | Holds tight, then reaches outward. The only two-phase formation. |
| Meet Ryu | Portrait fill | photo tint | The cloud resolves into a face. The uniform stays white so the photograph supplies the color. |
| Get in touch | Two spheres connecting | #66B8FF | Two bodies extending tentacles until they meet at center. The contact form, argued in geometry. |
Light, saturated hues that exist only as emitted light on a white ground. None of them is a surface or text color — see the caution in 08.
| Parameter | Value | Note |
|---|---|---|
| library | three.js | WebGLRenderer, antialias on, alpha off, custom shader material |
| PARTICLE_COUNT | 12000 / 6000 | Desktop / mobile, switched on user agent |
| BASE_PT_SIZE | 40.0 / 28.0 | Desktop / mobile |
| pixelRatio | min(dpr, 2) | Capped — the field is cheap to run, deliberately |
| camera | FOV 50, z = 7 | Perspective, looking at origin |
| HOLD_SECONDS | 4.0 | A formation is readable before it moves on |
| MORPH_SECONDS | 2.5 | easeInOutCubic between formations |
| discover phases | 0.55 / 1.85 / 5.2 | Core hold, core morph, tentacle morph |
| NOISE_STR | 0.12 | Per-particle drift — the field is never fully still |
| ROTATION_SPEED | 0.04 | Slow enough to read as depth, not spin |
| BACKGROUND | #FFFFFF | The white ground is part of the effect, not a container |
| blending | Normal, depthWrite off | Soft gaussian dot, white-hot core, discarded past r = 0.5 |
| driver | scroll position | Each .hero-panel[data-formation] claims a formation |
| reduced motion | still frame | Snaps to the panel’s formation; no morph, rotation or drift, and no redraw until it changes |
Rules
One field per page, never two. It owns the full viewport behind content and is never boxed into a card. Copy sits clear of the dense core, not on top of it. The ground stays white. Color belongs to the section, not to the particle — don't recolor a formation to match a client or a campaign.
Where it goes
Home page only, today. It is the right signature for a title slide, a conference backdrop, or a proposal cover; it is wrong for case-study pages, where the work has to be the thing on screen. Static capture of the hero cross is the fallback wherever WebGL can't run.
Proof
The evidence base the brand draws on. Lead with range across hardware, enterprise software and robotics — few consultancies have all three.
Robotics operations
Platform UI redesign and research, website and 3D storytelling, the physical Robot Space, and a natural-language RobOps Copilot. The deepest and most current client relationship.
Destiny Design System
Components and a fully tokenized attribute set published as versioned JSON, unifying a portal fragmented by mergers. Figma and the production front end working from one source of truth.
Enterprise field tooling
AppAssist, offline-first install support for engineers in data centers, plus two appliance management consoles. The reference case for value sitting beneath the surface.
Products and patents
TextAlive animated messaging shipped in Japan in 2002, Sony TV menus and tuning concepts, the Gear Circle headset, and the Global Village data visualization presented at TED in 2000.
A great partner in helping us move from a vision of a unified UI library.Julie Baher, VP of Customer Experience, Myriad Genetics
Messaging kit
Approved copy. Use these as written, or cut them down — don't inflate them.
RealWorldUX is a UX consultancy led by Ryu Sakai. It embeds with product teams and delivers working, real-code prototypes — directed with AI, grounded in real users and real constraints.
30 wordsRealWorldUX is a UX consultancy founded by Ryu Sakai, a designer and leader with decades of experience and ten utility patents filed. It embeds inside client teams to define product and website experiences, then builds them as running applications in real front-end frameworks rather than static design files. AI is used as an instrument of direction, so engineers receive code they can extend instead of a specification they must reinterpret.
70 wordsFor a founder. You don't need a design file. You need a site that states your value proposition and a front end your engineer can ship.
For a product team. I embed with your team, work in your framework, and stay past handoff — because handoff is where designs get lost.
On AI. Anyone can generate an app now. The scarce thing is knowing what it should be. That's what you're hiring.
Ten utility patents filed · a tokenized design system shipped as versioned JSON to a genomics portal · an offline-first app for engineers in data centers with no network · robot fleet operations UI across multiple vendors · a data visualization presented at TED in 2000 · published in UX Collective and Nightingale · mentor in the UC Santa Cruz HCI graduate program.
Sources
Everything in sections 03, 04 and 06 is derived from these. Twelve articles plus the current site.
- 2026realworldux.co — home, works, about, and eight project pagesSource for positioning, the AI practice, visual tokens and the proof section
- 2020The user experience of public restroomsObservation over assumption; design that works with instinct; caring for the next person
- 202012 traits of a great UX designerThe core value set: empathy, humility, less ego, listening, business awareness
- 2020Competitive analysis: how to approach it effectivelyBig picture first; evaluate from within; insight over imitation
- 2020The importance of process documentation in a UX projectRationale over outcome; honesty about what didn't work
- 2020UX/PM/engineer collaboration — a critical factor for a product's successFeasibility; partnership over handoff; UX cannot exist on its own
- 2020Not so fancy (but meaningful) enterprise UX workThe unglamorous work counts; just enough, just-in-time
- 2020What I learned from COVID-19 data visualizationResponsibility with information; faithful scales; stated uncertainty
- 2020How I see a lesson from Flash holds a future of prototypingThe prototype as the front end engineers extend — the origin of today's delivery model
- 2020How to visualize layered data to show holistic relationshipsDesign as a vehicle for the message, not a designer's playground
- 2020Seeing the world as 1000 peopleSimplicity is the key; design becomes transparent
- 2020How to create a low-fidelity prototype in Google SheetsVision → feature set → prototype in whatever tool is at hand. Member-only on Medium; opening section read
- 2020Prototype Resource Map: a guide to 8 prototyping toolsTools are not the point; they serve solving the user's problem. Member-only on Medium; opening section read