← back to Wallco Ai
add Beverly Hills palette style-guide page to admin styleguides (linked from Brand Selector)
027cb79552a4380dd46601b56681ce73d2502ad3 · 2026-06-01 16:23:49 -0700 · Steve Abrams
Files touched
A public/admin/styleguide-beverly-hills.htmlM public/admin/styleguides.html
Diff
commit 027cb79552a4380dd46601b56681ce73d2502ad3
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 1 16:23:49 2026 -0700
add Beverly Hills palette style-guide page to admin styleguides (linked from Brand Selector)
---
public/admin/styleguide-beverly-hills.html | 211 +++++++++++++++++++++++++++++
public/admin/styleguides.html | 1 +
2 files changed, 212 insertions(+)
diff --git a/public/admin/styleguide-beverly-hills.html b/public/admin/styleguide-beverly-hills.html
new file mode 100644
index 0000000..1740f1a
--- /dev/null
+++ b/public/admin/styleguide-beverly-hills.html
@@ -0,0 +1,211 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>DW Style Guides — Beverly Hills · Sunshine Pastels & Pinks</title>
+<style>
+ :root{
+ --ink:#1c1a17; --ink-soft:#5b554c; --ink-faint:#938b7d;
+ --bg:#f6f3 ee; --bg:#f7f4ef; --card:#fffdf9; --line:#e7e1d6;
+ --serif:'Playfair Display',Didot,Georgia,serif;
+ --sans:-apple-system,'Inter',system-ui,Helvetica,Arial,sans-serif;
+ }
+ *{box-sizing:border-box}
+ body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans)}
+ header.top{padding:56px 32px 24px;max-width:1100px;margin:0 auto}
+ h1{font:300 44px/1.05 var(--serif);margin:0 0 8px;letter-spacing:-.01em}
+ .sub{color:var(--ink-soft);font-size:16px;max-width:760px}
+ .note{margin:18px 0 0;padding:12px 16px;border-left:3px solid #c9a14b;background:#fbf6e9;
+ color:#6b5a2a;font-size:13px;border-radius:0 6px 6px 0;max-width:760px}
+ main{max-width:1100px;margin:0 auto;padding:8px 32px 80px}
+ section{margin:48px 0 0}
+ h2{font:300 30px/1.1 var(--serif);margin:0 0 4px}
+ h2 .em{font-style:italic;color:#b06a78}
+ .lede{color:var(--ink-soft);max-width:760px;margin:0 0 22px}
+ h3{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
+ margin:34px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
+ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
+ .sw{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
+ .chip{height:96px;display:block}
+ .meta{padding:10px 12px}
+ .nm{font-weight:600;font-size:13.5px;letter-spacing:.01em}
+ .hex{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-soft);margin-top:2px;cursor:copy}
+ .role{font-size:11.5px;color:var(--ink-faint);margin-top:5px;line-height:1.4}
+ .ratio{display:flex;height:40px;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin:6px 0 2px}
+ .ratio span{display:block}
+ .ratiowrap{max-width:760px;margin:0 0 6px}
+ .ratiolbl{font-size:11.5px;color:var(--ink-faint);display:flex;justify-content:space-between;max-width:760px}
+ .pairs{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
+ .pair{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
+ .pair i{width:34px;height:34px;display:block}
+ .usage{max-width:760px;color:var(--ink-soft);font-size:14px}
+ .usage li{margin:4px 0}
+ footer{max-width:1100px;margin:0 auto;padding:0 32px 60px;color:var(--ink-faint);font-size:12px}
+ code{font:12px ui-monospace,Menlo,monospace;background:#efeae1;padding:1px 6px;border-radius:4px;color:#5b554c}
+</style>
+</head>
+<body>
+<header class="top">
+ <h1>Designer Wallcoverings — Style Guides</h1>
+ <p class="sub">Two working palettes for the Los Angeles / Beverly Hills sunshine lines: a luxury California
+ <strong>Beverly Hills</strong> palette and a soft <strong>Sunshine Pastels & Pinks</strong> palette.
+ Hex values, roles, 60-30-10 ratios, and pairings. Click any hex to copy.</p>
+ <div class="note"><strong>Provenance:</strong> these are a <em>researched</em> Beverly Hills + sunshine-pastel palette.
+ The <code>info@designerwallcoverings</code> Google Drive (the canonical BH style-guide source) was not reachable
+ this session — once it's connected, swap in those exact hexes and this doc updates in place.</div>
+</header>
+
+<main>
+
+<!-- ───────────────────────── BEVERLY HILLS ───────────────────────── -->
+<section id="beverly-hills">
+ <h2>Beverly Hills <span class="em">— California luxury sunshine</span></h2>
+ <p class="lede">Warm stucco neutrals, garden greens, and bougainvillea-and-sunset accents, grounded by
+ black-tie noir and soft metals. The feel of a Trousdale terrace at golden hour: bright, moneyed, sun-bleached, lush.</p>
+
+ <div class="ratiowrap">
+ <div class="ratio" title="60-30-10">
+ <span style="background:#F3EDE1;width:60%"></span>
+ <span style="background:#C9B79C;width:30%"></span>
+ <span style="background:#D98C8C;width:10%"></span>
+ </div>
+ <div class="ratiolbl"><span>60% — stucco/marble neutral ground</span><span>30% — sand/garden mid-tone</span><span>10% — bougainvillea/sunset accent</span></div>
+ </div>
+
+ <h3>Neutrals — Stucco & Marble</h3>
+ <div class="grid" id="bh-neutrals"></div>
+
+ <h3>Garden Greens</h3>
+ <div class="grid" id="bh-greens"></div>
+
+ <h3>Sunset, Bougainvillea & Bloom</h3>
+ <div class="grid" id="bh-blooms"></div>
+
+ <h3>Sky & Pacific</h3>
+ <div class="grid" id="bh-sky"></div>
+
+ <h3>Metals & Noir</h3>
+ <div class="grid" id="bh-metal"></div>
+
+ <h3>Signature pairings</h3>
+ <div class="pairs" id="bh-pairs"></div>
+
+ <h3>Usage</h3>
+ <ul class="usage">
+ <li><strong>Ground</strong> in stucco/marble neutrals; let one garden green carry the mid-tone.</li>
+ <li><strong>Accent</strong> sparingly with bougainvillea magenta or sunset coral — one hero accent per surface.</li>
+ <li><strong>Noir + brass</strong> for the "black-tie" trim: thin rules, wordmarks, hardware.</li>
+ <li>Keep saturation sun-bleached, never neon — these are aged, slightly-grayed pigments.</li>
+ </ul>
+</section>
+
+<!-- ───────────────────── SUNSHINE PASTELS & PINKS ───────────────────── -->
+<section id="sunshine-pastels">
+ <h2>Sunshine Pastels <span class="em">& Pinks</span></h2>
+ <p class="lede">A soft, high-key companion palette — blush, peach, butter and mint under a wide California sky.
+ Low saturation, high value, gentle contrast. Pairs with the Beverly Hills neutrals for a lighter, dreamier register.</p>
+
+ <div class="ratiowrap">
+ <div class="ratio" title="60-30-10">
+ <span style="background:#FBF1E9;width:60%"></span>
+ <span style="background:#F7CBD6;width:30%"></span>
+ <span style="background:#F4A98F;width:10%"></span>
+ </div>
+ <div class="ratiolbl"><span>60% — cream/blush ground</span><span>30% — rose/petal mid</span><span>10% — coral/apricot pop</span></div>
+ </div>
+
+ <h3>Pinks & Roses</h3>
+ <div class="grid" id="sp-pinks"></div>
+
+ <h3>Sun & Peach</h3>
+ <div class="grid" id="sp-sun"></div>
+
+ <h3>Cool Pastels</h3>
+ <div class="grid" id="sp-cool"></div>
+
+ <h3>Signature pairings</h3>
+ <div class="pairs" id="sp-pairs"></div>
+
+ <h3>Usage</h3>
+ <ul class="usage">
+ <li>Stay <strong>high-key</strong>: value contrast carries the design, not saturation.</li>
+ <li>Use <strong>one</strong> warm pink + <strong>one</strong> cool pastel per composition; let cream do the rest.</li>
+ <li>Coral & apricot are the only "pops" — treat like the 10% accent.</li>
+ <li>Bridges cleanly to Beverly Hills via shared cream grounds & blush/bougainvillea pinks.</li>
+ </ul>
+</section>
+
+</main>
+<footer>Designer Wallcoverings · style guides · researched palette pending <code>info@designerwallcoverings</code> Drive reconciliation</footer>
+
+<script>
+const PAL = {
+ 'bh-neutrals':[
+ ['Stucco Cream','#F3EDE1','Primary ground — sun-warmed plaster'],
+ ['Marble White','#FBFAF6','Lightest field, gallery walls'],
+ ['Sand','#E4D6BF','Soft mid neutral, matting'],
+ ['Travertine','#D8C7A8','Warm stone, paving, frames'],
+ ['Greige','#C9B79C','30% mid-tone workhorse'],
+ ['Oat Linen','#EDE3D0','Upholstery neutral'],
+ ],
+ 'bh-greens':[
+ ['Hedge Green','#3E4A38','Boxwood / privet, deep accent'],
+ ['Palm','#5E7150','Frond green, mid'],
+ ['Olive Leaf','#8C9472','Dusty garden green'],
+ ['Eucalyptus','#A9B6A0','Soft sage, large fields'],
+ ['Cypress','#2C3A30','Near-noir green, trim'],
+ ],
+ 'bh-blooms':[
+ ['Bougainvillea','#C2417B','Signature magenta accent (10%)'],
+ ['Sunset Coral','#E3795F','Golden-hour pop'],
+ ['Blush Stucco','#E8B7AC','Soft pink plaster'],
+ ['Apricot','#E8A06A','Warm bloom'],
+ ['Jacaranda','#7C6FA6','Spring-tree violet'],
+ ['Hibiscus Red','#B23B3B','Deep saturated bloom, sparing'],
+ ],
+ 'bh-sky':[
+ ['Pacific Blue','#4E7C93','Ocean / pool, cool accent'],
+ ['Sky','#A9C6D4','Wide daytime sky'],
+ ['Dawn Aqua','#CFE0DC','Palest water'],
+ ],
+ 'bh-metal':[
+ ['Brass','#B08D3F','Hardware, hairlines, wordmark'],
+ ['Champagne Gold','#CBB179','Soft metal highlight'],
+ ['Noir','#15140F','Black-tie trim, type'],
+ ['Charcoal','#3A352E','Soft black alternative'],
+ ],
+ 'sp-pinks':[
+ ['Blush','#F7DCE0','Primary soft pink ground'],
+ ['Rose Quartz','#F2C2CE','Petal mid-tone'],
+ ['Bubblegum','#F4A9C0','Brighter pink, sparing'],
+ ['Powder Pink','#FBE7EC','Palest pink field'],
+ ['Dusty Rose','#D69AA4','Grayed romantic pink'],
+ ],
+ 'sp-sun':[
+ ['Butter','#F7E7A8','Soft sunshine yellow'],
+ ['Peach','#F8CDA9','Warm peach field'],
+ ['Apricot Pop','#F4A98F','10% coral accent'],
+ ['Cream','#FBF1E9','Neutral ground'],
+ ],
+ 'sp-cool':[
+ ['Mint','#CDE7D2','Cool pastel green'],
+ ['Sky Pastel','#CFE2EF','Soft blue'],
+ ['Lavender','#DDD2EC','Pastel violet'],
+ ['Seafoam','#D6EBE3','Palest aqua'],
+ ],
+};
+const PAIRS = {
+ 'bh-pairs':[['#F3EDE1','#3E4A38','#C2417B'],['#FBFAF6','#15140F','#B08D3F'],['#E4D6BF','#5E7150','#E3795F'],['#A9C6D4','#FBFAF6','#B08D3F'],['#E8B7AC','#3E4A38','#CBB179']],
+ 'sp-pairs':[['#FBF1E9','#F7DCE0','#F4A98F'],['#F2C2CE','#CDE7D2','#FBF1E9'],['#F7E7A8','#F8CDA9','#D69AA4'],['#CFE2EF','#F7DCE0','#FBFAF6']],
+};
+function chips(id){const el=document.getElementById(id);if(!el)return;el.innerHTML=PAL[id].map(([nm,hex,role])=>
+ `<div class="sw"><span class="chip" style="background:${hex}"></span><div class="meta"><div class="nm">${nm}</div>`+
+ `<div class="hex" onclick="navigator.clipboard&&navigator.clipboard.writeText('${hex}')" title="click to copy">${hex}</div>`+
+ `<div class="role">${role}</div></div></div>`).join('');}
+Object.keys(PAL).forEach(chips);
+Object.entries(PAIRS).forEach(([id,rows])=>{const el=document.getElementById(id);if(!el)return;
+ el.innerHTML=rows.map(r=>`<div class="pair">${r.map(h=>`<i style="background:${h}"></i>`).join('')}</div>`).join('');});
+</script>
+</body>
+</html>
diff --git a/public/admin/styleguides.html b/public/admin/styleguides.html
index 4071f14..e68bf26 100644
--- a/public/admin/styleguides.html
+++ b/public/admin/styleguides.html
@@ -127,6 +127,7 @@
<div>
<h1>Brand Selector</h1>
<div class="lede">Pick the houses that source the next generative build · Top 20 fashion · Top 10 wallcovering</div>
+ <a class="ctl gold" href="/admin/styleguide-beverly-hills.html" style="margin-top:10px;display:inline-block;text-decoration:none">↗ Beverly Hills Palette</a>
</div>
<div class="counts">
<div class="c"><div class="n" id="cnt-fashion">20</div><div class="l">Fashion</div></div>
← d0e305b deploy: ship generate_designs.js + generator_tick.js in 2d r
·
back to Wallco Ai
·
elements admin: click element image to use it in a new patte de244a8 →