Kargonaut uses three surface languages on purpose. Clay is for objects you press, glass is for panels that float over context, and neumorphism is for controls you adjust. Each one has a job, so they never fight.
Puffy, tactile and friendly. Used for cards, stat tiles and primary calls to action.
.clay {
background: linear-gradient(145deg,
var(--clay-from), var(--clay-to));
border-radius: 30px;
box-shadow:
14px 16px 32px rgba(0,0,0,.5),
inset -8px -10px 18px rgba(0,0,0,.35),
inset 8px 8px 16px rgba(255,255,255,.09);
}
Frosted, translucent panels that keep the colourful context visible. Used for navigation, overlays and data panels.
In customs · Bengaluru
.glass {
background: rgba(22,27,58,.55);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px) saturate(160%);
box-shadow: 0 20px 50px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.08);
}
Soft, extruded or pressed into the surface. Used only for controls: inputs, switches, segments and dials.
.neu { background: var(--neu-bg);
box-shadow: 7px 7px 16px var(--neu-dark),
-6px -6px 14px var(--neu-light); }
.neu-in { box-shadow:
inset 5px 5px 11px var(--neu-dark),
inset -4px -4px 10px var(--neu-light); }
A load-planning card: the glass shell floats, the clay readout pops, and the neumorphic dial is the control.
Use arrow keys to fine-tune.
Every colour is a CSS custom property, so the whole site switches between dark and light by swapping one attribute. Values below update live with the theme toggle.
clamp(2.4rem, 7vw, 4.6rem) / 850clamp(1.9rem, 4.6vw, 3rem) / 8001.2rem / 7501rem / 400 · line-height 1.6monospace, IDs and numbersthe element is a thing: a service, a plan, a stat, a primary button.
a surface sits on top of rich context: the nav bar, panels, toasts, tooltips.
the element is adjustable: inputs, switches, steppers, segments and dials.