bae color palette by s9a

<!DOCTYPE html> <html lang="en-US" class="bae-warm bae-clean"> <title>bae color palette by s9a</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="San Francisco bae color palette. Welcome to the bae."> <meta name="theme-color" content="#bae">  <meta property="og:image" content="https://user-images.githubusercontent.com/949985/46566589-3e628280-c8d6-11e8-8492-3c3fceb6ac60.png"> <meta property="og:image:alt" content="#bae"> <meta property="og:image" content="https://user-images.githubusercontent.com/949985/46566565-dca21880-c8d5-11e8-8b82-677cec7a116c.png"> <meta property="og:image:alt" content="#415"> <meta property="og:image" content="https://user-images.githubusercontent.com/949985/47358013-5c253b00-d67d-11e8-9aa6-7255e344498b.png"> <meta property="og:image:alt" content="#510"> <meta property="og:image" content="https://user-images.githubusercontent.com/949985/46566593-50442580-c8d6-11e8-956b-8d8a01bc0264.png"> <meta property="og:image:alt" content="#415 : #bae"> <meta property="og:image" content="https://user-images.githubusercontent.com/949985/47357987-457ee400-d67d-11e8-8a51-b38102c7b21c.png"> <meta property="og:image:alt" content="#bae : #510"> <link rel="icon" href= "https://user-images.githubusercontent.com/949985/46566589-3e628280-c8d6-11e8-8492-3c3fceb6ac60.png"> <link rel="stylesheet" href="bae.css"> <link rel="stylesheet" href="demo.css"> <header class="m-zero mb2"> <h1 class="m-zero pad-1 hello tight hella" id="hello"> hello <b class="block-flow accent hello">bae</b> </h1> <p class="m-zero pad-1" id="love"> <a href="https://s9a.github.io/bae">bae</a> is a lush <a href="https://contrast-ratio.com/#%23bae-on-%23415">a11y safe</a> <a href="#css">CSS color palette</a> made by <a href="https://s9a.github.io">s9a</a> to show <a href="https://github.com/s9a/bae/blob/master/LICENSE.md">universal</a> love for the <a href="#415">SF</a> bae area </header> <figure class="block-flex m-auto items-center justify-center" id="415"> <figure class="view block-flex basis-2x bae-cool m-zero items-center justify-center"> <code>#415</code> </figure> <figure class="view block-flex basis-2x bae-warm m-zero items-center justify-center"> <code>#bae</code> </figure> </figure> <aside class="m-auto pad-2 txt-right bae-swab" id="heyyyyy"> <h2 class="accent m-zero hello">heyyyyy</h2> <p class="m-zero mb1"><a href="#510">Oakland</a> is <a href="https://contrast-ratio.com/#%23bae-on-%23510">hella safe</a> too </aside> <figure class="block-flex m-auto items-center justify-center" id="510"> <figure class="view block-flex basis-2x bae-dawn m-zero items-center justify-center"> <code>#bae</code> </figure> <figure class="view block-flex basis-2x bae-dusk m-zero items-center justify-center"> <code>#510</code> </figure> </figure> <figure class="m-auto pad-1 bae-swag" id="css"> <figcaption class="m-zero mb2"> <span class="hello">10</span> <a href="https://github.com/s9a/bae#palette">flavors as CSS classes</a> </figcaption> <section aria-label="cool 隆! warm" class="pad-3 bae-cool block-flow mb2"> <code class="bae-cool m-zero pad-3 block-flow flex-auto">.bae-cool</code> <code class="bae-warm m-zero pad-3 block-flow flex-auto">.bae-warm</code> </section> <section aria-label="vine 隆! vein" class="pad-3 bae-vein block-flow mb2"> <code class="bae-vein m-zero pad-2 block-flow flex-auto">.bae-vein</code> <code class="bae-vine m-zero pad-2 block-flow flex-auto">.bae-vine</code> </section> <section aria-label="swag 隆! swab" class="pad-3 bae-swab block-flow mb2"> <code class="bae-swab m-zero pad-2 block-flow flex-auto">.bae-swab</code> <code class="bae-swag m-zero pad-2 block-flow flex-auto">.bae-swag</code> </section> <section aria-label="dawn 隆! dusk" class="pad-3 bae-dusk block-flow mb2"> <code class="bae-dusk m-zero pad-2 block-flow flex-auto">.bae-dusk</code> <code class="bae-dawn m-zero pad-2 block-flow flex-auto">.bae-dawn</code> </section> <section aria-label="gold 隆! rush" class="pad-3 bae-gold block-flow mb2"> <code class="bae-gold m-zero pad-2 block-flow flex-auto">.bae-gold</code> <code class="bae-rush m-zero pad-2 block-flow flex-auto">.bae-rush</code> </section> <section aria-label="wash 隆! wish" class="pad-3 bae-wash block-flow mb2"> <code class="bae-wash m-zero pad-2 block-flow flex-auto">.bae-wash</code> <code class="bae-wish m-zero pad-2 block-flow flex-auto">.bae-wish</code> </section> </figure> <nav class="bae-vein pad-2 tight" id="code"> <h2 class="accent m-zero mb1">--code</h2> <a class="block-table hello" href="https://github.com/s9a/bae">github</a> <a class="block-table hello" href="https://www.npmjs.com/package/@s9a/bae">npm</a> <a class="block-table hello" href="https://unpkg.com/@s9a/bae@latest/bae.css">unpkg</a> </nav> <footer class="bae-vine pad-2 tight" id="care"> <h2 class="accent m-zero mb1">++care</h2> <a class="block-table hello" href="https://www.patreon.com/s9a/overview" target="_blank" rel="noopener">patreon</a> <a class="block-table hello" href="https://github.com/s9a/bae/stargazers" target="_blank" rel="noopener">star</a> <a class="block-table hello" href="https://twitter.com/intent/retweet?tweet_id=1048405885423218689" target="_blank" rel="noopener">tweet</a> </footer> <figure class="m-zero pad-1 bae-dawn" id="change"> <p class="hello tight"> <em class="accent hello"><a href="https://s9a.github.io/bae">bae</a></em> <br>the change <br>you want <br>to see <br>in this <br>www </figure>

CINXE.COM

bae color palette by s9a