@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/components/logos/LogoContainer.astro

@@ -0,0 +1,84 @@
+---
+// The 3-side rule for the icon inside a tile, and the files made with it.
+// Icon units: the icon is 300 tall, one hexagon side is 150. Tile = 3 sides.
+import { COLORS, ICON_PATH } from '../../lib/logo-geometry';
+import { langOf } from '../../lib/i18n';
+import Fig from './Fig.astro';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const L = {
+  en: {
+    alt: 'The 3-side rule: the tile is three hexagon sides wide, the icon two sides tall and centred, half a side from the top and bottom edges. The icon stays inside the 80 percent safe circle.',
+    sides: '3 sides',
+    caption: 'Units are hexagon sides. The dashed circle is the 80% safe zone of maskable icons; the icon, 67% of the tile, stays inside it.',
+    files: [
+      ['apple-touch-icon', '180 px, icon 120 px'],
+      ['Web app icon', '192 and 512 px'],
+      ['Maskable icon', '512 px, cropped by the device'],
+      ['Social avatar', '800 px, cropped to a circle'],
+    ],
+  },
+  vi: {
+    alt: 'Luật ô 3 cạnh: ô rộng ba cạnh lục giác, icon cao hai cạnh và nằm giữa, cách mép trên và dưới nửa cạnh. Icon nằm gọn trong vòng an toàn 80%.',
+    sides: '3 cạnh',
+    caption: 'Đơn vị là cạnh lục giác. Vòng tròn nét đứt là vùng an toàn 80% của icon maskable; icon chiếm 67% ô nên nằm gọn trong đó.',
+    files: [
+      ['apple-touch-icon', '180 px, icon 120 px'],
+      ['Icon web app', '192 và 512 px'],
+      ['Icon maskable', '512 px, thiết bị tự cắt'],
+      ['Avatar mạng xã hội', '800 px, cắt tròn'],
+    ],
+  },
+}[lang];
+
+const SIDE = 150;
+const T = 3 * SIDE; // tile 450
+const iconX = (T - 259.8) / 2;
+const iconY = SIDE / 2;
+const px = 240; // tile size on screen
+const s = px / T;
+const fs = 12 / s;
+const sw = 1.25 / s;
+const m = 46 / s;
+const w = Math.round((T + 2 * m) * s);
+const h = Math.round((T + 2 * m) * s);
+const r80 = 0.4 * T;
+
+const srcs = ['apple-touch-icon.png', 'icon-192.png', 'icon-maskable-512.png', 'avatar-800.png'];
+const shapes = ['rounded', 'square', 'circle', 'circle'];
+---
+
+<figure class="logo-figure">
+  <div class="logo-stage bg-white container-stage">
+    <Fig id={`container-${lang}`} class="diagram px-center" viewBox={`${-m} ${-m} ${w / s} ${h / s}`} w={w} h={h} label={L.alt}>
+      <rect x="0" y="0" width={T} height={T} rx={T * 0.08} fill={COLORS.graphite} />
+      <circle class="d-guide" cx={T / 2} cy={T / 2} r={r80} stroke-width={sw} stroke-dasharray={`${4 / s} ${4 / s}`} style="stroke:#ffffff;opacity:.5" />
+      <g transform={`translate(${iconX} ${iconY})`}><path fill={COLORS.yellow} fill-rule="evenodd" d={ICON_PATH} /></g>
+      <g class="d-guide" stroke-width={sw} stroke-dasharray={`${4 / s} ${4 / s}`} style="stroke:#ffffff;opacity:.5">
+        <line x1="0" x2={T} y1={iconY} y2={iconY} />
+        <line x1="0" x2={T} y1={T - iconY} y2={T - iconY} />
+      </g>
+      <g class="d-measure" stroke-width={sw}>
+        {[[0, iconY], [iconY, T - iconY], [T - iconY, T]].map(([a, b]) => (
+          <path d={`M${-14 / s} ${a}H${-6 / s}M${-10 / s} ${a}V${b}M${-14 / s} ${b}H${-6 / s}`} />
+        ))}
+        <path d={`M0 ${T + 6 / s}V${T + 14 / s}M0 ${T + 10 / s}H${T}M${T} ${T + 6 / s}V${T + 14 / s}`} />
+      </g>
+      <text class="d-label" font-size={fs} text-anchor="end" x={-18 / s} y={iconY / 2 + fs * 0.35}>½</text>
+      <text class="d-label" font-size={fs} text-anchor="end" x={-18 / s} y={T / 2 + fs * 0.35}>2</text>
+      <text class="d-label" font-size={fs} text-anchor="end" x={-18 / s} y={T - iconY / 2 + fs * 0.35}>½</text>
+      <text class="d-label" font-size={fs} text-anchor="middle" x={T / 2} y={T + 30 / s}>{L.sides}</text>
+    </Fig>
+  </div>
+  <figcaption>{L.caption}</figcaption>
+</figure>
+
+<div class="app-icons">
+  {L.files.map(([name, size], i) => (
+    <figure>
+      <img class:list={['app-icon', `shape-${shapes[i]}`]} src={`/brand/logos/app/${srcs[i]}`} width="96" height="96" alt="" />
+      <figcaption><b>{name}</b>{size}</figcaption>
+    </figure>
+  ))}
+</div>

