background
Color values
#0B0C0Drgb(11 12 13)hsl(210.0 8.3% 4.7%)oklch(0.1536 0.0027 248.0)lab(3.27% -0.18 -0.54) (D50)CMYK: output profile required
Approved name: Glitchpad
Relationship: A ShruggieTech project
Mark: The rectangular paper and G share one protected construction inside a permanent square. On dark surfaces the square is sulfur with a charcoal page; on light surfaces the square is charcoal with a sulfur page. The slate fold stays consistent across both contexts.
Color: Near-black surfaces keep controls visually secondary to file content. Pure sulfur provides identity, focus, and selection; cool slate supplies the fold and subdued states. Muddy and darkened yellows are prohibited.
Type: Display Space Grotesk; body Geist; mono Geist Mono. See colors and type details.
Use the delivered logo and mark files for their declared surfaces and sizes. The asset catalog lists each verified variant and download. The color and type sections give exact values.
The reduced mark takes over at and below 32 px.
Keep the delivered artwork geometry unchanged.
This brand starts with shared ShruggieTech interface rules while keeping its own approved identity. The current hosted documentation facts (JSON) declare schema version 1 and documentation contract version 1.2.0. In a downloaded kit, enforcement/documentation-facts.json governs those pinned bytes.
No brand-specific interface overrides are declared. Use the delivered binding and its default rules.
2.0.01.0.11.1.01.1.01.0.21.0.03.0.11.2.1enforcement/interface-canon.jsonenforcement/component-recipes.jsonweb/adapter.jsonweb/support-matrix.jsonnative/egui/adapter.jsonnative/egui/support-matrix.jsonwordpress/adapter.jsonwordpress/support-matrix.jsonwordpress/glitchpad-stbb-theme.zipThe registry catalog lists installable theme and component resources; select a resource for the consuming host rather than treating the catalog as an installed component.
Identity accent hue 96.2 in OKLCH. Palette selection is independent of ownership and sibling hues.
These approved source values belong to marks and brand applications. A color used in artwork is not automatically a warning or action cue.
| Color | HEX | Source | Use |
|---|---|---|---|
| Glitchpad yellow | #FFD900 | brand.accent.bright | Primary frame and identity applications |
| Mark accent | #667788 | brand.logo.role_colors.color.accent | Approved internal mark accent |
| Application | Formal colors | Artwork | Use |
|---|---|---|---|
| Glitchpad mark | primary, mark-accent | logo.full | Sulfur frame with the approved internal accent |
Correct: use Glitchpad yellow (#FFD900) in its approved identity application; pair the Warning cue (#FF5300) with warning text and icon. Misuse: a lone identity swatch as the only warning signal.
Use words, icons, outlines, or state attributes with color. A shared HEX value does not merge identity and interface roles.
| Cue | HEX | Meaning | Measured pairing | Non-color cue |
|---|---|---|---|---|
| Action | #C24000 | Primary interactive action | #C24000 with #FFFFFF text (5.21:1); 3.75:1 against #0B0C0D | A descriptive button or link label |
| Warning | #FF5300 | Attention or recoverable risk | #FF5300 with #000000 text (6.49:1); 6.05:1 against #0B0C0D | Warning text and icon |
| Error | #E9505F | Failure or destructive action | #E9505F with #000000 text (5.78:1); 5.39:1 against #0B0C0D | Error text and icon |
| Success | #FFD900 | Completed operation | #FFD900 with #000000 text (15.18:1); 14.15:1 against #0B0C0D | Success text and icon |
| Information | #667788 | Neutral information or help | #667788 with #FFFFFF text (4.61:1); 4.25:1 against #0B0C0D | Information label and icon |
| Focus | #FFD900 | Keyboard focus ring | #FFD900 with #000000 text (15.18:1); 14.15:1 against #0B0C0D | Visible outline and keyboard focus order |
| Selection | #FFD900 | Selected control or item | #FFD900 with #000000 text (15.18:1); 14.15:1 against #0B0C0D | Selected label or checked state |
| Disabled | #667788 | Unavailable control | #667788 with #FFFFFF text (4.61:1); 4.25:1 against #0B0C0D | Disabled attribute and text |
Use words, icons, outlines, or state attributes with color. A shared HEX value does not merge identity and interface roles.
| Cue | HEX | Meaning | Measured pairing | Non-color cue |
|---|---|---|---|---|
| Action | #C24000 | Primary interactive action | #C24000 with #FFFFFF text (5.21:1); 4.90:1 against #F8F8F6 | A descriptive button or link label |
| Warning | #C24000 | Attention or recoverable risk | #C24000 with #FFFFFF text (5.21:1); 4.90:1 against #F8F8F6 | Warning text and icon |
| Error | #C0293A | Failure or destructive action | #C0293A with #FFFFFF text (5.80:1); 5.46:1 against #F8F8F6 | Error text and icon |
| Success | #0B0C0D | Completed operation | #0B0C0D with #FFFFFF text (19.58:1); 18.41:1 against #F8F8F6 | Success text and icon |
| Information | #0B0C0D | Neutral information or help | #0B0C0D with #FFFFFF text (19.58:1); 18.41:1 against #F8F8F6 | Information label and icon |
| Focus | #0B0C0D | Keyboard focus ring | #0B0C0D with #FFFFFF text (19.58:1); 18.41:1 against #F8F8F6 | Visible outline and keyboard focus order |
| Selection | #0B0C0D | Selected control or item | #0B0C0D with #FFFFFF text (19.58:1); 18.41:1 against #F8F8F6 | Selected label or checked state |
| Disabled | #667788 | Unavailable control | #667788 with #FFFFFF text (4.61:1); 4.33:1 against #F8F8F6 | Disabled attribute and text |
HEX uses uppercase pairs; sRGB uses integer 0-255 channels; HSL uses degrees and percentages rounded to one decimal; OKLCH uses four decimals for lightness and chroma plus one for hue; CIELAB uses D50 with lightness as a percentage and two decimals per channel.
#0B0C0Drgb(11 12 13)hsl(210.0 8.3% 4.7%)oklch(0.1536 0.0027 248.0)lab(3.27% -0.18 -0.54) (D50)CMYK: output profile required
#FFFFFFrgb(255 255 255)hsl(0.0 0.0% 100.0%)oklch(1.0000 0.0000 0.0)lab(100.00% 0.00 0.00) (D50)CMYK: output profile required
#121416rgb(18 20 22)hsl(210.0 10.0% 7.8%)oklch(0.1899 0.0051 248.1)lab(6.18% -0.50 -1.59) (D50)CMYK: output profile required
#090A0Brgb(9 10 11)hsl(210.0 10.0% 3.9%)oklch(0.1440 0.0028 247.1)lab(2.70% -0.17 -0.49) (D50)CMYK: output profile required
#FFD900rgb(255 217 0)hsl(51.1 100.0% 50.0%)oklch(0.8907 0.1833 96.2)lab(87.96% 1.95 86.88) (D50)CMYK: output profile required
#000000rgb(0 0 0)hsl(0.0 0.0% 0.0%)oklch(0.0000 0.0000 0.0)lab(0.00% 0.00 0.00) (D50)CMYK: output profile required
#151719rgb(21 23 25)hsl(210.0 8.7% 9.0%)oklch(0.2033 0.0051 248.1)lab(7.59% -0.56 -1.76) (D50)CMYK: output profile required
#9A9A9Argb(154 154 154)hsl(0.0 0.0% 60.4%)oklch(0.6862 0.0000 0.0)lab(63.60% 0.00 0.00) (D50)CMYK: output profile required
#181A1Drgb(24 26 29)hsl(216.0 9.4% 10.4%)oklch(0.2169 0.0066 258.4)lab(9.14% -0.37 -2.44) (D50)CMYK: output profile required
#E9505Frgb(233 80 95)hsl(354.1 77.7% 61.4%)oklch(0.6437 0.1882 18.6)lab(56.66% 60.52 26.02) (D50)CMYK: output profile required
#262626rgb(38 38 38)hsl(0.0 0.0% 14.9%)oklch(0.2686 0.0000 0.0)lab(15.16% -0.00 0.00) (D50)CMYK: output profile required
#9D8500rgb(157 133 0)hsl(50.8 100.0% 30.8%)oklch(0.6203 0.1277 96.3)lab(56.40% 1.27 60.50) (D50)CMYK: output profile required
#D55C1Argb(213 92 26)hsl(21.2 78.2% 46.9%)oklch(0.6193 0.1686 44.1)lab(54.59% 46.45 57.72) (D50)CMYK: output profile required
#1DA046rgb(29 160 70)hsl(138.8 69.3% 37.1%)oklch(0.6192 0.1683 148.2)lab(57.89% -49.88 36.28) (D50)CMYK: output profile required
#CE5390rgb(206 83 144)hsl(330.2 55.7% 56.7%)oklch(0.6195 0.1679 352.3)lab(53.63% 53.94 -7.93) (D50)CMYK: output profile required
#00999Frgb(0 153 159)hsl(182.3 100.0% 31.2%)oklch(0.6206 0.1055 199.7)lab(57.01% -33.10 -13.37) (D50)CMYK: output profile required
#667788rgb(102 119 136)hsl(210.0 14.3% 46.7%)oklch(0.5615 0.0333 248.4)lab(49.10% -3.45 -11.54) (D50)CMYK: output profile required
#FF5300rgb(255 83 0)hsl(19.5 100.0% 50.0%)oklch(0.6738 0.2190 38.3)lab(60.29% 64.46 71.50) (D50)CMYK: output profile required
#C24000rgb(194 64 0)hsl(19.8 100.0% 38.0%)oklch(0.5519 0.1759 39.3)lab(46.55% 51.32 58.37) (D50)CMYK: output profile required
#F8F8F6rgb(248 248 246)hsl(60.0 12.5% 96.9%)oklch(0.9786 0.0026 106.4)lab(97.54% -0.26 0.96) (D50)CMYK: output profile required
#0A0A0Argb(10 10 10)hsl(0.0 0.0% 3.9%)oklch(0.1448 0.0000 0.0)lab(2.74% 0.00 0.00) (D50)CMYK: output profile required
#FFFFFFrgb(255 255 255)hsl(0.0 0.0% 100.0%)oklch(1.0000 0.0000 0.0)lab(100.00% 0.00 0.00) (D50)CMYK: output profile required
#0B0C0Drgb(11 12 13)hsl(210.0 8.3% 4.7%)oklch(0.1536 0.0027 248.0)lab(3.27% -0.18 -0.54) (D50)CMYK: output profile required
#F0EFEDrgb(240 239 237)hsl(40.0 9.1% 93.5%)oklch(0.9523 0.0029 84.6)lab(94.48% 0.08 1.09) (D50)CMYK: output profile required
#6B6B6Brgb(107 107 107)hsl(0.0 0.0% 42.0%)oklch(0.5278 0.0000 0.0)lab(45.22% 0.00 0.00) (D50)CMYK: output profile required
#C0293Argb(192 41 58)hsl(353.2 64.8% 45.7%)oklch(0.5308 0.1857 20.9)lab(43.62% 59.48 30.04) (D50)CMYK: output profile required
#888887rgb(136 136 135)hsl(60.0 0.4% 53.1%)oklch(0.6264 0.0015 106.4)lab(56.68% -0.15 0.54) (D50)CMYK: output profile required
#393B3Crgb(57 59 60)hsl(200.0 2.6% 22.9%)oklch(0.3508 0.0032 228.9)lab(24.70% -0.71 -0.93) (D50)CMYK: output profile required
#393B3Brgb(57 59 59)hsl(180.0 1.7% 22.7%)oklch(0.3504 0.0027 197.0)lab(24.67% -0.88 -0.31) (D50)CMYK: output profile required
#3B3A3Crgb(59 58 60)hsl(270.0 1.7% 23.1%)oklch(0.3502 0.0037 308.3)lab(24.58% 0.79 -1.08) (D50)CMYK: output profile required
#3A3B3Argb(58 59 58)hsl(120.0 0.9% 22.9%)oklch(0.3510 0.0022 145.5)lab(24.74% -0.61 0.46) (D50)CMYK: output profile required
#3C3A3Brgb(60 58 59)hsl(330.0 1.7% 23.1%)oklch(0.3508 0.0032 345.4)lab(24.65% 1.06 -0.30) (D50)CMYK: output profile required
#667788rgb(102 119 136)hsl(210.0 14.3% 46.7%)oklch(0.5615 0.0333 248.4)lab(49.10% -3.45 -11.54) (D50)CMYK: output profile required
#C24000rgb(194 64 0)hsl(19.8 100.0% 38.0%)oklch(0.5519 0.1759 39.3)lab(46.55% 51.32 58.37) (D50)CMYK: output profile required
The bright accent #FFD900 measures 1.3:1 on the light
reading surface and is never text there. The light block substitutes #0B0C0D at
18.41:1. The legal foreground on an accent fill is #000000 at 15.18:1.
Chart colors serve data visualization. Each is derived from the accent and measured against its surface. Use labels or shapes so chart meaning does not depend on hue alone.
Body text on the generated dark surface.
Body text on the generated light surface.
Body in Geist at 400. Approved weights are display 500, 700, body 400, 500, and mono 400. Undeclared weights are prohibited.
| token | value |
|---|---|
| radius | 6 / 8 / 12 / 16 |
| spacing | 4 8 12 16 24 32 48 64 |
| focus | 2px ring, 2px offset |
A brand mark is the symbol alone; a logo lockup combines approved elements. Wide and stacked layouts are separate designs. Full and reduced identify source detail. Full color or monochrome identifies ink treatment. A clear background is transparent; for light or dark names the intended viewing surface. Social share images are separate opaque compositions. Preferred descriptive filenames and existing paths contain the same approved artwork. Full asset glossary.
Canvas 1000 × 1000 units, clear space 50 units (5.6 percent of artwork width). Below 32 px the reduced master takes over.
| lockup | mark height | gap | alignment |
|---|---|---|---|
| horizontal | 160 units | 34 units | optical center |
| stacked | 1.80C | 0.45C | centered on wordmark ink width |
The delivered square keeps 50 units of external clear space on every side. The protected inner page retains its 70-unit G channel; that internal measurement is not the external clear-space requirement. Never resize the mark and wordmark independently.
Compatibility aliases are listed with their canonical delivery group; byte-identical aliases do not create duplicate previews.
Read the instructions for each platform before installing its assets.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared lockup form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared mark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared wordmark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared wordmark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared wordmark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared wordmark form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.
Use the declared target-size form on compatible backgrounds. Smallest delivered raster: 36 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared target-size form on compatible backgrounds. Smallest delivered raster: 16 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared target-size form on compatible backgrounds. Smallest delivered raster: 36 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared target-size form on compatible backgrounds. Smallest delivered raster: 16 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared adaptive-foreground form on compatible backgrounds. Smallest delivered raster: 432 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared adaptive-monochrome form on compatible backgrounds. Smallest delivered raster: 432 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared adaptive-background form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared adaptive-declaration form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared color-resource form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared platform-manifest form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared asset-catalog form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared platform-manifest form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared asset-catalog form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared platform-manifest form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared icon-index form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared platform-manifest form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared web-manifest form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared manifest-fragment form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared platform-manifest form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared app-icon form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared app-icon form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared legacy-launcher form on compatible backgrounds. Smallest delivered raster: 48 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared play-store form on compatible backgrounds. Smallest delivered raster: 512 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared app-icon form on compatible backgrounds. Smallest delivered raster: 1024 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared asset-catalog-icon form on compatible backgrounds. Smallest delivered raster: 16 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared favicon-ico form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared maskable form on compatible backgrounds. Smallest delivered raster: 192 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared favicon form on compatible backgrounds. Smallest delivered raster: 48 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared favicon form on compatible backgrounds. Smallest delivered raster: 16 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared classic-ico form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.
Use the declared msix-scale form on compatible backgrounds. Smallest delivered raster: 44 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared store-logo form on compatible backgrounds. Smallest delivered raster: 50 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared target-size form on compatible backgrounds. Smallest delivered raster: 36 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared target-size form on compatible backgrounds. Smallest delivered raster: 16 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.
Use the declared social-image form on compatible backgrounds. Smallest delivered raster: 1280 px. Do not synthesize missing sizes. Follow the clear-space and reduction threshold above.