Space page: the organisation card as a page, in the LogoLabs style

index.html

@@ -1,19 +1,92 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>LogoLabs</title>
+<meta name="description" content="LogoLabs designs custom logos and brand identities from data, and publishes the research behind it: Inkvec, Agate and LogoBrief-10K.">
+<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=Inter:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+<main>
+<h1>LogoLabs</h1>
+<p>LogoLabs designs custom logos and brand identities for startups, SMEs and founders, working
+from data. Our process is research-backed: we study how brands are drawn, what their briefs
+ask for and which choices hold up, and a short conversational brief becomes a set of original
+concepts, refined with you. The result is a logo and full brand guidelines in days, not weeks.</p>
+<p>The research behind that work is open. Here you'll find the models, tools and datasets we
+build it on: generating marks, turning them into clean vector files, and understanding what
+makes a design brief. The tools run on your own machine or in your browser, and nothing you
+draw or type is sent anywhere.</p>
+<p><strong>Want a finished identity rather than a tool?</strong> We design custom logos with 20-page brand
+guidelines and full commercial rights, delivered in 24–48 hours, from €20. Start at
+<a href="https://logolabs.org" target="_blank" rel="noopener">logolabs.org</a> or <a href="https://logolabs.org/contact" target="_blank" rel="noopener">contact us</a>.</p>
+<h2>Inkvec: raster to SVG, exactly</h2>
+<p><a href="https://github.com/logolabs/inkvec" target="_blank" rel="noopener"><strong>Inkvec</strong></a> is an open-source (Apache-2.0) vectoriser
+that turns a PNG, JPEG or WebP logo into a clean SVG. It fits every shape by minimum
+description length: edges placed to a fraction of a pixel, the fewest curves that match
+the image, gradients kept as gradients, and transparency traced as it is. In our published
+comparison it has the lowest colour error on every case against VTracer and Trazor, and a
+Fast mode trades a little of that precision for speed.</p>
+<ul>
+<li><strong>Try it in the browser:</strong> <a href="https://huggingface.co/spaces/Logolabs/inkvec" target="_blank" rel="noopener">Inkvec Studio Lite</a>,
+  the full editor as WebAssembly, with before-and-after comparisons on real logos.</li>
+<li><strong>Desktop app and command line</strong> for Windows, macOS and Linux:
+  <a href="https://github.com/logolabs/inkvec/releases" target="_blank" rel="noopener">releases</a>.</li>
+<li><strong>Bindings</strong> for Python, JavaScript, Go, Swift, Java, .NET, PHP and C, all generated from
+  one options schema.</li>
+</ul>
+<p>Two small models ship with it, and are released on their own too:</p>
+<table>
+<thead>
+<tr>
+<th>Model</th>
+<th>What it does</th>
+<th>Size</th>
+<th>Licence</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><a href="https://huggingface.co/Logolabs/inkvec-denoiser-001" target="_blank" rel="noopener">inkvec-denoiser-001</a></td>
+<td>Removes JPEG, WebP and AI-decoder damage from flat artwork before tracing</td>
+<td>19.7M</td>
+<td>Apache-2.0</td>
+</tr>
+<tr>
+<td><a href="https://huggingface.co/Logolabs/inkvec-sr-001" target="_blank" rel="noopener">inkvec-sr-001</a></td>
+<td>4x super-resolution for logos and icons (MambaIRv2-Small, fine-tuned)</td>
+<td>9.77M</td>
+<td>Apache-2.0</td>
+</tr>
+</tbody>
+</table>
+<h2>Agate: a compact text-to-image model</h2>
+<p><a href="https://huggingface.co/Logolabs/agate-preview-001" target="_blank" rel="noopener"><strong>Agate Preview 001</strong></a> is a
+260M-parameter text-to-image model trained from scratch in 145 GPU-hours. It scores 0.550
+on GenEval with the official scorer, level with SDXL's published 0.55, and runs in under two
+seconds on a consumer GPU (MIT).</p>
+<ul>
+<li><strong>Try it in the browser:</strong> <a href="https://huggingface.co/spaces/Logolabs/agate-webgpu" target="_blank" rel="noopener">Agate WebGPU</a>,
+  where the whole model runs on your own GPU; prompts never leave your machine.</li>
+<li><strong>ComfyUI:</strong> the <a href="https://github.com/logolabs/agate-comfyui" target="_blank" rel="noopener">agate-comfyui</a> node pack.</li>
+</ul>
+<h2>LogoBrief-10K: a dataset of logos and their briefs</h2>
+<p><a href="https://huggingface.co/datasets/Logolabs/LogoBrief-10K" target="_blank" rel="noopener"><strong>LogoBrief-10K</strong></a> is 10,000 brand
+logos, each with its original SVG and a clean raster render, plus design annotations:
+open-vocabulary style tags, a one-sentence motif description, a full generated design brief,
+and text-region bounding boxes. Domains are sampled by web-popularity rank rather than picked
+for recognisable brands, and every one was checked for AI-training opt-out signals before
+publication. Access is gated; the card's preview images are in
+<a href="https://huggingface.co/datasets/Logolabs/LogoBrief-10K-assets" target="_blank" rel="noopener">LogoBrief-10K-assets</a>.</p>
+<h2>Compute</h2>
+<p>Our models were trained on <strong>Arrhenius</strong> at NAISS, through <strong>EuroHPC JU</strong>.</p>
+<h2>Links</h2>
+<p><a href="https://logolabs.org" target="_blank" rel="noopener">logolabs.org</a> · <a href="https://logolabs.org/contact" target="_blank" rel="noopener">Contact</a> ·
+<a href="https://github.com/logolabs" target="_blank" rel="noopener">GitHub</a> · <a href="https://logolabs.github.io/inkvec" target="_blank" rel="noopener">Inkvec documentation</a></p>
+</main>
+</body>
+</html>

style.css

@@ -1,28 +1,20 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+/* LogoLabs: charcoal and copper, Playfair Display for headings, Inter for text. */
+:root { --bg: #141414; --panel: #1c1c1c; --rule: #2e2e2e; --text: #e8e4de; --dim: #a8a29a; --copper: #c9754a; }
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 Inter, system-ui, sans-serif; }
+main { max-width: 820px; margin: 0 auto; padding: 56px 20px 80px; }
+h1, h2 { font-family: "Playfair Display", Georgia, serif; line-height: 1.2; }
+h1 { font-size: 44px; margin: 0 0 20px; }
+h1::after { content: ""; display: block; width: 56px; height: 3px; background: var(--copper); margin-top: 14px; }
+h2 { font-size: 26px; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--rule); }
+p, li { color: var(--text); }
+strong { color: #fff; font-weight: 600; }
+a { color: var(--copper); text-decoration: none; border-bottom: 1px solid rgba(201,117,74,.35); }
+a:hover { border-bottom-color: var(--copper); }
+ul { padding-left: 20px; }
+li { margin: 6px 0; }
+table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; background: var(--panel); border-radius: 8px; overflow: hidden; }
+th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
+th { color: var(--dim); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
+tr:last-child td { border-bottom: 0; }
+@media (max-width: 600px) { h1 { font-size: 34px; } table { display: block; overflow-x: auto; } }