LEOSCORPIOLEO SITE-WIDE UI STANDARD

Preface

Purpose & Scope

Read this first. It governs every color, font, and themed component on the site.

This is a full rewrite (2026-08-06) of a page that used to document a nine-token blue/cyan/magenta palette proposal from 2026-07-30 that was never adopted. That draft is retired — every fact below is ground-truthed against the actual live CSS, not a plan. If a rule here and the live site ever disagree, the live CSS is the bug and this document is what it should be fixed to match.

Scope

Everything on leoscorpioleo.com and every /X subpath it serves — shop, product pages, cart, checkout, account, blog, every widget and form. One WordPress + WooCommerce install, running the News25 Prime theme. All of the rules in this document are layered on top of that theme via a small set of mu-plugins (must-use plugins) rather than theme customizer settings, specifically so they survive theme updates and theme switches — see Section 0.3 for the file map.

Relationship to the Listing SOP

The Shirt Listing SOP governs product-listing content — voice, structure, the sizzle/steak arc, the exact wording recipe. This document governs the visual system everything (including that content) actually renders through — colors, type, spacing, every component. The two cross-reference each other rather than duplicate: e.g. the Listing SOP's Rule 2.6a says the Details tab must be real WooCommerce attributes; this document's Section 9.3 says what those attributes look like once rendered.

Instruction to any LLM (Large Language Model) executing this SOP

• Never hand-pick a hex value for anything on this site. Every color used anywhere must be one of the tokens in Section 1 — if the right token doesn't exist yet, that's a real gap, not license to invent a one-off color.
• Never add an inline style="color:…" (or similar) directly on a live page. Extend the shared mu-plugin CSS instead (Section 0.3) so the rule applies site-wide and survives future edits, matching how every existing rule was built.
• Check Section 0.3 for which file owns which component before editing anything — most components already have an owner; don't create a second, competing rule for something already styled.
• !important is used deliberately and often in this codebase because theme/plugin CSS loaded after the mu-plugins has repeatedly won cascade ties on unguarded rules. When adding a new rule for something the theme also touches, default to !important and say why in a comment — don't assume a bare declaration will hold.
• The live site is a single dark theme. There is no light-mode variant of leoscorpioleo.com itself — don't invent one. (This document's own reading chrome adapts to the reader's system light/dark preference, same as the Listing SOP page; that's this page's own readability feature, unrelated to the site it documents.)

Section 0

Foundations

0.1 Concept

Corroded Copper — dystopian-cyberpunk, nature-reclaims-technology. A near-black base and deep jungle-green bands, with rust and amber as the only warm accents against them. The idea the palette is built to carry: structure corrodes, signal fades, growth persists — technology decays, life finds a way regardless. It replaced an earlier "Overgrowth" system on 2026-08-03; the tiled background image asset is still literally named overgrowth-tile.jpg as a result (Section 2).

0.2 Stack

WordPress + WooCommerce. Active theme is News25 Prime — a classic PHP theme, not a block/FSE theme (confirmed: no usable template-parts/navigation-post routes). Because of that, header/footer/nav structure comes from the theme's own PHP templates, and this SOP's job is entirely the CSS layered on top, not template structure.

0.3 Where the rules actually live (implementation map)

All three are mu-plugins (must-use), not theme files or a customizer setting — they load on every request regardless of active theme, and survive theme updates/switches that would silently wipe theme-level customization. Each is enqueued with filemtime()-based cache-busting, so an FTP edit goes live immediately with no manual version bump.

Section 1

Color Tokens

Every color anywhere on the site is one of these thirteen custom properties, defined once in lsl-cyberpunk-theme.css's :root. Click any swatch to copy its hex.

Role guide

Section 2

Background Texture

