DEV Community

Cover image for Designing consistent UX across 10 different macOS Utility Apps
hiyoyo
hiyoyo

Posted on

Designing consistent UX across 10 different macOS Utility Apps

#android #mac #tauri #rust

All tests run on an 8-year-old MacBook Air (Intel). When 10 apps share the same machine, they'd better share the same design language—otherwise every context switch costs mental energy.

The Hiyoko Suite isn't one app; it's 10 specialized tools. From MTP file transfers to PDF encryption to AI-powered log analysis, each app solves a different problem. But if a user opens HiyokoMTP and then switches to HiyokoShot, the experience should feel like opening a different room in the same house—not walking into a different building.

TL;DR

  • Shared CSS custom properties (design tokens) enforce visual consistency across all 10 apps with minimal overhead.
  • A reusable React component library (Toolbar, SettingsModal, Toast) ensures identical interaction patterns.
  • Glassmorphism with backdrop-filter creates a native macOS feel without native-only code.
  • Per-app accent colors give each tool its own identity within the shared system.

The Design Token Foundation

Every Hiyoko app imports a shared CSS file with the core design tokens. This isn't a framework—it's 40 lines of CSS custom properties that define the entire visual system:

/* shared/hiyoko-tokens.css — imported by all 10 apps */
:root {
  /* Background layers */
  --bg-app: #1a1a1e;
  --bg-surface: rgba(255, 255, 255, 0.04);
  --bg-elevated: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --text-primary: #e4e4e4;
  --text-secondary: #7a7a7a;

  /* Spacing scale (4px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* Borders and shapes */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);
}
Enter fullscreen mode Exit fullscreen mode

Each app then sets its own accent color on top:

/* HiyokoMTP */
:root { --accent: #4a9eff; --accent-dim: rgba(74, 158, 255, 0.15); }

/* HiyokoLogcat */
:root { --accent: #ffd44a; --accent-dim: rgba(255, 212, 74, 0.15); }

/* HiyokoShot */
:root { --accent: #ff6b8a; --accent-dim: rgba(255, 107, 138, 0.15); }
Enter fullscreen mode Exit fullscreen mode

This pattern means 90% of the UI is identical across apps. Only the accent-colored elements—active tabs, selected items, progress bars—change per app.

The Translucent Popover Pattern

Several Hiyoko apps (HiyokoShot, HiyokoBar, HiyokoClip) live in the macOS menu bar. They share an identical popover component that uses glassmorphism to feel native to macOS Sonoma and Sequoia:

/* Menu bar popover — shared across HiyokoShot, HiyokoBar, HiyokoClip */
.menubar-popover {
  background: rgba(40, 40, 44, 0.78);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.3),
    0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* Content area within the popover */
.menubar-popover__content {
  padding: var(--space-md);
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
Enter fullscreen mode Exit fullscreen mode

The blur(32px) value was tuned on my 8-year-old MacBook Air. Higher values look better but cause perceptible lag on the integrated GPU. 32px is the sweet spot between visual quality and performance on Intel Iris graphics.

Shared React Components

Beyond CSS, the suite shares a React component library. Here are the key pieces:

// shared/components/Toolbar.tsx — identical toolbar across all apps
interface ToolbarProps {
  title: string;
  accentColor?: string;
  actions?: React.ReactNode;
}

export function Toolbar({ title, accentColor, actions }: ToolbarProps) {
  return (
    <div className="hiyoko-toolbar" data-tauri-drag-region>
      <span className="hiyoko-toolbar__title">{title}</span>
      <div className="hiyoko-toolbar__actions">{actions}</div>
    </div>
  );
}

// shared/components/Toast.tsx — notification toast with "Piyo" sound
export function Toast({ message, type = 'info' }: ToastProps) {
  return (
    <div className={`hiyoko-toast hiyoko-toast--${type}`} role="alert">
      <span className="hiyoko-toast__icon">{iconMap[type]}</span>
      <span className="hiyoko-toast__message">{message}</span>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

When a user who knows HiyokoMTP opens HiyokoShot for the first time, the toolbar is in the same place, the settings icon opens the same modal layout, and the toast notifications look identical. The learning curve for app #2 through #10 is nearly zero.

Consistency Saves Development Time

The practical benefit beyond UX: when I build a new app, the design phase takes hours instead of days. Import the tokens, drop in the shared components, set the accent color, and the app already looks like it belongs in the suite.

A bug fix in a shared component propagates to all 10 apps on the next build. A visual refinement to the popover border radius applies everywhere simultaneously. For a solo developer, this multiplication effect is the only way to maintain quality across a growing ecosystem.

A suite of tools should feel like a well-organized toolbox, not a drawer full of mismatched screwdrivers. Investing in a shared design language upfront saves exponentially more time than it costs.

How do you handle visual consistency across multiple projects? Do you use a formal design system or more of an ad-hoc approach?

If this was helpful, check out HiyokoKit — all-in-one Android dev toolkit (MTP file manager, Logcat+AI, ADB Tools, Monitor).

Built with Rust + Tauri v2. Tested on an 8-year-old MacBook Air.

Top comments (0)