Brand & design system
A ShruggieTech project · Version 1.0.0 · Canon 1.2.1 · cueson.io
Cueson | Brand System01
State where the name came from and what its parts carry.
Write Cueson in title case in prose and lowercase in technical identifiers.
Universal captions and subtitles
| Trait | Expression | Avoid |
|---|---|---|
| Precise | Names the source format, timing, and derivation method | Generic conversion claims |
| Preserving | Keeps the source and normalized view together | Language that implies the original is discarded |
| Readable | Makes caption content directly addressable | Format syntax presented as the user benefit |
| Measured | Labels OCR and transcription as derived output | Claims of perfect recovery |
OCR and transcription are derived interpretations. Preserve the original visual or audio evidence and label confidence and provenance instead of presenting inferred text as ground truth.
Cueframe places three unequal cue rails inside two open brackets. The brackets are the retained source envelope; the rails are directly readable structured caption content. The reduced master keeps the envelope and one rail for small sizes.
One clear-space unit on every side: 48 units on the 512 × 512 canvas, 14.5 percent of artwork width. No text, border, icon or crop enters that band.
| mark | 24 px |
| horizontal | 160 px |
| stacked | 112 px |
| wordmark | 120 px |
Below 32 px the reduced master takes over. It ships as its own file. Do not rasterise the full mark down at runtime.
| Lockup | Mark height | Gap | Alignment |
|---|---|---|---|
| Horizontal | 160 units | 34 units | Optical center |
| Stacked | 1.80C | 0.45C | Centered on wordmark ink width |
The horizontal row records its approved master composition. C is the outlined wordmark cap height used by the stacked lockup. X is the clear-space unit declared above. Keep one X clear around every master and never resize the mark and wordmark independently.
No rotation, skew, stretch, outline, bevel or glow. Never recolour individual elements. Never set the wordmark in live text or a substitute typeface. Never combine the cueson and ShruggieTech marks into one lockup.
Cue Teal carries product identity, focus, and selection. Archive Night and its raised surfaces keep structured content primary. ShruggieTech orange remains scarce for emphasis and warning, while success and failure retain explicit labels and shapes.
The bright accent #62BEB2 measures 2.07:1 on the light reading surface and is never text there. The light token block substitutes #005D55 at 7.32:1 automatically. The legal foreground on an accent fill is #000000 at 9.53:1. Every fill token in brand.json carries its measured foreground.
| Colour | Means |
|---|---|
| Accent | Primary value, selection, links, focus |
| Orange | Needs attention, threshold exceeded |
| Fault | Failed or timed out. Always with text. |
The emphasis and failure colors may not be reliably separable under deuteranopia. That is acceptable only because state is never carried by colour alone: every state ships a written label.
Chart colors serve data visualization. Brand applications use the identity accent and the neutral surfaces. Each chart color is derived from the identity accent and measured against its surface so every entry clears 4.5:1.
Lightness is calculated separately for dark and light surfaces. Chart hues preserve the measured separation from semantic emphasis and failure colors, and no two entries sit closer than the declared minimum.
| Series | Dark | Light |
|---|---|---|
| chart-1 | #4DAA9F | #005D55 |
| chart-2 | #85A36E | #41582F |
| chart-3 | #64A0C5 | #255571 |
| chart-4 | #B3935B | #634B1E |
| chart-5 | #9690C9 | #4E4974 |
Series order is fixed: chart-1 is always the primary measurement. Never reorder to make a chart look better. Never introduce a sixth colour; past five series, switch to a form that does not depend on hue. A series never uses the semantic emphasis or failure colors, because those carry state.
Cueson uses three approved type families. Space Grotesk handles display text, Geist handles interface and reading text, and Geist Mono is reserved for literal command blocks.
| Function | Typeface | Weights |
|---|---|---|
| Display, headings | Space Grotesk | 500, 700 |
| Body, interface | Geist | 400, 500 |
| Literal code blocks | Geist Mono | 400 |
| Axis | Value |
|---|---|
| Radii | 6 / 8 / 12 / 16 / pill |
| Spacing | 4 8 12 16 24 32 48 64 96 120 |
| Focus | 2px ring at 2px offset |
Only the listed local faces are approved. Any other weight makes the renderer synthesise a faux bold, which prints badly and forces outlined glyphs into exported PDFs. Courier Prime is used only for literal command blocks.
| Token | Size | Tracking |
|---|---|---|
| display-xl | 72 | -0.030em |
| display-lg | 56 | -0.025em |
| display-md | 40 | -0.020em |
| display-sm | 28 | -0.015em |
| display-xs | 20 | -0.010em |
| Token | Size | Leading |
|---|---|---|
| body-lg | 18.4 | 1.6 |
| body-md | 16 | 1.7 |
| body-sm | 14 | 1.6 |
| body-xs | 12 | 1.5 |
| eyebrow | 12 | 0.12em caps |
Cueson uses the ShruggieTech type families, dark product surfaces, and the inherited orange warning color #FF5300. The mark geometry and the identity accent are this sub-brand's own and are never borrowed by a sibling. The identity accent sits 31.3 degrees from its nearest sibling.
The approved mono family, uppercase, positive tracking. Visually subordinate and outside the logo clear space. Never a combined parent-product lockup.
| Path | Contents | n |
|---|---|---|
| logos/svg/ | Vector masters, every lockup and colourway | 21 |
| icons/ | Web, Android, Apple, macOS, and Windows application suites | 122 |
| favicons/ | Compatibility aliases for the authoritative web suite | 18 |
| fonts/woff2/ | Web faces plus OFL licences | 5 |
| tokens/ | CSS and JSON with measured contrast | 5 |
| Path | Contents | n |
|---|---|---|
| nextjs/ | globals.css, shadcn registry, fonts, provider | 13 |
| enforcement/ | AGENTS.md, ESLint, stylelint | 4 |
| qc/ | Contact sheets. Proof somebody looked. | 2 |
| guidelines/ | The system rendered from itself | 2 |