174 lines
12 KiB
HTML
174 lines
12 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>FlatRender — Logo Concepts</title>
|
||
|
|
<style>
|
||
|
|
:root { --ink:#0f172a; --muted:#64748b; }
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
body { margin:0; font-family: -apple-system, "Segoe UI", system-ui, sans-serif; color:var(--ink); background:#f8fafc; }
|
||
|
|
header { padding:40px 32px 8px; }
|
||
|
|
h1 { margin:0; font-size:22px; }
|
||
|
|
p.sub { margin:6px 0 0; color:var(--muted); font-size:14px; }
|
||
|
|
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:20px; padding:24px 32px 64px; }
|
||
|
|
.card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.04); }
|
||
|
|
.card h2 { font-size:14px; margin:0; padding:14px 18px; border-bottom:1px solid #f1f5f9; letter-spacing:.02em; }
|
||
|
|
.card .tag { color:var(--muted); font-weight:400; }
|
||
|
|
.row { display:flex; align-items:center; gap:20px; padding:22px 18px; }
|
||
|
|
.row.dark { background:#0f172a; }
|
||
|
|
.row.dark .wm { color:#fff; }
|
||
|
|
.swatch { display:flex; flex-direction:column; gap:4px; align-items:center; }
|
||
|
|
.swatch small { color:var(--muted); font-size:11px; }
|
||
|
|
.row.dark .swatch small { color:#94a3b8; }
|
||
|
|
.wm { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:-.02em; }
|
||
|
|
.wm .fa { font-size:20px; }
|
||
|
|
.sizes { display:flex; align-items:flex-end; gap:16px; padding:18px; border-top:1px solid #f1f5f9; }
|
||
|
|
.note { padding:0 18px 16px; color:var(--muted); font-size:12.5px; line-height:1.5; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<h1>FlatRender — Logo Concepts</h1>
|
||
|
|
<p class="sub">Pick a concept (or mix elements). Each shown on light + dark, with wordmark and at favicon sizes (16/24/40px). Tell me the number + any tweaks.</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
|
||
|
|
<!-- ───────────── Concept 1: Layered Play ───────────── -->
|
||
|
|
<div class="card">
|
||
|
|
<h2>1 — Layered Play <span class="tag">motion frames + video</span></h2>
|
||
|
|
<div class="row">
|
||
|
|
<svg width="72" height="72" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-label="c1">
|
||
|
|
<defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#2563EB"/>
|
||
|
|
</linearGradient></defs>
|
||
|
|
<rect width="48" height="48" rx="12" fill="url(#g1)"/>
|
||
|
|
<path d="M17 14.5 31 24 17 33.5Z" fill="#fff" fill-opacity=".35"/>
|
||
|
|
<path d="M20.5 15.5 33 24 20.5 32.5Z" fill="#fff"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span>Flat<span style="color:#2563EB">Render</span></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="row dark">
|
||
|
|
<svg width="56" height="56" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="48" height="48" rx="12" fill="url(#g1)"/>
|
||
|
|
<path d="M17 14.5 31 24 17 33.5Z" fill="#fff" fill-opacity=".35"/>
|
||
|
|
<path d="M20.5 15.5 33 24 20.5 32.5Z" fill="#fff"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span class="fa">فلترندر</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="sizes">
|
||
|
|
<svg width="40" height="40" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="url(#g1)"/><path d="M17 14.5 31 24 17 33.5Z" fill="#fff" fill-opacity=".35"/><path d="M20.5 15.5 33 24 20.5 32.5Z" fill="#fff"/></svg>
|
||
|
|
<svg width="24" height="24" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="url(#g1)"/><path d="M17 14.5 31 24 17 33.5Z" fill="#fff" fill-opacity=".35"/><path d="M20.5 15.5 33 24 20.5 32.5Z" fill="#fff"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="url(#g1)"/><path d="M20.5 15.5 33 24 20.5 32.5Z" fill="#fff"/></svg>
|
||
|
|
</div>
|
||
|
|
<p class="note">Two offset play triangles = motion / video frames, with a flat-design depth cue. Reads cleanly even at 16px (front triangle only).</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ───────────── Concept 2: Render Frame ───────────── -->
|
||
|
|
<div class="card">
|
||
|
|
<h2>2 — Render Frame <span class="tag">viewport + play (image & video)</span></h2>
|
||
|
|
<div class="row">
|
||
|
|
<svg width="72" height="72" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-label="c2">
|
||
|
|
<defs><linearGradient id="g2" x1="0" y1="0" x2="1" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#0EA5E9"/><stop offset="100%" stop-color="#2563EB"/>
|
||
|
|
</linearGradient></defs>
|
||
|
|
<rect width="48" height="48" rx="12" fill="url(#g2)"/>
|
||
|
|
<!-- corner brackets -->
|
||
|
|
<g stroke="#fff" stroke-width="2.4" stroke-linecap="round" fill="none" stroke-opacity=".9">
|
||
|
|
<path d="M13 17v-2.5a1.5 1.5 0 0 1 1.5-1.5H17"/>
|
||
|
|
<path d="M35 17v-2.5a1.5 1.5 0 0 0-1.5-1.5H31"/>
|
||
|
|
<path d="M13 31v2.5a1.5 1.5 0 0 0 1.5 1.5H17"/>
|
||
|
|
<path d="M35 31v2.5a1.5 1.5 0 0 1-1.5 1.5H31"/>
|
||
|
|
</g>
|
||
|
|
<path d="M20 18.5 30 24 20 29.5Z" fill="#fff"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span>Flat<span style="color:#2563EB">Render</span></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="row dark">
|
||
|
|
<svg width="56" height="56" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="48" height="48" rx="12" fill="url(#g2)"/>
|
||
|
|
<g stroke="#fff" stroke-width="2.4" stroke-linecap="round" fill="none" stroke-opacity=".9">
|
||
|
|
<path d="M13 17v-2.5a1.5 1.5 0 0 1 1.5-1.5H17"/><path d="M35 17v-2.5a1.5 1.5 0 0 0-1.5-1.5H31"/>
|
||
|
|
<path d="M13 31v2.5a1.5 1.5 0 0 0 1.5 1.5H17"/><path d="M35 31v2.5a1.5 1.5 0 0 1-1.5 1.5H31"/>
|
||
|
|
</g>
|
||
|
|
<path d="M20 18.5 30 24 20 29.5Z" fill="#fff"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span class="fa">فلترندر</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="sizes">
|
||
|
|
<svg width="40" height="40" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="url(#g2)"/><g stroke="#fff" stroke-width="2.4" stroke-linecap="round" fill="none" stroke-opacity=".9"><path d="M13 17v-2.5a1.5 1.5 0 0 1 1.5-1.5H17"/><path d="M35 17v-2.5a1.5 1.5 0 0 0-1.5-1.5H31"/><path d="M13 31v2.5a1.5 1.5 0 0 0 1.5 1.5H17"/><path d="M35 31v2.5a1.5 1.5 0 0 1-1.5 1.5H31"/></g><path d="M20 18.5 30 24 20 29.5Z" fill="#fff"/></svg>
|
||
|
|
<svg width="24" height="24" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="url(#g2)"/><g stroke="#fff" stroke-width="3" stroke-linecap="round" fill="none"><path d="M13 17v-2.5a1.5 1.5 0 0 1 1.5-1.5H17"/><path d="M35 17v-2.5a1.5 1.5 0 0 0-1.5-1.5H31"/><path d="M13 31v2.5a1.5 1.5 0 0 0 1.5 1.5H17"/><path d="M35 31v2.5a1.5 1.5 0 0 1-1.5 1.5H31"/></g><path d="M20 18.5 30 24 20 29.5Z" fill="#fff"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="url(#g2)"/><path d="M19 17 31 24 19 31Z" fill="#fff"/></svg>
|
||
|
|
</div>
|
||
|
|
<p class="note">Camera/crop corner brackets frame a play triangle — speaks to both the image editor and video maker. At 16px the brackets drop, leaving a clean play.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ───────────── Concept 3: Monoline F ───────────── -->
|
||
|
|
<div class="card">
|
||
|
|
<h2>3 — Monoline “F” <span class="tag">lettermark + forward motion</span></h2>
|
||
|
|
<div class="row">
|
||
|
|
<svg width="72" height="72" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-label="c3">
|
||
|
|
<rect width="48" height="48" rx="12" fill="#2563EB"/>
|
||
|
|
<!-- F stem -->
|
||
|
|
<rect x="16" y="13" width="3.6" height="22" rx="1.8" fill="#fff"/>
|
||
|
|
<!-- F arms taper like motion -->
|
||
|
|
<rect x="16" y="13" width="16" height="3.6" rx="1.8" fill="#fff"/>
|
||
|
|
<rect x="16" y="22.2" width="11" height="3.6" rx="1.8" fill="#fff" fill-opacity=".75"/>
|
||
|
|
<!-- play accent -->
|
||
|
|
<path d="M30 29 35.5 32 30 35Z" fill="#fff" fill-opacity=".9"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span>Flat<span style="color:#2563EB">Render</span></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="row dark">
|
||
|
|
<svg width="56" height="56" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="48" height="48" rx="12" fill="#2563EB"/>
|
||
|
|
<rect x="16" y="13" width="3.6" height="22" rx="1.8" fill="#fff"/>
|
||
|
|
<rect x="16" y="13" width="16" height="3.6" rx="1.8" fill="#fff"/>
|
||
|
|
<rect x="16" y="22.2" width="11" height="3.6" rx="1.8" fill="#fff" fill-opacity=".75"/>
|
||
|
|
<path d="M30 29 35.5 32 30 35Z" fill="#fff" fill-opacity=".9"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span class="fa">فلترندر</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="sizes">
|
||
|
|
<svg width="40" height="40" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="#2563EB"/><rect x="16" y="13" width="3.6" height="22" rx="1.8" fill="#fff"/><rect x="16" y="13" width="16" height="3.6" rx="1.8" fill="#fff"/><rect x="16" y="22.2" width="11" height="3.6" rx="1.8" fill="#fff" fill-opacity=".75"/><path d="M30 29 35.5 32 30 35Z" fill="#fff" fill-opacity=".9"/></svg>
|
||
|
|
<svg width="24" height="24" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="#2563EB"/><rect x="16" y="13" width="4" height="22" rx="2" fill="#fff"/><rect x="16" y="13" width="16" height="4" rx="2" fill="#fff"/><rect x="16" y="22" width="11" height="4" rx="2" fill="#fff" fill-opacity=".8"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 48 48"><rect width="48" height="48" rx="12" fill="#2563EB"/><rect x="17" y="13" width="5" height="22" rx="2.5" fill="#fff"/><rect x="17" y="13" width="15" height="5" rx="2.5" fill="#fff"/><rect x="17" y="22" width="10" height="5" rx="2.5" fill="#fff"/></svg>
|
||
|
|
</div>
|
||
|
|
<p class="note">An “F” whose stacked arms + small play chevron suggest forward motion and flat layers. Strongest as a recognizable lettermark; scales to a clean monogram at 16px.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ───────────── Concept 4: Aperture Play ───────────── -->
|
||
|
|
<div class="card">
|
||
|
|
<h2>4 — Aperture Play <span class="tag">render/lens + play</span></h2>
|
||
|
|
<div class="row">
|
||
|
|
<svg width="72" height="72" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-label="c4">
|
||
|
|
<defs><linearGradient id="g4" x1="0" y1="0" x2="1" y2="1">
|
||
|
|
<stop offset="0%" stop-color="#7C3AED"/><stop offset="100%" stop-color="#2563EB"/>
|
||
|
|
</linearGradient></defs>
|
||
|
|
<rect width="48" height="48" rx="14" fill="url(#g4)"/>
|
||
|
|
<circle cx="24" cy="24" r="11.5" fill="none" stroke="#fff" stroke-width="2.2" stroke-opacity=".55"/>
|
||
|
|
<path d="M21 18.5 31 24 21 29.5Z" fill="#fff"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span>Flat<span style="color:#2563EB">Render</span></span></div>
|
||
|
|
</div>
|
||
|
|
<div class="row dark">
|
||
|
|
<svg width="56" height="56" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<rect width="48" height="48" rx="14" fill="url(#g4)"/>
|
||
|
|
<circle cx="24" cy="24" r="11.5" fill="none" stroke="#fff" stroke-width="2.2" stroke-opacity=".55"/>
|
||
|
|
<path d="M21 18.5 31 24 21 29.5Z" fill="#fff"/>
|
||
|
|
</svg>
|
||
|
|
<div class="wm"><span class="fa">فلترندر</span></div>
|
||
|
|
</div>
|
||
|
|
<div class="sizes">
|
||
|
|
<svg width="40" height="40" viewBox="0 0 48 48"><rect width="48" height="48" rx="14" fill="url(#g4)"/><circle cx="24" cy="24" r="11.5" fill="none" stroke="#fff" stroke-width="2.2" stroke-opacity=".55"/><path d="M21 18.5 31 24 21 29.5Z" fill="#fff"/></svg>
|
||
|
|
<svg width="24" height="24" viewBox="0 0 48 48"><rect width="48" height="48" rx="14" fill="url(#g4)"/><circle cx="24" cy="24" r="11.5" fill="none" stroke="#fff" stroke-width="2.8" stroke-opacity=".6"/><path d="M21 18.5 31 24 21 29.5Z" fill="#fff"/></svg>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 48 48"><rect width="48" height="48" rx="14" fill="url(#g4)"/><path d="M20 17 32 24 20 31Z" fill="#fff"/></svg>
|
||
|
|
</div>
|
||
|
|
<p class="note">A thin ring (lens/aperture/“render in progress”) around a play triangle. Friendly, modern, distinct from generic play-button icons.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|