APP_UI/图标/10_应用图标_方案总览.html

<title>泓衍票据图标提案</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@600&display=swap">
<style>
:root{
  --paper:#E7ECF4; --card:#F4F7FB; --well:#DFE6F1; --rule:#D3DCE8; --rule-2:#C2CEDF;
  --ink:#0F1B33; --ink-2:#3D4E6C; --mute:#647591;
  --brand:#1B4FD8; --brand-weak:#E7EEFF; --gold:#B4700E; --gold-weak:#FBF0DC;
  --shadow:0 1px 2px rgba(15,27,51,.06),0 10px 30px rgba(15,27,51,.07);
  --frostwell:#DCE4F1; --monowell:#CBD5E4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B1020; --card:#131B2E; --well:#18223A; --rule:#232F4B; --rule-2:#31405F;
    --ink:#EAF0FA; --ink-2:#A5B4D0; --mute:#8A99B2;
    --brand:#5B8CFF; --brand-weak:rgba(91,140,255,.16); --gold:#F0A93B; --gold-weak:rgba(240,169,59,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.34);
    --frostwell:#1C2740; --monowell:#24304C;
  }
}
:root[data-theme="dark"]{
  --paper:#0B1020; --card:#131B2E; --well:#18223A; --rule:#232F4B; --rule-2:#31405F;
  --ink:#EAF0FA; --ink-2:#A5B4D0; --mute:#8A99B2;
  --brand:#5B8CFF; --brand-weak:rgba(91,140,255,.16); --gold:#F0A93B; --gold-weak:rgba(240,169,59,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:14px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:46px 32px 90px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}

/* 图纸头 */
.sheet-head{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-end;justify-content:space-between;
  padding-bottom:22px;border-bottom:1px solid var(--rule)}
.bm{display:flex;align-items:center;gap:15px}
.bm .glyph{width:46px;height:46px;flex:none}
h1{font-size:27px;line-height:1.25;font-weight:600;margin:0;letter-spacing:.01em;text-wrap:balance}
.sub{margin-top:5px;font-size:12.5px;color:var(--mute)}
.meta{display:flex;gap:26px;flex-wrap:wrap}
.meta div{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.meta b{display:block;font-size:12px;letter-spacing:.02em;color:var(--ink);font-weight:500;
  text-transform:none;font-family:"IBM Plex Sans","PingFang SC",sans-serif;margin-top:2px}

/* 结论 */
.verdict{margin:34px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;
  padding:22px 26px;background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--gold);
  border-radius:3px}
.verdict .picks{display:flex;gap:14px}
.verdict .pick{text-align:center}
.verdict .pick span{display:block;margin-top:7px;font-size:11px;color:var(--mute)}
.verdict h2{margin:0 0 6px;font-size:15px;font-weight:600;letter-spacing:.02em}
.verdict p{margin:0;color:var(--ink-2);max-width:64ch}
.verdict p + p{margin-top:9px}

/* 方案版面 */
.plate{padding:38px 0 30px;border-bottom:1px solid var(--rule)}
.ph{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.pk{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--brand);
  border:1px solid var(--rule-2);border-radius:3px;padding:2px 8px;letter-spacing:.08em}
.ph h3{margin:0;font-size:25px;font-weight:600;letter-spacing:.06em;
  font-family:"Songti SC","IBM Plex Serif","Times New Roman",serif}
.pen{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.18em;color:var(--mute)}
.ptag{margin-left:auto;font-size:11px;padding:3px 10px;border-radius:99px;
  background:var(--brand-weak);color:var(--brand);letter-spacing:.04em}
#p-c .ptag{background:var(--gold-weak);color:var(--gold)}
.pbody{display:grid;grid-template-columns:minmax(330px,auto) minmax(300px,1fr) 190px;gap:34px;align-items:start}
.colorways{display:flex;gap:12px}
.cw{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 13px;border-radius:4px}
.cw span{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;color:var(--mute)}
.cw-deep{background:var(--well)} .cw-frost{background:var(--frostwell)} .cw-mono{background:var(--monowell)}
.tile{border-radius:22.37%;display:block}
.tile.mono{border-radius:50%}
.ptext .idea{margin:0 0 16px;font-size:14.5px;line-height:1.75;max-width:52ch}
.ptext em{font-style:normal;color:var(--gold);font-weight:500}
.judge{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline}
.judge dt{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
.judge dd{margin:0;font-size:13px;color:var(--ink-2);max-width:50ch}
.pmeta{display:flex;flex-direction:column;gap:11px;padding-top:3px}
.ax{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center}
.ax span{font-size:11.5px;color:var(--mute)}
.ax b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.bars{display:flex;gap:3px}
.bars i{width:9px;height:9px;border-radius:1px;background:var(--rule-2)}
.bars i.on{background:var(--brand)}

.ladder{display:flex;align-items:flex-end;gap:26px;margin-top:30px;padding:22px 26px;
  background:var(--well);border-radius:4px;overflow-x:auto}
.ladder figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:9px;flex:none}
.ladder figcaption{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:9px;
  letter-spacing:.08em;color:var(--mute);line-height:1.5}
.ladder figcaption b{display:block;font-size:10.5px;color:var(--ink-2);font-weight:500}

/* 桌面实景 */
.stage{margin-top:44px}
.h2{display:flex;align-items:baseline;gap:14px;margin:0 0 8px}
.h2 h2{margin:0;font-size:19px;font-weight:600;letter-spacing:.03em;
  font-family:"Songti SC","IBM Plex Serif",serif}
.lede{margin:0 0 24px;color:var(--ink-2);max-width:64ch}
.screens{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.screen{border-radius:22px;padding:26px 22px 20px;border:1px solid var(--rule);box-shadow:var(--shadow)}
.screen.s-night{background:linear-gradient(160deg,#16204a,#0a1330 60%,#241a3e)}
.screen.s-day{background:linear-gradient(160deg,#cfe0f7,#eef2f8 55%,#e6dcf0)}
.screen.s-photo{background:linear-gradient(150deg,#2b6f6a,#3f5f88 45%,#8c5a4a)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 12px}
.app{display:flex;flex-direction:column;align-items:center;gap:6px}
.app span{font-size:9.5px;letter-spacing:.02em;white-space:nowrap}
.s-night .app span,.s-photo .app span{color:#F2F5FB;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.s-day .app span{color:#1C2740;text-shadow:0 1px 2px rgba(255,255,255,.7)}
.ghost{width:62px;height:62px;border-radius:22.37%;display:grid;place-items:center;
  font-size:19px;font-weight:600;color:rgba(255,255,255,.72);
  font-family:"IBM Plex Mono",monospace}
.s-day .ghost{color:rgba(28,39,64,.5)}
.g1{background:linear-gradient(150deg,#3f8f6d,#1f6b52)}
.g2{background:linear-gradient(150deg,#4C5C78,#2B3A4E)}
.g3{background:linear-gradient(150deg,#c0562f,#8f3a1f)}
.g4{background:linear-gradient(150deg,#5a6478,#3a4356)}
.scap{margin-top:16px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.s-night .scap,.s-photo .scap{color:#E7EDF8} .s-day .scap{color:#3D4E6C}

/* 交付 */
.deliver{margin-top:46px}
table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
th{text-align:left;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);font-weight:500;padding:9px 12px;
  border-bottom:1px solid var(--rule-2)}
td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
td:first-child{color:var(--ink)}
code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--card);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--ink)}
.warn{margin-top:22px;padding:16px 20px;background:var(--gold-weak);border-radius:4px;
  border-left:3px solid var(--gold);font-size:13px;color:var(--ink-2)}
.warn b{color:var(--ink);font-weight:600}
.tablewrap{overflow-x:auto}
footer{margin-top:52px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
@media (max-width:900px){
  .pbody{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr}
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs><symbol id="i-a-deep" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-a-deep" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#3170FF"/><stop offset=".48" stop-color="#1B4FD8"/><stop offset="1" stop-color="#0A2A82"/></linearGradient>
<radialGradient id="glow-i-a-deep" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#A8C6FF" stop-opacity=".42"/><stop offset="1" stop-color="#A8C6FF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-a-deep" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#D9E7FF"/></linearGradient>
<linearGradient id="goldg-i-a-deep" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#F8C263"/><stop offset="1" stop-color="#E08A17"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-a-deep)"/><rect width="1024" height="1024" fill="url(#glow-i-a-deep)"/>
<g fill="none" stroke-width="116" stroke-linecap="round">
  <path d="M 302 348 C 369 316 445 316 512 348 S 655 380 722 348" stroke="url(#inkg-i-a-deep)"/>
  <path d="M 262 512 C 342 480 432 480 512 512 S 682 544 762 512" stroke="url(#inkg-i-a-deep)"/>
  <path d="M 238 676 C 326 644 424 644 512 676 S 698 708 786 676" stroke="url(#goldg-i-a-deep)"/>
</g></symbol><symbol id="i-a-frost" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-a-frost" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".52" stop-color="#EDF3FF"/><stop offset="1" stop-color="#D6E3F9"/></linearGradient>
<radialGradient id="glow-i-a-frost" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-a-frost" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#2A62EA"/><stop offset="1" stop-color="#0E3AAE"/></linearGradient>
<linearGradient id="goldg-i-a-frost" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#DCA02C"/><stop offset="1" stop-color="#A8680A"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-a-frost)"/><rect width="1024" height="1024" fill="url(#glow-i-a-frost)"/>
<g fill="none" stroke-width="116" stroke-linecap="round">
  <path d="M 302 348 C 369 316 445 316 512 348 S 655 380 722 348" stroke="url(#inkg-i-a-frost)"/>
  <path d="M 262 512 C 342 480 432 480 512 512 S 682 544 762 512" stroke="url(#inkg-i-a-frost)"/>
  <path d="M 238 676 C 326 644 424 644 512 676 S 698 708 786 676" stroke="url(#goldg-i-a-frost)"/>
</g></symbol><symbol id="i-b-deep" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-b-deep" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#3170FF"/><stop offset=".48" stop-color="#1B4FD8"/><stop offset="1" stop-color="#0A2A82"/></linearGradient>
<radialGradient id="glow-i-b-deep" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#A8C6FF" stop-opacity=".42"/><stop offset="1" stop-color="#A8C6FF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-b-deep" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#D9E7FF"/></linearGradient>
<linearGradient id="goldg-i-b-deep" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#F8C263"/><stop offset="1" stop-color="#E08A17"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-b-deep)"/><rect width="1024" height="1024" fill="url(#glow-i-b-deep)"/>
<mask id="mB-i-b-deep">
  <rect x="0" y="0" width="1024" height="1024" fill="#fff"/>
  <circle cx="734" cy="244" r="120" fill="#000"/>
</mask>
<g transform="translate(512,512) rotate(-7)">
  <g mask="url(#mB-i-b-deep)" transform="rotate(7) translate(-512,-512)">
    <g transform="translate(512,512) rotate(-7)">
      <rect x="-243" y="-296" width="486" height="592" rx="70" fill="url(#inkg-i-b-deep)"/>
      <rect x="-152" y="-150" width="238" height="50" rx="25" fill="#8FB2FF"/>
      <rect x="-152" y="-52"  width="304" height="50" rx="25" fill="#8FB2FF"/>
      <rect x="-152" y="74"   width="220" height="62" rx="31" fill="url(#goldg-i-b-deep)"/>
    </g>
  </g>
</g>
<circle cx="734" cy="244" r="88" fill="url(#goldg-i-b-deep)"/></symbol><symbol id="i-b-frost" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-b-frost" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".52" stop-color="#EDF3FF"/><stop offset="1" stop-color="#D6E3F9"/></linearGradient>
<radialGradient id="glow-i-b-frost" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-b-frost" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#2A62EA"/><stop offset="1" stop-color="#0E3AAE"/></linearGradient>
<linearGradient id="goldg-i-b-frost" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#DCA02C"/><stop offset="1" stop-color="#A8680A"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-b-frost)"/><rect width="1024" height="1024" fill="url(#glow-i-b-frost)"/>
<mask id="mB-i-b-frost">
  <rect x="0" y="0" width="1024" height="1024" fill="#fff"/>
  <circle cx="734" cy="244" r="120" fill="#000"/>
</mask>
<g transform="translate(512,512) rotate(-7)">
  <g mask="url(#mB-i-b-frost)" transform="rotate(7) translate(-512,-512)">
    <g transform="translate(512,512) rotate(-7)">
      <rect x="-243" y="-296" width="486" height="592" rx="70" fill="url(#inkg-i-b-frost)"/>
      <rect x="-152" y="-150" width="238" height="50" rx="25" fill="#FFFFFF"/>
      <rect x="-152" y="-52"  width="304" height="50" rx="25" fill="#FFFFFF"/>
      <rect x="-152" y="74"   width="220" height="62" rx="31" fill="url(#goldg-i-b-frost)"/>
    </g>
  </g>
</g>
<circle cx="734" cy="244" r="88" fill="url(#goldg-i-b-frost)"/></symbol><symbol id="i-c-deep" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-c-deep" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#3170FF"/><stop offset=".48" stop-color="#1B4FD8"/><stop offset="1" stop-color="#0A2A82"/></linearGradient>
<radialGradient id="glow-i-c-deep" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#A8C6FF" stop-opacity=".42"/><stop offset="1" stop-color="#A8C6FF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-c-deep" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#D9E7FF"/></linearGradient>
<linearGradient id="goldg-i-c-deep" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#F8C263"/><stop offset="1" stop-color="#E08A17"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-c-deep)"/><rect width="1024" height="1024" fill="url(#glow-i-c-deep)"/>
<clipPath id="cC-i-c-deep"><circle cx="512" cy="512" r="256"/></clipPath>
<circle cx="512" cy="512" r="300" fill="none" stroke="url(#inkg-i-c-deep)" stroke-width="88"/>
<g clip-path="url(#cC-i-c-deep)">
  <path d="M 224 548 C 300 486 368 604 470 552 C 562 505 636 588 812 516 L 812 812 L 224 812 Z" fill="url(#goldg-i-c-deep)"/>
</g></symbol><symbol id="i-c-frost" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-c-frost" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".52" stop-color="#EDF3FF"/><stop offset="1" stop-color="#D6E3F9"/></linearGradient>
<radialGradient id="glow-i-c-frost" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-c-frost" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#2A62EA"/><stop offset="1" stop-color="#0E3AAE"/></linearGradient>
<linearGradient id="goldg-i-c-frost" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#DCA02C"/><stop offset="1" stop-color="#A8680A"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-c-frost)"/><rect width="1024" height="1024" fill="url(#glow-i-c-frost)"/>
<clipPath id="cC-i-c-frost"><circle cx="512" cy="512" r="256"/></clipPath>
<circle cx="512" cy="512" r="300" fill="none" stroke="url(#inkg-i-c-frost)" stroke-width="88"/>
<g clip-path="url(#cC-i-c-frost)">
  <path d="M 224 548 C 300 486 368 604 470 552 C 562 505 636 588 812 516 L 812 812 L 224 812 Z" fill="url(#goldg-i-c-frost)"/>
</g></symbol><symbol id="i-d-deep" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-d-deep" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#3170FF"/><stop offset=".48" stop-color="#1B4FD8"/><stop offset="1" stop-color="#0A2A82"/></linearGradient>
<radialGradient id="glow-i-d-deep" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#A8C6FF" stop-opacity=".42"/><stop offset="1" stop-color="#A8C6FF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-d-deep" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#D9E7FF"/></linearGradient>
<linearGradient id="goldg-i-d-deep" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#F8C263"/><stop offset="1" stop-color="#E08A17"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-d-deep)"/><rect width="1024" height="1024" fill="url(#glow-i-d-deep)"/>
<g transform="translate(512,512) scale(.96)">
  <rect x="-250" y="-310" width="134" height="620" rx="42" fill="url(#inkg-i-d-deep)"/>
  <rect x="116"  y="-310" width="134" height="620" rx="42" fill="url(#inkg-i-d-deep)"/>
  <path d="M -186 -12 L 186 -132 L 186 8 L -186 128 Z" fill="url(#goldg-i-d-deep)"/>
</g></symbol><symbol id="i-d-frost" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-d-frost" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".52" stop-color="#EDF3FF"/><stop offset="1" stop-color="#D6E3F9"/></linearGradient>
<radialGradient id="glow-i-d-frost" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-d-frost" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#2A62EA"/><stop offset="1" stop-color="#0E3AAE"/></linearGradient>
<linearGradient id="goldg-i-d-frost" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#DCA02C"/><stop offset="1" stop-color="#A8680A"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-d-frost)"/><rect width="1024" height="1024" fill="url(#glow-i-d-frost)"/>
<g transform="translate(512,512) scale(.96)">
  <rect x="-250" y="-310" width="134" height="620" rx="42" fill="url(#inkg-i-d-frost)"/>
  <rect x="116"  y="-310" width="134" height="620" rx="42" fill="url(#inkg-i-d-frost)"/>
  <path d="M -186 -12 L 186 -132 L 186 8 L -186 128 Z" fill="url(#goldg-i-d-frost)"/>
</g></symbol><symbol id="i-e-deep" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-e-deep" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#3170FF"/><stop offset=".48" stop-color="#1B4FD8"/><stop offset="1" stop-color="#0A2A82"/></linearGradient>
<radialGradient id="glow-i-e-deep" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#A8C6FF" stop-opacity=".42"/><stop offset="1" stop-color="#A8C6FF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-e-deep" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#D9E7FF"/></linearGradient>
<linearGradient id="goldg-i-e-deep" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#F8C263"/><stop offset="1" stop-color="#E08A17"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-e-deep)"/><rect width="1024" height="1024" fill="url(#glow-i-e-deep)"/>
<g transform="translate(512,512) rotate(-4)">
  <rect x="-302" y="-302" width="604" height="604" rx="116" fill="none" stroke="url(#goldg-i-e-deep)" stroke-width="54"/>
  <text x="0" y="8" text-anchor="middle" dominant-baseline="central"
        font-family="PingFang SC, Heiti SC, STHeiti, sans-serif" font-weight="600" font-size="386"
        fill="url(#inkg-i-e-deep)">泓</text>
</g></symbol><symbol id="i-e-frost" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-e-frost" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".52" stop-color="#EDF3FF"/><stop offset="1" stop-color="#D6E3F9"/></linearGradient>
<radialGradient id="glow-i-e-frost" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-e-frost" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#2A62EA"/><stop offset="1" stop-color="#0E3AAE"/></linearGradient>
<linearGradient id="goldg-i-e-frost" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#DCA02C"/><stop offset="1" stop-color="#A8680A"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-e-frost)"/><rect width="1024" height="1024" fill="url(#glow-i-e-frost)"/>
<g transform="translate(512,512) rotate(-4)">
  <rect x="-302" y="-302" width="604" height="604" rx="116" fill="none" stroke="url(#goldg-i-e-frost)" stroke-width="54"/>
  <text x="0" y="8" text-anchor="middle" dominant-baseline="central"
        font-family="PingFang SC, Heiti SC, STHeiti, sans-serif" font-weight="600" font-size="386"
        fill="url(#inkg-i-e-frost)">泓</text>
</g></symbol><symbol id="i-f-deep" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-f-deep" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#3170FF"/><stop offset=".48" stop-color="#1B4FD8"/><stop offset="1" stop-color="#0A2A82"/></linearGradient>
<radialGradient id="glow-i-f-deep" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#A8C6FF" stop-opacity=".42"/><stop offset="1" stop-color="#A8C6FF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-f-deep" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#D9E7FF"/></linearGradient>
<linearGradient id="goldg-i-f-deep" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#F8C263"/><stop offset="1" stop-color="#E08A17"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-f-deep)"/><rect width="1024" height="1024" fill="url(#glow-i-f-deep)"/><path d="M 1024 590 L 1024 1024 L 590 1024 Z" fill="url(#goldg-i-f-deep)"/>
<g>
  <rect x="286" y="316" width="286" height="66" rx="33" fill="url(#inkg-i-f-deep)"/>
  <rect x="286" y="440" width="400" height="66" rx="33" fill="url(#inkg-i-f-deep)"/>
  <rect x="286" y="562" width="238" height="78" rx="39" fill="url(#goldg-i-f-deep)"/>
</g></symbol><symbol id="i-f-frost" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-f-frost" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset=".52" stop-color="#EDF3FF"/><stop offset="1" stop-color="#D6E3F9"/></linearGradient>
<radialGradient id="glow-i-f-frost" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#FFFFFF" stop-opacity=".85"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-f-frost" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#2A62EA"/><stop offset="1" stop-color="#0E3AAE"/></linearGradient>
<linearGradient id="goldg-i-f-frost" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#DCA02C"/><stop offset="1" stop-color="#A8680A"/></linearGradient></defs><rect width="1024" height="1024" fill="url(#bgg-i-f-frost)"/><rect width="1024" height="1024" fill="url(#glow-i-f-frost)"/><path d="M 1024 590 L 1024 1024 L 590 1024 Z" fill="url(#goldg-i-f-frost)"/>
<g>
  <rect x="286" y="316" width="286" height="66" rx="33" fill="url(#inkg-i-f-frost)"/>
  <rect x="286" y="440" width="400" height="66" rx="33" fill="url(#inkg-i-f-frost)"/>
  <rect x="286" y="562" width="238" height="78" rx="39" fill="url(#goldg-i-f-frost)"/>
</g></symbol><symbol id="i-a-mono" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-a-mono" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#00000000"/><stop offset="1" stop-color="#00000000"/></linearGradient>
<radialGradient id="glow-i-a-mono" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-a-mono" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient>
<linearGradient id="goldg-i-a-mono" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient></defs><mask id="mono-i-a-mono"><rect width="1024" height="1024" fill="#000"/><g transform="translate(512,512) scale(0.72) translate(-512,-512)">
<g fill="none" stroke-width="116" stroke-linecap="round">
  <path d="M 302 348 C 369 316 445 316 512 348 S 655 380 722 348" stroke="url(#inkg-i-a-mono)"/>
  <path d="M 262 512 C 342 480 432 480 512 512 S 682 544 762 512" stroke="url(#inkg-i-a-mono)"/>
  <path d="M 238 676 C 326 644 424 644 512 676 S 698 708 786 676" stroke="url(#goldg-i-a-mono)"/>
</g></g></mask><rect width="1024" height="1024" fill="#000" mask="url(#mono-i-a-mono)"/></symbol><symbol id="i-b-mono" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-b-mono" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#00000000"/><stop offset="1" stop-color="#00000000"/></linearGradient>
<radialGradient id="glow-i-b-mono" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-b-mono" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient>
<linearGradient id="goldg-i-b-mono" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient></defs><mask id="mono-i-b-mono"><rect width="1024" height="1024" fill="#000"/><g transform="translate(512,512) scale(0.72) translate(-512,-512)">
<mask id="mB-i-b-mono">
  <rect x="0" y="0" width="1024" height="1024" fill="#fff"/>
  <circle cx="734" cy="244" r="120" fill="#000"/>
</mask>
<g transform="translate(512,512) rotate(-7)">
  <g mask="url(#mB-i-b-mono)" transform="rotate(7) translate(-512,-512)">
    <g transform="translate(512,512) rotate(-7)">
      <rect x="-243" y="-296" width="486" height="592" rx="70" fill="url(#inkg-i-b-mono)"/>
      <rect x="-152" y="-150" width="238" height="50" rx="25" fill="#000000"/>
      <rect x="-152" y="-52"  width="304" height="50" rx="25" fill="#000000"/>
      <rect x="-152" y="74"   width="220" height="62" rx="31" fill="url(#goldg-i-b-mono)"/>
    </g>
  </g>
</g>
<circle cx="734" cy="244" r="88" fill="url(#goldg-i-b-mono)"/></g></mask><rect width="1024" height="1024" fill="#000" mask="url(#mono-i-b-mono)"/></symbol><symbol id="i-c-mono" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-c-mono" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#00000000"/><stop offset="1" stop-color="#00000000"/></linearGradient>
<radialGradient id="glow-i-c-mono" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-c-mono" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient>
<linearGradient id="goldg-i-c-mono" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient></defs><mask id="mono-i-c-mono"><rect width="1024" height="1024" fill="#000"/><g transform="translate(512,512) scale(0.72) translate(-512,-512)">
<clipPath id="cC-i-c-mono"><circle cx="512" cy="512" r="256"/></clipPath>
<circle cx="512" cy="512" r="300" fill="none" stroke="url(#inkg-i-c-mono)" stroke-width="88"/>
<g clip-path="url(#cC-i-c-mono)">
  <path d="M 224 548 C 300 486 368 604 470 552 C 562 505 636 588 812 516 L 812 812 L 224 812 Z" fill="url(#goldg-i-c-mono)"/>
</g></g></mask><rect width="1024" height="1024" fill="#000" mask="url(#mono-i-c-mono)"/></symbol><symbol id="i-d-mono" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-d-mono" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#00000000"/><stop offset="1" stop-color="#00000000"/></linearGradient>
<radialGradient id="glow-i-d-mono" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-d-mono" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient>
<linearGradient id="goldg-i-d-mono" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient></defs><mask id="mono-i-d-mono"><rect width="1024" height="1024" fill="#000"/><g transform="translate(512,512) scale(0.72) translate(-512,-512)">
<g transform="translate(512,512) scale(.96)">
  <rect x="-250" y="-310" width="134" height="620" rx="42" fill="url(#inkg-i-d-mono)"/>
  <rect x="116"  y="-310" width="134" height="620" rx="42" fill="url(#inkg-i-d-mono)"/>
  <path d="M -186 -12 L 186 -132 L 186 8 L -186 128 Z" fill="url(#goldg-i-d-mono)"/>
</g></g></mask><rect width="1024" height="1024" fill="#000" mask="url(#mono-i-d-mono)"/></symbol><symbol id="i-e-mono" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-e-mono" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#00000000"/><stop offset="1" stop-color="#00000000"/></linearGradient>
<radialGradient id="glow-i-e-mono" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-e-mono" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient>
<linearGradient id="goldg-i-e-mono" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient></defs><mask id="mono-i-e-mono"><rect width="1024" height="1024" fill="#000"/><g transform="translate(512,512) scale(0.72) translate(-512,-512)">
<g transform="translate(512,512) rotate(-4)">
  <rect x="-302" y="-302" width="604" height="604" rx="116" fill="none" stroke="url(#goldg-i-e-mono)" stroke-width="54"/>
  <text x="0" y="8" text-anchor="middle" dominant-baseline="central"
        font-family="PingFang SC, Heiti SC, STHeiti, sans-serif" font-weight="600" font-size="386"
        fill="url(#inkg-i-e-mono)">泓</text>
</g></g></mask><rect width="1024" height="1024" fill="#000" mask="url(#mono-i-e-mono)"/></symbol><symbol id="i-f-mono" viewBox="0 0 1024 1024"><defs><linearGradient id="bgg-i-f-mono" x1="0" y1="0" x2=".85" y2="1"><stop offset="0" stop-color="#00000000"/><stop offset="1" stop-color="#00000000"/></linearGradient>
<radialGradient id="glow-i-f-mono" cx=".30" cy=".14" r=".82"><stop offset="0" stop-color="#000000" stop-opacity="0"/><stop offset="1" stop-color="#000000" stop-opacity="0"/></radialGradient>
<linearGradient id="inkg-i-f-mono" x1=".2" y1="0" x2=".8" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient>
<linearGradient id="goldg-i-f-mono" x1=".1" y1="0" x2=".9" y2="1"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#FFFFFF"/></linearGradient></defs><mask id="mono-i-f-mono"><rect width="1024" height="1024" fill="#000"/><g transform="translate(512,512) scale(0.72) translate(-512,-512)">
<g>
  <rect x="286" y="316" width="286" height="66" rx="33" fill="url(#inkg-i-f-mono)"/>
  <rect x="286" y="440" width="400" height="66" rx="33" fill="url(#inkg-i-f-mono)"/>
  <rect x="286" y="562" width="238" height="78" rx="39" fill="url(#goldg-i-f-mono)"/>
</g></g></mask><rect width="1024" height="1024" fill="#000" mask="url(#mono-i-f-mono)"/></symbol></defs></svg>

<div class="wrap">
<div class="sheet-head">
  <div class="bm">
    <svg class="glyph tile" width="46" height="46"><use href="#i-c-deep"/></svg>
    <div>
      <h1>泓衍票据 · 桌面图标方案</h1>
      <div class="sub">六组方向 ／ 深空蓝与霜白双配色 ／ iOS 圆角遮罩与 Android 自适应图层</div>
    </div>
  </div>
  <div class="meta">
    <div>应用<b>泓衍票据 · HONMATRIX Notes</b></div>
    <div>包名<b class="mono">com.hehuit.notes</b></div>
    <div>母版<b class="mono">1024 × 1024 px</b></div>
    <div>体系<b>深空蓝 Deep-Space Blue</b></div>
    <div>日期<b class="mono">2026-09-08</b></div>
  </div>
</div>

<div class="verdict">
  <div class="picks">
    <div class="pick"><svg class="tile" width="78" height="78"><use href="#i-c-deep"/></svg><span>首选 C</span></div>
    <div class="pick"><svg class="tile" width="78" height="78"><use href="#i-b-deep"/></svg><span>备选 B</span></div>
  </div>
  <div>
    <h2>建议：主推 C 泓池，稳妥线保留 B 券印</h2>
    <p>C 是六组里唯一在 40px 下仍然保持完整形态的方案，环加水位的结构在券商类应用中没有撞型，而「深水为泓」正好把公司名解释成了一个可以画出来的东西。代价是它不直接说明品类，上线首月需要在启动页和应用商店截图里补一次品牌释义。</p>
    <p>如果这一版更在意「用户一眼知道这是票据」，就走 B——它同时延续了设计系统里已有的票面加琥珀点图形，换标成本最低。E 玺信在中文市场表现力最强，但汉字撑不住 40px 与 Apple Watch 尺寸，只建议作为中文市场的节庆或活动图标使用。</p>
  </div>
</div>


<section class="plate" id="p-a">
  <header class="ph">
    <span class="pk">A</span>
    <h3>三叠水</h3>
    <span class="pen">RIPPLE</span>
    <span class="ptag">字源抽象</span>
  </header>
  <div class="pbody">
    <div class="colorways">
      <div class="cw cw-deep"><svg class="tile" width="150" height="150"><use href="#i-a-deep"/></svg><span>深空蓝</span></div>
      <div class="cw cw-frost"><svg class="tile" width="150" height="150"><use href="#i-a-frost"/></svg><span>霜白</span></div>
      <div class="cw cw-mono"><svg class="tile mono" width="150" height="150"><use href="#i-a-mono"/></svg><span>单色层</span></div>
    </div>
    <div class="ptext">
      <p class="idea">「泓」与「衍」皆从水。三道水纹取<em>深水成泓、广衍其流</em>之意，末一叠鎏金，是资金流向收益的那一层。</p>
      <dl class="judge">
        <dt>成立在哪</dt><dd>没有文化门槛，中／繁／英三个市场读起来是同一件事；笔画粗、间距匀，40px 下三道纹路仍然分得开。</dd>
        <dt>代价是什么</dt><dd>水波是公共符号，天气、水务、冥想类 App 都在用，品牌独占性是全组最弱的一项。</dd>
      </dl>
    </div>
    <div class="pmeta"><div class="ax"><span>小尺寸识别</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></div><b>4</b></div><div class="ax"><span>品牌独占性</span><div class="bars"><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i></div><b>2</b></div><div class="ax"><span>品类直给度</span><div class="bars"><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i></div><b>2</b></div></div>
  </div>
  <div class="ladder"><figure><svg class="tile" width="180" height="180"><use href="#i-a-deep"/></svg><figcaption><b>180 px</b>主屏 60pt @3x</figcaption></figure><figure><svg class="tile" width="120" height="120"><use href="#i-a-deep"/></svg><figcaption><b>120 px</b>主屏 @2x</figcaption></figure><figure><svg class="tile" width="87" height="87"><use href="#i-a-deep"/></svg><figcaption><b>87 px</b>设置 29pt @3x</figcaption></figure><figure><svg class="tile" width="60" height="60"><use href="#i-a-deep"/></svg><figcaption><b>60 px</b>通知 20pt @3x</figcaption></figure><figure><svg class="tile" width="40" height="40"><use href="#i-a-deep"/></svg><figcaption><b>40 px</b>Spotlight</figcaption></figure></div>
</section>
<section class="plate" id="p-b">
  <header class="ph">
    <span class="pk">B</span>
    <h3>券印</h3>
    <span class="pen">SEAL ON NOTE</span>
    <span class="ptag">品类直给</span>
  </header>
  <div class="pbody">
    <div class="colorways">
      <div class="cw cw-deep"><svg class="tile" width="150" height="150"><use href="#i-b-deep"/></svg><span>深空蓝</span></div>
      <div class="cw cw-frost"><svg class="tile" width="150" height="150"><use href="#i-b-frost"/></svg><span>霜白</span></div>
      <div class="cw cw-mono"><svg class="tile mono" width="150" height="150"><use href="#i-b-mono"/></svg><span>单色层</span></div>
    </div>
    <div class="ptext">
      <p class="idea">票面加骑缝章。白色券面承载条款，金章压在右上角并咬出一道缺口——已鉴证、已成交。</p>
      <dl class="judge">
        <dt>成立在哪</dt><dd>延续设计系统里既有的品牌图形（票面轮廓＋琥珀点），换标不换语汇；用户扫一眼就知道这是票据类应用。</dd>
        <dt>代价是什么</dt><dd>文档型图标同质化严重，备忘录、发票、报销、CRM 都是这个骨架，靠金章的位置和缺口才拉得开距离。</dd>
      </dl>
    </div>
    <div class="pmeta"><div class="ax"><span>小尺寸识别</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></div><b>4</b></div><div class="ax"><span>品牌独占性</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i></div><b>3</b></div><div class="ax"><span>品类直给度</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></div><b>5</b></div></div>
  </div>
  <div class="ladder"><figure><svg class="tile" width="180" height="180"><use href="#i-b-deep"/></svg><figcaption><b>180 px</b>主屏 60pt @3x</figcaption></figure><figure><svg class="tile" width="120" height="120"><use href="#i-b-deep"/></svg><figcaption><b>120 px</b>主屏 @2x</figcaption></figure><figure><svg class="tile" width="87" height="87"><use href="#i-b-deep"/></svg><figcaption><b>87 px</b>设置 29pt @3x</figcaption></figure><figure><svg class="tile" width="60" height="60"><use href="#i-b-deep"/></svg><figcaption><b>60 px</b>通知 20pt @3x</figcaption></figure><figure><svg class="tile" width="40" height="40"><use href="#i-b-deep"/></svg><figcaption><b>40 px</b>Spotlight</figcaption></figure></div>
</section>
<section class="plate" id="p-c">
  <header class="ph">
    <span class="pk">C</span>
    <h3>泓池</h3>
    <span class="pen">DEEP POOL</span>
    <span class="ptag">首选</span>
  </header>
  <div class="pbody">
    <div class="colorways">
      <div class="cw cw-deep"><svg class="tile" width="150" height="150"><use href="#i-c-deep"/></svg><span>深空蓝</span></div>
      <div class="cw cw-frost"><svg class="tile" width="150" height="150"><use href="#i-c-frost"/></svg><span>霜白</span></div>
      <div class="cw cw-mono"><svg class="tile mono" width="150" height="150"><use href="#i-c-mono"/></svg><span>单色层</span></div>
    </div>
    <div class="ptext">
      <p class="idea">深水为泓。环是池壁，金色水面是池中的水位——资金池、票面价值、已募额度，都能落在这一条水线上。</p>
      <dl class="judge">
        <dt>成立在哪</dt><dd>全组小尺寸识别最好，40px 依然是完整的一个形；抽象但可解释，且不撞任何券商类常见图形。</dd>
        <dt>代价是什么</dt><dd>语义不直白，上线时需要一次品牌解释；半满形态存在被读作电量或进度条的风险。</dd>
      </dl>
    </div>
    <div class="pmeta"><div class="ax"><span>小尺寸识别</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></div><b>5</b></div><div class="ax"><span>品牌独占性</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></div><b>4</b></div><div class="ax"><span>品类直给度</span><div class="bars"><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i></div><b>2</b></div></div>
  </div>
  <div class="ladder"><figure><svg class="tile" width="180" height="180"><use href="#i-c-deep"/></svg><figcaption><b>180 px</b>主屏 60pt @3x</figcaption></figure><figure><svg class="tile" width="120" height="120"><use href="#i-c-deep"/></svg><figcaption><b>120 px</b>主屏 @2x</figcaption></figure><figure><svg class="tile" width="87" height="87"><use href="#i-c-deep"/></svg><figcaption><b>87 px</b>设置 29pt @3x</figcaption></figure><figure><svg class="tile" width="60" height="60"><use href="#i-c-deep"/></svg><figcaption><b>60 px</b>通知 20pt @3x</figcaption></figure><figure><svg class="tile" width="40" height="40"><use href="#i-c-deep"/></svg><figcaption><b>40 px</b>Spotlight</figcaption></figure></div>
</section>
<section class="plate" id="p-d">
  <header class="ph">
    <span class="pk">D</span>
    <h3>泓衡</h3>
    <span class="pen">H-MARK</span>
    <span class="ptag">国际线</span>
  </header>
  <div class="pbody">
    <div class="colorways">
      <div class="cw cw-deep"><svg class="tile" width="150" height="150"><use href="#i-d-deep"/></svg><span>深空蓝</span></div>
      <div class="cw cw-frost"><svg class="tile" width="150" height="150"><use href="#i-d-frost"/></svg><span>霜白</span></div>
      <div class="cw cw-mono"><svg class="tile mono" width="150" height="150"><use href="#i-d-mono"/></svg><span>单色层</span></div>
    </div>
    <div class="ptext">
      <p class="idea">HONMATRIX 的首字母。斜梁既是上行的收益轴，也是「衡」——询价撮合两端的平衡。</p>
      <dl class="judge">
        <dt>成立在哪</dt><dd>对应英文名 HONMATRIX Notes，出海和英文商店场景最稳；字母标在任何尺寸下都不会糊。</dd>
        <dt>代价是什么</dt><dd>单字母记忆点低，H 又是高频字母；中文市场几乎读不出品牌联想。</dd>
      </dl>
    </div>
    <div class="pmeta"><div class="ax"><span>小尺寸识别</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></div><b>4</b></div><div class="ax"><span>品牌独占性</span><div class="bars"><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i></div><b>2</b></div><div class="ax"><span>品类直给度</span><div class="bars"><i class="on"></i><i class=""></i><i class=""></i><i class=""></i><i class=""></i></div><b>1</b></div></div>
  </div>
  <div class="ladder"><figure><svg class="tile" width="180" height="180"><use href="#i-d-deep"/></svg><figcaption><b>180 px</b>主屏 60pt @3x</figcaption></figure><figure><svg class="tile" width="120" height="120"><use href="#i-d-deep"/></svg><figcaption><b>120 px</b>主屏 @2x</figcaption></figure><figure><svg class="tile" width="87" height="87"><use href="#i-d-deep"/></svg><figcaption><b>87 px</b>设置 29pt @3x</figcaption></figure><figure><svg class="tile" width="60" height="60"><use href="#i-d-deep"/></svg><figcaption><b>60 px</b>通知 20pt @3x</figcaption></figure><figure><svg class="tile" width="40" height="40"><use href="#i-d-deep"/></svg><figcaption><b>40 px</b>Spotlight</figcaption></figure></div>
</section>
<section class="plate" id="p-e">
  <header class="ph">
    <span class="pk">E</span>
    <h3>玺信</h3>
    <span class="pen">CHOP</span>
    <span class="ptag">文化重</span>
  </header>
  <div class="pbody">
    <div class="colorways">
      <div class="cw cw-deep"><svg class="tile" width="150" height="150"><use href="#i-e-deep"/></svg><span>深空蓝</span></div>
      <div class="cw cw-frost"><svg class="tile" width="150" height="150"><use href="#i-e-frost"/></svg><span>霜白</span></div>
      <div class="cw cw-mono"><svg class="tile mono" width="150" height="150"><use href="#i-e-mono"/></svg><span>单色层</span></div>
    </div>
    <div class="ptext">
      <p class="idea">印玺框内一个「泓」。持牌法团的信用凭证感，也是 brand.json 里已经写着的 aboutMarkGlyph。</p>
      <dl class="judge">
        <dt>成立在哪</dt><dd>中文语境下品牌名直给，港澳金融机构的通用语汇；一眼就是泓衍，不需要任何解释。</dd>
        <dt>代价是什么</dt><dd>汉字在 40px 和 Apple Watch 尺寸下会糊成一团；英文商店与海外用户不通用，须另备一套非汉字副标。</dd>
      </dl>
    </div>
    <div class="pmeta"><div class="ax"><span>小尺寸识别</span><div class="bars"><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i><i class=""></i></div><b>2</b></div><div class="ax"><span>品牌独占性</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></div><b>5</b></div><div class="ax"><span>品类直给度</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i></div><b>3</b></div></div>
  </div>
  <div class="ladder"><figure><svg class="tile" width="180" height="180"><use href="#i-e-deep"/></svg><figcaption><b>180 px</b>主屏 60pt @3x</figcaption></figure><figure><svg class="tile" width="120" height="120"><use href="#i-e-deep"/></svg><figcaption><b>120 px</b>主屏 @2x</figcaption></figure><figure><svg class="tile" width="87" height="87"><use href="#i-e-deep"/></svg><figcaption><b>87 px</b>设置 29pt @3x</figcaption></figure><figure><svg class="tile" width="60" height="60"><use href="#i-e-deep"/></svg><figcaption><b>60 px</b>通知 20pt @3x</figcaption></figure><figure><svg class="tile" width="40" height="40"><use href="#i-e-deep"/></svg><figcaption><b>40 px</b>Spotlight</figcaption></figure></div>
</section>
<section class="plate" id="p-f">
  <header class="ph">
    <span class="pk">F</span>
    <h3>票角</h3>
    <span class="pen">DOG-EAR</span>
    <span class="ptag">满版构图</span>
  </header>
  <div class="pbody">
    <div class="colorways">
      <div class="cw cw-deep"><svg class="tile" width="150" height="150"><use href="#i-f-deep"/></svg><span>深空蓝</span></div>
      <div class="cw cw-frost"><svg class="tile" width="150" height="150"><use href="#i-f-frost"/></svg><span>霜白</span></div>
      <div class="cw cw-mono"><svg class="tile mono" width="150" height="150"><use href="#i-f-mono"/></svg><span>单色层</span></div>
    </div>
    <div class="ptext">
      <p class="idea">整枚图标就是一张票据：右下角翻起鎏金折角，金色短条是票面额度。</p>
      <dl class="judge">
        <dt>成立在哪</dt><dd>满版构图在小尺寸下最完整，没有「图形浮在底色上」的漂浮感；折角本身可延展成卡片、空状态的品牌图形。</dd>
        <dt>代价是什么</dt><dd>骨架与系统备忘录／文件图标接近；折角会被圆角遮罩切掉一部分，实际露出的金色比母版少。</dd>
      </dl>
    </div>
    <div class="pmeta"><div class="ax"><span>小尺寸识别</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></div><b>4</b></div><div class="ax"><span>品牌独占性</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i><i class=""></i></div><b>3</b></div><div class="ax"><span>品类直给度</span><div class="bars"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class=""></i></div><b>4</b></div></div>
  </div>
  <div class="ladder"><figure><svg class="tile" width="180" height="180"><use href="#i-f-deep"/></svg><figcaption><b>180 px</b>主屏 60pt @3x</figcaption></figure><figure><svg class="tile" width="120" height="120"><use href="#i-f-deep"/></svg><figcaption><b>120 px</b>主屏 @2x</figcaption></figure><figure><svg class="tile" width="87" height="87"><use href="#i-f-deep"/></svg><figcaption><b>87 px</b>设置 29pt @3x</figcaption></figure><figure><svg class="tile" width="60" height="60"><use href="#i-f-deep"/></svg><figcaption><b>60 px</b>通知 20pt @3x</figcaption></figure><figure><svg class="tile" width="40" height="40"><use href="#i-f-deep"/></svg><figcaption><b>40 px</b>Spotlight</figcaption></figure></div>
</section>

<section class="stage">
  <div class="h2"><span class="eyebrow">03</span><h2>桌面实景</h2></div>
  <p class="lede">图标的真正对手不是彼此，是桌面上邻居的饱和度。三种壁纸下各放一次，看的是能不能在半秒内被找到。</p>
  <div class="screens">
    <div class="screen s-night">
      <div class="grid">
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-c-deep"/></svg><span>泓衍票据</span></div>
        <div class="app"><div class="ghost g1">讯</div><span>消息</span></div>
        <div class="app"><div class="ghost g3">历</div><span>日历</span></div>
        <div class="app"><div class="ghost g4">档</div><span>文件</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-b-deep"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-f-deep"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-e-deep"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-a-deep"/></svg><span>泓衍票据</span></div>
      </div>
      <div class="scap">深色壁纸 · iOS 主屏 60pt</div>
    </div>
    <div class="screen s-day">
      <div class="grid">
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-c-frost"/></svg><span>泓衍票据</span></div>
        <div class="app"><div class="ghost g1">讯</div><span>消息</span></div>
        <div class="app"><div class="ghost g3">历</div><span>日历</span></div>
        <div class="app"><div class="ghost g4">档</div><span>文件</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-b-frost"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-f-frost"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-e-frost"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-a-frost"/></svg><span>泓衍票据</span></div>
      </div>
      <div class="scap">浅色壁纸 · 霜白配色</div>
    </div>
    <div class="screen s-photo">
      <div class="grid">
        <div class="app"><svg class="tile" width="62" height="62"><use href="#i-c-deep"/></svg><span>泓衍票据</span></div>
        <div class="app"><div class="ghost g1">讯</div><span>消息</span></div>
        <div class="app"><div class="ghost g3">历</div><span>日历</span></div>
        <div class="app"><div class="ghost g4">档</div><span>文件</span></div>
        <div class="app"><svg class="tile mono" width="62" height="62" style="background:#2b3550"><use href="#i-c-mono"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile mono" width="62" height="62" style="background:#2b3550"><use href="#i-b-mono"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile mono" width="62" height="62" style="background:#2b3550"><use href="#i-f-mono"/></svg><span>泓衍票据</span></div>
        <div class="app"><svg class="tile mono" width="62" height="62" style="background:#2b3550"><use href="#i-a-mono"/></svg><span>泓衍票据</span></div>
      </div>
      <div class="scap">照片壁纸 · 下排为 Android 13+ 单色图标</div>
    </div>
  </div>
</section>

<section class="deliver">
  <div class="h2"><span class="eyebrow">04</span><h2>交付与落位</h2></div>
  <p class="lede">每组方案都已按下列图层导出母版，选定后按此表替换 <code>hehui/brands/hehui/</code> 下的同名文件即可。</p>
  <div class="tablewrap">
  <table>
    <thead><tr><th>目标文件</th><th>取自</th><th>尺寸</th><th>要点</th></tr></thead>
    <tbody>
      <tr><td><code>icon.png</code></td><td class="mono">*-deep-1024.png</td><td class="mono">1024²</td>
        <td>iOS 母版满版出血，不带 alpha、不带圆角，系统按 22.37% 连续圆角遮罩</td></tr>
      <tr><td><code>android-icon-foreground.png</code></td><td class="mono">*-android-fg-1024.png</td><td class="mono">512²</td>
        <td>透明底，图形已按 0.72 收进 66dp 安全区，四周留出被裁切的余量</td></tr>
      <tr><td><code>android-icon-background.png</code></td><td class="mono">*-android-bg-1024.png</td><td class="mono">512²</td>
        <td>只含底色与满版元素（F 方案的折角在这一层）</td></tr>
      <tr><td><code>android-icon-monochrome.png</code></td><td class="mono">*-android-mono-1024.png</td><td class="mono">512²</td>
        <td>Android 13+ 主题图标，仅保留 alpha，颜色由系统着色</td></tr>
      <tr><td><code>favicon.png</code></td><td class="mono">*-deep-1024.png</td><td class="mono">48²</td>
        <td>Web 端；缩到 48px 后需回看一次，必要时单独加粗笔画</td></tr>
      <tr><td><code>splash-icon.png</code></td><td class="mono">*-android-fg-1024.png</td><td class="mono">228 × 213</td>
        <td>透明底前景层，<code>brand.json</code> 中 <code>splash.imageWidth</code> 现为 76</td></tr>
    </tbody>
  </table>
  </div>
  <div class="warn">
    <b>一处需要同步改的配置。</b> <code>brand.json</code> 里 <code>identity.androidAdaptiveIconBackground</code> 当前是 <code>#E6F4FE</code>（浅冰蓝），采用深空蓝配色后 Android 自适应图标的底色会和图标本身脱节。改为 <code>#1B4FD8</code>，或直接用上表的背景图层 PNG 覆盖。<code>splash.backgroundColor</code> 已是 <code>#1B4FD8</code>，与本组母版一致，无需改动。
  </div>
</section>

<footer>
  <span>泓衍票据 · 桌面图标提案</span>
  <span>深空蓝设计系统 · 图纸 10</span>
  <span>6 组方向 · 42 个母版文件</span>
</footer>
</div>