package/dist/docs/src/components/logos/LogoHero.astro

@@ -0,0 +1,42 @@
+---
+// The main lockup on a light and a dark panel, centred on whole pixels, with the download.
+import { statSync } from 'node:fs';
+import LogoSvg from './LogoSvg.astro';
+import { langOf } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const zip = '/brand/logos/beehexa-logo.zip';
+const size = `${Math.round(statSync(`public${zip}`).size / 1024)} KB`;
+const L = {
+  en: {
+    light: 'beehexa logo, colour version for light backgrounds',
+    dark: 'beehexa logo, colour version for dark backgrounds',
+    text: 'Lockups in 4 colour versions, HexaSync lockup, icon, favicons, app icons, avatar and the Inter licence. SVG, PNG and ICO',
+    button: 'Download all (.zip)',
+  },
+  vi: {
+    light: 'Logo beehexa, bản màu cho nền sáng',
+    dark: 'Logo beehexa, bản màu cho nền tối',
+    text: 'Lockup 4 bản màu, lockup HexaSync, icon, favicon, icon ứng dụng, avatar và giấy phép Inter. SVG, PNG và ICO',
+    button: 'Tải tất cả (.zip)',
+  },
+}[lang];
+---
+
+<figure class="logo-hero">
+  <div class="logo-hero-panels">
+    <div class="logo-stage hero-stage bg-white">
+      <LogoSvg version="light" iconPx={56} class="px-center hero-lg" label={L.light} />
+      <LogoSvg version="light" iconPx={28} class="px-center hero-sm" label={L.light} />
+    </div>
+    <div class="logo-stage hero-stage bg-graphite">
+      <LogoSvg version="dark" iconPx={56} class="px-center hero-lg" label={L.dark} />
+      <LogoSvg version="dark" iconPx={28} class="px-center hero-sm" label={L.dark} />
+    </div>
+  </div>
+  <figcaption class="logo-hero-bar">
+    <span>{L.text} · {size}</span>
+    <a class="button-dark" href={zip} download>{L.button}</a>
+  </figcaption>
+</figure>

package/dist/docs/src/components/logos/LogoInUse.astro

