Skip to content

fix(docs): correct brand teal to #89D3CF per guidelines v1.1 - #181

Merged
megheaiulian merged 1 commit into
mainfrom
docs/teal-correction
Sep 2, 2026
Merged

megheaiulian merged 1 commit into
mainfrom
docs/teal-correction

Conversation

@megheaiulian

Copy link
Copy Markdown
Contributor

Summary

Follow-up to #176. Simon (designer) confirmed in the design thread that the correct brand teal is #89D3CF — the #9AD1CE in guidelines v1.0 came from broken Illustrator colour settings, and the SVG assets (which use #89D3CF) were correct all along. He re-issued the guidelines as v1.1 (1 Sep) with #89D3CF.

This resolves the open note in #176 ("pending confirmation from the designer").

Changes

  • theme.css:
    • Dark accent #89D3CF (~10.9:1 on navy), accent tokens re-derived at the teal's exact hue/sat (hsl(177, 46%))
    • Light-mode AA accent recalculated to hsl(177, 46%, 31%) (5.5:1 on white — WCAG AA)
    • accent-color: var(--sl-color-accent) on :root so native controls (checkboxes, radios, progress bars) match the brand
  • SVGs: logo.svg, icon.svg, favicon.svg#9ad1ce#89d3cf
  • Rasters re-rendered: favicon.png (32px), apple-touch-icon.png (180px), og.png (1200×630) from the confirmed source SVGs (OG_Dark.svg already used #89D3CF natively)

Verification

  • npm run build — 22 pages, no errors
  • No residual #9ad1ce in built output (SVG/HTML/CSS grep)
  • Playwright check: computed --sl-color-accent is exactly #89d3cf (dark) and #2b7370 (light); per-theme logo swap intact; no visual regressions

Designer confirmed the flaw in guidelines v1.0 (#9AD1CE came from
broken Illustrator colour settings; #89D3CF in the shipped SVGs was
correct all along). Guidelines v1.1 re-issued 1 Sep with #89D3CF.

- Theme: dark accent #89D3CF (10.9:1 on navy), accent tokens
  re-derived at the teal's exact hsl(177, 46%); light-mode AA accent
  recalculated to hsl(177, 46%, 31%) (5.5:1 on white)
- Set accent-color on :root so native controls (checkboxes, radios,
  progress bars) use the brand teal
- logo.svg, icon.svg, favicon.svg + rendered favicon.png,
  apple-touch-icon.png, og.png re-rendered from the now-confirmed
  source SVGs (OG_Dark.svg already used #89D3CF natively)
@netlify

netlify Bot commented Sep 2, 2026

Copy link
Copy Markdown

Deploy Preview for pionjs ready!

Name Link
🔨 Latest commit d172f00
🔍 Latest deploy log https://app.netlify.com/projects/pionjs/deploys/6a97d2aa7d09fa00083abea9
😎 Deploy Preview https://deploy-preview-181--pionjs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@changeset-bot

changeset-bot Bot commented Sep 2, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: d172f00

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@megheaiulian
megheaiulian merged commit 6196654 into main Sep 2, 2026
8 checks passed
@megheaiulian
megheaiulian deleted the docs/teal-correction branch September 2, 2026 09:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants