Juksing
Bamboo-pole noodles. Straight, jointed, springy. Jook-sing noodles are kneaded by a cook who sits on the end of a long bamboo pole and bounces along the dough. Juksing is a bamboo system: straight lines broken by nodes, segmented progress and sliders with joints, dividers and step lines with node rings, tabs with node caps, and a small springy bounce when pressed.
Design language
Juksing is bamboo. The noodles are kneaded by a cook bouncing along a bamboo pole, so straight lines are broken by nodes: buttons carry a node ring near each end, progress bars, sliders and chart bars are jointed into segments, dividers and tab lines end in round node caps, and things answer a press with a small springy bounce.
Principles
- Nodes on straight lines: joints every 26–40px (--jk-joints), node rings near the ends of buttons (--jk-rings).
- Culm shading: a soft top-light / bottom-shade gradient (--jk-culm) on filled controls.
- Bounce: presses and selections play juksing-bounce (2px down, 1px up).
- Sage-green ink, egg-yolk accent, 4–6px corners.
Shape
4px fields, 6px surfaces; tab and step lines end in round caps.
Surface
White with light borders; card headings underlined by a line with node caps.
Colour
Sage bamboo green, egg-yolk accent, pale bamboo neutrals.
Type
Sans at 550–650.
Motion
juksing-in drops in and bounces (320ms); presses bounce.
Data
Bars jointed every 18px; a segmented ring spinner.
Designing new components in Juksing
MIAN does not ship every component you will need. To make a new one that belongs in Juksing, build it from --mn-* tokens inside [data-noodle="juksing"] and follow these rules.
Do
- Break long lines with joints: background: var(--jk-joints), var(--mn-surface-2).
- Filled controls: background-image: var(--jk-rings), var(--jk-culm).
- End indicator lines with two small circles (radial gradients at 3px and calc(100% - 3px)).
- On press: animation: juksing-bounce 260ms.
Avoid
- Long unbroken bars
- Glass or blur
- Sharp 0px corners
Recipe: a selectable tile
[data-noodle="juksing"] .tile {
padding: 12px 16px; border: 1px solid var(--mn-border); border-radius: 6px;
background: var(--jk-joints), var(--mn-surface);
}
[data-noodle="juksing"] .tile[aria-selected="true"] { background: var(--jk-rings), var(--jk-culm), var(--mn-primary); color: var(--mn-primary-fg); }
[data-noodle="juksing"] .tile:active { animation: juksing-bounce 260ms cubic-bezier(.3, 1.4, .5, 1); }The same guide, for AI tools: /ai/noodles/juksing.md · MCP tool get_design_language.
Colour, type and brand
What Juksing says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.
Primary · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Accent · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
Page · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Green with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page itself is warm.
Type
One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as springy, jointed, crafted, natural, structured. Intensity 2 of 5. Brand dimension: ruggedness.
Suits
logistics, outdoor, timelines, process-heavy sites. Less suited to luxury.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- A long bamboo pole→straight lines interrupted by nodes: segmented progress, jointed dividers and step connectors
- Bouncing on the pole→a small vertical bounce on press and on arrival
- Egg-yellow, springy noodles→a warm yolk accent on sage-green ink
- Pressed flat, then cut→firm 4px corners and even rhythm
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
This palette on Juksing. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="juksing">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/juksing.css">
<!-- or scope it to one element -->
<section data-noodle="juksing" data-mode="dark">…</section>Palette
Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.
Typography & shape
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 4px · 6px · 3px |
| density | default |
| shadows | subtle |