@nadicodeai/design-system 12.1.180 → 12.1.181
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 +3 -3
- package/package.json +1 -1
package/DESIGN.md
CHANGED
|
@@ -558,7 +558,7 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
|
|
|
558
558
|
|
|
559
559
|
### Colour as stage
|
|
560
560
|
|
|
561
|
-
The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has three jobs: the first stripe of Nadia's ribbon, the
|
|
561
|
+
The identity palette is the brand's colour: cobalto `{colors.identity-cobalto}`, verde `{colors.identity-verde}`, arancio `{colors.identity-arancio}`, giallo `{colors.identity-giallo}` and rosso `{colors.identity-rosso}`, with `{colors.identity-ink}` and `{colors.identity-white}` as the poles type sits on. Azzurro `{colors.identity-azzurro}` has three jobs: the first stripe of Nadia's ribbon, the last cell of Alveare's mark and the last band of Alveare Server's ("Brand media authority"), and a band of a company's card foil ("Company card").
|
|
562
562
|
|
|
563
563
|
The hues appear at full strength and flat, with no tints, steps, gradients or hover variants, in these places. The one exception is the website's shader objects, each the material of one object and never a section's ground: the threads she holds, a fan of lines in her stripes from her orb to her colleagues, on black; Alveare's hive, cells that light in its hues as the work passes; and the company card's holographic foil ("Company card"). Stripes and cells stay pure bands of their hues, never a colour between two of them. Ruled by the founder: "shaders are not backgrounds all over the place".
|
|
564
564
|
|
|
@@ -568,7 +568,7 @@ The hues appear at full strength and flat, with no tints, steps, gradients or ho
|
|
|
568
568
|
- **Agents.** The orbs ("Agent orbs").
|
|
569
569
|
- **Alveare's channels.** Each channel's mark sits on a tile of one hue, in the Mac's sidebar and the iPhone's channel list; the channel's id picks the hue, so a channel is the same colour on every device, and a direct conversation shows its people instead. On the iPhone the person's own messages are cobalto bubbles with white text. Ruled by the owner.
|
|
570
570
|
- **Objects.** The saturated pieces of the art direction's objects, one per benefit ("Iconography").
|
|
571
|
-
- **The logo.** The dot of the wordmark, the icon tile and Alveare's
|
|
571
|
+
- **The logo.** The dot of the wordmark, the icon tile and Alveare's and Alveare Server's marks ("Brand media authority"), and the compact company identity marks ("Identity marks").
|
|
572
572
|
- **Imagery.** Art direction reads these tokens and keeps no private palette.
|
|
573
573
|
|
|
574
574
|
Text on a colour ground is the pole that clears AA on that hue: `{colors.identity-white}` on cobalto and rosso; `{colors.identity-ink}` on verde, arancio and giallo. A control on a colour ground uses the button's on-colour variants ("Components"). Product chrome in the Portal and Nadia stays neutral: grounds, text, lines and navigation, a selected row included, whatever it opens. Colour inside that structure is the identity palette at full strength in both themes: the primary control and the on switch in cobalto, feedback and state in cobalto, verde, giallo and rosso with their pole for text, and links in cobalto, the dark theme's links and coloured text one light step of the same hue. It also identifies Agents, providers and categories; an Agent's own colour is her orb, so her row in a list never takes a hue. Choose a typed component tone from the semantic palette; never paint a control with an arbitrary identity hex.
|
|
@@ -1215,7 +1215,7 @@ The company is **nadicode**, lowercase. Its logo is the n, and the name drawn in
|
|
|
1215
1215
|
3. **Icon.** The mark on a tile with rounded corners, in one of three fields. The brand tile, the white n on `{colors.identity-cobalto}`, is for favicons, avatars and the website's app icon, and is the one place the brand colour fills a logo's field. Where the platform crops the picture itself, a profile picture cut to a circle or a square and a phone's home screen, the tile has square corners and the platform draws its shape: the avatar is the brand tile, or the light or dark tile where a profile wants white or black, with the n across 46% of the side, so a circle cut keeps it whole with its clear space. The mark is never a profile picture: it has no field, and its n runs to the edges a crop cuts. The light tile, the `{colors.ink}` n on white, is a desktop app's icon, which keeps it in the system's dark appearance. The dark tile, the white n on `{colors.identity-ink}`, is the icon wherever else it sits on a dark ground: a dark slide, an app's own dark screen.
|
|
1216
1216
|
4. **Signature form.** The light tile with its construction guides in `{colors.logo-guide}`: a dotted circle around the arch whose radius is the golden section of the n's width, the two centre axes, and the n's width and height, each measured 1.000. It is drawn from 128 px up, on light grounds: Nadia's desktop icon, a cover or closing slide, a poster, print; on a dark ground the dark tile stands in for it. Below 128 px a guide is a fraction of a pixel, so the icon drops them; drawn on a screen as a logo, such as at the top of an entry scene, it drops them at any size.
|
|
1217
1217
|
|
|
1218
|
-
Alveare's mark is its own, chosen by the founder:
|
|
1218
|
+
Alveare's mark is its own, chosen by the founder: six flat honeycomb cells, pointed at the top, stacked one, two and three into a pyramid, in the identity colours row by row from the top: cobalto in its dark step (`{colors.dark-logo-dot}`), arancio, verde, rosso, giallo, azzurro. Six cells of one comb are the hive. It sits on the dark tile everywhere, the app icon included, since Alveare opens onto black, and on a black screen it stands alone without its tile. Alveare Server's mark is a server rack of six bands, each with its light, in the same colours in the same order from the top, drawn a tenth smaller than the cells so the solid rack weighs what the open cells do beside it. Both are drawn in `apps/alveare/brand/icons/`.
|
|
1219
1219
|
|
|
1220
1220
|
The mark and the wordmark never stand side by side: the wordmark already begins with the n, so together they read "n nadicode". Each place takes one of them.
|
|
1221
1221
|
|