Local Media Gallery guidelines
Color
Canonical palette values and semantic roles.
HEX is the canonical screen reference. Formal identity colors belong to approved brand applications; interface cues communicate actions and states with words, icons, outlines, or attributes as well as color.
Formal identity colors
A color used in artwork is not automatically a warning or action cue.
| Color | HEX | Source | Use |
|---|---|---|---|
| Gallery Jade | #69D4BB | brand.accent.bright | Identity artwork on dark surfaces |
| Deep Jade | #08745F | brand.accent.accessible | Identity artwork and readable accent on light surfaces |
Approved combinations and artwork
| Application | Formal colors | Artwork | Use |
|---|---|---|---|
| Contact sheet | Gallery Jade | logo.full | Four 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
A shared HEX value does not merge identity and interface roles. State meaning also requires the listed non-color cue.
| Cue | HEX | Meaning | Measured pairing | Non-color cue |
|---|---|---|---|---|
| Action | #08745F | Primary interactive action | #FFFFFF foreground, 5.72:1; 3.20:1 against #10151E | A descriptive button or link label |
| Warning | #F2BE6E | Attention or recoverable risk | #000000 foreground, 12.37:1; 10.77:1 against #10151E | Warning text and icon |
| Error | #F39494 | Failure or destructive action | #000000 foreground, 9.47:1; 8.25:1 against #10151E | Error text and icon |
| Success | #77C9A8 | Completed operation | #000000 foreground, 10.70:1; 9.32:1 against #10151E | Success text and icon |
| Information | #8EBBFF | Neutral information or help | #000000 foreground, 10.70:1; 9.32:1 against #10151E | Information label and icon |
| Focus | #69D4BB | Keyboard focus ring | #000000 foreground, 11.74:1; 10.22:1 against #10151E | Visible outline and keyboard focus order |
| Selection | #69D4BB | Selected control or item | #000000 foreground, 11.74:1; 10.22:1 against #10151E | Selected label or checked state |
| Disabled | #69D4BB | Unavailable control | #000000 foreground, 11.74:1; 10.22:1 against #10151E | Disabled attribute and text |
Interface cues on light surfaces
A shared HEX value does not merge identity and interface roles. State meaning also requires the listed non-color cue.
| Cue | HEX | Meaning | Measured pairing | Non-color cue |
|---|---|---|---|---|
| Action | #08745F | Primary interactive action | #FFFFFF foreground, 5.72:1; 5.24:1 against #F3F5FA | A descriptive button or link label |
| Warning | #805000 | Attention or recoverable risk | #FFFFFF foreground, 6.85:1; 6.28:1 against #F3F5FA | Warning text and icon |
| Error | #A03035 | Failure or destructive action | #FFFFFF foreground, 7.07:1; 6.48:1 against #F3F5FA | Error text and icon |
| Success | #17654B | Completed operation | #FFFFFF foreground, 7.00:1; 6.42:1 against #F3F5FA | Success text and icon |
| Information | #26549B | Neutral information or help | #FFFFFF foreground, 7.44:1; 6.82:1 against #F3F5FA | Information label and icon |
| Focus | #08745F | Keyboard focus ring | #FFFFFF foreground, 5.72:1; 5.24:1 against #F3F5FA | Visible outline and keyboard focus order |
| Selection | #08745F | Selected control or item | #FFFFFF foreground, 5.72:1; 5.24:1 against #F3F5FA | Selected label or checked state |
| Disabled | #69D4BB | Unavailable control | #000000 foreground, 11.74:1; 1.64:1 against #F3F5FA | Disabled attribute and text |
Dark palette
Background
background#10151ESee more color values
- RGB
rgb(16 21 30)- HSL
hsl(218.6 30.4% 9.0%)- OKLCH
oklch(0.1950 0.0199 262.0)- Lab D50
lab(6.61% -0.20 -7.07)
CMYK: output profile required
Foreground
foregroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground, brand-cta-foreground, brand-cta-outline-foreground#FFFFFFSee more color values
- RGB
rgb(255 255 255)- HSL
hsl(0.0 0.0% 100.0%)- OKLCH
oklch(1.0000 0.0000 0.0)- Lab D50
lab(100.00% 0.00 0.00)
CMYK: output profile required
Card
cardAlso: popover, sidebar#161D29See more color values
- RGB
rgb(22 29 41)- HSL
hsl(217.9 30.2% 12.4%)- OKLCH
oklch(0.2297 0.0256 261.0)- Lab D50
lab(10.51% -0.36 -9.27)
CMYK: output profile required
Primary
primaryAlso: ring, chart-1, sidebar-primary, sidebar-ring#69D4BBSee more color values
- RGB
rgb(105 212 187)- HSL
hsl(166.0 55.4% 62.2%)- OKLCH
oklch(0.7993 0.1063 176.1)- Lab D50
lab(78.08% -36.95 2.43)
CMYK: output profile required
Primary Foreground
primary-foregroundAlso: sidebar-primary-foreground#000000See more color values
- RGB
rgb(0 0 0)- HSL
hsl(0.0 0.0% 0.0%)- OKLCH
oklch(0.0000 0.0000 0.0)- Lab D50
lab(0.00% 0.00 0.00)
CMYK: output profile required
Secondary
secondaryAlso: muted#202B3BSee more color values
- RGB
rgb(32 43 59)- HSL
hsl(215.6 29.7% 17.8%)- OKLCH
oklch(0.2864 0.0333 257.7)- Lab D50
lab(17.08% -1.06 -11.90)
CMYK: output profile required
Muted Foreground
muted-foreground#9A9A9ASee more color values
- RGB
rgb(154 154 154)- HSL
hsl(0.0 0.0% 60.4%)- OKLCH
oklch(0.6862 0.0000 0.0)- Lab D50
lab(63.60% 0.00 0.00)
CMYK: output profile required
Accent
accentAlso: sidebar-accent#2A3548See more color values
- RGB
rgb(42 53 72)- HSL
hsl(218.0 26.3% 22.4%)- OKLCH
oklch(0.3276 0.0371 261.2)- Lab D50
lab(21.80% -0.47 -13.41)
CMYK: output profile required
Destructive
destructive#F39494See more color values
- RGB
rgb(243 148 148)- HSL
hsl(0.0 79.8% 76.7%)- OKLCH
oklch(0.7648 0.1150 20.1)- Lab D50
lab(71.53% 36.67 16.11)
CMYK: output profile required
Border
borderAlso: input, sidebar-border#262626See more color values
- RGB
rgb(38 38 38)- HSL
hsl(0.0 0.0% 14.9%)- OKLCH
oklch(0.2686 0.0000 0.0)- Lab D50
lab(15.16% -0.00 0.00)
CMYK: output profile required
Chart 2
chart-2#B0C982See more color values
- RGB
rgb(176 201 130)- HSL
hsl(81.1 39.7% 64.9%)- OKLCH
oklch(0.8001 0.0983 124.4)- Lab D50
lab(77.81% -17.60 32.59)
CMYK: output profile required
Chart 3
chart-3#75CAEFSee more color values
- RGB
rgb(117 202 239)- HSL
hsl(198.2 79.2% 69.8%)- OKLCH
oklch(0.7990 0.0977 228.1)- Lab D50
lab(77.00% -19.30 -26.82)
CMYK: output profile required
Chart 4
chart-4#E5B375See more color values
- RGB
rgb(229 179 117)- HSL
hsl(33.2 68.3% 67.8%)- OKLCH
oklch(0.7987 0.0982 71.6)- Lab D50
lab(76.57% 13.29 38.84)
CMYK: output profile required
Chart 5
chart-5#B1B7FCSee more color values
- RGB
rgb(177 183 252)- HSL
hsl(235.2 92.6% 84.1%)- OKLCH
oklch(0.7998 0.0978 280.1)- Lab D50
lab(75.84% 9.37 -35.15)
CMYK: output profile required
Brand Accent Deep
brand-accent-deepAlso: brand-cta#08745FSee more color values
- RGB
rgb(8 116 95)- HSL
hsl(168.3 87.1% 24.3%)- OKLCH
oklch(0.4996 0.0931 174.0)- Lab D50
lab(43.16% -32.76 3.46)
CMYK: output profile required
Brand Emphasis
brand-emphasis#F2BE6ESee more color values
- RGB
rgb(242 190 110)- HSL
hsl(36.4 83.5% 69.0%)- OKLCH
oklch(0.8319 0.1148 76.9)- Lab D50
lab(80.52% 12.65 47.44)
CMYK: output profile required
Brand Success
brand-success#77C9A8See more color values
- RGB
rgb(119 201 168)- HSL
hsl(155.9 43.2% 62.7%)- OKLCH
oklch(0.7740 0.0943 166.3)- Lab D50
lab(75.05% -31.93 8.31)
CMYK: output profile required
Brand Information
brand-information#8EBBFFSee more color values
- RGB
rgb(142 187 255)- HSL
hsl(216.1 100.0% 77.8%)- OKLCH
oklch(0.7862 0.1089 258.4)- Lab D50
lab(74.64% -2.16 -38.84)
CMYK: output profile required
Light palette
Background
background#F3F5FASee more color values
- RGB
rgb(243 245 250)- HSL
hsl(222.9 41.2% 96.7%)- OKLCH
oklch(0.9701 0.0070 268.5)- Lab D50
lab(96.49% -0.02 -2.66)
CMYK: output profile required
Foreground
foregroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground#182137See more color values
- RGB
rgb(24 33 55)- HSL
hsl(222.6 39.2% 15.5%)- OKLCH
oklch(0.2509 0.0439 266.4)- Lab D50
lab(12.77% 1.66 -15.83)
CMYK: output profile required
Card
cardAlso: popover, primary-foreground, sidebar, sidebar-primary-foreground, brand-cta-foreground#FFFFFFSee more color values
- RGB
rgb(255 255 255)- HSL
hsl(0.0 0.0% 100.0%)- OKLCH
oklch(1.0000 0.0000 0.0)- Lab D50
lab(100.00% 0.00 0.00)
CMYK: output profile required
Primary
primaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-accent-deep, brand-cta, brand-cta-outline-foreground#08745FSee more color values
- RGB
rgb(8 116 95)- HSL
hsl(168.3 87.1% 24.3%)- OKLCH
oklch(0.4996 0.0931 174.0)- Lab D50
lab(43.16% -32.76 3.46)
CMYK: output profile required
Secondary
secondary#E8EDF7See more color values
- RGB
rgb(232 237 247)- HSL
hsl(220.0 48.4% 93.9%)- OKLCH
oklch(0.9452 0.0145 264.5)- Lab D50
lab(93.58% -0.35 -5.46)
CMYK: output profile required
Muted
mutedAlso: accent, sidebar-accent#DFE5F0See more color values
- RGB
rgb(223 229 240)- HSL
hsl(218.8 36.2% 90.8%)- OKLCH
oklch(0.9206 0.0163 262.8)- Lab D50
lab(90.72% -0.55 -6.10)
CMYK: output profile required
Muted Foreground
muted-foreground#526078See more color values
- RGB
rgb(82 96 120)- HSL
hsl(217.9 18.8% 39.6%)- OKLCH
oklch(0.4867 0.0425 261.1)- Lab D50
lab(40.25% -0.90 -15.47)
CMYK: output profile required
Destructive
destructive#A03035See more color values
- RGB
rgb(160 48 53)- HSL
hsl(357.3 53.8% 40.8%)- OKLCH
oklch(0.4797 0.1474 22.3)- Lab D50
lab(38.12% 46.95 24.79)
CMYK: output profile required
Border
borderAlso: input, sidebar-border#7B808FSee more color values
- RGB
rgb(123 128 143)- HSL
hsl(225.0 8.2% 52.2%)- OKLCH
oklch(0.6008 0.0235 271.0)- Lab D50
lab(53.54% 0.50 -8.80)
CMYK: output profile required
Chart 2
chart-2#5B6B30See more color values
- RGB
rgb(91 107 48)- HSL
hsl(76.3 38.1% 30.4%)- OKLCH
oklch(0.5004 0.0857 122.1)- Lab D50
lab(42.83% -13.72 30.49)
CMYK: output profile required
Chart 3
chart-3#1C6D88See more color values
- RGB
rgb(28 109 136)- HSL
hsl(195.0 65.9% 32.2%)- OKLCH
oklch(0.5002 0.0854 225.3)- Lab D50
lab(42.33% -17.15 -22.20)
CMYK: output profile required
Chart 4
chart-4#825A26See more color values
- RGB
rgb(130 90 38)- HSL
hsl(33.9 54.8% 32.9%)- OKLCH
oklch(0.5000 0.0857 70.5)- Lab D50
lab(41.87% 13.05 35.90)
CMYK: output profile required
Chart 5
chart-5#585E93See more color values
- RGB
rgb(88 94 147)- HSL
hsl(233.9 25.1% 46.1%)- OKLCH
oklch(0.5001 0.0846 277.9)- Lab D50
lab(41.16% 8.29 -30.29)
CMYK: output profile required
Brand Emphasis
brand-emphasis#805000See more color values
- RGB
rgb(128 80 0)- HSL
hsl(37.5 100.0% 25.1%)- OKLCH
oklch(0.4745 0.1027 70.2)- Lab D50
lab(38.82% 16.78 47.39)
CMYK: output profile required
Brand Success
brand-success#17654BSee more color values
- RGB
rgb(23 101 75)- HSL
hsl(160.0 62.9% 24.3%)- OKLCH
oklch(0.4536 0.0852 165.8)- Lab D50
lab(37.75% -29.30 7.82)
CMYK: output profile required
Brand Information
brand-information#26549BSee more color values
- RGB
rgb(38 84 155)- HSL
hsl(216.4 60.6% 37.8%)- OKLCH
oklch(0.4532 0.1264 259.0)- Lab D50
lab(35.55% 4.20 -44.18)
CMYK: output profile required
A ShruggieTech project