@nadicodeai/design-system 12.1.29 → 12.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +6 -6
- package/package.json +1 -1
package/DESIGN.md
CHANGED
|
@@ -421,7 +421,7 @@ Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and dra
|
|
|
421
421
|
|
|
422
422
|
**Product views on the website** are the product itself, built from the real components with example data that is labelled as such; never a screenshot, a device mockup or an invented interface. A product window takes the raised height on its ground; a card that overlaps it floats; its chrome may be glass over a colour or black ground; in a black section it renders in dark mode.
|
|
423
423
|
|
|
424
|
-
Absence follows its container. A page or region with nothing in it is an opaque region with a dashed boundary; an empty state inside a card is unframed, because the card already owns the edge. A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field.
|
|
424
|
+
Absence follows its container. A page or region with nothing in it is an opaque region with a dashed boundary; an empty state inside a card is unframed, because the card already owns the edge. Every absence leads with its icon tile, in every product, and a read that failed where content would be takes the same shape with the warning mark and its retry. A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field.
|
|
425
425
|
|
|
426
426
|
Modal overlays use the scrim with no blur. Focus is not elevation: it is always the focus outline.
|
|
427
427
|
|
|
@@ -504,14 +504,14 @@ One wait gets one indicator. A request waiting for a person is not a wait: queue
|
|
|
504
504
|
|
|
505
505
|
### Failure surfaces
|
|
506
506
|
|
|
507
|
-
A page that cannot show what was asked for
|
|
507
|
+
A page that cannot show what was asked for opens with a picture, the way a Portal email does: one whole cut-out in art direction's editorial register, centred above the words, whose idea says what happened. The picture carries a label, the way a museum labels a work: its title says what the figure is doing, which is the page's one joke, and a mono line gives its materials and year. From `lg` the label stands beside the picture's base while the picture keeps the centre line; below that it stands centred under the picture. Below the picture, on the same centre line, stand a mono eyebrow naming the situation, the page's one heading, one plain sentence, and the recovery action, which leads. The cut-out's transparent ground takes the page's own, so one file serves light and dark, and it stays whole at every width: it scales down with the column and is never cropped by the viewport. No orb turns on a failure page.
|
|
508
508
|
|
|
509
509
|
Two registers share that composition:
|
|
510
510
|
|
|
511
|
-
- **An absence** is an address or a record that is not there.
|
|
512
|
-
- **A fault** is a request the product stopped. Its picture
|
|
511
|
+
- **An absence** is an address or a record that is not there. Its picture and label are the joke of the missing address. Nothing went wrong, so nothing takes a feedback role, no glyph stands in for the failure and no code is printed.
|
|
512
|
+
- **A fault** is a request the product stopped. Its picture and label are calm and never a joke about lost work. Below the actions stands the evidence: the diagnostic code, the word that names it and one line saying what to do with it. The error pair marks the eyebrow.
|
|
513
513
|
|
|
514
|
-
A failure inside a product's own chrome takes no picture
|
|
514
|
+
A failure inside a product's own chrome takes no picture, because the chrome already frames the page: it keeps the words alone. Identity hue reaches a product failure surface only through the picture. The words never apologize and never name the mechanism ("Product messages" in `product-design`). On the website a failure surface is an ordinary full-bleed section and takes a section ground like any other.
|
|
515
515
|
|
|
516
516
|
### Agent orbs
|
|
517
517
|
|
|
@@ -593,7 +593,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
|
|
|
593
593
|
- Do round every surface and control at `{rounded.md}`. Don't give a higher surface a bigger corner.
|
|
594
594
|
- Do give every line one owner, and draw focus only with the focus outline.
|
|
595
595
|
- Do say a status with a Badge tone, a mark and a word. Don't use colour alone or a bare dot.
|
|
596
|
-
- Do
|
|
596
|
+
- Do open a failure page with one whole cut-out whose idea says what happened, labelled like a work in a museum, above the words on one centre line, with the recovery action leading and the diagnostic code only for a request that stopped. Don't apologise, don't crop the picture, don't joke about lost work, and don't put an orb on a failure page.
|
|
597
597
|
- Do use the dotted field only on a canvas where things are arranged. Don't put it behind lists, dashboards, settings or website sections.
|
|
598
598
|
- Do add a rule here before a product needs it. Don't restate a rule in another document; link to it.
|
|
599
599
|
|