@@ -0,0 +1,197 @@
+---
+// The logo in context: mock-ups drawn with the real logo; grey bars stand in for content.
+import LogoSvg from './LogoSvg.astro';
+import { langOf } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+type Key = 'header' | 'app' | 'tab' | 'avatar' | 'document' | 'partner' | 'slide' | 'email' | 'card' | 'photo' | 'yellow' | 'login' | 'marketplace';
+interface Props {
+  only?: Key[];
+}
+const { only } = Astro.props;
+const show = (k: Key) => !only || only.includes(k);
+const single = only?.length === 1;
+const lang = langOf(Astro.url.pathname);
+const L = {
+  en: {
+    header: ['Website header', 'Lockup at the left of the bar, linking to the home page. Icon 24 px in a 56–64 px bar.'],
+    app: ['Product app bar', 'Inside HexaSync, the product lockup replaces the company logo. Dark version on a graphite bar.'],
+    tab: ['Browser tab', 'The favicon: the icon alone, in yellow, filling its 16 px square. No wordmark at this size.'],
+    avatar: ['Social avatar', 'Yellow icon on a graphite tile, made with the 3-side rule so a circle crop never cuts it.'],
+    document: ['Document', 'Top left of the first page, clear space kept. At least 25 mm wide in print.'],
+    partner: ['Next to a partner', 'Both logos the same visual weight, separated by a thin vertical line, each with its own clear space.'],
+    partnerLogo: 'Partner logo',
+    slide: ['Cover slide', 'Lockup at the top left, in the version for the slide colour. Inner slides repeat it small, in the same corner.'],
+    email: ['Email signature', 'Lockup under the name, as a PNG at 2× and at least 100 px wide: many email clients don’t show SVG.'],
+    card: ['Business card', 'One side graphite with the lockup centred, version 2. The other side white: the icon, then name and details on a clean left edge.'],
+    photo: ['On a photo', 'Version 3, white, on a calm area of the picture, with its clear space. No box behind it.'],
+    yellow: ['On brand yellow', 'Version 4, graphite. Banners, event backdrops, packaging.'],
+    login: ['Sign-in screen', 'The product lockup centred above the form, colour version on a light page.'],
+    marketplace: ['Marketplace listing', 'The app icon tile (3-side rule) with the product name as text next to it. Don’t squeeze the lockup into a square.'],
+    appName: 'HexaSync', by: 'by Beehexa', cardName: 'Your Name', cardRole: 'Job title',
+  },
+  vi: {
+    header: ['Header website', 'Lockup ở bên trái thanh header, link về trang chủ. Icon 24 px trong thanh cao 56–64 px.'],
+    app: ['Thanh ứng dụng sản phẩm', 'Trong HexaSync, lockup sản phẩm thay cho logo công ty. Bản nền tối trên thanh xám ghi.'],
+    tab: ['Tab trình duyệt', 'Favicon: icon đứng riêng, màu vàng, phủ kín ô 16 px. Ở cỡ này không có wordmark.'],
+    avatar: ['Avatar mạng xã hội', 'Icon vàng trên ô xám ghi, dựng theo luật ô 3 cạnh nên cắt tròn không bị lẹm.'],
+    document: ['Tài liệu', 'Góc trên bên trái trang đầu, giữ đủ vùng trống. In rộng tối thiểu 25 mm.'],
+    partner: ['Cạnh logo đối tác', 'Hai logo cùng trọng lượng thị giác, ngăn bằng một vạch dọc mảnh, mỗi logo giữ vùng trống riêng.'],
+    partnerLogo: 'Logo đối tác',
+    slide: ['Slide bìa', 'Lockup ở góc trên bên trái, dùng bản màu hợp với nền slide. Các slide bên trong lặp lại lockup cỡ nhỏ ở cùng góc.'],
+    email: ['Chữ ký email', 'Lockup dưới tên, dạng PNG 2×, rộng tối thiểu 100 px: nhiều ứng dụng email không hiển thị SVG.'],
+    card: ['Danh thiếp', 'Một mặt xám ghi, lockup ở giữa, bản 2. Mặt kia nền trắng: icon, rồi tên và thông tin căn thẳng mép trái.'],
+    photo: ['Trên ảnh', 'Bản 3, màu trắng, đặt ở vùng ảnh ít chi tiết, giữ vùng trống. Không đặt ô nền sau logo.'],
+    yellow: ['Trên nền vàng thương hiệu', 'Bản 4, xám ghi. Banner, phông sự kiện, bao bì.'],
+    login: ['Màn hình đăng nhập', 'Lockup sản phẩm ở giữa, phía trên form, bản màu trên trang sáng.'],
+    marketplace: ['Trang marketplace', 'Ô icon ứng dụng (luật ô 3 cạnh) và tên sản phẩm viết bằng chữ bên cạnh. Không ép lockup vào ô vuông.'],
+    appName: 'HexaSync', by: 'bởi Beehexa', cardName: 'Họ và tên', cardRole: 'Chức danh',
+  },
+}[lang];
+---
+
+<div class:list={['logo-cards inuse', { single }]} style={`--cols:${only?.length === 3 ? 3 : 2}`}>
+  {show('header') && (
+    <div class="logo-card">
+      <div class="mock mock-site">
+        <div class="mock-bar">
+          <LogoSvg iconPx={24} />
+          <span class="mock-links"><i /><i /><b /></span>
+        </div>
+        <div class="mock-hero"><i style="width:62%" /><i style="width:44%" /><b /></div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.header[0]}</p><p>{L.header[1]}</p></div>
+    </div>
+  )}
+  {show('app') && (
+    <div class="logo-card">
+      <div class="mock mock-app">
+        <div class="mock-bar mock-bar-dark">
+          <LogoSvg kind="hexasync" version="dark" iconPx={20} />
+          <span class="mock-links"><b class="dot" /></span>
+        </div>
+        <div class="mock-body"><span class="mock-nav"><i /><i /><i /><i /></span><span class="mock-cards"><i /><i /><i /><i /></span></div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.app[0]}</p><p>{L.app[1]}</p></div>
+    </div>
+  )}
+  {show('tab') && (
+    <div class="logo-card">
+      <div class="mock mock-browser">
+        <div class="mock-tabs">
+          <span class="mock-tab is-active"><LogoSvg kind="icon" iconPx={16} /><span>beehexa design</span></span>
+          <span class="mock-tab"><i /><span class="ghost" /></span>
+        </div>
+        <div class="mock-url"><i /></div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.tab[0]}</p><p>{L.tab[1]}</p></div>
+    </div>
+  )}
+  {show('avatar') && (
+    <div class="logo-card">
+      <div class="mock mock-social">
+        <img class="mock-avatar" src="/brand/logos/app/avatar-800.png" width="72" height="72" alt="" />
+        <span class="mock-lines"><b /><i /><i style="width:56%" /></span>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.avatar[0]}</p><p>{L.avatar[1]}</p></div>
+    </div>
+  )}
+  {show('document') && (
+    <div class="logo-card">
+      <div class="mock mock-doc">
+        <div class="mock-page">
+          <LogoSvg iconPx={14} />
+          <span class="mock-lines"><b /><i /><i /><i style="width:70%" /><i /><i style="width:48%" /></span>
+        </div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.document[0]}</p><p>{L.document[1]}</p></div>
+    </div>
+  )}
+  {show('partner') && (
+    <div class="logo-card">
+      <div class="mock mock-partner">
+        <LogoSvg iconPx={24} />
+        <span class="mock-divider" aria-hidden="true" />
+        <span class="mock-partner-logo">{L.partnerLogo}</span>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.partner[0]}</p><p>{L.partner[1]}</p></div>
+    </div>
+  )}
+  {show('slide') && (
+    <div class="logo-card">
+      <div class="mock mock-desk">
+        <div class="mock-slide">
+          <LogoSvg version="dark" iconPx={12} />
+          <span class="mock-lines"><b /><i /><i style="width:60%" /></span>
+        </div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.slide[0]}</p><p>{L.slide[1]}</p></div>
+    </div>
+  )}
+  {show('email') && (
+    <div class="logo-card">
+      <div class="mock mock-email">
+        <span class="mock-lines"><i style="width:30%" /><b style="width:40%" /><i style="width:28%" /></span>
+        <span class="mock-rule" />
+        <LogoSvg iconPx={22} />
+        <span class="mock-lines"><i style="width:46%" /><i style="width:38%" /></span>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.email[0]}</p><p>{L.email[1]}</p></div>
+    </div>
+  )}
+  {show('card') && (
+    <div class="logo-card">
+      <div class="mock mock-desk mock-cards-pair">
+        <div class="mock-bizcard is-back">
+          <LogoSvg kind="icon" version="graphite" iconPx={14} />
+          <span class="bizcard-text"><strong>{L.cardName}</strong><span>{L.cardRole}</span></span>
+          <span class="bizcard-text bizcard-contact"><span>name@beehexa.com</span><span>beehexa.com</span></span>
+        </div>
+        <div class="mock-bizcard is-front"><LogoSvg version="dark" iconPx={14} /></div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.card[0]}</p><p>{L.card[1]}</p></div>
+    </div>
+  )}
+  {show('photo') && (
+    <div class="logo-card">
+      <div class="mock mock-photo">
+        <span class="mock-photo-hill" />
+        <div class="mock-photo-logo"><LogoSvg version="white" iconPx={20} /></div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.photo[0]}</p><p>{L.photo[1]}</p></div>
+    </div>
+  )}
+  {show('yellow') && (
+    <div class="logo-card">
+      <div class="mock mock-yellow">
+        <LogoSvg version="graphite" iconPx={28} />
+        <span class="mock-lines"><b /><b style="width:36%" /></span>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.yellow[0]}</p><p>{L.yellow[1]}</p></div>
+    </div>
+  )}
+  {show('login') && (
+    <div class="logo-card">
+      <div class="mock mock-login">
+        <div class="mock-login-panel">
+          <LogoSvg kind="hexasync" iconPx={19} />
+          <span class="mock-input" /><span class="mock-input" /><span class="mock-button" />
+        </div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.login[0]}</p><p>{L.login[1]}</p></div>
+    </div>
+  )}
+  {show('marketplace') && (
+    <div class="logo-card">
+      <div class="mock mock-market">
+        <div class="mock-listing is-ours">
+          <img src="/brand/logos/app/icon-192.png" width="40" height="40" alt="" />
+          <span><strong>{L.appName}</strong><small>{L.by}</small></span>
+        </div>
+        <div class="mock-listing"><i class="mock-tile" /><span class="mock-lines"><b /><i style="width:60%" /></span></div>
+        <div class="mock-listing"><i class="mock-tile" /><span class="mock-lines"><b /><i style="width:50%" /></span></div>
+      </div>
+      <div class="logo-card-body"><p class="card-title">{L.marketplace[0]}</p><p>{L.marketplace[1]}</p></div>
+    </div>
+  )}
+</div>

