fix: correct brand color to official Pantone 7466 U

MarkAtwood · claude · MarkAtwood · commit 5423aba59ea8 · 2026-06-08T17:48:46.000-07:00
Updates primary teal from #1fbeca to #00B2A9 (Pantone 7466 U) across
all MkDocs skin files. This matches the official color specified in the
original 2012 logo design (CMYK 70/0/23/0).

The previous #1fbeca was close but not brand-accurate. Adds documentation
comments to all skin.css files explaining the Pantone specification.

Files updated:
- common/skin.css (shared by all manuals)
- wolfSSH/src/skin.css (English)
- wolfSSH/src-ja/skin.css (Japanese)

Coordinates with blog color fix (posts.wolfssl.com).

Co-Authored-By: Claude Sonnet 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/common/skin.css b/common/skin.css
@@ -1,29 +1,35 @@
+/* wolfSSL Brand Colors
+ * Primary Teal: #00B2A9 (PANTONE 7466 U)
+ * CMYK: 70/0/23/0 (from 2012 original logo)
+ * Previous incorrect value: #1fbeca
+ */
+
 .md-header{
     background-color: #fff;
 }
 
 .md-ellipsis{
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 1.1rem;
 }
 
 .md-ellipsis-nav {
     margin-right: 3%;
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 16px;
     width: 450px;
 }
 
 .md-ellipsis-nav a{
     color:#fff;
-    background-color: #1fbeca;
+    background-color: #00B2A9;
     padding: 6px;
     border-radius: 3.5px;
     margin-left: 3px;
 }
 
 .md-ellipsis-nav a:hover{
-    color: #1fbeca;
+    color: #00B2A9;
     background-color: #000;
 }
 
