# Juksing: a MIAN design language

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.

- Family: Linear · Origin: China · Hong Kong · License: MIAN License (free to use)
- Traits: springy, jointed, crafted, natural, structured · intensity 2/5 · contrast medium · density default. Good for: logistics, outdoor, timelines, process-heavy sites. Less for: luxury.
- Use: `<html data-noodle="juksing">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/juksing.css
- Page: https://mian.ro/noodles/juksing

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #33513a: green (deep, muted). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Accent** #8f5b0e: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f6f6f0: yellow and gold (pale, muted). Optimism, attention, caution. Gold tones add value and ceremony.
- **Scheme.** Green with brown and terracotta: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** springy, jointed, crafted, natural, structured (brand dimension: ruggedness).
- **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.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "juksing").

## 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

## Designing new components in Juksing

Build new components from `--mn-*` tokens, scoped with `[data-noodle="juksing"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- 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 in this language:

```css
[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); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 4px, box 6px, badge 3px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #f6f6f0 | #0d100c |
| surface | #ffffff | #141812 |
| surface2 | #ecece3 | #1c211a |
| fg | #151a14 | #eef1e8 |
| muted | #5b6356 | #a1ab98 |
| border | #dfe2d6 | #283024 |
| input | #b3baa7 | #4b5644 |
| primary | #33513a | #a9d3a4 |
| primaryFg | #ffffff | #0e1f10 |
| secondary | #ecece3 | #1c211a |
| secondaryFg | #151a14 | #eef1e8 |
| accent | #8f5b0e | #e8b45a |
| accentFg | #ffffff | #241603 |
| ring | #33513a | #a9d3a4 |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #33513a | #a9d3a4 |
| secondaryText | #6f726b | #81857d |
| accentText | #8f5b0e | #e8b45a |
| successText | #15783a | #4ade80 |
| warningText | #a74e0a | #fbbf24 |
| dangerText | #c82524 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #33513a | #a9d3a4 |