Binauro is built around a single design system called Organica. It is the reason every page on this site shares the same visual language: soft squircles, a calm dark palette, consistent spacing, and components that feel handmade without looking primitive. This post explains what Organica is, how it works, and why it exists.
Design System
What is Organica
Organica is Binauro's internal design system. It is not a public library you install from npm. It is a shared set of principles, shape utilities, MUI theme extensions, and component patterns that every page inherits. The core idea is the organic squircle: a slightly imperfect rounded shape generated with a deterministic path function, so every card, button, dialog, and artwork frame can look related without being identical.
One shape, infinite variations
The same squircle function produces different shapes depending on width, height, radius, imperfection, and a numeric seed. A soundscape card looks like a smooth river stone. A player dialog feels like frosted glass. A primary button feels tactile and pressable. All from one underlying shape system.
Shape
The organic squircle shape language
A squircle is a rectangle with rounded corners, but Organica's squircles are not perfectly round. They are generated with a small imperfection parameter (default 0.12) and a numeric seed that makes the corners slightly asymmetric. The result is shapes that feel organic, like water-worn stones or handmade ceramics, rather than perfectly geometric.
The shape is produced by createOrganicSquirclePath, a deterministic function that takes width, height, radius, imperfection, seed, and corner smoothing. The same parameters always produce the same path. This makes it safe to use across components without randomization causing visual shifts between renders.
Deterministic
Same seed always produces the same shape, so SSR and CSR match exactly.
Composable
Every component accepts radius, imperfection, and seed overrides for fine-tuning.
Asymmetric
Slight corner asymmetry keeps shapes from looking factory-made.
AmbientCard shape comparison
Same artwork and same image treatment, with three different frame shapes. The default MUI card is a basic rounded rectangle. The regular squircle uses asymmetric pixel radii for a softer but still geometric feel. The Organica organic squircle uses a seed-driven path with imperfection, giving each corner a slightly different curvature that reads as handmade. This is the actual shape used by AmbientCard on the soundscapes page.
Round Button shape comparison
A perfect circle is symmetric. Every point on the perimeter is equidistant from the center. The round blob uses an elliptical border-radius that is also symmetric, but visually distinct from a true circle due to the percentage ratios. The Organica blob (shown in the shape comparison section above) uses a seed-driven path with imperfection for an asymmetric, organic feel. BlobButton powers the play/pause control in the global player dialog.
Icons
From Lucide to Solar: a squircle-native icon set
Early Binauro used Lucide icons throughout. They are clean, consistent, and well-supported but they are designed for a geometric world of sharp 24×24 grids. Organica's squircle-based world needed icons that felt softer, rounder, and more at home inside asymmetric blob shapes. Solar was the answer.
Solar's icon style uses rounded caps, open strokes, and a squircle-optimized 32px canvas rather than the classic 24px grid. Corners are never perfectly sharp, and even line endpoints carry a small radius. The result is icons that feel like they belong inside organic shapes rather than sitting on top of them.
Pause icon: Lucide vs Solar
Sharp bar endpoints
24×24 grid
Fully rounded bar caps
32×32 squircle canvas
Lucide's pause icon uses two rectangular bars with square endpoints on a 24×24 grid. Solar's version uses pill-shaped bars (fully rounded endpoints) drawn on a 32×32 canvas that aligns to squircle boundaries. The round caps on Solar's bars feel handmade, almost like they were drawn with a soft pen, while Lucide's sharp rectangles feel engineered. In an interface built on organic squircles, Solar's icons feel like they belong; Lucide's feel like a guest.
Buttons
Primary buttons: Organica vs default MUI
Every interactive surface in Binauro uses Organica's custom button components. They are built on the OrganicSquircle primitive rather than MUI's default Button. The difference is visible immediately: organic shape, gradient fill with a subtle top-light sheen, a hover lift, and full rounded bar icons embedded in the organic shape language.
Organica
OrganicSquircle baseGradient + sheen + hover lift
Squircle-optimized icons
Default MUI
Standard MUI ButtonFixed border radius
Sharp icon alignment
Principles
Design principles
Organica is guided by three principles that shape every design decision:
Softness with intent
Shapes are soft but not formless. Every radius, asymmetry, and blur has a reason.
Calm over spectacle
The UI should recede. Brightness, motion, and contrast serve the content, not the other way around.
Consistency without rigidity
Components share a family. But each instance can vary within the family to fit its context.
Roadmap
What comes next
Organica is the foundation the rest of Binauro builds on. Next comes more component coverage (dialogs, tooltips, data tables), a shared icon set, animation tokens, and documentation. As new tools and pages are added, they will extend the system rather than diverging from it.