@@ -53,11 +59,11 @@
 }
 
 .md-nav__link:is(:focus, :hover){
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-nav__item .md-nav__link--active {
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-header__button.md-logo :is(img, svg){
@@ -70,7 +76,7 @@
 }
 
 .md-typeset a:hover {
-     color: #1fbeca;
+     color: #00B2A9;
 }
 
 .md-footer {
@@ -79,7 +85,7 @@
 }
 
 .md-icon svg {
-    fill: #1fbeca;
+    fill: #00B2A9;
 }
 
 .md-footer-meta {
diff --git a/wolfSSH/src-ja/skin.css b/wolfSSH/src-ja/skin.css
@@ -1,29 +1,34 @@
+/* wolfSSL Brand Colors
+ * Primary Teal: #00B2A9 (PANTONE 7466 U)
+ * CMYK: 70/0/23/0 (from 2012 original logo)
+ * Previous incorrect value: #1fbeca
+ */
 .md-header{
     background-color: #fff;
 }
 
 .md-ellipsis{
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 1.1rem;
 }
 
 .md-ellipsis-nav {
     margin-right: 3%;
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 16px;
     width: 450px;
 }
 
 .md-ellipsis-nav a{
     color:#fff;
-    background-color: #1fbeca;
+    background-color: #00B2A9;
     padding: 6px;
     border-radius: 3.5px;
     margin-left: 3px;
 }
 
 .md-ellipsis-nav a:hover{
-    color: #1fbeca;
+    color: #00B2A9;
     background-color: #000;
 }
 
@@ -53,11 +58,11 @@
 }
 
 .md-nav__link:is(:focus, :hover){
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-nav__item .md-nav__link--active {
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-header__button.md-logo :is(img, svg){
@@ -70,7 +75,7 @@
 }
 
 .md-typeset a:hover {
-     color: #1fbeca;
+     color: #00B2A9;
 }
 
 .md-footer {
@@ -79,7 +84,7 @@
 }
 
 .md-icon svg {
-    fill: #1fbeca;
+    fill: #00B2A9;
 }
 
 .md-footer-meta {
diff --git a/wolfSSH/src/skin.css b/wolfSSH/src/skin.css
@@ -1,29 +1,34 @@
+/* wolfSSL Brand Colors
+ * Primary Teal: #00B2A9 (PANTONE 7466 U)
+ * CMYK: 70/0/23/0 (from 2012 original logo)
+ * Previous incorrect value: #1fbeca
+ */
 .md-header{
     background-color: #fff;
 }
 
 .md-ellipsis{
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 1.1rem;
 }
 
 .md-ellipsis-nav {
     margin-right: 3%;
-    color: #1fbeca;
+    color: #00B2A9;
     font-size: 16px;
     width: 450px;
 }
 
 .md-ellipsis-nav a{
     color:#fff;
-    background-color: #1fbeca;
+    background-color: #00B2A9;
     padding: 6px;
     border-radius: 3.5px;
     margin-left: 3px;
 }
 
 .md-ellipsis-nav a:hover{
-    color: #1fbeca;
+    color: #00B2A9;
     background-color: #000;
 }
 
@@ -53,11 +58,11 @@
 }
 
 .md-nav__link:is(:focus, :hover){
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-nav__item .md-nav__link--active {
-    color: #1fbeca;
+    color: #00B2A9;
 }
 
 .md-header__button.md-logo :is(img, svg){
@@ -70,7 +75,7 @@
 }
 
 .md-typeset a:hover {
-     color: #1fbeca;
+     color: #00B2A9;
 }
 
 .md-footer {
@@ -79,7 +84,7 @@
 }
 
 .md-icon svg {
-    fill: #1fbeca;
+    fill: #00B2A9;
 }
 
 .md-footer-meta {

Original file line number	Diff line number	Diff line change
`@@ -1,29 +1,35 @@`
	`1`	`+/* wolfSSL Brand Colors`
	`2`	`+ * Primary Teal: #00B2A9 (PANTONE 7466 U)`
	`3`	`+ * CMYK: 70/0/23/0 (from 2012 original logo)`
	`4`	`+ * Previous incorrect value: #1fbeca`
	`5`	`+ */`
	`6`	`+`
`1`	`7`	`.md-header{`
`2`	`8`	`background-color: #fff;`
`3`	`9`	`}`
`4`	`10`
`5`	`11`	`.md-ellipsis{`
`6`		`- color: #1fbeca;`
	`12`	`+ color: #00B2A9;`
`7`	`13`	`font-size: 1.1rem;`
`8`	`14`	`}`
`9`	`15`
`10`	`16`	`.md-ellipsis-nav {`
`11`	`17`	`margin-right: 3%;`
`12`		`- color: #1fbeca;`
	`18`	`+ color: #00B2A9;`
`13`	`19`	`font-size: 16px;`
`14`	`20`	`width: 450px;`
`15`	`21`	`}`
`16`	`22`
`17`	`23`	`.md-ellipsis-nav a{`
`18`	`24`	`color:#fff;`
`19`		`- background-color: #1fbeca;`
	`25`	`+ background-color: #00B2A9;`
`20`	`26`	`padding: 6px;`
`21`	`27`	`border-radius: 3.5px;`
`22`	`28`	`margin-left: 3px;`
`23`	`29`	`}`
`24`	`30`
`25`	`31`	`.md-ellipsis-nav a:hover{`
`26`		`- color: #1fbeca;`
	`32`	`+ color: #00B2A9;`
`27`	`33`	`background-color: #000;`
`28`	`34`	`}`
`29`	`35`
`@@ -53,11 +59,11 @@`
`53`	`59`	`}`
`54`	`60`
`55`	`61`	`.md-nav__link:is(:focus, :hover){`
`56`		`- color: #1fbeca;`
	`62`	`+ color: #00B2A9;`
`57`	`63`	`}`
`58`	`64`
`59`	`65`	`.md-nav__item .md-nav__link--active {`
`60`		`- color: #1fbeca;`
	`66`	`+ color: #00B2A9;`
`61`	`67`	`}`
`62`	`68`
`63`	`69`	`.md-header__button.md-logo :is(img, svg){`
`@@ -70,7 +76,7 @@`
`70`	`76`	`}`
`71`	`77`
`72`	`78`	`.md-typeset a:hover {`
`73`		`- color: #1fbeca;`
	`79`	`+ color: #00B2A9;`
`74`	`80`	`}`
`75`	`81`
`76`	`82`	`.md-footer {`
`@@ -79,7 +85,7 @@`
`79`	`85`	`}`
`80`	`86`
`81`	`87`	`.md-icon svg {`
`82`		`- fill: #1fbeca;`
	`88`	`+ fill: #00B2A9;`
`83`	`89`	`}`
`84`	`90`
`85`	`91`	`.md-footer-meta {`
Original file line number	Diff line number	Diff line change
`@@ -1,29 +1,34 @@`
	`1`	`+/* wolfSSL Brand Colors`
	`2`	`+ * Primary Teal: #00B2A9 (PANTONE 7466 U)`
	`3`	`+ * CMYK: 70/0/23/0 (from 2012 original logo)`
	`4`	`+ * Previous incorrect value: #1fbeca`
	`5`	`+ */`
`1`	`6`	`.md-header{`
`2`	`7`	`background-color: #fff;`
`3`	`8`	`}`
`4`	`9`
`5`	`10`	`.md-ellipsis{`
`6`		`- color: #1fbeca;`
	`11`	`+ color: #00B2A9;`
`7`	`12`	`font-size: 1.1rem;`
`8`	`13`	`}`
`9`	`14`
`10`	`15`	`.md-ellipsis-nav {`
`11`	`16`	`margin-right: 3%;`
`12`		`- color: #1fbeca;`
	`17`	`+ color: #00B2A9;`
`13`	`18`	`font-size: 16px;`
`14`	`19`	`width: 450px;`
`15`	`20`	`}`
`16`	`21`
`17`	`22`	`.md-ellipsis-nav a{`
`18`	`23`	`color:#fff;`
`19`		`- background-color: #1fbeca;`
	`24`	`+ background-color: #00B2A9;`
`20`	`25`	`padding: 6px;`
`21`	`26`	`border-radius: 3.5px;`
`22`	`27`	`margin-left: 3px;`
`23`	`28`	`}`
`24`	`29`
`25`	`30`	`.md-ellipsis-nav a:hover{`
`26`		`- color: #1fbeca;`
	`31`	`+ color: #00B2A9;`
`27`	`32`	`background-color: #000;`
`28`	`33`	`}`
`29`	`34`
`@@ -53,11 +58,11 @@`
`53`	`58`	`}`
`54`	`59`
`55`	`60`	`.md-nav__link:is(:focus, :hover){`
`56`		`- color: #1fbeca;`
	`61`	`+ color: #00B2A9;`
`57`	`62`	`}`
`58`	`63`
`59`	`64`	`.md-nav__item .md-nav__link--active {`
`60`		`- color: #1fbeca;`
	`65`	`+ color: #00B2A9;`
`61`	`66`	`}`
`62`	`67`
`63`	`68`	`.md-header__button.md-logo :is(img, svg){`
`@@ -70,7 +75,7 @@`
`70`	`75`	`}`
`71`	`76`
`72`	`77`	`.md-typeset a:hover {`
`73`		`- color: #1fbeca;`
	`78`	`+ color: #00B2A9;`
`74`	`79`	`}`
`75`	`80`
`76`	`81`	`.md-footer {`
`@@ -79,7 +84,7 @@`
`79`	`84`	`}`
`80`	`85`
`81`	`86`	`.md-icon svg {`
`82`		`- fill: #1fbeca;`
	`87`	`+ fill: #00B2A9;`
`83`	`88`	`}`
`84`	`89`
`85`	`90`	`.md-footer-meta {`