Brand guidelines

Local Media Gallery

Start here

Brand essentials

Name and relationship

Approved name: Local Media Gallery

Relationship: A ShruggieTech project

Written form: Write Local Media Gallery as the name; use localmedia.gallery only as an address.

Approved words

Slogan
Your media presented beautifully.
Short description
A lightweight, interactive gallery for browsing local images and videos.

Visual signatures

Mark: Use the larger icon beside Local Media above Gallery. Preserve the supplied hierarchy and proportions. Keep the domain for address use.

Color: The formal identity uses Jade on dark surfaces and Deep Jade on light surfaces.

Type: Display Space Grotesk; body Geist; mono Geist Mono. See colors and type details.

Where each asset belongs

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.

Usage limits

Keep the delivered artwork geometry unchanged.

Implementation authority

Exact kit facts

This brand uses its own delivered interface binding; do not assume a ShruggieTech house palette. 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.

Interface overrides

No brand-specific interface overrides are declared. Use the delivered binding and its default rules.

Versions

canon version
2.1.0
interface canon version
1.0.1
component recipe version
1.1.0
web react adapter version
1.1.0
egui adapter version
1.0.2
wordpress adapter version
1.0.0
compiler version
3.1.0
brand version
1.0.0

Implementation files

  • interface canon: enforcement/interface-canon.json
  • component recipes: enforcement/component-recipes.json
  • web adapter: web/adapter.json
  • web support matrix: web/support-matrix.json
  • egui adapter: native/egui/adapter.json
  • egui support matrix: native/egui/support-matrix.json
  • wordpress adapter: wordpress/adapter.json
  • wordpress support matrix: wordpress/support-matrix.json
  • wordpress theme zip: wordpress/localmedia-gallery-stbb-theme.zip

The registry catalog lists installable theme and component resources; select a resource for the consuming host rather than treating the catalog as an installed component.

Color

Formal identity colors and interface cues

Identity accent hue 176.1 in OKLCH. Palette selection is independent of ownership and sibling hues.

Formal identity colors

These approved source values belong to marks and brand applications. A color used in artwork is not automatically a warning or action cue.

ColorHEXSourceUse
Gallery Jade#69D4BBbrand.accent.brightIdentity artwork on dark surfaces
Deep Jade#08745Fbrand.accent.accessibleIdentity artwork and readable accent on light surfaces

Approved combinations

ApplicationFormal colorsArtworkUse
Contact sheetprimarylogo.fullFour equal gallery tiles with image and video cutouts

