`index.html`

212 lines
<!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>