1 line
6.4 KiB
HTML
1 line
6.4 KiB
HTML
<!doctype html><meta charset="utf-8"><title>Sanctification branding concepts</title><style>@font-face{font-family:P052;src:url(../../fonts/P052-Bold.otf)}body{background:#f4ead4;color:#263f50;margin:40px;font-family:system-ui}h1,h2{font-family:P052}section{margin:32px 0;border-top:1px solid #a7aaa0;padding:16px 0}.themes{display:flex;gap:20px}.theme{padding:20px;flex:1}.dark{background:#263f50;color:#f4ead4}.light{background:#fff;color:#263f50}.icons{display:flex;gap:32px;align-items:center;height:90px}.sample{display:flex;align-items:center;gap:10px}img.logo{width:100%;max-width:650px}p{max-width:900px}</style><h1>Sanctification: three identity directions</h1><p>Review raster explorations by Astra Medium. Marks generated with built-in image_gen; lettering uses shared P052. PNG icons below have intrinsic 16, 32, and 64 pixel dimensions. Use browser zoom 100% to assess CSS pixel size. Cream tiles deliberately preserve contrast on either theme.</p><p><a href="comparison.png">Comparison sheet</a> · <a href="README.md">Review and limitations</a></p><section><h2>Lighted Window</h2><p>Cross and glass are immediate. Tall proportions reduce favicon presence.</p><div class="themes"><div class="theme light"><img class="logo" src="01-lighted-window/logo-light.png"><p>Favicon tile — actual dimensions</p><div class="icons"><div class="sample"><img src="01-lighted-window/favicon-16.png" width="16" height="16">16 px</div><div class="sample"><img src="01-lighted-window/favicon-32.png" width="32" height="32">32 px</div><div class="sample"><img src="01-lighted-window/favicon-64.png" width="64" height="64">64 px</div></div><p>Raw transparent mark — contrast diagnostic</p><div class="icons"><div class="sample"><img src="01-lighted-window/transparent-mark-16.png" width="16" height="16">16 px</div><div class="sample"><img src="01-lighted-window/transparent-mark-32.png" width="32" height="32">32 px</div><div class="sample"><img src="01-lighted-window/transparent-mark-64.png" width="64" height="64">64 px</div></div></div><div class="theme dark"><img class="logo" src="01-lighted-window/logo-dark.png"><p>Favicon tile — actual dimensions</p><div class="icons"><div class="sample"><img src="01-lighted-window/favicon-16.png" width="16" height="16">16 px</div><div class="sample"><img src="01-lighted-window/favicon-32.png" width="32" height="32">32 px</div><div class="sample"><img src="01-lighted-window/favicon-64.png" width="64" height="64">64 px</div></div><p>Raw transparent mark — contrast diagnostic</p><div class="icons"><div class="sample"><img src="01-lighted-window/transparent-mark-16.png" width="16" height="16">16 px</div><div class="sample"><img src="01-lighted-window/transparent-mark-32.png" width="32" height="32">32 px</div><div class="sample"><img src="01-lighted-window/transparent-mark-64.png" width="64" height="64">64 px</div></div></div></div></section><section><h2>Renewing Flame</h2><p>Expressive silhouette. Rough cross cutout needs a careful redraw.</p><div class="themes"><div class="theme light"><img class="logo" src="02-renewing-flame/logo-light.png"><p>Favicon tile — actual dimensions</p><div class="icons"><div class="sample"><img src="02-renewing-flame/favicon-16.png" width="16" height="16">16 px</div><div class="sample"><img src="02-renewing-flame/favicon-32.png" width="32" height="32">32 px</div><div class="sample"><img src="02-renewing-flame/favicon-64.png" width="64" height="64">64 px</div></div><p>Raw transparent mark — contrast diagnostic</p><div class="icons"><div class="sample"><img src="02-renewing-flame/transparent-mark-16.png" width="16" height="16">16 px</div><div class="sample"><img src="02-renewing-flame/transparent-mark-32.png" width="32" height="32">32 px</div><div class="sample"><img src="02-renewing-flame/transparent-mark-64.png" width="64" height="64">64 px</div></div></div><div class="theme dark"><img class="logo" src="02-renewing-flame/logo-dark.png"><p>Favicon tile — actual dimensions</p><div class="icons"><div class="sample"><img src="02-renewing-flame/favicon-16.png" width="16" height="16">16 px</div><div class="sample"><img src="02-renewing-flame/favicon-32.png" width="32" height="32">32 px</div><div class="sample"><img src="02-renewing-flame/favicon-64.png" width="64" height="64">64 px</div></div><p>Raw transparent mark — contrast diagnostic</p><div class="icons"><div class="sample"><img src="02-renewing-flame/transparent-mark-16.png" width="16" height="16">16 px</div><div class="sample"><img src="02-renewing-flame/transparent-mark-32.png" width="32" height="32">32 px</div><div class="sample"><img src="02-renewing-flame/transparent-mark-64.png" width="64" height="64">64 px</div></div></div></div></section><section><h2>Rose of Grace</h2><p>Best square silhouette. Simplify small gold details for production.</p><div class="themes"><div class="theme light"><img class="logo" src="03-rose-of-grace/logo-light.png"><p>Favicon tile — actual dimensions</p><div class="icons"><div class="sample"><img src="03-rose-of-grace/favicon-16.png" width="16" height="16">16 px</div><div class="sample"><img src="03-rose-of-grace/favicon-32.png" width="32" height="32">32 px</div><div class="sample"><img src="03-rose-of-grace/favicon-64.png" width="64" height="64">64 px</div></div><p>Raw transparent mark — contrast diagnostic</p><div class="icons"><div class="sample"><img src="03-rose-of-grace/transparent-mark-16.png" width="16" height="16">16 px</div><div class="sample"><img src="03-rose-of-grace/transparent-mark-32.png" width="32" height="32">32 px</div><div class="sample"><img src="03-rose-of-grace/transparent-mark-64.png" width="64" height="64">64 px</div></div></div><div class="theme dark"><img class="logo" src="03-rose-of-grace/logo-dark.png"><p>Favicon tile — actual dimensions</p><div class="icons"><div class="sample"><img src="03-rose-of-grace/favicon-16.png" width="16" height="16">16 px</div><div class="sample"><img src="03-rose-of-grace/favicon-32.png" width="32" height="32">32 px</div><div class="sample"><img src="03-rose-of-grace/favicon-64.png" width="64" height="64">64 px</div></div><p>Raw transparent mark — contrast diagnostic</p><div class="icons"><div class="sample"><img src="03-rose-of-grace/transparent-mark-16.png" width="16" height="16">16 px</div><div class="sample"><img src="03-rose-of-grace/transparent-mark-32.png" width="32" height="32">32 px</div><div class="sample"><img src="03-rose-of-grace/transparent-mark-64.png" width="64" height="64">64 px</div></div></div></div></section> |