18 lines
9.8 KiB
HTML
18 lines
9.8 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Dodo 品牌视觉</title>
|
||
<style>
|
||
:root{--cream:#fdfaf3;--canvas:#f3ecdf;--paper:#fffdf8;--orange:#f15a29;--orange-dark:#b7421e;--ink:#302a24;--muted:#786e62;--line:#e4d5c0;--green:#687e61;--shadow:0 24px 70px rgba(88,67,42,.14);--radius:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Avenir Next","PingFang SC","Hiragino Sans GB",sans-serif}button{font:inherit}.page{width:min(1440px,100%);margin:auto;background:var(--cream);overflow:hidden}.nav{height:76px;padding:0 clamp(22px,5vw,76px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(253,250,243,.96);position:sticky;top:0;z-index:5}.brand-lockup{display:flex;align-items:center;gap:12px;font-weight:800;font-size:23px;letter-spacing:-.04em}.brand-lockup img{width:38px;height:38px}.nav-note{font-size:12px;color:var(--muted);letter-spacing:.08em}.hero{min-height:690px;padding:clamp(72px,9vw,132px) clamp(22px,7vw,104px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:64px}.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 24px;color:var(--orange-dark);font-size:12px;font-weight:800;letter-spacing:.16em}.eyebrow:before{content:"";width:28px;height:2px;background:var(--orange)}h1{font-size:clamp(62px,9vw,128px);line-height:.85;letter-spacing:-.075em;margin:0;max-width:740px}.hero-copy>p{max-width:550px;margin:32px 0 0;font-size:18px;line-height:1.85;color:var(--muted)}.mark-stage{position:relative;display:grid;place-items:center;min-height:470px}.orbit{position:absolute;width:min(440px,90%);aspect-ratio:1;border:1px solid var(--line);border-radius:50%}.orbit:before,.orbit:after{content:"";position:absolute;border-radius:50%;background:var(--orange)}.orbit:before{width:12px;height:12px;right:8%;top:22%}.orbit:after{width:7px;height:7px;left:11%;bottom:25%;opacity:.5}.mark-card{position:relative;width:min(330px,72vw);aspect-ratio:1;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);border-radius:38%;box-shadow:inset 0 1px #fff,var(--shadow);transform:rotate(-3deg)}.mark-card img{width:68%;transform:rotate(3deg)}.concept{padding:92px clamp(22px,7vw,104px);background:var(--ink);color:#fffaf2;display:grid;grid-template-columns:280px 1fr;gap:70px}.concept h2,.system h2,.applications h2{font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.055em;margin:0}.concept-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}.concept-copy article{border-top:1px solid rgba(255,255,255,.2);padding-top:20px}.concept-copy b{font-size:18px}.concept-copy p{font-size:14px;line-height:1.8;color:#c9c0b5;margin:10px 0 0}.system{padding:100px clamp(22px,7vw,104px)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:52px}.section-head p{max-width:420px;margin:0;color:var(--muted);line-height:1.75}.palette{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden}.swatch{height:180px;padding:20px;display:flex;align-items:flex-end;font-size:12px;font-weight:750;border-right:1px solid rgba(48,42,36,.12)}.swatch:last-child{border:0}.type-grid{margin-top:32px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px}.type-sample,.rules{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:inset 0 1px #fff}.type-sample strong{display:block;font-size:72px;letter-spacing:-.065em;line-height:.9}.type-sample span{display:block;margin-top:22px;color:var(--muted);line-height:1.8}.rules{display:grid;gap:16px}.rule{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}.rule i{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--orange);font-style:normal;font-weight:800}.rule b{display:block;margin:3px 0 5px}.rule small{color:var(--muted);line-height:1.55}.applications{padding:100px clamp(22px,7vw,104px);background:#f7f0e5}.app-grid{margin-top:52px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px}.app-icon,.wordmark-board{min-height:420px;background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:36px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 1px #fff}.icon-row{display:flex;align-items:end;gap:22px}.icon-row .tile{display:grid;place-items:center;background:var(--cream);border:1px solid var(--line);border-radius:24%;box-shadow:0 12px 30px rgba(88,67,42,.1)}.tile.l{width:190px;height:190px}.tile.m{width:104px;height:104px}.tile.s{width:60px;height:60px}.tile img{width:72%}.app-icon small,.wordmark-board small{color:var(--muted)}.wordmark{display:flex;align-items:center;gap:20px}.wordmark img{width:104px}.wordmark strong{font-size:78px;letter-spacing:-.075em}.tagline{font-size:22px;color:var(--muted);margin-top:20px}.footer{padding:34px clamp(22px,7vw,104px);display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}@media(max-width:800px){.nav-note{display:none}.hero{grid-template-columns:1fr;gap:34px;min-height:auto}.hero h1{font-size:64px}.mark-stage{min-height:350px}.mark-card{width:250px}.concept{grid-template-columns:1fr;gap:42px}.concept-copy{grid-template-columns:1fr}.section-head{align-items:start;flex-direction:column}.palette{grid-template-columns:1fr 1fr}.swatch{height:130px}.swatch:nth-child(2){border-right:0}.type-grid,.app-grid{grid-template-columns:1fr}.wordmark strong{font-size:54px}.wordmark img{width:78px}.app-icon,.wordmark-board{min-height:330px;padding:24px}.tile.l{width:130px;height:130px}.tile.m{width:78px;height:78px}.tile.s{width:48px;height:48px}.footer{gap:12px;flex-direction:column}}@media(prefers-reduced-motion:no-preference){.mark-card{animation:breathe 5s ease-in-out infinite}.orbit:before{animation:circle 8s linear infinite}@keyframes breathe{50%{transform:translateY(-8px) rotate(-1deg)}}@keyframes circle{50%{transform:translate(-280px,250px)}}}
|
||
</style>
|
||
</head>
|
||
<body><main class="page">
|
||
<nav class="nav"><div class="brand-lockup"><img src="dodo-logo.svg" alt=""><span>dodo</span></div><div class="nav-note">品牌视觉方向 · 01</div></nav>
|
||
<section class="hero"><div class="hero-copy"><p class="eyebrow">轻快 · 专注 · 有完成感</p><h1>把今天，<br>轻轻做好。</h1><p>Dodo 是一只不会催你的任务鸟。圆润的身体承载每天的琐事，翅膀化成勾选动作：每完成一件事，就向前迈一小步。</p></div><div class="mark-stage"><div class="orbit"></div><div class="mark-card"><img src="dodo-logo.svg" alt="Dodo 图形标志"></div></div></section>
|
||
<section class="concept"><h2>一笔完成<br>一只 Dodo</h2><div class="concept-copy"><article><b>圆环是日常</b><p>标志主体由稳定的圆形构成，表达循环、持续和可控的每日节奏，而不是紧张的效率竞赛。</p></article><article><b>缺口是前进</b><p>右上方的喙形成明确朝向，打破封闭轮廓，让安静的形体仍然带着行动感。</p></article><article><b>翅膀是勾选</b><p>负形中的勾不是附加图标，而是鸟身的一部分。完成任务与 Dodo 本身成为同一个视觉动作。</p></article><article><b>尾羽是延续</b><p>左下短尾从圆身自然伸出，像对话气泡，也像下一步的书签，保留陪伴感和产品亲和力。</p></article></div></section>
|
||
<section class="system"><div class="section-head"><h2>克制的<br>暖色系统</h2><p>沿用 Dodo 现有奶油与橙色语言。橙色只负责品牌与关键动作，大面积空间留给奶油色和深墨色。</p></div><div class="palette"><div class="swatch" style="background:#f15a29;color:white">Dodo Orange · #F15A29</div><div class="swatch" style="background:#fdfaf3">Warm Cream · #FDFAF3</div><div class="swatch" style="background:#302a24;color:white">Soft Ink · #302A24</div><div class="swatch" style="background:#687e61;color:white">Done Green · #687E61</div></div><div class="type-grid"><div class="type-sample"><strong>dodo<br>今日完成</strong><span>Avenir Next / PingFang SC<br>标题使用 750–850 字重与轻微负字距；正文维持正常字距和舒展行高，让任务信息准确但不紧绷。</span></div><div class="rules"><div class="rule"><i>1</i><div><b>版式左对齐</b><small>主体内容采用不对称左对齐，不做千篇一律的居中 SaaS hero。</small></div></div><div class="rule"><i>2</i><div><b>圆角有层级</b><small>Logo 圆润；容器 20–28px；控制 10–12px，不把所有东西都做成胶囊。</small></div></div><div class="rule"><i>3</i><div><b>动效只讲状态</b><small>悬浮与完成时轻微呼吸，禁用持续旋转、光环和夸张弹跳。</small></div></div></div></div></section>
|
||
<section class="applications"><div class="section-head"><h2>从图标到<br>产品签名</h2><p>形体在小尺寸依然成立；单色版本无需描边或细节补偿，可直接用于 App 图标、PWA 与导航品牌区。</p></div><div class="app-grid"><div class="app-icon"><small>APP ICON SCALE</small><div class="icon-row"><div class="tile l"><img src="dodo-logo.svg" alt=""></div><div class="tile m"><img src="dodo-logo.svg" alt=""></div><div class="tile s"><img src="dodo-logo.svg" alt=""></div></div><small>保持 18% 安全区 · 最小建议尺寸 24px</small></div><div class="wordmark-board"><small>PRIMARY LOCKUP</small><div><div class="wordmark"><img src="dodo-logo.svg" alt=""><strong>dodo</strong></div><div class="tagline">把今天，轻轻做好。</div></div><small>图形与字标间距 = 图标宽度的 0.18×</small></div></div></section>
|
||
<footer class="footer"><span>Dodo Identity Direction</span><span>Warm, focused, quietly rewarding.</span></footer>
|
||
</main></body></html>
|