@nadicodeai/design-system 12.1.164 → 12.1.165
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 +5 -3
- package/package.json +1 -1
package/DESIGN.md
CHANGED
|
@@ -559,7 +559,7 @@ The neutral spine carries grounds, chrome, text and every control: `{colors.ink}
|
|
|
559
559
|
|
|
560
560
|
### Colour as stage
|
|
561
561
|
|
|
562
|
-
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
|
|
562
|
+
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 inner stripe of Alveare's mark ("Brand media authority"), and a band of a company's card foil ("Company card").
|
|
563
563
|
|
|
564
564
|
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".
|
|
565
565
|
|
|
@@ -568,7 +568,7 @@ The hues appear at full strength and flat, with no tints, steps, gradients or ho
|
|
|
568
568
|
- **Accents on the website.** A 2 px rule that marks one item of a set, one hue per item.
|
|
569
569
|
- **Agents.** The orbs ("Agent orbs").
|
|
570
570
|
- **Objects.** The saturated pieces of the art direction's objects, one per benefit ("Iconography").
|
|
571
|
-
- **The logo.** The dot of the wordmark
|
|
571
|
+
- **The logo.** The dot of the wordmark, the icon tile and Alveare's striped mark ("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.
|
|
@@ -1209,7 +1209,9 @@ The company is **nadicode**, lowercase. Its logo is the n, and the name drawn in
|
|
|
1209
1209
|
1. **Mark.** The n, the logo itself, as tall as it is wide, with nothing added. It stands for the company wherever the company is recognised by its sign: app headers and compact navigation, the corner of a slide, a sticker, a stamp.
|
|
1210
1210
|
2. **Wordmark.** nadicode in one geometric line with one dot over the i. The dot is the only colour in the logo, where an Agent sits. Use it wherever the company is named: the website's header, documents, proposals, invoices, email signatures, a first slide.
|
|
1211
1211
|
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.
|
|
1212
|
-
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.
|
|
1212
|
+
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.
|
|
1213
|
+
|
|
1214
|
+
Alveare's mark is its own, chosen by the founder: the AV line, nadicode's n arch running down into a V's cup, drawn as a ribbon of six flat stripes 7 units wide, from the outside of the arch in: cobalto in its dark step (`{colors.dark-logo-dot}`), arancio, verde, rosso, giallo, azzurro. Six lanes running as one line 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 the same ribbon turned and mirrored into an S. Both are drawn in `apps/alveare/brand/icons/`.
|
|
1213
1215
|
|
|
1214
1216
|
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.
|
|
1215
1217
|
|