Skip to content
Library

Opal Electronics. Prototypes on a glass table, a yellow button in the dark.

  • Brand
  • Mixed theme
  • 15 colors
  • 3 typefaces

Opal Electronics opens on a single letter set over film: an overhead 2160p loop of hands arranging cameras, circuit boards and prototypes on a table, with a 400px column of white Die Grotesk C running down its centre at 23.3px. The film falls away into Void #000000, where the last line, See you soon, is the one touch of Signal Yellow #ffdb01 and a pointer-lit dot-matrix wordmark fills the footer. Its other routes split in tone: Jobs stays black with #7c7c7c text and an 80px/700 title, while Composer and Dr. Opal go light, with glossy yellow 3D objects and bolted white instrument panels. Depth is reserved for those panels; the editorial pages are flat.

Screenshot of Opal Electronics
Captured from op.al on November 5, 2026

Opal Electronics design system

Opal Electronics

Brand1

  • The Allow Connection fill and the See you soon sign-off — the site's --color-opal-yellow-digital, used in tiny doses

Accent2

  • The 1px edge around the yellow Allow Connection button, which gives the fill a pressed-hardware rim

  • The 3px rule on Composer release-note notice blocks, a dulled echo of the yellow on white

Neutrals12

  • Footer, Jobs canvas, the fade under the table film, and Download button fills on light routes

  • Manifesto text on film, Apply button fill, and the Composer and Dr. Opal panels

  • Full-bleed canvas behind the Composer hero, the seamless backdrop for its glossy 3D objects

  • Instrument badges and the Copy button on Dr. Opal, one step off the white panel

  • Role and section headings on the black Jobs route, the job-listing-title token, softer than white

  • Body copy on the black Jobs page, deliberately low in contrast beneath its bright headings

  • Composer release-note items and the opal-grey2 token, used for almost all long-form text on white

  • The huge idle temperature digits on Dr. Opal, nearly white on white, like an unlit display segment

  • The 12px macOS requirement line under the Composer hero, one step darker than the release notes

  • All rights reserved in the footer and other fine print, the footer-subtle token

  • Composer dividers and the uppercase labels on inactive Dr. Opal instrument badges

  • The row of 8px sprocket squares on the Jobs page, barely visible against Void like tractor-feed paper

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Void on Signal Yellow

15.39 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.