Material swatch v1.2: bicolor and tricolor are a soft split — solid colours with a 20 % blended seam on the 135° axis, not a full ramp. Doc + French translation, test vectors, reference renderer, glossary, llms.txt

Author: BenGlut

docs/developers/material-swatch-playground.html

@@ -92,18 +92,24 @@ <h1>The material swatch — reference renderer</h1>
    ./material-swatch.md — keep the two in step.
    ═══════════════════════════════════════════════════════════════════════════ */
 
-// Hard-edged colours. TWO or THREE → a smooth 135° ramp, no hard edge, first
-// colour top-left — same shape as a declared gradient of the same length.
+// Hard-edged colours. TWO or THREE → a 135° soft split: each colour solid, a
+// SPLIT_BLEND % seam blended at each boundary, first colour top-left.
 // FOUR or more → N equal conic sectors, first colour at 12 o'clock, clockwise
-// (a ramp through 4+ colours turns to mud, sectors stay recognisable). One
+// (4+ bands on one diagonal get too thin, sectors stay recognisable). One
 // function, so every hard split (catalogue list or chip aspect) gets the rule.
 const pieSplit = colors => {
-  if (colors.length <= 3) return `linear-gradient(${RAMP_ANGLE}, ${colors.join(', ')})`;
+  if (colors.length <= 3) {
+    // Soft split: each colour solid, a SPLIT_BLEND % seam blended at each boundary.
+    const seg = 100 / colors.length, h = SPLIT_BLEND / 2;
+    const stops = colors.map((c, i) => `${c} ${+Math.max(0, i * seg + (i ? h : 0)).toFixed(2)}% ${+Math.min(100, (i + 1) * seg - (i < colors.length - 1 ? h : 0)).toFixed(2)}%`);
+    return `linear-gradient(${RAMP_ANGLE}, ${stops.join(', ')})`;
+  }
   const step = 360 / colors.length;
   return `conic-gradient(${colors.map((c, i) => `${c} ${i * step}deg ${(i + 1) * step}deg`).join(', ')})`;
 };
 // One angle for every smooth ramp in the system.
 const RAMP_ANGLE = '135deg';
+const SPLIT_BLEND = 20;   // % of the diagonal blended at each soft-split boundary
 
 // Aspect ids that change the shape. Match on the ID, never on the label.
 const ASPECT = { BICOLOR: 252, TRICOLOR: 24, RAINBOW: 145 };
@@ -153,11 +159,11 @@ <h1>The material swatch — reference renderer</h1>
   }
   if (isTricolor) {                                           // 8
     const [c1 = '#cccccc', c2 = '#888888', c3] = slots;
-    return pieSplit(c3 ? [c1, c2, c3] : [c1, c2]);             //   slot 3 missing → 2-colour ramp
+    return pieSplit(c3 ? [c1, c2, c3] : [c1, c2]);             //   slot 3 missing → 2-colour soft split
   }
   if (isBicolor) {                                            // 9
     const [c1 = '#cccccc', c2 = '#ffffff'] = slots;
-    return pieSplit([c1, c2]);                                //   → ramp
+    return pieSplit([c1, c2]);                                //   → soft split
   }
   return slots[0] || '#1c2030';                               // 10
 }
@@ -198,25 +204,25 @@ <h1>The material swatch — reference renderer</h1>
     note:'The luminance trap: an unnormalised #000000FF read as "light" puts the black logo on a black spool.',
     doc:{ online_color_list:['000000FF'] } },
 