Every page carries a tiled background image, overgrowth-tile.jpg, repeated at 1400px, under a flat rgba(16,19,13,.76) dark wash — painted once on html, body only. Every inner container that would otherwise paint its own background (#page, .site, #content, .news25-content, .site-content, .content-area) is forced transparent, so the tile reads as one continuous surface behind the whole page rather than restarting at every container boundary.

Header, footer, and breadcrumb deliberately opt out of the texture and use a flat --base-dark instead — chrome that needs to stay legible and structurally distinct from scrolling page content doesn't get the tile.

Section 3

Typography

3.1 Typeface & scale

Font is Poppins (weights 300–900, incl. italics), falling back to the system UI stack (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) — this is the theme's own font choice, unchanged by the color system, which only re-tints heading/body color, never font-family or size.

3.2 Body copy color override

Product/page paragraph text (.entry-content p, .wp-block-paragraph) is forced to --text-main !important for the same reason as headings — the theme's own paragraph color is near-black, correct for a light page, invisible here. The one deliberate exception: paragraphs inside the Additional Information attributes table are excluded from this blanket rule (:not(table.woocommerce-product-attributes p)) because that table needs its text color to flip per row instead — see Section 9.3.

3.3 Product description formatting

The rule that descriptions must never render smaller than the theme's normal paragraph size, and must use real <h3>/<ul><li> markup rather than bold text or bullet characters standing in for headings and lists, is a content-authoring rule, not a CSS rule — it lives in the Listing SOP as Rules 2.7 and 2.7a. This document is what those rules render through once followed correctly.

3.4 Japanese mirror text

Any element carrying the class .lsl-jp renders in --amber instead of the inherited body color — the hook bilingual listings use to make each Japanese line read as its own visual thread against the English line above it. Authoring convention for exactly how it's applied line-by-line and inside bulleted lists: Listing SOP Section 2.8.

Section 4

Global Elements

Every border, <hr>, and divider on the site uses --line — never a flat black or gray rule.

Section 5

Header & Navigation

Flat --base-dark chrome (opts out of the page texture — Section 2). All header text --text-main, hover/focus --amber-bright. The site title and tagline text are hidden site-wide on every page (logo alone carries identity, matching the homepage's original cleaner treatment). The logo itself carries a soft dual drop-shadow glow (a warm cream shadow plus an amber shadow) rather than sitting flat.

Home icon button: rust→rust-deep diagonal gradient fill (same gradient as every other CTA, Section 7), amber glow on hover. Search/nav inputs: --surface-card background. Cart-count badge: --amber circle, --base-dark number.

Header product carousel

A live bestseller carousel replaces the theme's static ad slot on every page. Each card is a flat #B5551E rust chip with warm-cream text (#F5ECDD) by default — but James's carousel script randomizes rust/amber per card at render time, so cards don't all read identically. Card contents: 64px thumbnail, product name, price.

Section 6

Breadcrumb Bar

Bar background: --deep-green. The leading "Home" pill uses the same rust→rust-deep gradient as every button and widget title bar — a recurring "gradient chip" motif, not unique to this component. Trail links: --amber, hover --amber-bright.

Section 7

Buttons & CTAs

One universal rule covers every actionable button on the site — .btn, .button, Add to Cart, the single-product Add to Cart, input[type=submit]/button[type=submit], Gutenberg's wp-block-button, Proceed to Checkout, and Place Order. There is no per-page or per-context custom button color anywhere.

Section 8

Shop Grid & Product Cards

Price colors: default --amber. Sale price: bold --rust. Original (struck-through) price: --text-muted at reduced opacity.

Section 9

Product Detail Page

9.1 Tabs (Description / Additional Information / Reviews)

--base-dark background for the whole tabs+summary area. Inactive tab label: --text-muted. Active tab and hover: --amber-bright.

9.2 Colors / Sizes variant selector

Its own small design system, deliberately namespaced under --lsl-swatch-* custom properties so it can never collide with or be overridden by the sitewide palette.

Every background/border declaration in this component carries !important — theme/plugin CSS loaded after it has repeatedly won cascade ties on unguarded rules in this exact component, so nothing here is left unguarded.

9.3 Additional Information table

Real WooCommerce product attributes, never text pasted into the Description — Listing SOP Rule 2.6a governs the authoring side. Rows alternate --rust / --amber, and text color flips per row for contrast: --text-main on rust rows, --base-dark on amber rows — including the value cell's nested <p>, which needed its own override since the sitewide body-copy rule (Section 3.2) would otherwise force it light regardless of row color.

9.4 Description body

Inherits the sitewide typography from Section 3 — no product-page-specific font rules exist. The legibility and real-markup requirements live in the Listing SOP (2.7, 2.7a) because they're authoring rules, not CSS.

Section 10

Tables

Two distinct table types exist on the site — don't conflate them when styling a third:

Section 11

Forms & Inputs

Every input, select, and textarea outside the variant-selector component (which has its own system, Section 9.2): --surface-2 background, --text-main text, --line border. Placeholder text: --text-muted.

Section 12

Cart & Checkout

Cart, checkout order-review, and cart-totals blocks: --surface-card background, --line border — the same "boxed" surface treatment as product cards and widgets, keeping every panel on the page visually related.

Section 13

Pagination

Inactive page numbers: --rust background, --amber text and border. Active/current, hover, and focus states: brighter --copper-glow background, --pale-lavender text and border — the one place either of those two tokens is used. It needs to read as unmistakably different from the resting rust/amber pairing, which is why it borrows outside the core token set rather than just brightening rust/amber further.

Section 14

Sidebar & Widgets

Widget wrapper: --surface-card. Widget title bars (Categories, Archives, "Updates," etc.): the same rust→rust-deep gradient chip as the breadcrumb "Home" pill and the header home button — one recurring motif for any titled block, not three separate decisions. Category/archive links: --text-main, hover --amber-bright; item counts: --text-muted.

Section 15

Footer

Flat --base-dark, opts out of the page texture like the header. All footer text is --text-muted — deliberately a step dimmer than body copy, since the footer is wayfinding, not content the visitor came to read. Links brighten to --amber-bright on hover/focus, same as everywhere else.

Section 16

Blog-Specific Overrides

The single-post article body (.post-content) keeps its own light background, untouched by the dark-chrome rules elsewhere on the site — so headings inside it get a forced dark color (#1B2A17, the same hex as --deep-green) instead of the sitewide --text-main, which would otherwise render near-invisible light-on-light. The Calendar widget's post-day links: --rust, bold, hover --amber-bright.

Section 17

Do / Don't

Appendix A · Reference Only — Not Part Of This System

Tsugi Grid Pattern

A reusable seamless background pattern James refers back to often for other, non-LeoScorpioLeo design work. Saved here purely as a durable reference so the spec doesn't have to be re-derived each time — it is not a site token, is not used anywhere on leoscorpioleo.com's live theme, and is exempt from Section 1's "every color is one of the thirteen tokens" rule and Section 0's "the live site is a single dark theme" rule above. Don't apply it to leoscorpioleo.com pages without being asked.

First used 2026-08-10 on leoscorpioleo.com/resume/ — a standalone static page deliberately outside this SOP's scope (see Purpose & Scope at top), so that use isn't a precedent for the main site.

Implementation — inline SVG data-URI, no image asset, no HTTP request, resolution-independent at any zoom/DPI:

.tsugi-grid-bg {
  background-color: #FAF7F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23FAF7F2'/%3E%3Crect width='60' height='6' fill='%237A5B3E'/%3E%3Ccircle cx='30' cy='15' r='3' fill='%237A5B3E'/%3E%3Ccircle cx='30' cy='30' r='3' fill='%237A5B3E'/%3E%3Ccircle cx='30' cy='45' r='3' fill='%237A5B3E'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}

Built from filled rects/circles rather than stroked lines, so the top rule and dots never clip or double at tile seams — a stroked <line> at y=0 would render half outside the viewBox.