package/dist/docs/src/components/logos/LogoMeanings.astro

@@ -0,0 +1,75 @@
+---
+// The three readings of the icon, outside in, each drawn on the icon itself.
+// Icon units (259.8 × 300).
+import { COLORS, ICON_PATH } from '../../lib/logo-geometry';
+import Fig from './Fig.astro';
+import { langOf } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+const OUTLINE = 'M129.9 0L259.8 75L259.8 225L129.9 300L0 225L0 75Z';
+const HOLES = 'M27.8 176.8L129.9 235.7L232 176.8L232 208.9L129.9 267.9L27.8 208.9ZM27.8 112.5L129.9 171.4L232 112.5L232 144.6L129.9 203.6L27.8 144.6ZM129.9 32.1L222.7 85.7L129.9 139.3L37.1 85.7Z';
+
+const s = 0.42; // px per icon unit: icon 126 px tall
+const fs = 12 / s;
+const sw = 1.25 / s;
+const vb = { x: -12, y: -14, w: 520, h: 328 };
+const w = Math.round(vb.w * s);
+const h = Math.round(vb.h * s);
+const labelX = 300;
+
+type Pin = { x: number; y: number; label: string };
+type Layer = { n: string; name: string; text: string; mode: 'outline' | 'stack' | 'bee'; pins: Pin[] };
+const lang = langOf(Astro.url.pathname);
+const all: Record<'en' | 'vi', Layer[]> = {
+  en: [
+    { n: '1', name: 'Honeycomb', mode: 'outline', text: 'The outline is a honeycomb cell, the shape bees use because it holds the most with the least material: one strong, efficient foundation.', pins: [{ x: 259.8, y: 150, label: 'The cell' }] },
+    { n: '2', name: 'System stack', mode: 'stack', text: 'Look again and the cell becomes two blocks, one stacked on the other. The lower block is Connect: the foundation, where every system is joined. The block above is Automate: built on that foundation, work that now runs by itself. On top sits Orchestrate: the vantage point where the whole business is run as one.', pins: [{ x: 129.9, y: 85.7, label: 'Orchestrate' }, { x: 129.9, y: 187.5, label: 'Automate' }, { x: 129.9, y: 251.8, label: 'Connect' }] },
+    { n: '3', name: 'Rising bee', mode: 'bee', text: 'The three white shapes draw a bee flying up: the top face is the head, the second band the wings, the last band the body.', pins: [{ x: 129.9, y: 85.7, label: 'Head' }, { x: 200, y: 147, label: 'Wings' }, { x: 129.9, y: 251.8, label: 'Body' }] },
+  ],
+  vi: [
+    { n: '1', name: 'Tổ ong', mode: 'outline', text: 'Viền ngoài là một ô tổ ong, hình loài ong dùng vì chứa được nhiều nhất với ít vật liệu nhất: một nền tảng bền, gọn.', pins: [{ x: 259.8, y: 150, label: 'Ô tổ ong' }] },
+    { n: '2', name: 'Khối hệ thống', mode: 'stack', text: 'Nhìn kỹ, ô tổ ong là hai khối xếp chồng lên nhau. Khối dưới là Connect: nền móng, nơi mọi hệ thống được nối lại. Khối trên là Automate: dựng trên nền móng ấy, công việc giờ tự vận hành. Trên cùng là Orchestrate: điểm nhìn bao quát, nơi cả doanh nghiệp được điều hành như một.', pins: [{ x: 129.9, y: 85.7, label: 'Orchestrate' }, { x: 129.9, y: 187.5, label: 'Automate' }, { x: 129.9, y: 251.8, label: 'Connect' }] },
+    { n: '3', name: 'Con ong bay lên', mode: 'bee', text: 'Ba khoảng trắng vẽ nên một con ong đang bay lên: mặt trên là đầu, dải thứ hai là cánh, dải cuối là thân.', pins: [{ x: 129.9, y: 85.7, label: 'Đầu' }, { x: 200, y: 147, label: 'Cánh' }, { x: 129.9, y: 251.8, label: 'Thân' }] },
+  ],
+};
+const layers = all[lang];
+const pinY = (i: number, n: number) => (n === 1 ? 150 : 70 + i * 80);
+---
+
+<ol class="logo-meanings">
+  {layers.map((layer) => (
+    <li>
+      <div class="logo-stage bg-white meaning-stage">
+        <Fig id={`meaning-${layer.mode}-${lang}`} class="diagram px-center" viewBox={`${vb.x} ${vb.y} ${w / s} ${h / s}`} w={w} h={h}>
+          {layer.mode === 'bee' ? (
+            <>
+              <path fill={COLORS.yellow} fill-rule="evenodd" d={ICON_PATH} opacity=".3" />
+              <path fill={COLORS.graphite} d={HOLES} />
+            </>
+          ) : layer.mode === 'outline' ? (
+            <>
+              <path fill={COLORS.yellow} fill-rule="evenodd" d={ICON_PATH} opacity=".3" />
+              <path d={OUTLINE} fill="none" stroke={COLORS.graphite} stroke-width={3 / s} stroke-linejoin="round" />
+            </>
+          ) : (
+            <path fill={COLORS.yellow} fill-rule="evenodd" d={ICON_PATH} />
+          )}
+          {layer.pins.map((pin, i) => {
+            const y = layer.pins.length === 1 ? pinY(i, 1) : pin.y;
+            return (
+              <g>
+                <path class="d-measure" d={`M${pin.x} ${pin.y}L${labelX - 30} ${y}H${labelX - 8}`} stroke-width={sw} />
+                <circle cx={pin.x} cy={pin.y} r={3.5 / s} fill={COLORS.graphite} stroke="#fff" stroke-width={1.5 / s} />
+                <text class="d-label" x={labelX} y={y + fs * 0.35} font-size={fs}>{pin.label}</text>
+              </g>
+            );
+          })}
+        </Fig>
+      </div>
+      <div class="meaning-text">
+        <p class="meaning-title"><span class="meaning-n" aria-hidden="true">{layer.n}</span>{layer.name}</p>
+        <p>{layer.text}</p>
+      </div>
+    </li>
+  ))}
+</ol>

