@codecavepro/brand 3.3.0 → 3.4.0

package/README.md

@@ -45,7 +45,7 @@ redesign turns into a find-and-replace across your codebase.
 
 ### Already have your own base styles? Import the values only
 
-`@codecavepro/brand/css` is the design system **whole**: the tokens, ten `@font-face`
+`@codecavepro/brand/css` is the design system **whole**: the tokens, eleven `@font-face`
 rules, base rules for `html`, `body`, `h1`–`h6` and `a`, two layout primitives and
 around sixty component classes. That is what you want for a page that should look like
 CODECAVE. It is _not_ what you want in an app that already has a base layer — dropping
@@ -60,8 +60,8 @@ else:
 
 Same 103 properties on `:root`, same values, zero rules. Nothing it declares can change
 how a single existing element renders — a `var()` only takes effect where you write
-one. Fonts come with it only as a _name_: `--font-sans` says Satoshi, and declaring the
-faces stays your call (see below).
+one. Fonts come with it only as a _name_: `--font-sans` says Satoshi, then Manrope for
+the Cyrillic Satoshi lacks, and declaring the faces stays your call (see below).
 
 Use it to end a duplicated palette without signing up for a redesign in the same commit.
 
@@ -78,8 +78,8 @@ file at that URL are provably the same bytes.
 
 ## Fonts: this package ships none
 
-`@codecavepro/brand/css` declares ten `@font-face` rules for **Satoshi**, but **no font
-binaries are included** — that is a licensing question, not an oversight. Until you
+`@codecavepro/brand/css` declares eleven `@font-face` rules, ten for **Satoshi** and one
+for **Manrope**, but **no font binaries are included** — that is a licensing question, not an oversight. Until you
 supply the files, the faces 404 and the browser falls back down the stack
 (`-apple-system`, `Segoe UI`, Roboto, …). Tokens, colours and the type _scale_ are all
 correct regardless; only the typeface is missing.
@@ -87,14 +87,15 @@ correct regardless; only the typeface is missing.
 The two stylesheets expect the files in **different places**, because one is meant to be
 dropped into a project on its own:
 
