bobyuxinyang
/
lessncomos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Less and Cosmos Visual Identity</title>
  <style>
    :root {
      --absolute-void: #0B0C10;
      --muted-nebula: #1F2833;
      --cosmos-white: #F5F5F7;
      --mercury-silver: #C5C6C7;
      --spark-gold: #E6C687;
      --page-bg: #0B0C10;
      --page-fg: #F5F5F7;
      --page-muted: #C5C6C7;
      --panel-bg: rgba(31, 40, 51, 0.46);
      --panel-border: rgba(197, 198, 199, 0.16);
      --meta-border: rgba(197, 198, 199, 0.12);
      --light-stage: #F5F5F7;
      --light-grid: rgba(11, 12, 16, 0.07);
    }

    [data-theme="light"] {
      --page-bg: #F5F5F7;
      --page-fg: #0B0C10;
      --page-muted: #59616A;
      --panel-bg: #FFFFFF;
      --panel-border: rgba(31, 40, 51, 0.14);
      --meta-border: rgba(31, 40, 51, 0.1);
      --light-stage: #F5F5F7;
      --light-grid: rgba(31, 40, 51, 0.08);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--page-fg);
      background: var(--page-bg);
      font-family: Inter, "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
      transition: background 180ms ease, color 180ms ease;
    }

    main {
      width: min(1120px, calc(100vw - 48px));
      margin: 0 auto;
      padding: 64px 0;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 32px;
    }

    .brand-kicker {
      margin: 0;
      color: var(--page-muted);
      font-size: 12px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .theme-toggle {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
      padding: 3px;
      border: 1px solid var(--panel-border);
      background: var(--panel-bg);
    }

    .theme-toggle button {
      min-width: 72px;
      min-height: 32px;
      border: 0;
      color: var(--page-muted);
      background: transparent;
      font: inherit;
      font-size: 12px;
      letter-spacing: 0.08em;
      cursor: pointer;
    }

    .theme-toggle button[aria-pressed="true"] {
      color: var(--cosmos-white);
      background: var(--absolute-void);
    }

    [data-theme="dark"] .theme-toggle button[aria-pressed="true"] {
      color: var(--absolute-void);
      background: var(--cosmos-white);
    }

    .preview {
      display: grid;
      gap: 28px;
    }

    .section-title {
      margin: 56px 0 18px;
      color: var(--page-muted);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .surface {
      min-height: 260px;
      display: grid;
      place-items: center;
      border: 1px solid var(--panel-border);
      background: var(--absolute-void);
    }

    .surface.nebula {
      background: var(--muted-nebula);
    }

    .surface.compact {
      min-height: 180px;
    }

    .png-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .png-card {
      border: 1px solid var(--panel-border);
      background: var(--panel-bg);
    }

    .png-stage {
      min-height: 190px;
      display: grid;
      place-items: center;
      padding: 28px;
      background: var(--absolute-void);
    }

    .png-stage.nebula {
      background: var(--muted-nebula);
    }

    .png-stage.checker {
      background-color: var(--absolute-void);
      background-image:
        linear-gradient(45deg, rgba(197, 198, 199, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(197, 198, 199, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(197, 198, 199, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(197, 198, 199, 0.08) 75%);
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      background-size: 20px 20px;
    }

    [data-theme="light"] .png-stage.checker {
      background-color: var(--absolute-void);
    }

    .png-stage.light-checker {
      background-color: var(--light-stage);
      background-image:
        linear-gradient(45deg, var(--light-grid) 25%, transparent 25%),
        linear-gradient(-45deg, var(--light-grid) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--light-grid) 75%),
        linear-gradient(-45deg, transparent 75%, var(--light-grid) 75%);
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      background-size: 20px 20px;
    }

    .light-mode-ink {
      filter: brightness(0) saturate(100%) invert(4%) sepia(11%) saturate(1045%) hue-rotate(176deg) brightness(94%) contrast(95%);
    }

    .png-meta {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 12px 14px;
      border-top: 1px solid var(--meta-border);
      color: var(--page-muted);
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    .png-meta span {
      overflow-wrap: anywhere;
      text-align: right;
    }

    .png-meta strong {
      color: var(--page-fg);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.08em;
    }

    img {
      display: block;
      max-width: min(86vw, 820px);
      height: auto;
    }

    .mark {
      max-width: 360px;
    }

    .png-card img {
      width: min(100%, 560px);
      max-height: 180px;
      object-fit: contain;
    }

    .png-card .mark-png {
      max-width: 320px;
    }

    .palette {
      display: grid;
      grid-template-columns: repeat(5, minmax(120px, 1fr));
      gap: 12px;
      margin-top: 28px;
    }

    .swatch {
      min-height: 112px;
      padding: 14px;
      border: 1px solid rgba(197, 198, 199, 0.14);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 5px;
      color: var(--cosmos-white);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .swatch strong {
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.1em;
    }

    .void { background: var(--absolute-void); }
    .nebula-color { background: var(--muted-nebula); }
    .white { background: var(--cosmos-white); color: var(--absolute-void); }
    .silver { background: var(--mercury-silver); color: var(--absolute-void); }
    .gold { background: var(--spark-gold); color: var(--absolute-void); }

    @media (max-width: 760px) {
      main {
        width: min(100vw - 28px, 560px);
        padding: 32px 0;
      }

      .surface {
        min-height: 190px;
      }

      .palette {
        grid-template-columns: 1fr;
      }

      .png-grid {
        grid-template-columns: 1fr;
      }

      .png-stage {
        min-height: 150px;
        padding: 18px;
      }

      .topbar {
        align-items: flex-start;
        flex-direction: column;
      }
    }
  </style>
</head>
<body data-theme="dark">
  <main>
    <header class="topbar">
      <p class="brand-kicker">Less and Cosmos Visual Identity</p>
      <div class="theme-toggle" aria-label="Theme switcher">
        <button type="button" data-theme-value="light" aria-pressed="false">Light</button>
        <button type="button" data-theme-value="dark" aria-pressed="true">Dark</button>
      </div>
    </header>

    <h2 class="section-title">SVG master</h2>
    <section class="preview" aria-label="Less and Cosmos logo preview">
      <div class="surface">
        <img src="./logo-less-and-cosmos.svg" alt="less and cosmos. 一念纯粹，万里星辰。">
      </div>
      <div class="surface nebula">
        <img src="./logo-less-and-cosmos.svg" alt="less and cosmos. 一念纯粹，万里星辰。">
      </div>
      <div class="surface compact">
        <img class="mark" src="./logo-mark.svg" alt="Less and Cosmos symbol">
      </div>
      <div class="surface nebula compact">
        <img class="mark" src="./logo-mark-mono.svg" alt="Less and Cosmos monochrome symbol">
      </div>
    </section>

    <h2 class="section-title">PNG exports</h2>
    <section class="png-grid" aria-label="Website PNG logo exports">
      <article class="png-card">
        <div class="png-stage checker">
          <img src="./png/logo-full-transparent-2x.png" alt="less and cosmos. transparent PNG">
        </div>
        <div class="png-meta"><strong>英文完整透明底</strong><span>logo-full-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage">
          <img src="./png/logo-full-dark-2x.png" alt="less and cosmos. dark PNG">
        </div>
        <div class="png-meta"><strong>英文完整深色底</strong><span>logo-full-dark-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage checker">
          <img class="mark-png" src="./png/logo-mark-transparent-2x.png" alt="Less and Cosmos mark transparent PNG">
        </div>
        <div class="png-meta"><strong>图腾透明底</strong><span>logo-mark-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage">
          <img class="mark-png" src="./png/logo-mark-dark-2x.png" alt="Less and Cosmos mark dark PNG">
        </div>
        <div class="png-meta"><strong>图腾深色底</strong><span>logo-mark-dark-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage checker">
          <img src="./png/logo-chinese-transparent-2x.png" alt="纯粹星辰 transparent PNG">
        </div>
        <div class="png-meta"><strong>中文品牌透明底</strong><span>logo-chinese-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage">
          <img src="./png/logo-chinese-dark-2x.png" alt="纯粹星辰 dark PNG">
        </div>
        <div class="png-meta"><strong>中文品牌深色底</strong><span>logo-chinese-dark-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage checker">
          <img src="./png/logo-chinese-slogan-transparent-2x.png" alt="纯粹星辰 with slogan transparent PNG">
        </div>
        <div class="png-meta"><strong>中文加 Slogan 透明底</strong><span>logo-chinese-slogan-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage">
          <img src="./png/logo-chinese-slogan-dark-2x.png" alt="纯粹星辰 with slogan dark PNG">
        </div>
        <div class="png-meta"><strong>中文加 Slogan 深色底</strong><span>logo-chinese-slogan-dark-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img src="./png/logo-full-light-transparent-2x.png" alt="less and cosmos. light transparent PNG">
        </div>
        <div class="png-meta"><strong>英文完整白底透明版</strong><span>logo-full-light-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img src="./png/logo-full-light-bg-2x.png" alt="less and cosmos. light background PNG">
        </div>
        <div class="png-meta"><strong>英文完整自带白底</strong><span>logo-full-light-bg-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img class="mark-png" src="./png/logo-mark-light-transparent-2x.png" alt="Less and Cosmos mark light transparent PNG">
        </div>
        <div class="png-meta"><strong>图腾白底透明版</strong><span>logo-mark-light-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img class="mark-png" src="./png/logo-mark-light-bg-2x.png" alt="Less and Cosmos mark light background PNG">
        </div>
        <div class="png-meta"><strong>图腾自带白底</strong><span>logo-mark-light-bg-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img src="./png/logo-chinese-light-transparent-2x.png" alt="纯粹星辰 light transparent PNG">
        </div>
        <div class="png-meta"><strong>中文品牌白底透明版</strong><span>logo-chinese-light-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img src="./png/logo-chinese-light-bg-2x.png" alt="纯粹星辰 light background PNG">
        </div>
        <div class="png-meta"><strong>中文品牌自带白底</strong><span>logo-chinese-light-bg-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img src="./png/logo-chinese-slogan-light-transparent-2x.png" alt="纯粹星辰 with slogan light transparent PNG">
        </div>
        <div class="png-meta"><strong>中文加 Slogan 白底透明版</strong><span>logo-chinese-slogan-light-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img src="./png/logo-chinese-slogan-light-bg-2x.png" alt="纯粹星辰 with slogan light background PNG">
        </div>
        <div class="png-meta"><strong>中文加 Slogan 自带白底</strong><span>logo-chinese-slogan-light-bg-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img class="light-mode-ink" src="./png/logo-full-mono-transparent-2x.png" alt="less and cosmos. monochrome transparent PNG">
        </div>
        <div class="png-meta"><strong>英文单色浅底预览</strong><span>logo-full-mono-transparent-2x.png</span></div>
      </article>

      <article class="png-card">
        <div class="png-stage light-checker">
          <img class="mark-png light-mode-ink" src="./png/logo-mark-mono-transparent-2x.png" alt="Less and Cosmos mark monochrome transparent PNG">
        </div>
        <div class="png-meta"><strong>图腾单色浅底预览</strong><span>logo-mark-mono-transparent-2x.png</span></div>
      </article>
    </section>

    <h2 class="section-title">Color system</h2>
    <section class="palette" aria-label="Cosmic Morandi color palette">
      <div class="swatch void"><strong>纯粹之境</strong><span>#0B0C10</span></div>
      <div class="swatch nebula-color"><strong>寂静星云</strong><span>#1F2833</span></div>
      <div class="swatch white"><strong>星光极白</strong><span>#F5F5F7</span></div>
      <div class="swatch silver"><strong>智慧水星</strong><span>#C5C6C7</span></div>
      <div class="swatch gold"><strong>一念微光</strong><span>#E6C687</span></div>
    </section>
  </main>
  <script>
    const root = document.body;
    const buttons = Array.from(document.querySelectorAll("[data-theme-value]"));

    function setTheme(theme) {
      root.dataset.theme = theme;
      buttons.forEach((button) => {
        button.setAttribute("aria-pressed", String(button.dataset.themeValue === theme));
      });
    }

    buttons.forEach((button) => {
      button.addEventListener("click", () => setTheme(button.dataset.themeValue));
    });
  </script>
</body>
</html>