package/dist/docs/src/components/logos/LogoMinSize.astro

@@ -0,0 +1,55 @@
+---
+// Minimum sizes, shown at actual size on screen.
+import LogoSvg from './LogoSvg.astro';
+import { langOf } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const L = {
+  en: {
+    lockAlt: 'beehexa lockup at its minimum width, 100 pixels',
+    lockTitle: 'Lockup: 100 px wide, 25 mm in print',
+    lockText: 'About 21 px tall on screen. The wordmark stroke is still 2.1–2.3 px at this size. Below it, use the icon alone.',
+    iconAlt: 'beehexa icon at its minimum height, 16 pixels',
+    iconCap: '16 px tall',
+    iconTitle: 'Icon: 16 px tall, 6 mm in print',
+    iconText: 'At 16 px each stroke and each gap is 1.5 px, so the three layers stay apart. Favicons start here.',
+  },
+  vi: {
+    lockAlt: 'Lockup beehexa ở bề rộng tối thiểu, 100 pixel',
+    lockTitle: 'Lockup: rộng 100 px, in 25 mm',
+    lockText: 'Cao khoảng 21 px trên màn hình. Nét chữ vẫn dày 2.1–2.3 px ở cỡ này. Nhỏ hơn nữa thì dùng icon riêng.',
+    iconAlt: 'Icon beehexa ở chiều cao tối thiểu, 16 pixel',
+    iconCap: 'cao 16 px',
+    iconTitle: 'Icon: cao 16 px, in 6 mm',
+    iconText: 'Ở 16 px, mỗi nét và mỗi khe dày 1.5 px, nên ba lớp vẫn tách nhau. Favicon bắt đầu từ cỡ này.',
+  },
+}[lang];
+---
+
+<div class="logo-cards" style="--cols:2">
+  <div class="logo-card">
+    <div class="logo-stage bg-white minsize-stage">
+      <div class="minsize-item px-center" style="--w:100px;--h:46px">
+        <span class="minsize-rule" aria-hidden="true">100 px</span>
+        <LogoSvg version="light" iconPx={21} label={L.lockAlt} />
+      </div>
+    </div>
+    <div class="logo-card-body">
+      <p class="card-title">{L.lockTitle}</p>
+      <p>{L.lockText}</p>
+    </div>
+  </div>
+  <div class="logo-card">
+    <div class="logo-stage bg-white minsize-stage">
+      <div class="minsize-item px-center" style="--w:54px;--h:38px">
+        <LogoSvg kind="icon" version="graphite" iconPx={16} label={L.iconAlt} />
+        <span class="minsize-caption" aria-hidden="true">{L.iconCap}</span>
+      </div>
+    </div>
+    <div class="logo-card-body">
+      <p class="card-title">{L.iconTitle}</p>
+      <p>{L.iconText}</p>
+    </div>
+  </div>
+</div>