-  { t:'Bicolor — chip aspect 252', rule:'rule 9 — ramp, 135°',
-    note:'Look at all five boxes: the blend runs top-left → bottom-right across the circle, the square, the banner, the column and the clipped bar, first colour top-left, no hard edge.',
+  { t:'Bicolor — chip aspect 252', rule:'rule 9 — soft split, 135°',
+    note:'Look at all five boxes: the seam runs top-right → bottom-left through the centre of the circle, the square, the banner, the column and the clipped bar, first colour top-left; each colour stays solid, only a 20 % seam blends.',
     doc:{ color_r:224, color_g:36, color_b:36, color_r2:36, color_g2:99, color_b2:224,
           color_r3:0, color_g3:0, color_b3:0, id_aspect2:ASPECT.BICOLOR } },
-  { t:'Tricolor — chip aspect 24', rule:'rule 8 — ramp, 135°',
+  { t:'Tricolor — chip aspect 24', rule:'rule 8 — soft split, 135°',
     doc:{ color_r:224, color_g:36, color_b:36, color_r2:36, color_g2:99, color_b2:224,
           color_r3:34, color_g3:160, color_b3:107, id_aspect2:ASPECT.TRICOLOR } },
 
-  { t:'Two colours in the list', rule:'rule 3 — ramp',
+  { t:'Two colours in the list', rule:'rule 3 — soft split',
     doc:{ online_color_list:['e02424','2463e0'] } },
-  { t:'Three colours in the list', rule:'rule 3 — still a ramp',
+  { t:'Three colours in the list', rule:'rule 3 — still a soft split',
     doc:{ online_color_list:['e02424','2463e0','22a06b'] } },
   { t:'Four colours in the list (multi)', rule:'rule 3 — camembert from here up',
     doc:{ online_color_list:['e02424','f0a020','2463e0','22a06b'], online_color_type:'multi' } },
 
   { t:'Declared type: gradient', rule:'rule 2 — ramp 135°',
     doc:{ online_color_list:['e02424','f0a020','2463e0'], online_color_type:'gradient' } },
-  { t:'Declared type: gradient, TWO colours', rule:'rule 2 — same shape as an undeclared 2-colour list',
-    note:'The declared type only changes anything once the list reaches 4 colours — below that, a hard list already renders as this same ramp.',
+  { t:'Declared type: gradient, TWO colours', rule:'rule 2 — a smooth ramp, not a soft split',
+    note:'The catalogue asked for a gradient, so it blends all the way — compare with the undeclared two-colour list, which holds each colour solid.',
     doc:{ online_color_list:['e02424','2463e0'], online_color_type:'gradient' } },
   { t:'Declared type: conic_gradient', rule:'rule 1 — catalogue only, never on a chip',
     doc:{ online_color_list:['e02424','f0a020','22a06b','2463e0'], online_color_type:'conic_gradient' } },

docs/developers/material-swatch.md

@@ -13,15 +13,16 @@ protocol has yet to gain. The convention is written against `id_type` in
 general: nothing below reads the product type, so a swatch is produced the same
 way whatever the material is.
 
-It is normative. A bicolor filament that shows a smooth ramp in one app and a
-hard diagonal split in another is a bug in whichever one departed from this page
+It is normative. A bicolor filament that shows a soft split in one app and a
+hard edge or a full ramp in another is a bug in whichever one departed from this page
 — not a matter of taste. If you cannot reproduce a rule exactly (a platform
 with no conic gradient, say), implement the closest equivalent described in
 [Non-CSS platforms](#non-css-platforms) and say so; do not invent a different
 picture.
 
-- **Convention version:** 1.2 — bicolor and tricolor are a **135° ramp** (1.1 drew bicolor as a
- hard diagonal split and tricolor as a camembert; 1.0 split bicolor vertically)
+- **Convention version:** 1.2 — bicolor and tricolor are a **135° soft split**: solid colours with a
+ 20 % blended seam (1.1 drew bicolor as a hard diagonal split and tricolor as a camembert; 1.0
+ split bicolor vertically)
 - **Reference renderer:** [`material-swatch-playground.html`](./material-swatch-playground.html) —
  open it in any browser, no server, no dependency. Every case, every box shape,
  live colour pickers, and the exact CSS it produces.
@@ -32,28 +33,34 @@ picture.
 
 | Shape | When | Geometry |
 |---|---|---|
-| **Ramp** | **Two or three** hard-edged colours — bicolor, tricolor — plus rainbow and the catalogue's declared `gradient` type | A smooth linear ramp at **135°**, no hard edge — pointing to the bottom-right, so the first colour sits top-left |
+| **Soft split** | **Two or three** hard-edged colours — bicolor, tricolor | N equal bands along the **135°** axis, first colour **top-left**; each colour stays **solid**, and only a seam of **20 %** of the diagonal (`SPLIT_BLEND`) centred on each boundary blends |
+| **Ramp** | Rainbow, and the catalogue's declared `gradient` type | A smooth linear ramp at **135°**, evenly spaced stops — pointing to the bottom-right, so the first colour sits top-left |
 | **Camembert** (pie) | **Four or more** hard-edged colours — any list of N ≥ 4 | N equal conic sectors, first colour starting at **12 o'clock**, sweeping **clockwise** |
 
-Said plainly: **two or three hard colours blend into a ramp, four or more make a
-camembert** — and there is exactly one angle in the whole system, 135°, shared
-by every ramp in it.
+Said plainly: **two or three hard colours make a soft split, four or more make a
+camembert, smooth colours make a ramp** — and there is exactly one angle in the
+whole system, 135°, shared by the soft split and the ramp.
 
-**Bicolor and tricolor are a ramp — the same shape as a declared gradient.**
-Same axis, same order (first colour top-left), no hard edge anywhere: 2 or 3
-hard colours blend exactly like a catalogue `gradient` of the same length.
+**Bicolor and tricolor are a soft split — the ramp's axis, the split's clarity.**
+Same axis and order as a ramp (first colour top-left), but each colour holds
+solid over its band and only a **20 %** seam blends at each boundary. With
+`seg = 100 / N` and `h = SPLIT_BLEND / 2 = 10`, colour *i* holds from
+`i·seg + h` (0 for the first) to `(i+1)·seg − h` (100 for the last).
 Implement it once, in the function that splits a list of colours (N ≤ 3 →
-ramp, N ≥ 4 → pie), so every caller gets it; never draw it mirrored.
-
-Why a ramp for two or three colours: a hard edge still read as two or three
-separate objects — on a thumbnail, and even more on the colour frame round a
-product photo, where the photo hid the centre and left disjoint coloured bars.
-A ramp reads as one multi-tone material on any box shape. Why a pie from four
-colours up: a ramp through four or more colours turns to mud, while sector
+soft split, N ≥ 4 → pie), so every caller gets it; never draw it mirrored.
+
+Why a soft split for two or three colours: a hard edge still read as two or
+three separate objects — on a thumbnail, and even more on the colour frame
+round a product photo, where the photo hid the centre and left disjoint
+coloured bars. A full ramp fixed that but washed the colours out, so neither
+reads as the true colour. The soft split keeps each colour solid and blends only
+the seam: one multi-tone material, true colours, on any box shape. 20 % was
+chosen by eye across every surface (a wider seam leaves a tricolor's middle
+colour almost no solid band). Why a pie from four
+colours up: four or more bands along one diagonal get too thin to read, while sector
 boundaries stay angular and recognisable — measured from the box centre, so N
 sectors stay legible whatever the box's aspect ratio. Why 135°: it is the one
-angle of the system, shared by every ramp, whether it has 2, 3 or more smooth
-stops.
+angle of the system, shared by the soft split and every ramp.
 
 ---
 
@@ -79,8 +86,8 @@ authoritative `color_count`):
 
 | id | label | `color_count` | Shape |
 |---|---|---|---|
-| `252` | Bicolor | 2 | **Ramp**, 135° |
-| `24` | Tricolor | 3 | **Ramp**, 135° |
+| `252` | Bicolor | 2 | **Soft split**, 135° |
+| `24` | Tricolor | 3 | **Soft split**, 135° |
 | `145` | Rainbow | 3 | Ramp, 135° |
 
 Every other aspect (`Silk`, `Matt`, `Glitter`, …) has `color_count` ≤ 1 and does
@@ -120,14 +127,14 @@ Let `LIST` = `online_color_list` after [normalisation](#normalisation), `TYPE` =
 | # | Condition | Result |
 |---|---|---|
 | 1 | `LIST ≥ 2` and `TYPE == "conic_gradient"` | Smooth conic sweep, closing on the first colour |
-| 2 | `LIST ≥ 2` and `TYPE == "gradient"` | Ramp — same shape `LIST` would get at 2-3 colours anyway; the declared type only matters once `LIST.length ≥ 4` |
-| 3 | `LIST ≥ 2` | **Ramp** of `LIST` when 2 or 3 colours, **camembert** of `LIST.length` sectors when 4 or more |
+| 2 | `LIST ≥ 2` and `TYPE == "gradient"` | Ramp — even on two or three colours; the catalogue asked for a smooth ramp, so it does not become a soft split |
+| 3 | `LIST ≥ 2` | **Soft split** of `LIST` when 2 or 3 colours, **camembert** of `LIST.length` sectors when 4 or more |
 | 4 | `LIST == 1` | Solid colour — **outranks the chip colour** |
 | 5 | aspect **Rainbow** *and* **Tricolor** | Ramp, 3 stops |
 | 6 | aspect **Rainbow** *and* **Bicolor** | Ramp, 2 stops |
 | 7 | aspect **Rainbow** | Ramp over `SLOTS`; 1 slot → solid; 0 slots → the 6-colour default |
-| 8 | aspect **Tricolor** | **Ramp**, 135°, over `SLOTS` (slot 3 missing → a 2-colour ramp over slots 1 and 2, it does not repeat slot 1) |
-| 9 | aspect **Bicolor** | **Ramp**, 135°, over slots 1 and 2 |
+| 8 | aspect **Tricolor** | **Soft split**, 135°, over `SLOTS` (slot 3 missing → a 2-colour soft split over slots 1 and 2, it does not repeat slot 1) |
+| 9 | aspect **Bicolor** | **Soft split**, 135°, over slots 1 and 2 |
 | 10 | otherwise | Solid slot 1; nothing at all → `#1c2030` |
 
 Defaults when an aspect carries no usable colour:
@@ -137,7 +144,7 @@ Defaults when an aspect carries no usable colour:
 | Rainbow, no colours | `#ff0000 #ff8800 #ffff00 #00cc00 #0000ff #8b00ff` |
 | Rainbow + Tricolor | `#ff4d4d #ffd93d #4da3ff` |
 | Rainbow + Bicolor | `#ff7a00 #8a2be2` |
-| Tricolor | `#cccccc #888888` (slot 3 missing → 2-colour ramp, slot 1 is not repeated) |
+| Tricolor | `#cccccc #888888` (slot 3 missing → 2-colour soft split, slot 1 is not repeated) |
 | Bicolor | `#cccccc #ffffff` |
 | Nothing | `#1c2030` |
 
@@ -164,11 +171,16 @@ components are numbers.
 
 ## The exact expressions
 
-With `c1…cN` the normalised colours and `step = 360 / N`:
+With `c1…cN` the normalised colours, `step = 360 / N`, `seg = 100 / N` and
+`SPLIT_BLEND = 20`:
 
 ```css
-/* Ramp — 2 or 3 hard colours: rule 3 with 2-3 colours, rules 5-9. Same shape
-   as a declared gradient, one angle for every ramp in the system. */
+/* Soft split — 2 or 3 hard colours: rule 3 with 2-3 colours, rules 8-9.
+   Each colour solid over its band, a 20 % blended seam at each boundary. */
+linear-gradient(135deg, c1 0% 40%, c2 60% 100%)                        /* N = 2 */
+linear-gradient(135deg, c1 0% 23.33%, c2 43.33% 56.67%, c3 76.67% 100%) /* N = 3 */
+
+/* Ramp — rainbow and a declared gradient: rules 2, 5-7 */
 linear-gradient(135deg, c1, c2, …)
 
 /* Camembert — four or more hard colours: rule 3 with ≥ 4 colours */
@@ -189,11 +201,11 @@ Any implementation must reproduce these exactly.
 |---|---|
 | `{online_color_list:["FF5722"]}` | `#FF5722` |
 | `{online_color_list:["000000FF"]}` | `#000000` |
-| `{online_color_list:["e02424","2463e0"]}` | `linear-gradient(135deg, #e02424, #2463e0)` |
-| `{online_color_list:["e02424","2463e0","22a06b"]}` | `linear-gradient(135deg, #e02424, #2463e0, #22a06b)` |
+| `{online_color_list:["e02424","2463e0"]}` | `linear-gradient(135deg, #e02424 0% 40%, #2463e0 60% 100%)` |
+| `{online_color_list:["e02424","2463e0","22a06b"]}` | `linear-gradient(135deg, #e02424 0% 23.33%, #2463e0 43.33% 56.67%, #22a06b 76.67% 100%)` |
 | `{online_color_list:["e02424","2463e0","22a06b","f0a020"]}` | `conic-gradient(#e02424 0deg 90deg, #2463e0 90deg 180deg, #22a06b 180deg 270deg, #f0a020 270deg 360deg)` |
 | `{online_color_list:["e02424","2463e0"],online_color_type:"gradient"}` | `linear-gradient(135deg, #e02424, #2463e0)` |
-| `{color_r:224,color_g:36,color_b:36,color_r2:36,color_g2:99,color_b2:224,id_aspect2:252}` | `linear-gradient(135deg, #e02424, #2463e0)` |
+| `{color_r:224,color_g:36,color_b:36,color_r2:36,color_g2:99,color_b2:224,id_aspect2:252}` | `linear-gradient(135deg, #e02424 0% 40%, #2463e0 60% 100%)` |
 | `{id_aspect1:145}` | `linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00cc00, #0000ff, #8b00ff)` |
 | `{}` | `#1c2030` |
 
@@ -242,10 +254,14 @@ clockwise.**
  `SweepGradient` with `transform: GradientRotation(-pi/2)`. Do not approximate
  it with pie slices drawn as paths unless the tile is square — the sector
  boundaries must follow the box. Only for **four or more** hard colours.
-- **Ramp** — a linear gradient from the **top-left** corner to the
- **bottom-right**, evenly spaced stops, no hard edge. Used for **two or
- three** hard colours (bicolor, tricolor), for rainbow, and for the
- catalogue's declared `gradient` type. Flutter: `Alignment.topLeft →
+- **Soft split** — a linear gradient from the **top-left** corner to the
+ **bottom-right** with the stops above: each colour held solid, a 20 % seam
+ blended at each boundary. Used for **two or three** hard colours (bicolor,
+ tricolor). Flutter: `LinearGradient(begin: Alignment.topLeft, end:
+ Alignment.bottomRight)` with `colors` doubled and `stops` `[0, .4, .6, 1]`
+ (N = 2) or `[0, .2333, .4333, .5667, .7667, 1]` (N = 3).
+- **Ramp** — the same axis, evenly spaced stops, no hold. Used for rainbow and
+ for the catalogue's declared `gradient` type. Flutter: `Alignment.topLeft →
  Alignment.bottomRight`.
 
 ---

docs/glossary.md

@@ -34,7 +34,7 @@ owns the full story.
 | **Twin Tag** | The two chips of one spool, written together as a pair and kept identical for the spool's whole life — always counted as **one** spool. |
 | **Reference database** | The shared ID tables (brands, materials, aspects, types, diameters, units) served from `cdn.tigertag.io`, so a chip encoded by one tool reads identically in every other. See [Universal filament identity](./concepts/universal-filament-identity.md). |
 | **Aspect** | The reference-database field describing a filament's colour and finish; the [material swatch](./developers/material-swatch.md) is painted from it. |
-| **Material swatch** | The normative convention for turning a spool's colour *data* into the same *picture* on every surface — two shapes only (ramp for 2-3 hard colours, camembert for 4+), with a reference renderer to check an implementation against. See [The material swatch](./developers/material-swatch.md). |
+| **Material swatch** | The normative convention for turning a spool's colour *data* into the same *picture* on every surface — three shapes (a 135° soft split for 2-3 hard colours, a camembert for 4+, a 135° ramp for smooth colours), with a reference renderer to check an implementation against. See [The material swatch](./developers/material-swatch.md). |
 | **`.ttag` file** | The portable, offline interchange file carrying one or more inventory materials (TigerData, TigerData+, TigerTag or TigerTag+) between tools. See [the `.ttag` format](./developers/ttag-format.md). |
 | **Second life** | Re-encoding a chip for a refilled or re-purposed spool, or converting it to plain NDEF for any other NFC use — a chip should never become e-waste. See [Second life](./philosophy/second-life.md). |
 | **Smartphone bridge** | Using a phone (or a desktop reader) to identify a spool for a printer that has no RFID reader of its own. See [The smartphone bridge](./philosophy/smartphone-bridge.md). |