Brand guidelines

Unofficial automation for ESO

Cross-platform desktop companion for The Elder Scrolls Online

Colour

Identity accent

Hue 181.9 in OKLCH. 28.9 degrees clear of the nearest sibling identity accent.

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
#0E1116
rgb(14 17 22)
hsl(217.5 22.2% 7.1%)
oklch(0.1767 0.0114 260.6)
lab(4.95% -0.26 -3.42) (D50)

CMYK: output profile required

foreground, card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-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

Color values
#171C24
rgb(23 28 36)
hsl(216.9 22.0% 11.6%)
oklch(0.2250 0.0174 259.7)
lab(10.03% -0.57 -6.32) (D50)

CMYK: output profile required

popover, sidebar

Color values
#0A0D12
rgb(10 13 18)
hsl(217.5 28.6% 5.5%)
oklch(0.1582 0.0118 260.6)
lab(3.55% -0.19 -2.85) (D50)

CMYK: output profile required

primary, ring, sidebar-primary, sidebar-ring, brand-emphasis

Color values
#2DD4BF
rgb(45 212 191)
hsl(172.5 66.0% 50.4%)
oklch(0.7845 0.1325 181.9)
lab(76.64% -46.24 -2.00) (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
#1D2430
rgb(29 36 48)
hsl(217.9 24.7% 15.1%)
oklch(0.2591 0.0249 261.1)
lab(13.93% -0.46 -9.03) (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
#252E3B
rgb(37 46 59)
hsl(215.5 22.9% 18.8%)
oklch(0.2985 0.0268 257.5)
lab(18.52% -1.11 -9.66) (D50)

CMYK: output profile required

destructive

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

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-1

Color values
#00B09E
rgb(0 176 158)
hsl(173.9 100.0% 34.5%)
oklch(0.6795 0.1216 182.2)
lab(64.32% -42.48 -2.06) (D50)

CMYK: output profile required

chart-2

Color values
#7FA752
rgb(127 167 82)
hsl(88.2 34.1% 48.8%)
oklch(0.6796 0.1224 129.9)
lab(64.11% -25.02 38.91) (D50)

CMYK: output profile required

chart-3

Color values
#38A4D8
rgb(56 164 216)
hsl(199.5 67.2% 53.3%)
oklch(0.6805 0.1224 233.9)
lab(63.06% -18.38 -35.93) (D50)

CMYK: output profile required

chart-4

Color values
#C18E33
rgb(193 142 51)
hsl(38.5 58.2% 47.8%)
oklch(0.6802 0.1215 78.2)
lab(62.89% 13.69 53.80) (D50)

CMYK: output profile required

chart-5

Color values
#928CE0
rgb(146 140 224)
hsl(244.3 57.5% 71.4%)
oklch(0.6796 0.1223 285.9)
lab(61.41% 17.14 -42.48) (D50)

CMYK: output profile required

brand-accent-deep

Color values
#F2B03C
rgb(242 176 60)
hsl(38.2 87.5% 59.2%)
oklch(0.8002 0.1471 77.3)
lab(76.77% 17.49 65.55) (D50)

CMYK: output profile required

brand-cta

Color values
#986000
rgb(152 96 0)
hsl(37.9 100.0% 29.8%)
oklch(0.5379 0.1163 70.3)
lab(46.14% 18.95 53.71) (D50)

CMYK: output profile required

Light palette

background

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

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

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

card, popover, primary-foreground, sidebar, sidebar-primary-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-emphasis, brand-cta

Color values
#986000
rgb(152 96 0)
hsl(37.9 100.0% 29.8%)
oklch(0.5379 0.1163 70.3)
lab(46.14% 18.95 53.71) (D50)

CMYK: output profile required

secondary, muted, accent, sidebar-accent

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

muted-foreground

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

destructive

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

border, input, sidebar-border

Color values
#E5E5E5
rgb(229 229 229)
hsl(0.0 0.0% 89.8%)
oklch(0.9219 0.0000 0.0)
lab(90.94% 0.00 0.00) (D50)

CMYK: output profile required

chart-2

Color values
#A35256
rgb(163 82 86)
hsl(357.0 33.1% 48.0%)
oklch(0.5383 0.1070 18.2)
lab(45.31% 34.42 13.92) (D50)

CMYK: output profile required

chart-3

Color values
#637829
rgb(99 120 41)
hsl(75.9 49.1% 31.6%)
oklch(0.5387 0.1076 122.7)
lab(47.46% -17.22 39.14) (D50)

CMYK: output profile required

chart-4

Color values
#8E578F
rgb(142 87 143)
hsl(298.9 24.3% 45.1%)
oklch(0.5389 0.1063 326.3)
lab(44.96% 30.18 -21.47) (D50)

CMYK: output profile required

chart-5

Color values
#00816A
rgb(0 129 106)
hsl(169.3 100.0% 25.3%)
oklch(0.5383 0.1021 174.4)
lab(47.77% -35.96 3.54) (D50)

CMYK: output profile required

brand-accent-deep

Color values
#F2B03C
rgb(242 176 60)
hsl(38.2 87.5% 59.2%)
oklch(0.8002 0.1471 77.3)
lab(76.77% 17.49 65.55) (D50)

CMYK: output profile required

Light surfaces

The bright accent #2DD4BF measures 1.75:1 on the light reading surface and is never text there. The light block substitutes #986000 at 4.93:1. The legal foreground on an accent fill is #000000 at 11.28:1.

Theme reference

Dark and light examples

Chart colors serve data visualization. Brand applications use the identity accent and the neutral surfaces. Each chart color is derived from the accent, clears 4.5:1 on its surface, and remains separate from warning and failure states.

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

Inter, Inter, Geist Mono

Display
Heading

Body in Inter at 400. Approved weights are display 500, 600, 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

Canvas 100 × 100 units, clear space 8 units (12.7 percent of artwork width). Below 32 px the reduced master takes over.

Fixed lockup proportions

lockupmark heightgapalignment
horizontal160 units34 unitsoptical center
stacked1.70C0.45Ccentered 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.

Icon Android Adaptive Background Metadata

Dark surface
Container asset

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.

Icon Android Adaptive Declaration Metadata

Dark surface
Container asset

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.

Icon Android Adaptive Foreground Full

Dark surfaceESO Weave Icon Android Adaptive Foreground Full 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.

Icon Android Adaptive Monochrome Monochrome

Dark surfaceESO Weave Icon Android Adaptive Monochrome 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.

Icon Android Color Resource Metadata

Dark surface
Container asset

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.

Icon Android Legacy Launcher Full

Dark surfaceESO Weave Icon Android Legacy Launcher Full 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.

Icon Android Platform Manifest Metadata

Dark surface
Container asset

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.

Icon Android Play Store Full

Dark surfaceESO Weave Icon Android Play Store Full 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.

Icon Apple Ios App Icon Full

Dark surfaceESO Weave Icon Apple Ios App Icon Full 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.

Icon Apple Ios Asset Catalog Metadata

Dark surface
Container asset

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.

Icon Apple Ios Platform Manifest Metadata

Dark surface
Container asset

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.

Icon Apple Macos App Icon Full

Dark surfaceESO Weave Icon Apple Macos App Icon Full 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.

Icon Apple Macos Asset Catalog Metadata

Dark surface
Container asset

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.

Icon Apple Macos Icns Full

Dark surface
Container asset

Use the declared icns form on compatible backgrounds. Use the declared container or vector at its listed destination. Preserve declared plate and transparency behavior.

  • icons/apple/macos/AppIcon.icnsicns · embedded: 16 × 16, 32 × 32, 64 × 64, 128 × 128, 256 × 256, 512 × 512, 1024 × 1024 · ICNS · macOS application bundle

Icon Apple Macos Platform Manifest Metadata

Dark surface
Container asset

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.

Icon Web Favicon Ico Mixed

Dark surface
Container asset

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.

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

Icon Web Icon Index Metadata

Dark surface
Container asset

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.

Icon Web Platform Manifest Metadata

Dark surface
Container asset

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.

Icon Web Web Icon Full

Dark surfaceESO Weave Icon Web Web Icon Full 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.

Icon Web Web Icon Reduced

Dark surfaceESO Weave Icon Web Web Icon Reduced 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.

Icon Web Web Manifest Metadata

Dark surface
Container asset

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.

Icon Windows Classic Ico Mixed

Dark surface
Container asset

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.

  • icons/windows/classic/app.icoclassic-ico · embedded: 16 × 16, 24 × 24, 32 × 32, 48 × 48, 64 × 64, 128 × 128, 256 × 256 · ICO · Win32 application

Icon Windows Manifest Fragment Metadata

Dark surface
Container asset

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.

Icon Windows Msix Scale Full

Dark surfaceESO Weave Icon Windows Msix Scale Full 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.

Icon Windows Platform Manifest Metadata

Dark surface
Container asset

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.

Icon Windows Target Size Dark Unplated Full

Dark surfaceESO Weave Icon Windows Target Size Dark Unplated Full 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.

Icon Windows Target Size Dark Unplated Reduced

Dark surfaceESO Weave Icon Windows Target Size Dark Unplated Reduced 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.

Icon Windows Target Size Full

Dark surfaceESO Weave Icon Windows Target Size Full 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.

Icon Windows Target Size Reduced

Dark surfaceESO Weave Icon Windows Target Size Reduced 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.

Icon Windows Target Size Light Unplated Full

Light surfaceESO Weave Icon Windows Target Size Light Unplated Full 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.

Icon Windows Target Size Light Unplated Reduced

Light surfaceESO Weave Icon Windows Target Size Light Unplated Reduced 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.

Logo Identity Lockup Black Lockup Black

Light surfaceESO Weave Logo Identity Lockup Black Lockup Black 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.

Logo Identity Lockup White Lockup White

Dark surfaceESO Weave Logo Identity Lockup White Lockup White 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.

Logo Identity Lockup Full Color Lockup Color Full

Dark surfaceESO Weave Logo Identity Lockup Full Color Lockup Color Full 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.

Logo Identity Lockup Reduced Light Lockup Light Reduced

Light surfaceESO Weave Logo Identity Lockup Reduced Light Lockup Light Reduced 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.

Logo Identity Mark Black Mark Black

Light surfaceESO Weave Logo Identity Mark Black Mark Black 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.

Logo Identity Mark White Mark White

Dark surfaceESO Weave Logo Identity Mark White Mark White 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.

Logo Identity Mark Full Color Mark Color Full

Dark surfaceESO Weave Logo Identity Mark Full Color Mark Color Full 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.

Logo Identity Mark Reduced Light Mark Light Reduced

Light surfaceESO Weave Logo Identity Mark Reduced Light Mark Light Reduced 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.

Logo Identity Wordmark Black Wordmark Black

Light surfaceESO Weave Logo Identity Wordmark Black Wordmark Black 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.

Logo Identity Wordmark Color Wordmark Color

Dark surfaceESO Weave Logo Identity Wordmark Color Wordmark Color 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.

Logo Identity Wordmark Light Wordmark Light

Light surfaceESO Weave Logo Identity Wordmark Light Wordmark Light 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.

Logo Identity Wordmark White Wordmark White

Dark surfaceESO Weave Logo Identity Wordmark White Wordmark White 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.

Third-party boundary

Vendor and trademark notice

ESO Weave is an independent third-party project and is not affiliated with, endorsed by, maintained by, or supported by ZeniMax Online Studios, ZeniMax Media Inc., Bethesda Softworks, or Microsoft. The Elder Scrolls and related marks are property of ZeniMax Media Inc. Users are responsible for applicable terms and consequences.

Brand system by ShruggieTech