package/dist/docs/src/components/logos/LogoMistakes.astro

@@ -0,0 +1,109 @@
+---
+// Common mistakes, each shown as it looks on screen, with the fix underneath.
+import LogoSvg from './LogoSvg.astro';
+import { ICON_PATH } from '../../lib/logo-geometry';
+import { langOf, localize } from '../../lib/i18n';
+import '../../styles/logos.css';
+
+const lang = langOf(Astro.url.pathname);
+const sharp = localize('/foundations/styles/logos/using-the-logo/', lang) + (lang === 'vi' ? '#hiển-thị-sắc-nét' : '#sharp-on-screen');
+const tile = lang === 'vi' ? '#icon-trong-ô-luật-ô-3-cạnh' : '#the-icon-in-a-tile-the-3-side-rule';
+const C = lang === 'vi'
+  ? {
+      jagged: ['Cạnh răng cưa trên màn hình 100%', `Chiều cao và vị trí bằng số nguyên pixel, dùng ảnh vẽ ở 3× hiển thị ở 1×. Xem <a href="${sharp}">hiển thị sắc nét</a>.`],
+      jaggedL: ['Cạnh cứng', 'Đã làm mịn'],
+      offset: ['Lệch tâm trong khung', 'Căn giữa rồi làm tròn khoảng lệch xuống một pixel nguyên, để logo vừa đúng tâm vừa sắc.'],
+      box: ['Ô trắng sau icon', 'Dùng file nền trong suốt trong gói tải về. Favicon không có nền.'],
+      dark: ['Sai bản màu trên nền tối', 'Đổi sang bản 2 hoặc 3. Không đảo màu, không đặt ô trắng sau logo.'],
+      alone: ['Icon vàng đứng riêng trên nền trắng', 'Dùng icon xám ghi, hoặc icon vàng trên ô xám ghi.'],
+      crop: ['Icon bị nền tảng cắt lẹm', `Dựng icon ứng dụng và avatar theo <a href="${tile}">luật ô 3 cạnh</a>.`],
+      fix: 'Cách sửa:',
+    }
+  : {
+      jagged: ['Stair steps on 100% screens', `Whole-pixel height and position, and a picture drawn at 3× shown at 1×. See <a href="${sharp}">sharp on screen</a>.`],
+      jaggedL: ['Hard edges', 'Smoothed'],
+      offset: ['Off-centre in its panel', 'Centre it, then round the offset down to a whole pixel, so the logo is both centred and sharp.'],
+      box: ['A white box behind the icon', 'Use the transparent files from the package. Favicons have no background.'],
+      dark: ['The wrong version on a dark background', 'Swap to version 2 or 3. Never invert the colours or put a white box behind the logo.'],
+      alone: ['The yellow icon alone on white', 'Use the graphite icon, or the yellow icon on a graphite tile.'],
+      crop: ['The icon cropped by the platform', `Build app icons and avatars with the <a href="${tile}">3-side rule</a>.`],
+      fix: 'Fix:',
+    };
+
+// The icon rasterised at 24 px tall, half a pixel off the grid, drawn 4× larger: once with hard
+// pixel edges, once smoothed by coverage, which is what a 3× picture shown at 1× gives.
+const polys = ICON_PATH.split('Z').filter((p) => p.trim()).map((p) => p.replace('M', '').split('L').map((q) => q.trim().split(/\s+/).map(Number)));
+const inside = (x: number, y: number) => {
+  let c = false;
+  for (const poly of polys) for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const [xi, yi] = poly[i], [xj, yj] = poly[j];
+    if (yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) c = !c;
+  }
+  return c;
+};
+const PX = 24 / 300; // pixels per icon unit
+const cols = 22, rows = 25, cell = 4, N = 6;
+const raster = (aa: boolean) => {
+  const out: { x: number; y: number; a: number }[] = [];
+  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
+    let hit = 0;
+    for (let i = 0; i < N; i++) for (let j = 0; j < N; j++) {
+      const x = (c - 0.5 + (i + 0.5) / N) / PX, y = (r - 0.5 + (j + 0.5) / N) / PX;
+      if (inside(x, y)) hit++;
+    }
+    const cov = hit / (N * N);
+    const a = aa ? cov : cov >= 0.5 ? 1 : 0;
+    if (a > 0.02) out.push({ x: c * cell, y: r * cell, a: +a.toFixed(2) });
+  }
+  return out;
+};
+const pixels = [raster(false), raster(true)];
+---
+
+<div class="logo-cards mistakes" style="--cols:3">
+  <div class="logo-card is-dont">
+    <div class="logo-stage bg-white mistake-stage mistake-pixels">
+      {pixels.map((px, k) => (
+        <figure>
+          <svg width={cols * cell} height={rows * cell} viewBox={`0 0 ${cols * cell} ${rows * cell}`} shape-rendering="crispEdges" aria-hidden="true">
+            {px.map((p) => <rect x={p.x} y={p.y} width={cell} height={cell} fill="#FCB017" fill-opacity={p.a} />)}
+          </svg>
+          <figcaption>{C.jaggedL[k]}</figcaption>
+        </figure>
+      ))}
+    </div>
+    <div class="logo-card-body"><p class="card-title">{C.jagged[0]}</p><p><b>{C.fix}</b> <span set:html={C.jagged[1]} /></p></div>
+  </div>
+  <div class="logo-card is-dont">
+    <div class="logo-stage bg-white mistake-stage mistake-offset">
+      <span class="mistake-axis is-v" /><span class="mistake-axis is-h" />
+      <div class="mistake-offset-logo"><LogoSvg iconPx={24} label="" /></div>
+    </div>
+    <div class="logo-card-body"><p class="card-title">{C.offset[0]}</p><p><b>{C.fix}</b> {C.offset[1]}</p></div>
+  </div>
+  <div class="logo-card is-dont">
+    <div class="logo-stage mistake-stage mistake-browser">
+      {/* a dark browser, drawn at twice its real size so the white box reads */}
+      <span class="mistake-tabs">
+        <span class="mistake-tab"><span class="mistake-favicon"><LogoSvg kind="icon" iconPx={24} label="" /></span><i /></span>
+        <span class="mistake-tab is-idle"><i /></span>
+      </span>
+      <span class="mistake-toolbar"><i /></span>
+    </div>
+    <div class="logo-card-body"><p class="card-title">{C.box[0]}</p><p><b>{C.fix}</b> {C.box[1]}</p></div>
+  </div>
+  <div class="logo-card is-dont">
+    <div class="logo-stage bg-graphite mistake-stage"><LogoSvg iconPx={28} class="px-center" label="" /></div>
+    <div class="logo-card-body"><p class="card-title">{C.dark[0]}</p><p><b>{C.fix}</b> {C.dark[1]}</p></div>
+  </div>
+  <div class="logo-card is-dont">
+    <div class="logo-stage bg-white mistake-stage"><LogoSvg kind="icon" iconPx={48} class="px-center" label="" /></div>
+    <div class="logo-card-body"><p class="card-title">{C.alone[0]}</p><p><b>{C.fix}</b> {C.alone[1]}</p></div>
+  </div>
+  <div class="logo-card is-dont">
+    <div class="logo-stage bg-white mistake-stage mistake-crop">
+      <span class="mistake-circle"><LogoSvg kind="icon" iconPx={92} label="" /></span>
+    </div>
+    <div class="logo-card-body"><p class="card-title">{C.crop[0]}</p><p><b>{C.fix}</b> <span set:html={C.crop[1]} /></p></div>
+  </div>
+</div>