Design on FXIO 技术博客

Design on FXIO 技术博客https://fxio.site/tags/design/Recent content in Design on FXIO 技术博客Hugo -- 0.157.0zh-cnFri, 24 Jul 2026 00:00:00 +0000Chromatic · 色彩主题实验室https://fxio.site/posts/demo/chromatic-theme-lab/Fri, 24 Jul 2026 00:00:00 +0000https://fxio.site/posts/demo/chromatic-theme-lab/<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chromatic · 色彩主题实验室</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <style> *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --font-display:'Playfair Display',Georgia,serif; --font-body:Inter,-apple-system,BlinkMacSystemFont,sans-serif; --primary:#1a1a2e;--bg:#faf9f6;--bg-alt:#f2f0eb;--text:#1a1a1a;--text-muted:#6b6b6b; --card-bg:#fff;--card-border:#e8e6e0; --shadow:0 2px 16px rgba(0,0,0,.06);--shadow-hover:0 8px 32px rgba(0,0,0,.1); --cta-text:#fff;--cta-hover:#2a2a3e;--swatch-ring:rgba(0,0,0,.12); --tag-bg:#e8e6e0;--tag-text:#4a4a4a;--accent:#1a1a2e } [data-theme=klein]{ --primary:#002FA7;--accent:#001A5E;--bg:#f2f6ff;--bg-alt:#e8edfc;--card-bg:#fff; --card-border:#d6e0f5;--shadow:0 2px 16px rgba(0,47,167,.08);--shadow-hover:0 8px 32px rgba(0,47,167,.14); --cta-text:#fff;--cta-hover:#0038c4;--swatch-ring:#002FA7;--tag-bg:#d6e0f5;--tag-text:#002FA7 } [data-theme=burgundy]{ --primary:#800020;--accent:#4d0013;--bg:#fdf5f5;--bg-alt:#f8e8ea;--card-bg:#fff; --card-border:#f0d6da;--shadow:0 2px 16px rgba(128,0,32,.08);--shadow-hover:0 8px 32px rgba(128,0,32,.14); --cta-text:#fff;--cta-hover:#a00028;--swatch-ring:#800020;--tag-bg:#f0d6da;--tag-text:#800020 } [data-theme=marrs]{ --primary:#01847F;--accent:#00524E;--bg:#f2faf9;--bg-alt:#e6f4f2;--card-bg:#fff; --card-border:#cce8e4;--shadow:0 2px 16px rgba(1,132,127,.08);--shadow-hover:0 8px 32px rgba(1,132,127,.14); --cta-text:#fff;--cta-hover:#01a09a;--swatch-ring:#01847F;--tag-bg:#cce8e4;--tag-text:#01847F } [data-theme=tiffany]{ --primary:#0ABAB5;--accent:#078C88;--bg:#f0fcfb;--bg-alt:#e0f8f6;--card-bg:#fff; --card-border:#bef0ed;--shadow:0 2px 16px rgba(10,186,181,.08);--shadow-hover:0 8px 32px rgba(10,186,181,.14); --cta-text:#0a3e3c;--cta-hover:#0dd5cf;--swatch-ring:#0ABAB5;--tag-bg:#bef0ed;--tag-text:#078C88 } [data-theme=schonbrunn]{ --primary:#FBEA7B;--accent:#E8CF3A;--bg:#fefcf2;--bg-alt:#fcf7dd;--card-bg:#fff; --card-border:#f7eeb5;--shadow:0 2px 16px rgba(251,234,123,.08);--shadow-hover:0 8px 32px rgba(251,234,123,.14); --cta-text:#1a1a1a;--cta-hover:#ffee8a;--text:#2a2a1a;--text-muted:#7a7a5a; --swatch-ring:#FBEA7B;--tag-bg:#f7eeb5;--tag-text:#6b5f1a } [data-theme=dark]{ --primary:#e0e0e0;--accent:#fff;--bg:#121212;--bg-alt:#1e1e1e;--text:#e8e8e8; --text-muted:#9a9a9a;--card-bg:#1e1e1e;--card-border:#333; --shadow:0 2px 16px rgba(0,0,0,.3);--shadow-hover:0 8px 32px rgba(0,0,0,.4); --cta-text:#121212;--cta-hover:#fff;--swatch-ring:#555;--tag-bg:#333;--tag-text:#ccc } html{scroll-behavior:smooth} body{ font-family:var(--font-body);color:var(--text);background:var(--bg); transition:background .4s ease,color .4s ease;min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased } @media(prefers-reduced-motion:reduce){body,*{transition-duration:.01ms!important}} .container{max-width:1120px;margin:0 auto;padding:0 24px} .palette-bar{display:flex;justify-content:center;align-items:center;gap:16px;padding:32px 0 16px;flex-wrap:wrap} .swatch-wrapper{position:relative} .swatch{ width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;outline:none;position:relative } .swatch:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .swatch:hover{transform:scale(1.2);box-shadow:0 4px 16px rgba(0,0,0,.14)} .swatch.active{ border-color:var(--swatch-ring);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--swatch-ring); transform:scale(1.15) } .swatch-label{ position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%); font-size:10px;color:var(--text-muted);white-space:nowrap;opacity:0; transition:opacity .3s ease;pointer-events:none;letter-spacing:.3px } .swatch-wrapper:hover .swatch-label,.swatch.active+.swatch-label{opacity:1} .hero{text-align:center;padding:48px 0 32px} .hero-eyebrow{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;transition:color .4s ease} .hero h1{ font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.8rem);font-weight:600; line-height:1.15;letter-spacing:-.02em;color:var(--text);transition:color .4s ease;margin-bottom:16px } .hero h1 em{font-style:italic;color:var(--primary);transition:color .4s ease} .hero p{font-size:1.05rem;color:var(--text-muted);max-width:580px;margin:0 auto 36px;line-height:1.7;transition:color .4s ease} .hero-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap} .cta{ display:inline-flex;align-items:center;gap:8px;padding:14px 36px;border-radius:100px; font-family:var(--font-body);font-size:.95rem;font-weight:600;letter-spacing:.3px; text-decoration:none;background:var(--primary);color:var(--cta-text);border:none;cursor:pointer; transition:background .4s ease,color .4s ease,transform .25s ease,box-shadow .3s ease; box-shadow:0 2px 12px rgba(0,0,0,.08) } .cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12);background:var(--cta-hover)} .cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .cta-outline{background:transparent;color:var(--primary);border:2px solid var(--primary);box-shadow:none} .cta-outline:hover{background:var(--primary);color:var(--cta-text);box-shadow:0 4px 14px rgba(0,0,0,.08)} .cards-section{padding:48px 0 80px} .cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .card{ background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:32px 28px; box-shadow:var(--shadow);transition:background .4s ease,border-color .4s ease,box-shadow .4s ease,transform .3s ease } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)} .card-icon{ width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:18px;background:var(--primary);color:var(--cta-text);margin-bottom:18px; transition:background .4s ease,color .4s ease } .card h3{font-family:var(--font-body);font-size:1.15rem;font-weight:600;margin-bottom:8px;color:var(--text);transition:color .4s ease} .card p{font-size:.92rem;color:var(--text-muted);line-height:1.65;transition:color .4s ease;margin-bottom:16px} .card-tags{display:flex;gap:8px;flex-wrap:wrap} .card-tag{ font-size:11px;font-weight:500;padding:4px 12px;border-radius:100px; background:var(--tag-bg);color:var(--tag-text);letter-spacing:.3px;transition:background .4s ease,color .4s ease } .page-footer{text-align:center;padding:32px 0 48px;border-top:1px solid var(--card-border);transition:border-color .4s ease} .page-footer p{font-size:.82rem;color:var(--text-muted);transition:color .4s ease} @media(max-width:640px){ .palette-bar{gap:12px} .swatch{width:30px;height:30px} .hero h1{font-size:1.8rem} .hero p{font-size:.95rem} .cta{padding:12px 28px;font-size:.88rem} .cards-grid{gap:16px} .card{padding:24px 20px} } </style> </head> <body> <div class="container"> <div class="palette-bar" role="radiogroup" aria-label="主题色切换"> <div class="swatch-wrapper"> <button class="swatch active" data-theme-val="klein" style="background:#002FA7" role="radio" aria-checked="true" aria-label="克莱因蓝"></button> <span class="swatch-label">克莱因蓝</span> </div> <div class="swatch-wrapper"> <button class="swatch" data-theme-val="burgundy" style="background:#800020" role="radio" aria-checked="false" aria-label="勃艮第红"></button> <span class="swatch-label">勃艮第红</span> </div> <div class="swatch-wrapper"> <button class="swatch" data-theme-val="marrs" style="background:#01847F" role="radio" aria-checked="false" aria-label="马尔斯绿"></button> <span class="swatch-label">马尔斯绿</span> </div> <div class="swatch-wrapper"> <button class="swatch" data-theme-val="tiffany" style="background:#0ABAB5" role="radio" aria-checked="false" aria-label="蒂芙尼蓝"></button> <span class="swatch-label">蒂芙尼蓝</span> </div> <div class="swatch-wrapper"> <button class="swatch" data-theme-val="schonbrunn" style="background:#FBEA7B" role="radio" aria-checked="false" aria-label="申布伦黄"></button> <span class="swatch-label">申布伦黄</span> </div> <div class="swatch-wrapper"> <button class="swatch" data-theme-val="dark" style="background:#222;border-color:#555" role="radio" aria-checked="false" aria-label="深色模式"> <span style="color:#f0e68c;font-size:14px;display:flex;align-items:center;justify-content:center;height:100%">🌙</span> </button> <span class="swatch-label">深色模式</span> </div> </div> <section class="hero"> <p class="hero-eyebrow">Chromatic · 色彩叙事</p>