Correct: use Deep Jade (#08745F) in its approved identity application; pair the Action cue (#08745F) with a descriptive button or link label. Misuse: a lone identity swatch as the only action signal.

Interface cues on dark surfaces

Use words, icons, outlines, or state attributes with color. A shared HEX value does not merge identity and interface roles.

CueHEXMeaningMeasured pairingNon-color cue
Action#08745FPrimary interactive action#08745F with #FFFFFF text (5.72:1); 3.20:1 against #10151EA descriptive button or link label
Warning#F2BE6EAttention or recoverable risk#F2BE6E with #000000 text (12.37:1); 10.77:1 against #10151EWarning text and icon
Error#F39494Failure or destructive action#F39494 with #000000 text (9.47:1); 8.25:1 against #10151EError text and icon
Success#77C9A8Completed operation#77C9A8 with #000000 text (10.70:1); 9.32:1 against #10151ESuccess text and icon
Information#8EBBFFNeutral information or help#8EBBFF with #000000 text (10.70:1); 9.32:1 against #10151EInformation label and icon
Focus#69D4BBKeyboard focus ring#69D4BB with #000000 text (11.74:1); 10.22:1 against #10151EVisible outline and keyboard focus order
Selection#69D4BBSelected control or item#69D4BB with #000000 text (11.74:1); 10.22:1 against #10151ESelected label or checked state
Disabled#69D4BBUnavailable control#69D4BB with #000000 text (11.74:1); 10.22:1 against #10151EDisabled attribute and text

Interface cues on light surfaces

Use words, icons, outlines, or state attributes with color. A shared HEX value does not merge identity and interface roles.

CueHEXMeaningMeasured pairingNon-color cue
Action#08745FPrimary interactive action#08745F with #FFFFFF text (5.72:1); 5.24:1 against #F3F5FAA descriptive button or link label
Warning#805000Attention or recoverable risk#805000 with #FFFFFF text (6.85:1); 6.28:1 against #F3F5FAWarning text and icon
Error#A03035Failure or destructive action#A03035 with #FFFFFF text (7.07:1); 6.48:1 against #F3F5FAError text and icon
Success#17654BCompleted operation#17654B with #FFFFFF text (7.00:1); 6.42:1 against #F3F5FASuccess text and icon
Information#26549BNeutral information or help#26549B with #FFFFFF text (7.44:1); 6.82:1 against #F3F5FAInformation label and icon
Focus#08745FKeyboard focus ring#08745F with #FFFFFF text (5.72:1); 5.24:1 against #F3F5FAVisible outline and keyboard focus order
Selection#08745FSelected control or item#08745F with #FFFFFF text (5.72:1); 5.24:1 against #F3F5FASelected label or checked state
Disabled#69D4BBUnavailable control#69D4BB with #000000 text (11.74:1); 1.64:1 against #F3F5FADisabled 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.

Dark palette

background

Color values
#10151E
rgb(16 21 30)
hsl(218.6 30.4% 9.0%)
oklch(0.1950 0.0199 262.0)
lab(6.61% -0.20 -7.07) (D50)

CMYK: output profile required

foreground, card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground, brand-cta-foreground, brand-cta-outline-foreground

Color values
#FFFFFF
rgb(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

card, popover, sidebar

Color values
#161D29
rgb(22 29 41)
hsl(217.9 30.2% 12.4%)
oklch(0.2297 0.0256 261.0)
lab(10.51% -0.36 -9.27) (D50)

CMYK: output profile required

primary, ring, chart-1, sidebar-primary, sidebar-ring

Color values
#69D4BB
rgb(105 212 187)
hsl(166.0 55.4% 62.2%)
oklch(0.7993 0.1063 176.1)
lab(78.08% -36.95 2.43) (D50)

CMYK: output profile required

primary-foreground, sidebar-primary-foreground

Color values
#000000
rgb(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

secondary, muted

Color values
#202B3B
rgb(32 43 59)
hsl(215.6 29.7% 17.8%)
oklch(0.2864 0.0333 257.7)
lab(17.08% -1.06 -11.90) (D50)

CMYK: output profile required

muted-foreground

Color values
#9A9A9A
rgb(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

accent, sidebar-accent

Color values
#2A3548
rgb(42 53 72)
hsl(218.0 26.3% 22.4%)
oklch(0.3276 0.0371 261.2)
lab(21.80% -0.47 -13.41) (D50)

CMYK: output profile required

destructive

Color values
#F39494
rgb(243 148 148)
hsl(0.0 79.8% 76.7%)
oklch(0.7648 0.1150 20.1)
lab(71.53% 36.67 16.11) (D50)

CMYK: output profile required

border, input, sidebar-border

Color values
#262626
rgb(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

chart-2

Color values
#B0C982
rgb(176 201 130)
hsl(81.1 39.7% 64.9%)
oklch(0.8001 0.0983 124.4)
lab(77.81% -17.60 32.59) (D50)

CMYK: output profile required

chart-3

Color values
#75CAEF
rgb(117 202 239)
hsl(198.2 79.2% 69.8%)
oklch(0.7990 0.0977 228.1)
lab(77.00% -19.30 -26.82) (D50)

CMYK: output profile required

chart-4

Color values
#E5B375
rgb(229 179 117)
hsl(33.2 68.3% 67.8%)
oklch(0.7987 0.0982 71.6)
lab(76.57% 13.29 38.84) (D50)

CMYK: output profile required

chart-5

Color values
#B1B7FC
rgb(177 183 252)
hsl(235.2 92.6% 84.1%)
oklch(0.7998 0.0978 280.1)
lab(75.84% 9.37 -35.15) (D50)

CMYK: output profile required

brand-accent-deep, brand-cta

Color values
#08745F
rgb(8 116 95)
hsl(168.3 87.1% 24.3%)
oklch(0.4996 0.0931 174.0)
lab(43.16% -32.76 3.46) (D50)

CMYK: output profile required

brand-emphasis

Color values
#F2BE6E
rgb(242 190 110)
hsl(36.4 83.5% 69.0%)
oklch(0.8319 0.1148 76.9)
lab(80.52% 12.65 47.44) (D50)

CMYK: output profile required

brand-success

Color values
#77C9A8
rgb(119 201 168)
hsl(155.9 43.2% 62.7%)
oklch(0.7740 0.0943 166.3)
lab(75.05% -31.93 8.31) (D50)

CMYK: output profile required

brand-information

Color values
#8EBBFF
rgb(142 187 255)
hsl(216.1 100.0% 77.8%)
oklch(0.7862 0.1089 258.4)
lab(74.64% -2.16 -38.84) (D50)

CMYK: output profile required

Light palette

background

Color values
#F3F5FA
rgb(243 245 250)
hsl(222.9 41.2% 96.7%)
oklch(0.9701 0.0070 268.5)
lab(96.49% -0.02 -2.66) (D50)

CMYK: output profile required

foreground, card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground

Color values
#182137
rgb(24 33 55)
hsl(222.6 39.2% 15.5%)
oklch(0.2509 0.0439 266.4)
lab(12.77% 1.66 -15.83) (D50)

CMYK: output profile required

card, popover, primary-foreground, sidebar, sidebar-primary-foreground, brand-cta-foreground

Color values
#FFFFFF
rgb(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

primary, ring, chart-1, sidebar-primary, sidebar-ring, brand-accent-deep, brand-cta, brand-cta-outline-foreground

Color values
#08745F
rgb(8 116 95)
hsl(168.3 87.1% 24.3%)
oklch(0.4996 0.0931 174.0)
lab(43.16% -32.76 3.46) (D50)

CMYK: output profile required

secondary

Color values
#E8EDF7
rgb(232 237 247)
hsl(220.0 48.4% 93.9%)
oklch(0.9452 0.0145 264.5)
lab(93.58% -0.35 -5.46) (D50)

CMYK: output profile required

muted, accent, sidebar-accent

Color values
#DFE5F0
rgb(223 229 240)
hsl(218.8 36.2% 90.8%)
oklch(0.9206 0.0163 262.8)
lab(90.72% -0.55 -6.10) (D50)

CMYK: output profile required

muted-foreground

Color values
#526078
rgb(82 96 120)
hsl(217.9 18.8% 39.6%)
oklch(0.4867 0.0425 261.1)
lab(40.25% -0.90 -15.47) (D50)

CMYK: output profile required

destructive

Color values
#A03035
rgb(160 48 53)
hsl(357.3 53.8% 40.8%)
oklch(0.4797 0.1474 22.3)
lab(38.12% 46.95 24.79) (D50)

CMYK: output profile required

border, input, sidebar-border

Color values
#7B808F
rgb(123 128 143)
hsl(225.0 8.2% 52.2%)
oklch(0.6008 0.0235 271.0)
lab(53.54% 0.50 -8.80) (D50)

CMYK: output profile required

chart-2

Color values
#5B6B30
rgb(91 107 48)
hsl(76.3 38.1% 30.4%)
oklch(0.5004 0.0857 122.1)
lab(42.83% -13.72 30.49) (D50)

CMYK: output profile required

chart-3

Color values
#1C6D88
rgb(28 109 136)
hsl(195.0 65.9% 32.2%)
oklch(0.5002 0.0854 225.3)
lab(42.33% -17.15 -22.20) (D50)

CMYK: output profile required

chart-4

Color values
#825A26
rgb(130 90 38)
hsl(33.9 54.8% 32.9%)
oklch(0.5000 0.0857 70.5)
lab(41.87% 13.05 35.90) (D50)

CMYK: output profile required

chart-5

Color values
#585E93
rgb(88 94 147)
hsl(233.9 25.1% 46.1%)
oklch(0.5001 0.0846 277.9)
lab(41.16% 8.29 -30.29) (D50)

CMYK: output profile required

brand-emphasis

Color values
#805000
rgb(128 80 0)
hsl(37.5 100.0% 25.1%)
oklch(0.4745 0.1027 70.2)
lab(38.82% 16.78 47.39) (D50)

CMYK: output profile required

brand-success

Color values
#17654B
rgb(23 101 75)
hsl(160.0 62.9% 24.3%)
oklch(0.4536 0.0852 165.8)
lab(37.75% -29.30 7.82) (D50)

CMYK: output profile required

brand-information

Color values
#26549B
rgb(38 84 155)
hsl(216.4 60.6% 37.8%)
oklch(0.4532 0.1264 259.0)
lab(35.55% 4.20 -44.18) (D50)

CMYK: output profile required

Light surfaces

The bright accent #69D4BB measures 1.64:1 on the light reading surface and is never text there. The light block substitutes #08745F at 5.24:1. The legal foreground on an accent fill is #000000 at 11.74:1.

Theme reference

Dark and light examples

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.

Dark

Heading and controls

Body text on the generated dark surface.

Light

Heading and controls

Body text on the generated light surface.

Type and components

Space Grotesk, Geist, Geist Mono

Display
Heading

Body in Geist at 400. Approved weights are display 500, 700, body 400, 500, and mono 400. Undeclared weights are prohibited.

0O 1lI 8B 5S 2Z
Components
ok warn fail
tokenvalue
radius6 / 8 / 12 / 16
spacing4 8 12 16 24 32 48 64
focus2px ring, 2px offset
Delivery

Complete asset catalog

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 100 units (12.9 percent of artwork width). Below 32 px the reduced master takes over.

Fixed lockup proportions

lockupmark heightgapalignment
horizontal160 units36 unitsoptical center
stacked4.00C0.65Ccentered 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 70-unit G channel. Keep one X clear around every master. Never resize the mark and wordmark independently.

Compatibility aliases are listed with their canonical delivery group; byte-identical aliases do not create duplicate previews.

Integration instructions

Read the instructions for each platform before installing its assets.

Stacked logo lockup, full color, for dark backgrounds

Dark surfaceLocal Media Gallery Stacked logo lockup, full color, for dark backgrounds preview

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.

Stacked logo lockup, full color, for light backgrounds

Light surfaceLocal Media Gallery Stacked logo lockup, full color, for light backgrounds preview

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.

Stacked logo lockup, monochrome white ink, for dark backgrounds

Dark surfaceLocal Media Gallery Stacked logo lockup, monochrome white ink, for dark backgrounds preview

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.

Stacked logo lockup, monochrome black ink, for light backgrounds

Light surfaceLocal Media Gallery Stacked logo lockup, monochrome black ink, for light backgrounds preview

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.

Wide logo lockup, full color, for dark backgrounds

Dark surfaceLocal Media Gallery Wide logo lockup, full color, for dark backgrounds preview

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.

Wide logo lockup, full color, for light backgrounds

Light surfaceLocal Media Gallery Wide logo lockup, full color, for light backgrounds preview

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.

Wide logo lockup, monochrome white ink, for dark backgrounds

Dark surfaceLocal Media Gallery Wide logo lockup, monochrome white ink, for dark backgrounds preview

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.

Wide logo lockup, monochrome black ink, for light backgrounds

Light surfaceLocal Media Gallery Wide logo lockup, monochrome black ink, for light backgrounds preview

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.

Full brand mark, full color, for dark backgrounds

Dark surfaceLocal Media Gallery Full brand mark, full color, for dark backgrounds preview

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.

Reduced brand mark, full color, for dark backgrounds

Dark surfaceLocal Media Gallery Reduced brand mark, full color, for dark backgrounds preview

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.

Full brand mark, full color, for light backgrounds

Light surfaceLocal Media Gallery Full brand mark, full color, for light backgrounds preview

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.

Reduced brand mark, full color, for light backgrounds

Light surfaceLocal Media Gallery Reduced brand mark, full color, for light backgrounds preview

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.

Full brand mark, monochrome white ink, for dark backgrounds

Dark surfaceLocal Media Gallery Full brand mark, monochrome white ink, for dark backgrounds preview

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.

Reduced brand mark, monochrome white ink, for dark backgrounds

Dark surfaceLocal Media Gallery Reduced brand mark, monochrome white ink, for dark backgrounds preview

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.

Full brand mark, monochrome black ink, for light backgrounds

Light surfaceLocal Media Gallery Full brand mark, monochrome black ink, for light backgrounds preview

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.

Reduced brand mark, monochrome black ink, for light backgrounds

Light surfaceLocal Media Gallery Reduced brand mark, monochrome black ink, for light backgrounds preview

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.

Wordmark, full color, for dark backgrounds

Dark surfaceLocal Media Gallery Wordmark, full color, for dark backgrounds preview

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.

Wordmark, full color, for light backgrounds

Light surfaceLocal Media Gallery Wordmark, full color, for light backgrounds preview

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.

Wordmark, monochrome white ink, for dark backgrounds

Dark surfaceLocal Media Gallery Wordmark, monochrome white ink, for dark backgrounds preview

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.

Wordmark, monochrome black ink, for light backgrounds

Light surfaceLocal Media Gallery Wordmark, monochrome black ink, for light backgrounds preview

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.

Windows target size, for dark backgrounds

Dark surfaceLocal Media Gallery Windows target size, for dark backgrounds preview

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.

Windows target size, for dark backgrounds

Dark surfaceLocal Media Gallery Windows target size, for dark backgrounds preview

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.

Windows target size, for light backgrounds

Dark surfaceLocal Media Gallery Windows target size, for light backgrounds preview

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.

Windows target size, for light backgrounds

Dark surfaceLocal Media Gallery Windows target size, for light backgrounds preview

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.

Android adaptive foreground

Dark surfaceLocal Media Gallery Android adaptive foreground preview

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.

Android adaptive monochrome

Dark surfaceLocal Media Gallery Android adaptive monochrome preview

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.

Windows classic ico

Dark surface
Icon container (no image preview)

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.

  • app.icoExisting path · embedded: 16 × 16, 24 × 24, 32 × 32, 48 × 48, 64 × 64, 128 × 128, 256 × 256 · ICO · Win32 application

Windows target size

Dark surfaceLocal Media Gallery Windows target size preview

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.

Windows target size

Dark surfaceLocal Media Gallery Windows target size preview

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.

Android adaptive background

Dark surface
XML metadata (no image preview)

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.

Android adaptive declaration

Dark surface
XML metadata (no image preview)

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.

  • ic_launcher.xmlExisting path · container or metadata · XML · Android res/mipmap-anydpi-v26

Android color resource

Dark surface
XML metadata (no image preview)

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.

Android platform manifest

Dark surface
JSON metadata (no image preview)

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.

  • manifest.jsonExisting path · container or metadata · JSON · See suite README

iOS asset catalog

Dark surface
JSON metadata (no image preview)

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.

  • Contents.jsonExisting path · container or metadata · JSON · Xcode AppIcon.appiconset

iOS platform manifest

Dark surface
JSON metadata (no image preview)

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.

  • manifest.jsonExisting path · container or metadata · JSON · See suite README

macOS asset catalog

Dark surface
JSON metadata (no image preview)

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.

  • Contents.jsonExisting path · container or metadata · JSON · Xcode AppIcon.appiconset

macOS platform manifest

Dark surface
JSON metadata (no image preview)

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.

  • manifest.jsonExisting path · container or metadata · JSON · See suite README

Web icon index

Dark surface
JSON metadata (no image preview)

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.

Web platform manifest

Dark surface
JSON metadata (no image preview)

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.

  • manifest.jsonExisting path · container or metadata · JSON · See suite README

Web web manifest

Dark surface
JSON metadata (no image preview)

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.

  • site.webmanifestExisting alias · container or metadata · JSON · Compatibility alias for icons/web/site.webmanifest
  • site.webmanifestExisting path · container or metadata · JSON · Web root

Windows manifest fragment

Dark surface
XML metadata (no image preview)

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.

Windows platform manifest

Dark surface
JSON metadata (no image preview)

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.

  • manifest.jsonExisting path · container or metadata · JSON · See suite README

iOS app icon, opaque background, for dark backgrounds

Light surfaceLocal Media Gallery iOS app icon, opaque background, for dark backgrounds preview

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.

iOS app icon, opaque background, for light backgrounds

Dark surfaceLocal Media Gallery iOS app icon, opaque background, for light backgrounds preview

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.

Android legacy launcher, opaque background

Light surfaceLocal Media Gallery Android legacy launcher, opaque background preview

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.

  • ic_launcher.pngExisting path · 72 × 72 · PNG · Android res/mipmap-hdpi
  • ic_launcher.pngExisting path · 48 × 48 · PNG · Android res/mipmap-mdpi
  • ic_launcher.pngExisting path · 96 × 96 · PNG · Android res/mipmap-xhdpi
  • ic_launcher.pngExisting path · 144 × 144 · PNG · Android res/mipmap-xxhdpi
  • ic_launcher.pngExisting path · 192 × 192 · PNG · Android res/mipmap-xxxhdpi

Android play store, opaque background

Light surfaceLocal Media Gallery Android play store, opaque background preview

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.

iOS app icon, opaque background

Light surfaceLocal Media Gallery iOS app icon, opaque background preview

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.

  • AppIcon-1024.pngExisting path · 1024 × 1024 · PNG · Xcode AppIcon.appiconset

macOS app icon, opaque background

Light surfaceLocal Media Gallery macOS app icon, opaque background preview

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.

Web favicon ico, opaque background

Dark surface
Icon container (no image preview)

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.

  • favicon.icoExisting alias · embedded: 16 × 16, 24 × 24, 32 × 32, 48 × 48, 64 × 64, 128 × 128, 256 × 256 · ICO · Compatibility alias for icons/web/favicon.ico
  • favicon.icoExisting path · embedded: 16 × 16, 24 × 24, 32 × 32, 48 × 48, 64 × 64, 128 × 128, 256 × 256 · ICO · Web root

Web maskable, opaque background

Light surfaceLocal Media Gallery Web maskable, opaque background preview

Use the declared maskable form on compatible backgrounds. Smallest delivered raster: 192 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.

Web icon, full detail, opaque background

Light surfaceLocal Media Gallery Web icon, full detail, opaque background preview

Use the declared favicon form on compatible backgrounds. Smallest delivered raster: 48 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.

Web icon, reduced detail, opaque background

Light surfaceLocal Media Gallery Web icon, reduced detail, opaque background preview

Use the declared favicon form on compatible backgrounds. Smallest delivered raster: 16 px. Do not synthesize missing sizes. Preserve declared plate and transparency behavior.

  • favicon-16x16.pngExisting alias · 16 × 16 · PNG · Compatibility alias for icons/web/favicon-16x16.png
  • favicon-24x24.pngExisting alias · 24 × 24 · PNG · Compatibility alias for icons/web/favicon-24x24.png
  • favicon-32x32.pngExisting alias · 32 × 32 · PNG · Compatibility alias for icons/web/favicon-32x32.png
  • favicon.svgExisting alias · 512 × 512 · SVG · Compatibility alias for icons/web/favicon.svg
  • favicon-16x16.pngExisting path · 16 × 16 · PNG · Web root
  • favicon-24x24.pngExisting path · 24 × 24 · PNG · Web root
  • favicon-32x32.pngExisting path · 32 × 32 · PNG · Web root
  • favicon.svgExisting path · 512 × 512 · SVG · Web root or document icon link

Windows msix scale, opaque background

Light surfaceLocal Media Gallery Windows msix scale, opaque background preview

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.

Windows store logo, opaque background

Light surfaceLocal Media Gallery Windows store logo, opaque background preview

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.

Social share image, full color, dark background

Dark surfaceLocal Media Gallery Social share image, full color, dark background preview

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.

A ShruggieTech project