-| Import                          | `@font-face` URLs             | Put the `.woff2`/`.woff` files at              |
-| ------------------------------- | ----------------------------- | ---------------------------------------------- |
-| `@codecavepro/brand/css`        | `./fonts/Satoshi-*.woff2`     | a `fonts/` directory **beside** the stylesheet |
-| `@codecavepro/brand/fonts.css`  | `./Satoshi-*.woff2`           | **beside** the stylesheet itself               |
-| `@codecavepro/brand/tokens.css` | _none — it declares no faces_ | wherever your own `@font-face` rules point     |
+| Import                          | `@font-face` URLs                                          | Put the `.woff2`/`.woff` files at              |
+| ------------------------------- | ---------------------------------------------------------- | ---------------------------------------------- |
+| `@codecavepro/brand/css`        | `./fonts/Satoshi-*.woff2`, `./fonts/Manrope-Cyrillic.woff2` | a `fonts/` directory **beside** the stylesheet |
+| `@codecavepro/brand/fonts.css`  | `./Satoshi-*.woff2`, `./Manrope-Cyrillic.woff2`             | **beside** the stylesheet itself               |
+| `@codecavepro/brand/tokens.css` | _none — it declares no faces_                              | wherever your own `@font-face` rules point     |
 
 Get the cuts from [Fontshare](https://www.fontshare.com/fonts/satoshi) — 300, 400, 500,
-700 and 900, each upright and italic, which is the ten faces these stylesheets declare.
+700 and 900, each upright and italic, which is the ten Satoshi faces these stylesheets
+declare.
 Bind each with a real `font-weight` descriptor rather than letting the browser
 synthesize; the design system documents why in
 [DESIGN.md §10.3](https://github.com/CodeCavePro/brand/blob/development/DESIGN.md#103-synthesized-vs-real-font-weights).
@@ -105,6 +106,14 @@ collide into two slots and whichever is declared last silently wins — your `90
 renders Bold, or your `700` renders Black, with nothing to indicate which. Take the
 binaries from that download and the declarations from here.
 
+**Satoshi has no Cyrillic, so Manrope sets it.** `--font-sans` names Manrope second, and
+its one face covers only the Cyrillic block, so Satoshi keeps every Latin letter, digit
+and punctuation mark, and a page with no Cyrillic never downloads the file. It is Google
+Fonts' Cyrillic subset of the variable font, weights 300 to 800, in
+[`src/styles/fonts/`](https://github.com/CodeCavePro/brand/tree/development/src/styles/fonts)
+as `Manrope-Cyrillic.woff2`. Manrope is under the SIL Open Font License, so ship
+`Manrope-OFL.txt` from the same folder beside it.
+
 ## The typed module
 
 For consumers that cannot read a stylesheet — design tooling, canvas/WebGL renderers,

package/dist/colors_and_type.css

@@ -19,11 +19,12 @@
 /* ---------------------------------------------------------------------------
  * Font faces
  *
- * The ten faces are bound to explicit numeric weights in both styles. The
- * vendor's own stylesheet.css declares Bold and Black as the same
+ * The ten Satoshi faces are bound to explicit numeric weights in both styles.
+ * The vendor's own stylesheet.css declares Bold and Black as the same
  * `font-weight: bold`, and their italics likewise, so four cuts collide into
  * two slots there and the last one declared silently wins. That is the defect
  * these declarations exist to avoid; do not replace them with the vendor file.
+ * An eleventh face, Manrope, follows them and sets the Cyrillic Satoshi lacks.
  * ------------------------------------------------------------------------ */
 
 @font-face {
@@ -116,6 +117,40 @@
   font-display: swap;
 }
 
+/* ---------------------------------------------------------------------------
+ * Cyrillic: Manrope
+ *
+ * Satoshi has no Cyrillic, in these files or in Fontshare's current release,
+ * whose own page lists 135 languages, all written in Latin letters. Russian
+ * text used to fall through to the system fonts. Manrope sets it now:
+ * --font-sans names it second, so Satoshi keeps every Latin letter, digit and
+ * punctuation mark, and Manrope draws only the Cyrillic that Satoshi lacks.
+ *
+ * It is a family of its own, not more faces under the name Satoshi, because
+ * of emphasis. Font matching narrows a family to its italic faces for <em>
+ * before it reads unicode-range, so a Cyrillic face inside Satoshi would
+ * either never match emphasised text or match it upright. A separate family
+ * with one upright face is slanted by the browser instead.
+ *
+ * One variable file covers weights 300 to 800, and a 900 request gets 800.
+ * It is Google Fonts' Cyrillic subset under the SIL Open Font License
+ * (fonts/Manrope-OFL.txt), and the unicode-range is the subset's own, so a
+ * page without Cyrillic never downloads it.
+ *
+ * size-adjust: both faces draw capitals 72 units tall at 100px, but Manrope's
+ * small letters stand 54 to Satoshi's 49 and it sets about 8% wider. At 95%
+ * the two are within about 5% on each of those measures.
+ * ------------------------------------------------------------------------ */
+@font-face {
+  font-family: Manrope;
+  src: url("./fonts/Manrope-Cyrillic.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-display: swap;
+  size-adjust: 95%;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
 :root {
   /* =========================================================================
    * RAW RAMPS — verbatim from global.css :root after the 2026 palette
@@ -210,11 +245,12 @@
 
   /* =========================================================================
    * TYPOGRAPHY
-   * One family. Named heading sizes come from the production @theme block;
-   * the remaining steps are measured from the live site.
+   * One family, and Manrope for the Cyrillic it lacks (see "Cyrillic" above).
+   * Named heading sizes come from the production @theme block; the remaining
+   * steps are measured from the live site.
    * ====================================================================== */
-  --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
+  --font-sans: Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
+               Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
 

package/dist/fonts.css

@@ -8,13 +8,19 @@
  * The vendor's own stylesheet.css cannot be used: it declares Bold and Black
  * BOTH as `font-weight: bold`, and their italics likewise, so four cuts
  * collide into two slots and whichever is declared last silently wins. The
- * ten faces below bind 300/400/500/700/900 in each style explicitly, which is
- * the whole point of shipping real cuts rather than letting a browser
- * synthesize them.
+ * ten Satoshi faces below bind 300/400/500/700/900 in each style explicitly,
+ * which is the whole point of shipping real cuts rather than letting a
+ * browser synthesize them.
+ *
+ * CYRILLIC
+ * Satoshi has none. The eleventh face, Manrope, sets it: --font-sans names it
+ * second, and its unicode-range limits it to the Cyrillic block. Why it is a
+ * family of its own and why it is 95% size is in colors_and_type.css.
  *
  * The binaries are not in the npm package -- see the note in
  * packages/brand/scripts/build.mjs -- so a consumer supplies the files and
- * these ten declarations tell it what to supply.
+ * these eleven declarations tell it what to supply. Manrope-OFL.txt is the
+ * licence that travels with Manrope-Cyrillic.woff2.
  */
 
 @font-face {
@@ -106,3 +112,13 @@
   font-style: italic;
   font-display: swap;
 }
+
+@font-face {
+  font-family: Manrope;
+  src: url("./Manrope-Cyrillic.woff2") format("woff2");
+  font-weight: 300 800;
+  font-style: normal;
+  font-display: swap;
+  size-adjust: 95%;
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}

package/dist/theme.css

@@ -25,7 +25,7 @@
     /* sizes */
     --max-width-desktop: 1280px;
     --breakpoint-sm: 457px;
-    --font-sans: Satoshi, sans-serif;
+    --font-sans: Satoshi, Manrope, sans-serif;
     --text-heading-lg: 3.5rem;
     --text-heading-lg--line-height: 130%;
     --text-heading-md: 2.75rem;

package/dist/tokens/typography.d.ts

@@ -6,10 +6,11 @@
  * come from the production `@theme` block; the remaining steps were measured
  * from the rendered site.
  *
- * One family, no display face, no serif, no second sans.
+ * One family, no display face, no serif. Manrope follows Satoshi in the stack
+ * only for the Cyrillic Satoshi lacks; see its @font-face in colors_and_type.css.
  */
 export declare const fontFamily: {
-    readonly sans: "Satoshi, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
+    readonly sans: "Satoshi, Manrope, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif";
     readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
 };
 /**

package/dist/tokens/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUX,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUX,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/tokens/typography.js

@@ -6,10 +6,11 @@
  * come from the production `@theme` block; the remaining steps were measured
  * from the rendered site.
  *
- * One family, no display face, no serif, no second sans.
+ * One family, no display face, no serif. Manrope follows Satoshi in the stack
+ * only for the Cyrillic Satoshi lacks; see its @font-face in colors_and_type.css.
  */
 export const fontFamily = {
-    sans: 'Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+    sans: 'Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
 };
 /**

package/dist/tokens.css

@@ -106,11 +106,12 @@
 
   /* =========================================================================
    * TYPOGRAPHY
-   * One family. Named heading sizes come from the production @theme block;
-   * the remaining steps are measured from the live site.
+   * One family, and Manrope for the Cyrillic it lacks (see "Cyrillic" above).
+   * Named heading sizes come from the production @theme block; the remaining
+   * steps are measured from the live site.
    * ====================================================================== */
-  --font-sans: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-               "Helvetica Neue", "Noto Sans", Arial, sans-serif;
+  --font-sans: Satoshi, Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
+               Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",