DW style guides: Beverly Hills + Sunshine Pastels & Pinks (researched palette, pending info@ Drive reconciliation)

40acb3a59e100e50a363297cc8ca02b4d5646054 · 2026-06-01 16:07:29 -0700 · SteveStudio2
Files touched

A .gitignore
A index.html
Diff

commit 40acb3a59e100e50a363297cc8ca02b4d5646054
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date:   Mon Jun 1 16:07:29 2026 -0700

    DW style guides: Beverly Hills + Sunshine Pastels & Pinks (researched palette, pending info@ Drive reconciliation)
---
 .gitignore |   5 ++
 index.html | 211 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 216 insertions(+)

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b38eead
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.env*
+*.log
+.DS_Store
+tmp/
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1740f1a
--- /dev/null
+++ b/index.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 &amp; 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 &amp; 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 &amp; Marble</h3>
+  <div class="grid" id="bh-neutrals"></div>
+
+  <h3>Garden Greens</h3>
+  <div class="grid" id="bh-greens"></div>
+
+  <h3>Sunset, Bougainvillea &amp; Bloom</h3>
+  <div class="grid" id="bh-blooms"></div>
+
+  <h3>Sky &amp; Pacific</h3>
+  <div class="grid" id="bh-sky"></div>
+
+  <h3>Metals &amp; 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">&amp; 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 &amp; Roses</h3>
+  <div class="grid" id="sp-pinks"></div>
+
+  <h3>Sun &amp; 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 &amp; apricot are the only "pops" — treat like the 10% accent.</li>
+    <li>Bridges cleanly to Beverly Hills via shared cream grounds &amp; 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>
(oldest) · back to Dw Style Guides · (newest)