https://projectious-work.github.io/brand/v2.0.2/docs/foundations/Recent content in Foundations on projectious.work brandHugoenhttps://projectious-work.github.io/brand/v2.0.2/docs/foundations/color/Mon, 01 Jan 0001 00:00:00 +0000https://projectious-work.github.io/brand/v2.0.2/docs/foundations/color/<p>The palette is three scales — <strong>midnight</strong>, <strong>orange</strong>, and <strong>slate</strong> — each expressed as a 12-step ramp in a light and a dark variant. The step numbering follows the Radix convention, which assigns every step a <em>role</em>. Using a step outside its role is the single most common way to break the system.</p> <h2 id="core-colours">Core colours</h2> <p>These are the named aliases most projects reach for first. They are shortcuts into the scales, not a separate palette.</p>https://projectious-work.github.io/brand/v2.0.2/docs/foundations/typography/Mon, 01 Jan 0001 00:00:00 +0000https://projectious-work.github.io/brand/v2.0.2/docs/foundations/typography/<p>The system uses three typefaces, each with one job. All three are licensed under the SIL Open Font License 1.1 and served from Google Fonts, so there are no bundled font binaries to license or redistribute.</p> <h2 id="the-three-families">The three families</h2> <table> <thead> <tr> <th>Family</th> <th>Weights</th> <th>Role</th> <th>Licence</th> </tr> </thead> <tbody> <tr> <td><strong>Plus Jakarta Sans</strong></td> <td>400 · 500 · 600 · 700 · 800</td> <td>Headings, display, buttons, navigation, wordmark</td> <td>SIL OFL 1.1</td> </tr> <tr> <td><strong>Source Sans 3</strong></td> <td>400 · 500 · 600</td> <td>Body copy, UI labels, captions</td> <td>SIL OFL 1.1</td> </tr> <tr> <td><strong>IBM Plex Mono</strong></td> <td>400 · 500</td> <td>Code, terminal output, data</td> <td>SIL OFL 1.1</td> </tr> </tbody> </table> <p>Loading them:</p>https://projectious-work.github.io/brand/v2.0.2/docs/foundations/space-shape-motion/Mon, 01 Jan 0001 00:00:00 +0000https://projectious-work.github.io/brand/v2.0.2/docs/foundations/space-shape-motion/<h2 id="spacing">Spacing</h2> <p>A 4px base with a nine-step scale. Every margin, padding, and gap resolves to one of these values.</p> <table> <thead> <tr> <th>Token</th> <th>Value</th> <th>Typical use</th> </tr> </thead> <tbody> <tr> <td><code>--space-1</code></td> <td>4px</td> <td>Icon-to-label gaps</td> </tr> <tr> <td><code>--space-2</code></td> <td>8px</td> <td>Tight component padding</td> </tr> <tr> <td><code>--space-3</code></td> <td>12px</td> <td>Control padding</td> </tr> <tr> <td><code>--space-4</code></td> <td>16px</td> <td>Default element spacing</td> </tr> <tr> <td><code>--space-5</code></td> <td>24px</td> <td>Card padding, paragraph rhythm</td> </tr> <tr> <td><code>--space-6</code></td> <td>32px</td> <td>Component separation</td> </tr> <tr> <td><code>--space-7</code></td> <td>48px</td> <td>Sub-section separation</td> </tr> <tr> <td><code>--space-8</code></td> <td>64px</td> <td>Section separation</td> </tr> <tr> <td><code>--space-9</code></td> <td>96px</td> <td>Page-level bands</td> </tr> </tbody> </table> <p>Content sits inside a <strong>1100px measure</strong>. Wider viewports gain margin, not line length.</p>