mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
c12c816a44
- Introduced comprehensive design documentation and JSON configurations for multiple design systems, including Agentic, Airtable, Ant, Apple, Application, Arc, and Artistic. - Each design system includes detailed guidelines on visual themes, color palettes, typography, spacing, layout, components, and interaction principles. - Enhanced the overall design framework to support diverse user interfaces and improve consistency across applications. This update significantly enriches the design resources available for developers, enabling them to create visually cohesive and user-friendly applications.
2645 lines
92 KiB
HTML
2645 lines
92 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
|
<title>Open Design — Designing intelligence with skills, taste, and your own agent.</title>
|
|
<meta name='description' content='Open Design is the open-source alternative to Claude Design. 12 coding-agent CLIs · 31 composable skills · 72 brand-grade design systems. Local-first, web-deployable, BYOK at every layer.' />
|
|
<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+Tight:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet' />
|
|
<style>/*
|
|
* Atelier Zero — canonical landing-page stylesheet.
|
|
*
|
|
* This file is the SINGLE SOURCE OF TRUTH for the open-design-landing
|
|
* skill's visual system. It is consumed by:
|
|
*
|
|
* 1. `scripts/compose.ts` — inlined into the standalone HTML output.
|
|
* 2. `apps/landing-page/app/globals.css` — copied verbatim for the
|
|
* Astro static deployable counterpart.
|
|
* 3. `example.html` — the pre-rendered known-good demo.
|
|
*
|
|
* If you change tokens, layout, motion, or component styles, edit them
|
|
* here. The `@import` at top loads the four Google fonts the system
|
|
* requires (Inter Tight, Inter, Playfair Display, JetBrains Mono).
|
|
*
|
|
* Tokens, grid posture, and motion language are defined by
|
|
* `design-systems/atelier-zero/DESIGN.md`. Do not invent new colors or
|
|
* typefaces here; either extend the design system first.
|
|
*/
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
--paper: #efe7d2;
|
|
--paper-warm: #ece4cf;
|
|
--paper-dark: #ddd2b6;
|
|
--ink: #15140f;
|
|
--ink-soft: #2a2620;
|
|
--ink-mute: #5a5448;
|
|
--ink-faint: #8b8676;
|
|
--coral: #ed6f5c;
|
|
--coral-soft: #f08e7c;
|
|
--mustard: #e9b94a;
|
|
--olive: #6e7448;
|
|
--bone: #f7f1de;
|
|
--line: rgba(21, 20, 15, 0.16);
|
|
--line-soft: rgba(21, 20, 15, 0.08);
|
|
--line-faint: rgba(21, 20, 15, 0.05);
|
|
--shadow: 0 30px 60px -30px rgba(21, 20, 15, 0.18);
|
|
--serif: 'Playfair Display', 'Times New Roman', serif;
|
|
--sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
--body: 'Inter', -apple-system, system-ui, sans-serif;
|
|
--mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { background: var(--paper); color: var(--ink); }
|
|
body {
|
|
font-family: var(--body);
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* paper texture overlay across the whole page */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
background-image:
|
|
radial-gradient(circle at 12% 18%, rgba(106, 92, 56, 0.07) 0, transparent 28%),
|
|
radial-gradient(circle at 88% 72%, rgba(106, 92, 56, 0.06) 0, transparent 32%),
|
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
|
background-size: auto, auto, 240px 240px;
|
|
mix-blend-mode: multiply;
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.shell { position: relative; z-index: 2; }
|
|
.container {
|
|
max-width: 1360px;
|
|
padding: 0 64px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
.container.wide { max-width: 1480px; }
|
|
|
|
/* fixed side rails — rotated brand text on the right edge */
|
|
.side-rail {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 36px;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.side-rail.right { right: 0; border-left: 1px solid var(--line-faint); }
|
|
.side-rail.left { left: 0; border-right: 1px solid var(--line-faint); }
|
|
.side-rail .rail-text {
|
|
font-family: var(--sans);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.42em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
white-space: nowrap;
|
|
}
|
|
.side-rail.right .rail-text { transform: rotate(180deg); }
|
|
.side-rail.left .rail-text { writing-mode: vertical-rl; transform: none; }
|
|
|
|
/* top metadata strip */
|
|
.topbar {
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 10px 0;
|
|
background: var(--paper);
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
.topbar-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 24px;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.topbar-inner b { color: var(--ink); font-weight: 600; }
|
|
.topbar-inner .coral { color: var(--coral); }
|
|
.topbar-inner > span { white-space: nowrap; }
|
|
.topbar-inner .mid { display: inline-flex; gap: 26px; }
|
|
.topbar-inner .mid > span { white-space: nowrap; }
|
|
.topbar-inner .right { display: inline-flex; gap: 18px; align-items: center; }
|
|
.topbar-inner .right > span,
|
|
.topbar-inner .right > a { white-space: nowrap; }
|
|
.topbar-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: color 160ms ease, border-color 160ms ease;
|
|
}
|
|
.topbar-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
|
|
.topbar .pulse {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--coral);
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
animation: pulse 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.35; }
|
|
}
|
|
|
|
/* nav */
|
|
/*
|
|
* Headroom-style sticky header.
|
|
*
|
|
* The element is always `position: sticky`, so the browser docks it to the
|
|
* top of the viewport once the topbar has scrolled away. The
|
|
* `<Header />` client island then toggles the `is-hidden` modifier based
|
|
* on scroll direction, which animates the bar in and out via `transform`.
|
|
*
|
|
* When the user is at the very top of the page, the topbar is still
|
|
* visible above the nav and `position: sticky` simply leaves the nav in
|
|
* its natural flow position — exactly the brief.
|
|
*/
|
|
.nav {
|
|
padding: 22px 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: var(--paper);
|
|
transform: translateY(0);
|
|
transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
|
|
box-shadow 220ms ease,
|
|
border-color 220ms ease;
|
|
border-bottom: 1px solid transparent;
|
|
will-change: transform;
|
|
}
|
|
/*
|
|
* Subtle visual cue once we leave the top of the page. We can't tell from
|
|
* CSS alone whether the bar is "stuck"; the deadband + class toggle in
|
|
* <Header /> approximates it well enough for our purpose. We rely on the
|
|
* `is-hidden` toggle to flicker the border while moving and a steady
|
|
* border once docked.
|
|
*/
|
|
.nav.is-hidden {
|
|
transform: translateY(-100%);
|
|
pointer-events: none;
|
|
box-shadow: none;
|
|
}
|
|
.nav-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
font-family: var(--sans);
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
}
|
|
.brand-mark {
|
|
width: 36px; height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1.5px solid var(--ink);
|
|
border-radius: 50%;
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: 17px;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
}
|
|
.brand-meta {
|
|
font-family: var(--sans);
|
|
font-size: 10px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
line-height: 1.3;
|
|
margin-left: 4px;
|
|
border-left: 1px solid var(--line);
|
|
padding-left: 14px;
|
|
}
|
|
.brand-meta b { display: block; color: var(--ink); font-weight: 600; }
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 38px;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: color 0.18s ease;
|
|
position: relative;
|
|
}
|
|
.nav-links a:hover { color: var(--coral); }
|
|
.nav-links a .num {
|
|
font-size: 9px;
|
|
color: var(--ink-faint);
|
|
position: absolute;
|
|
top: -7px;
|
|
right: -16px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.nav-side {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
.nav-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 9px 16px;
|
|
border-radius: 999px;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.nav-cta [data-github-stars],
|
|
.nav-cta [data-github-version] {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.nav-cta::after {
|
|
content: '★';
|
|
color: var(--mustard);
|
|
font-size: 11px;
|
|
}
|
|
.status-dot {
|
|
width: 28px; height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--line);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.status-dot::after {
|
|
content: '';
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--coral);
|
|
}
|
|
|
|
/* ---------- typography primitives ---------- */
|
|
.label {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--coral);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.label::before {
|
|
content: '';
|
|
width: 18px;
|
|
height: 1px;
|
|
background: var(--coral);
|
|
display: inline-block;
|
|
}
|
|
.label .ix {
|
|
color: var(--ink-faint);
|
|
font-weight: 500;
|
|
margin-left: 4px;
|
|
}
|
|
.display {
|
|
font-family: var(--sans);
|
|
font-weight: 800;
|
|
letter-spacing: -0.028em;
|
|
color: var(--ink);
|
|
line-height: 1.0;
|
|
}
|
|
.display em {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
letter-spacing: -0.018em;
|
|
}
|
|
.display .dot { color: var(--coral); }
|
|
.lead {
|
|
font-family: var(--body);
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
color: var(--ink-soft);
|
|
max-width: 36ch;
|
|
}
|
|
.meta {
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.coord {
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ink-faint);
|
|
}
|
|
.roman {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--coral);
|
|
}
|
|
|
|
/* buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 22px;
|
|
border-radius: 999px;
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
letter-spacing: -0.005em;
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--coral);
|
|
color: #fff;
|
|
box-shadow: 0 14px 26px -16px rgba(237, 111, 92, 1);
|
|
}
|
|
.btn-primary:hover { transform: translateY(-1px); background: #e25e4a; }
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border-color: rgba(21, 20, 15, 0.2);
|
|
}
|
|
.btn-ghost:hover { background: rgba(21, 20, 15, 0.04); }
|
|
.btn .arrow {
|
|
width: 16px; height: 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn .arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
|
|
|
|
/* helper used inline in headlines */
|
|
.code-inline {
|
|
font-family: var(--mono);
|
|
font-size: 14px;
|
|
background: var(--bone);
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* ---------- HERO ---------- */
|
|
.hero {
|
|
position: relative;
|
|
padding: 0;
|
|
min-height: calc(100vh - 140px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.hero > .container { flex: 0 0 auto; }
|
|
.hero > .container.hero-grid { flex: 1 1 auto; }
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
background: var(--line-soft);
|
|
z-index: 0;
|
|
display: none;
|
|
}
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
|
|
gap: 36px;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.hero-copy {
|
|
padding: 4vh 0 4vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.hero-copy .label { margin-bottom: 28px; }
|
|
.hero-copy .lead { margin-bottom: 30px; max-width: 38ch; font-size: 16px; }
|
|
.hero h1 {
|
|
font-size: clamp(44px, 5vw, 78px);
|
|
line-height: 1.0;
|
|
margin-bottom: 28px;
|
|
}
|
|
.hero-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 38px;
|
|
}
|
|
.hero-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
flex-wrap: nowrap;
|
|
margin-bottom: 28px;
|
|
}
|
|
.hero-stats .stat { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
|
|
.hero-stats .stat .ring {
|
|
width: 34px; height: 34px;
|
|
border-radius: 50%;
|
|
border: 1px dashed var(--ink);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
.hero-stats .stat .ring.solid { border-style: solid; }
|
|
.hero-stats .stat .ring.coral { border-color: var(--coral); color: var(--coral); }
|
|
.hero-stats .stat-label {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
line-height: 1.25;
|
|
color: var(--ink-soft);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
.hero-stats .stat-label b { display: block; font-weight: 700; color: var(--ink); font-size: 12px; }
|
|
|
|
.hero-foot {
|
|
margin-top: auto;
|
|
padding-top: 22px;
|
|
border-top: 1px solid var(--line);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
.hero-foot .meta { line-height: 1.4; }
|
|
|
|
.hero-art {
|
|
position: relative;
|
|
height: calc(100vh - 160px);
|
|
max-height: 860px;
|
|
margin-left: auto;
|
|
margin-right: -12px;
|
|
width: 100%;
|
|
overflow: visible;
|
|
}
|
|
.hero-art img {
|
|
width: 100%; height: 100%;
|
|
object-fit: contain;
|
|
object-position: right center;
|
|
display: block;
|
|
}
|
|
/* image annotations */
|
|
.annot {
|
|
position: absolute;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
.annot.has-line::before {
|
|
content: '';
|
|
position: absolute;
|
|
background: var(--ink-faint);
|
|
}
|
|
.annot-tl { top: 14px; left: 14px; }
|
|
.annot-tr { top: 14px; right: 14px; text-align: right; }
|
|
.annot-bl { bottom: 14px; left: 14px; }
|
|
.annot-br { bottom: 14px; right: 14px; text-align: right; }
|
|
.annot.coord { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: none; }
|
|
|
|
.hero-art .index {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 36%;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.16em;
|
|
color: var(--ink-faint);
|
|
text-transform: uppercase;
|
|
background: rgba(239, 231, 210, 0.7);
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 6px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.hero-art .index span { display: block; line-height: 1.6; }
|
|
.hero-art .index span .n { color: var(--coral); margin-right: 6px; font-weight: 700; }
|
|
.hero-art .index span.on { color: var(--ink); font-weight: 700; }
|
|
.hero-art .index span.on .n { color: var(--coral); }
|
|
|
|
.hero-art .corner {
|
|
position: absolute;
|
|
width: 22px; height: 22px;
|
|
border-color: var(--ink-faint);
|
|
border-style: solid;
|
|
border-width: 0;
|
|
}
|
|
.hero-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
|
|
.hero-art .corner.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
|
|
.hero-art .corner.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
|
|
.hero-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
|
|
|
|
/* ---------- common section header ---------- */
|
|
section { position: relative; padding: 130px 0; }
|
|
section.tight { padding: 90px 0; }
|
|
.sec-rule {
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 18px;
|
|
margin-bottom: 48px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.sec-rule .roman {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
color: var(--coral);
|
|
font-size: 14px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: none;
|
|
}
|
|
.sec-rule .meta-grp { display: inline-flex; gap: 26px; }
|
|
.sec-rule .dot-mark { color: var(--coral); }
|
|
|
|
.section-header { margin-bottom: 70px; }
|
|
.section-header .label { margin-bottom: 32px; }
|
|
.section-header h2 {
|
|
font-size: clamp(40px, 4.6vw, 66px);
|
|
max-width: 22ch;
|
|
}
|
|
.section-header .lead { margin-top: 22px; }
|
|
|
|
/* ---------- WIRE / GLOBAL TICKER ----------
|
|
*
|
|
* Slim editorial strip between the hero and the About section. Two
|
|
* counter-scrolling marquees (cities → and contributors ←) signal that
|
|
* the project is global and community-driven, without disrupting the
|
|
* existing roman-numeral section count. Pure CSS animation; the track
|
|
* content is duplicated in markup so the loop wraps seamlessly.
|
|
*/
|
|
.wire {
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 26px 0 28px;
|
|
background: var(--paper);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.wire-inner {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
|
|
gap: 32px;
|
|
align-items: center;
|
|
}
|
|
.wire-left {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
border-right: 1px solid var(--line);
|
|
padding-right: 24px;
|
|
min-height: 56px;
|
|
}
|
|
.wire-mark {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--line);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.wire-pulse {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--coral);
|
|
display: inline-block;
|
|
animation: pulse 2.4s ease-in-out infinite;
|
|
}
|
|
.wire-title {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.wire-title b {
|
|
color: var(--ink);
|
|
font-weight: 700;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
.wire-title span {
|
|
color: var(--ink-faint);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.wire-rows {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
.wire-row {
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
|
|
-webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
|
|
}
|
|
.marquee-track {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 36px;
|
|
width: max-content;
|
|
white-space: nowrap;
|
|
animation: marquee-x 52s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
.wire-row.reverse .marquee-track {
|
|
animation-direction: reverse;
|
|
animation-duration: 64s;
|
|
}
|
|
.wire-row:hover .marquee-track {
|
|
animation-play-state: paused;
|
|
}
|
|
@keyframes marquee-x {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
.wire-item {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 8px;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
letter-spacing: 0.04em;
|
|
color: var(--ink-mute);
|
|
text-decoration: none;
|
|
flex-shrink: 0;
|
|
}
|
|
.wire-item .wire-dot {
|
|
color: var(--coral);
|
|
font-size: 16px;
|
|
line-height: 0;
|
|
position: relative;
|
|
top: -1px;
|
|
margin-right: 2px;
|
|
}
|
|
.wire-item .wire-coord {
|
|
font-family: var(--mono);
|
|
font-size: 10.5px;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0;
|
|
}
|
|
.wire-item .wire-name {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.18em;
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
}
|
|
.wire-item .wire-handle {
|
|
font-family: var(--mono);
|
|
color: var(--ink);
|
|
font-size: 11.5px;
|
|
font-weight: 500;
|
|
}
|
|
.wire-item .wire-role {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
color: var(--coral);
|
|
font-size: 10px;
|
|
}
|
|
.wire-item.is-link {
|
|
transition: color 160ms ease;
|
|
}
|
|
.wire-item.is-link:hover .wire-handle {
|
|
color: var(--coral);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.marquee-track { animation: none; }
|
|
}
|
|
|
|
/* ---------- ABOUT ---------- */
|
|
.about-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
.about h2 {
|
|
font-size: clamp(44px, 5.4vw, 78px);
|
|
margin: 30px 0 36px;
|
|
}
|
|
.about .label { margin-bottom: 28px; }
|
|
.about .lead { margin-bottom: 36px; max-width: 42ch; font-size: 17px; }
|
|
.about .footer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-top: 56px;
|
|
color: var(--ink-faint);
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
.about .footer-row .mark {
|
|
width: 30px; height: 30px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--ink);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: 14px;
|
|
color: var(--ink);
|
|
}
|
|
.about .stamp {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
line-height: 1.4;
|
|
}
|
|
.about .stamp span:first-child { color: var(--coral); }
|
|
.about-art {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 620px;
|
|
margin-left: auto;
|
|
}
|
|
.about-art img { width: 100%; height: 100%; object-fit: contain; }
|
|
.about-side-note {
|
|
position: absolute;
|
|
right: -8px;
|
|
top: 26px;
|
|
text-align: right;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
line-height: 1.55;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0.04em;
|
|
max-width: 16ch;
|
|
}
|
|
.about-side-note b {
|
|
display: block;
|
|
color: var(--coral);
|
|
width: 36px;
|
|
height: 1px;
|
|
background: var(--coral);
|
|
margin: 0 0 10px auto;
|
|
}
|
|
.about-caption {
|
|
position: absolute;
|
|
right: 18px;
|
|
bottom: 4px;
|
|
font-family: var(--sans);
|
|
font-size: 9.5px;
|
|
color: var(--ink-faint);
|
|
text-align: right;
|
|
letter-spacing: 0.06em;
|
|
line-height: 1.45;
|
|
}
|
|
.about-caption b { color: var(--ink); display: block; }
|
|
|
|
/* ---------- CAPABILITIES ---------- */
|
|
.capabilities-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 70px;
|
|
align-items: center;
|
|
}
|
|
.capabilities-art {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 600px;
|
|
}
|
|
.capabilities-art img { width: 100%; height: 100%; object-fit: contain; }
|
|
.capabilities-art .ribbon {
|
|
position: absolute;
|
|
right: -42px;
|
|
top: 50%;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.42em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
}
|
|
.capabilities-art .ribbon b { color: var(--coral); }
|
|
.capabilities-art .corner { position: absolute; width: 22px; height: 22px; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
|
|
.capabilities-art .corner.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
|
|
.capabilities-art .corner.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
|
|
.capabilities-copy h2 { font-size: clamp(40px, 4.8vw, 64px); margin: 22px 0 30px; }
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18px;
|
|
margin-top: 22px;
|
|
}
|
|
.card {
|
|
padding: 28px 26px 32px;
|
|
background: var(--bone);
|
|
border-radius: 18px;
|
|
box-shadow: var(--shadow), inset 0 0 0 1px rgba(21, 20, 15, 0.06);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.card:hover { transform: translateY(-3px); }
|
|
.card .num {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
color: var(--coral);
|
|
letter-spacing: 0.04em;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
.card .num .tag {
|
|
font-family: var(--sans);
|
|
font-size: 9.5px;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
.card .icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-bottom: 16px;
|
|
color: var(--ink);
|
|
}
|
|
.card h3 {
|
|
font-family: var(--sans);
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.014em;
|
|
margin-bottom: 14px;
|
|
}
|
|
.card p {
|
|
font-family: var(--body);
|
|
font-size: 13.5px;
|
|
color: var(--ink-mute);
|
|
line-height: 1.55;
|
|
max-width: 24ch;
|
|
}
|
|
.card .arrow-mark {
|
|
position: absolute;
|
|
right: 22px;
|
|
bottom: 22px;
|
|
width: 28px; height: 28px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--ink);
|
|
transition: all 0.18s ease;
|
|
}
|
|
.card:hover .arrow-mark { background: var(--coral); border-color: var(--coral); color: #fff; }
|
|
.card .arrow-mark svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
|
|
|
|
/* ---------- LABS ---------- */
|
|
.labs-head {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr;
|
|
gap: 60px;
|
|
align-items: end;
|
|
margin-bottom: 48px;
|
|
}
|
|
.labs-head h2 { font-size: clamp(40px, 4.8vw, 68px); }
|
|
.pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
}
|
|
.pill {
|
|
padding: 9px 18px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
color: var(--ink-soft);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all 0.18s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.pill:hover { background: rgba(21, 20, 15, 0.04); }
|
|
.pill.active {
|
|
background: var(--coral);
|
|
border-color: var(--coral);
|
|
color: #fff;
|
|
}
|
|
.pill .count {
|
|
font-size: 10px;
|
|
color: var(--ink-faint);
|
|
border-left: 1px solid var(--line);
|
|
padding-left: 8px;
|
|
}
|
|
.pill.active .count { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.3); }
|
|
.labs-meta {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-end;
|
|
gap: 22px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.labs-meta .ring {
|
|
width: 38px; height: 38px;
|
|
border-radius: 50%;
|
|
border: 1px dashed var(--ink);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
}
|
|
.labs-meta .meta-text {
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
line-height: 1.55;
|
|
color: var(--ink-faint);
|
|
max-width: 28ch;
|
|
}
|
|
.labs-meta .meta-text b { display: block; color: var(--ink); }
|
|
.labs-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 22px;
|
|
}
|
|
.lab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.lab-img {
|
|
aspect-ratio: 4 / 5;
|
|
background: var(--bone);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
margin-bottom: 18px;
|
|
box-shadow: var(--shadow);
|
|
position: relative;
|
|
}
|
|
.lab-img img { width: 100%; height: 100%; object-fit: cover; }
|
|
.lab-img .badge {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
background: rgba(239, 231, 210, 0.9);
|
|
color: var(--ink);
|
|
padding: 4px 9px;
|
|
border-radius: 4px;
|
|
font-family: var(--sans);
|
|
font-size: 9.5px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.lab .num-row {
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0.14em;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-transform: uppercase;
|
|
}
|
|
.lab h4 {
|
|
font-family: var(--sans);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.014em;
|
|
margin-bottom: 8px;
|
|
}
|
|
.lab p {
|
|
font-family: var(--body);
|
|
font-size: 13px;
|
|
color: var(--ink-mute);
|
|
line-height: 1.55;
|
|
margin-bottom: 14px;
|
|
}
|
|
.lab .arrow-mark {
|
|
width: 28px; height: 28px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 50%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--ink);
|
|
margin-top: auto;
|
|
align-self: flex-start;
|
|
}
|
|
.lab .arrow-mark svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
|
|
.labs-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 50px;
|
|
border-top: 1px dashed var(--line);
|
|
padding-top: 22px;
|
|
}
|
|
.progress {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.progress span {
|
|
width: 26px; height: 2px;
|
|
background: var(--line);
|
|
border-radius: 2px;
|
|
}
|
|
.progress span.on { background: var(--coral); }
|
|
|
|
/* ---------- METHOD ---------- */
|
|
.method-head {
|
|
display: grid;
|
|
grid-template-columns: 1.4fr 1fr;
|
|
gap: 60px;
|
|
align-items: start;
|
|
margin-bottom: 80px;
|
|
}
|
|
.method-head h2 { font-size: clamp(44px, 5.2vw, 76px); }
|
|
.method-head .right {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
padding-top: 14px;
|
|
}
|
|
.method-head .plus {
|
|
color: var(--coral);
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
font-family: var(--sans);
|
|
}
|
|
.method-head .right p {
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
color: var(--ink-soft);
|
|
max-width: 22ch;
|
|
line-height: 1.55;
|
|
}
|
|
.method-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 50px;
|
|
position: relative;
|
|
}
|
|
.method-grid::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 60px;
|
|
left: 50px;
|
|
right: 50px;
|
|
height: 1px;
|
|
background: var(--line-soft);
|
|
}
|
|
.method-step { position: relative; }
|
|
.method-step .num {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
font-size: 78px;
|
|
color: var(--coral);
|
|
line-height: 0.85;
|
|
margin-bottom: 24px;
|
|
letter-spacing: -0.02em;
|
|
background: var(--paper);
|
|
display: inline-block;
|
|
padding-right: 12px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.method-step h4 {
|
|
font-family: var(--sans);
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.022em;
|
|
margin-bottom: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-right: 18px;
|
|
}
|
|
.method-step h4 .arrow-r {
|
|
color: var(--ink-faint);
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
}
|
|
.method-step:last-child h4 .arrow-r { display: none; }
|
|
.method-step p {
|
|
font-family: var(--body);
|
|
font-size: 13.5px;
|
|
color: var(--ink-mute);
|
|
line-height: 1.55;
|
|
margin-bottom: 24px;
|
|
max-width: 24ch;
|
|
}
|
|
.method-step .img {
|
|
aspect-ratio: 1 / 1;
|
|
background: var(--bone);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.method-step .img img { width: 100%; height: 100%; object-fit: cover; }
|
|
.method-foot {
|
|
margin-top: 80px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1px dashed var(--line);
|
|
padding-top: 24px;
|
|
}
|
|
.method-foot .left,
|
|
.method-foot .right {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
.method-foot .left {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.method-foot .left .ring {
|
|
width: 20px; height: 20px;
|
|
border: 1px dashed var(--ink-faint);
|
|
border-radius: 50%;
|
|
}
|
|
.method-foot .right b { color: var(--ink); }
|
|
|
|
/* ---------- WORK ---------- */
|
|
.work {
|
|
background: #15140f;
|
|
color: var(--paper);
|
|
border-radius: 32px;
|
|
margin: 0 64px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 110px 64px;
|
|
}
|
|
.work::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.85 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n2)'/></svg>");
|
|
background-size: 240px 240px;
|
|
opacity: 0.6;
|
|
mix-blend-mode: screen;
|
|
}
|
|
.work-rule {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1px solid rgba(247, 241, 222, 0.16);
|
|
padding-top: 16px;
|
|
margin-bottom: 60px;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: rgba(247, 241, 222, 0.55);
|
|
}
|
|
.work-rule .roman { color: var(--coral); font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: 0.04em; text-transform: none; }
|
|
.work-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.05fr 0.85fr;
|
|
gap: 48px;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.work .label { color: var(--coral); }
|
|
.work .label::before { background: var(--coral); }
|
|
.work-copy h2 {
|
|
font-family: var(--sans);
|
|
font-weight: 800;
|
|
font-size: clamp(40px, 5vw, 66px);
|
|
line-height: 1.0;
|
|
letter-spacing: -0.024em;
|
|
margin: 28px 0 36px;
|
|
color: var(--paper);
|
|
}
|
|
.work-copy h2 em {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
}
|
|
.work-copy h2 .dot { color: var(--coral); }
|
|
.work-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
color: var(--paper);
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
border-bottom: 2px solid var(--coral);
|
|
padding-bottom: 12px;
|
|
width: fit-content;
|
|
}
|
|
.work-link::after { content: '↗'; color: var(--coral); }
|
|
.work-card {
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
border-radius: 18px;
|
|
padding: 32px 30px;
|
|
position: relative;
|
|
transform: rotate(-1.2deg);
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: transform 280ms ease, box-shadow 280ms ease;
|
|
}
|
|
.work-card:hover {
|
|
transform: rotate(-1.2deg) translateY(-4px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.work-card.alt {
|
|
transform: rotate(2.4deg) translateY(20px);
|
|
padding: 28px 26px;
|
|
}
|
|
.work-card.alt:hover {
|
|
transform: rotate(2.4deg) translateY(16px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.work-card .label-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 22px;
|
|
}
|
|
.work-card .small-label {
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
color: var(--coral);
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
.work-card .index {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.work-card h3 {
|
|
font-family: var(--sans);
|
|
font-size: clamp(26px, 2.4vw, 38px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.022em;
|
|
line-height: 1.05;
|
|
margin-bottom: 14px;
|
|
}
|
|
.work-card p {
|
|
font-family: var(--body);
|
|
font-size: 14px;
|
|
color: var(--ink-mute);
|
|
line-height: 1.55;
|
|
margin-bottom: 22px;
|
|
max-width: 28ch;
|
|
}
|
|
.work-card .img {
|
|
aspect-ratio: 4 / 3;
|
|
background: var(--bone);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
margin-bottom: 22px;
|
|
}
|
|
.work-card .img img { width: 100%; height: 100%; object-fit: cover; }
|
|
.work-card .meta-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--ink-faint);
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 14px;
|
|
}
|
|
.work-card .year { color: var(--coral); font-weight: 600; }
|
|
.work-arrows {
|
|
position: absolute;
|
|
right: 64px;
|
|
bottom: 64px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.work-arrows .nav-btn {
|
|
width: 46px; height: 46px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(247, 241, 222, 0.2);
|
|
background: transparent;
|
|
color: var(--paper);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.work-arrows .nav-btn.active { background: var(--coral); border-color: var(--coral); }
|
|
|
|
/* ---------- TESTIMONIAL / COLLABORATORS ---------- */
|
|
.testimonial-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
}
|
|
.testimonial-copy h2 {
|
|
font-family: var(--sans);
|
|
font-size: clamp(36px, 4vw, 54px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.022em;
|
|
line-height: 1.12;
|
|
margin-bottom: 36px;
|
|
}
|
|
.testimonial-copy h2 em {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
}
|
|
.author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
margin-top: 22px;
|
|
}
|
|
.author .avatar {
|
|
width: 50px; height: 50px;
|
|
border-radius: 50%;
|
|
background: var(--ink);
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--paper);
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: 24px;
|
|
}
|
|
.author p {
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
.author p span {
|
|
display: block;
|
|
color: var(--ink-mute);
|
|
font-weight: 400;
|
|
}
|
|
.divider {
|
|
border-top: 1px solid var(--line);
|
|
margin: 60px 0 32px;
|
|
}
|
|
.partners-text {
|
|
font-family: var(--body);
|
|
font-size: 14px;
|
|
color: var(--ink-mute);
|
|
margin-bottom: 26px;
|
|
max-width: 38ch;
|
|
}
|
|
.partners {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 22px;
|
|
align-items: end;
|
|
}
|
|
.partner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
transition: transform 220ms ease;
|
|
}
|
|
.partner:hover { transform: translateY(-2px); }
|
|
.partner:hover .glyph { color: var(--coral); }
|
|
.partner:hover span { color: var(--coral); }
|
|
.partner .glyph {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--ink);
|
|
transition: color 220ms ease;
|
|
}
|
|
.partner .glyph svg { height: 100%; width: auto; max-width: 90px; }
|
|
.partner span {
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
color: var(--ink);
|
|
letter-spacing: -0.005em;
|
|
font-weight: 600;
|
|
transition: color 220ms ease;
|
|
}
|
|
.partner small {
|
|
font-family: var(--sans);
|
|
font-size: 10px;
|
|
color: var(--ink-faint);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
.read-more {
|
|
margin-top: 56px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
letter-spacing: 0.04em;
|
|
border-bottom: 1px solid var(--coral);
|
|
padding-bottom: 6px;
|
|
}
|
|
.read-more::after { content: '→'; color: var(--coral); }
|
|
.testimonial-art {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 560px;
|
|
}
|
|
.testimonial-art img { width: 100%; height: 100%; object-fit: contain; }
|
|
|
|
/* ---------- CTA ---------- */
|
|
.cta-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.05fr 1fr;
|
|
gap: 50px;
|
|
align-items: center;
|
|
}
|
|
.cta h2 {
|
|
font-size: clamp(54px, 6.6vw, 100px);
|
|
margin: 32px 0 32px;
|
|
}
|
|
.cta .lead { margin-bottom: 36px; max-width: 36ch; font-size: 16px; }
|
|
.cta-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.email-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 14px 18px 14px 22px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
.email-pill .arrow-circle {
|
|
width: 22px; height: 22px;
|
|
border-radius: 50%;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
}
|
|
.cta-foot {
|
|
display: flex;
|
|
gap: 28px;
|
|
align-items: center;
|
|
margin-top: 32px;
|
|
padding-top: 22px;
|
|
border-top: 1px solid var(--line);
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.cta-foot .stamp { color: var(--coral); font-weight: 600; }
|
|
.cta-art {
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
max-width: 620px;
|
|
margin-left: auto;
|
|
}
|
|
.cta-art img { width: 100%; height: 100%; object-fit: contain; }
|
|
.cta-art .index {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 24px;
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-size: 28px;
|
|
color: var(--ink-faint);
|
|
}
|
|
.cta-art .ribbon {
|
|
position: absolute;
|
|
left: -32px;
|
|
top: 50%;
|
|
font-family: var(--sans);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.42em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* ---------- FOOTER ---------- */
|
|
footer {
|
|
border-top: 1px solid var(--line);
|
|
padding: 60px 0 30px;
|
|
margin-top: 60px;
|
|
}
|
|
.foot-grid {
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
|
|
gap: 40px;
|
|
margin-bottom: 60px;
|
|
}
|
|
.foot-brand .brand { margin-bottom: 18px; }
|
|
.foot-brand p {
|
|
font-family: var(--body);
|
|
font-size: 13.5px;
|
|
color: var(--ink-mute);
|
|
line-height: 1.55;
|
|
max-width: 38ch;
|
|
}
|
|
.foot-brand p .inline-link,
|
|
.inline-link {
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--line);
|
|
transition: color 160ms ease, border-color 160ms ease;
|
|
}
|
|
.inline-link:hover {
|
|
color: var(--coral);
|
|
border-bottom-color: var(--coral);
|
|
}
|
|
.method-repo-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: color 160ms ease, border-color 160ms ease;
|
|
}
|
|
.method-repo-link:hover {
|
|
color: var(--coral);
|
|
border-bottom-color: var(--coral);
|
|
}
|
|
.library-link {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 160ms ease;
|
|
}
|
|
.library-link:hover { border-bottom-color: var(--coral); }
|
|
.foot-col h5 {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
color: var(--ink);
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 18px;
|
|
font-weight: 700;
|
|
}
|
|
.foot-col ul { list-style: none; }
|
|
.foot-col li { margin-bottom: 10px; }
|
|
.foot-col a {
|
|
font-family: var(--body);
|
|
font-size: 13.5px;
|
|
color: var(--ink-soft);
|
|
text-decoration: none;
|
|
}
|
|
.foot-col a:hover { color: var(--coral); }
|
|
.foot-bottom {
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 22px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-faint);
|
|
}
|
|
.foot-bottom .right { display: inline-flex; gap: 24px; align-items: center; }
|
|
.foot-bottom .pulse {
|
|
width: 6px; height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--coral);
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
}
|
|
.foot-mega {
|
|
margin-top: 60px;
|
|
padding-top: 0;
|
|
padding-bottom: 12px;
|
|
border-top: 1px solid var(--line);
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
}
|
|
.foot-mega .word {
|
|
font-family: var(--sans);
|
|
font-weight: 900;
|
|
font-size: clamp(70px, 13vw, 200px);
|
|
letter-spacing: -0.04em;
|
|
line-height: 1.05;
|
|
color: var(--ink);
|
|
white-space: nowrap;
|
|
margin-top: 30px;
|
|
padding-bottom: 0.18em;
|
|
}
|
|
.foot-mega .word em {
|
|
font-family: var(--serif);
|
|
font-style: italic;
|
|
font-weight: 500;
|
|
color: var(--coral);
|
|
}
|
|
|
|
/* ---------- scroll-reveal motion ----------
|
|
*
|
|
* Driven by `app/_components/reveal-root.tsx`. Elements with
|
|
* `data-reveal` start hidden + offset; the observer sets
|
|
* `data-revealed='true'` once they enter the viewport, triggering
|
|
* the transition.
|
|
*
|
|
* Uses `translate` / `scale` longhand properties (not `transform`) so
|
|
* that elements like `.work-card` keep their static `transform: rotate()`
|
|
* intact while still translating in.
|
|
*/
|
|
[data-reveal] {
|
|
opacity: 0;
|
|
translate: 0 28px;
|
|
transition:
|
|
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
|
|
translate 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
|
|
scale 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
|
|
will-change: opacity, translate, scale;
|
|
}
|
|
[data-reveal='left'] { translate: -36px 0; }
|
|
[data-reveal='right'] { translate: 36px 0; }
|
|
[data-reveal='scale'] { translate: 0 0; scale: 0.96; }
|
|
[data-reveal='rise-lg'] { translate: 0 64px; scale: 0.985; }
|
|
[data-reveal][data-revealed='true'] {
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
scale: 1;
|
|
}
|
|
|
|
/* stagger primitives — set --reveal-delay on grid children so siblings
|
|
* appear in sequence rather than all at once. */
|
|
.cards > .card[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
|
|
.cards > .card[data-reveal]:nth-child(2) { --reveal-delay: 90ms; }
|
|
.cards > .card[data-reveal]:nth-child(3) { --reveal-delay: 180ms; }
|
|
.cards > .card[data-reveal]:nth-child(4) { --reveal-delay: 270ms; }
|
|
|
|
.labs-grid > .lab[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
|
|
.labs-grid > .lab[data-reveal]:nth-child(2) { --reveal-delay: 90ms; }
|
|
.labs-grid > .lab[data-reveal]:nth-child(3) { --reveal-delay: 180ms; }
|
|
.labs-grid > .lab[data-reveal]:nth-child(4) { --reveal-delay: 270ms; }
|
|
.labs-grid > .lab[data-reveal]:nth-child(5) { --reveal-delay: 360ms; }
|
|
|
|
.method-grid > .method-step[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
|
|
.method-grid > .method-step[data-reveal]:nth-child(2) { --reveal-delay: 110ms; }
|
|
.method-grid > .method-step[data-reveal]:nth-child(3) { --reveal-delay: 220ms; }
|
|
.method-grid > .method-step[data-reveal]:nth-child(4) { --reveal-delay: 330ms; }
|
|
|
|
.partners > .partner[data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
|
|
.partners > .partner[data-reveal]:nth-child(2) { --reveal-delay: 70ms; }
|
|
.partners > .partner[data-reveal]:nth-child(3) { --reveal-delay: 140ms; }
|
|
.partners > .partner[data-reveal]:nth-child(4) { --reveal-delay: 210ms; }
|
|
.partners > .partner[data-reveal]:nth-child(5) { --reveal-delay: 280ms; }
|
|
.partners > .partner[data-reveal]:nth-child(6) { --reveal-delay: 350ms; }
|
|
|
|
/* hero copy — let label, headline, lead, actions, stats arrive in sequence
|
|
* so the headline isn't waiting on a single block-level reveal. */
|
|
.hero-copy > [data-reveal]:nth-of-type(1) { --reveal-delay: 0ms; }
|
|
.hero-copy > [data-reveal]:nth-of-type(2) { --reveal-delay: 80ms; }
|
|
.hero-copy > [data-reveal]:nth-of-type(3) { --reveal-delay: 160ms; }
|
|
.hero-copy > [data-reveal]:nth-of-type(4) { --reveal-delay: 240ms; }
|
|
.hero-copy > [data-reveal]:nth-of-type(5) { --reveal-delay: 320ms; }
|
|
.hero-copy > [data-reveal]:nth-of-type(6) { --reveal-delay: 400ms; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-reveal] {
|
|
opacity: 1 !important;
|
|
translate: 0 0 !important;
|
|
scale: 1 !important;
|
|
transition: none !important;
|
|
}
|
|
/* Skip the slide-in on the sticky header for users who prefer no motion;
|
|
* the show/hide still toggles, just instantly. */
|
|
.nav { transition: none !important; }
|
|
}
|
|
|
|
/* responsive */
|
|
@media (max-width: 1280px) {
|
|
.container { padding: 0 44px; }
|
|
.work { margin: 0 44px; padding: 90px 44px; }
|
|
.side-rail { display: none; }
|
|
}
|
|
/* hide topbar mid text early — between 1200 and 1280 it crowds even with nowrap */
|
|
@media (max-width: 1200px) {
|
|
.topbar-inner .mid { display: none; }
|
|
}
|
|
/* nav: between 1080 and 1180 the brand tail + 5 nav links + 2 CTAs + dot
|
|
* crowd the row. Drop the brand sub-meta first, then tighten link spacing,
|
|
* so the Star CTA never has to compress. */
|
|
@media (max-width: 1180px) {
|
|
.nav-inner { gap: 18px; }
|
|
.brand-meta { display: none; }
|
|
.nav-links { gap: 28px; }
|
|
}
|
|
@media (max-width: 1080px) {
|
|
.container { padding: 0 32px; }
|
|
.hero h1 { font-size: clamp(36px, 4.6vw, 54px); }
|
|
.section-header h2 { font-size: clamp(32px, 4vw, 50px); }
|
|
.labs-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
|
|
.partners { grid-template-columns: repeat(3, 1fr); gap: 18px; row-gap: 28px; }
|
|
.foot-grid { grid-template-columns: 2fr 1fr 1fr; }
|
|
.foot-grid .foot-col:nth-child(4),
|
|
.foot-grid .foot-col:nth-child(5) { display: none; }
|
|
}
|
|
@media (max-width: 880px) {
|
|
.container { padding: 0 24px; }
|
|
.hero-grid, .about-grid, .capabilities-grid, .testimonial-grid, .cta-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 50px;
|
|
}
|
|
.labs-head, .method-head { grid-template-columns: 1fr; }
|
|
.labs-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.method-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
|
|
.method-grid::before { display: none; }
|
|
.work { margin: 0 12px; padding: 60px 24px; }
|
|
.work-grid { grid-template-columns: 1fr; }
|
|
.partners { grid-template-columns: repeat(3, 1fr); gap: 18px; }
|
|
.nav-links, .brand-meta, .nav-cta { display: none; }
|
|
/* wire — stack the field label above the marquee rows */
|
|
.wire-inner { grid-template-columns: 1fr; gap: 14px; }
|
|
.wire-left {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--line);
|
|
padding-right: 0;
|
|
padding-bottom: 12px;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
@media (max-width: 560px) {
|
|
.container { padding: 0 16px; }
|
|
.hero h1 { font-size: 38px; }
|
|
.labs-grid { grid-template-columns: 1fr; }
|
|
.cards { grid-template-columns: 1fr; }
|
|
.pills { justify-content: flex-start; }
|
|
section { padding: 80px 0; }
|
|
.topbar-inner { font-size: 9px; }
|
|
}
|
|
|
|
.code-inline {
|
|
font-family: var(--mono);
|
|
font-size: 14px;
|
|
background: var(--bone);
|
|
padding: 1px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
.code-inline.sm { font-size: 12px; padding: 0 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class='side-rail right' data-od-id='rail-right'>
|
|
<span class='rail-text'>Open Design — Vol. 01 · Issue Nº 26 · Apache-2.0</span>
|
|
</div>
|
|
<div class='side-rail left' data-od-id='rail-left'>
|
|
<span class='rail-text'>Skills · Systems · Agents · BYOK · Local-first</span>
|
|
</div>
|
|
<div class='shell'>
|
|
|
|
<div class='topbar' data-od-id='topbar'>
|
|
<div class='container topbar-inner'>
|
|
<span><b>OD / 2026</b> · Vol. 01 / Issue Nº 26</span>
|
|
<span class='mid'>
|
|
<span>Filed under <b class='coral'>Design · Intelligence</b></span>
|
|
<span>Apache-2.0 · Made on Earth</span>
|
|
</span>
|
|
<span class='right'>
|
|
<a class='topbar-link' href='https://github.com/nexu-io/open-design/releases' target='_blank' rel='noreferrer noopener'><span class='pulse'></span>Live · v0.3.0</a>
|
|
<span><b>EN</b> · DE · 中文 · 日本語</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<header class='nav' data-od-id='nav'>
|
|
<div class='container nav-inner'>
|
|
<a href='#top' class='brand'>
|
|
<span class='brand-mark'>Ø</span>
|
|
<span>Open Design</span>
|
|
<span class='brand-meta'><b>Studio Nº 01</b>Berlin / Open / Earth</span>
|
|
</a>
|
|
<nav>
|
|
<ul class='nav-links'>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener'>Skills<span class='num'>31</span></a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/design-systems' target='_blank' rel='noreferrer noopener'>Systems<span class='num'>72</span></a></li>
|
|
<li><a href='#agents'>Agents<span class='num'>12</span></a></li>
|
|
<li><a href='#labs'>Labs<span class='num'>05</span></a></li>
|
|
<li><a href='#contact'>Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
<div class='nav-side'>
|
|
<a class='nav-cta ghost' href='https://github.com/nexu-io/open-design/releases' target='_blank' rel='noreferrer noopener'>Download</a>
|
|
<a class='nav-cta' href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'>Star · 0K</a>
|
|
<span class='status-dot' aria-hidden='true'></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class='hero' id='top' data-od-id='hero'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>I.</span>
|
|
<span class='meta-grp'>
|
|
<span>Hero / Cover Plate</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>Open Design / Volume 01</span>
|
|
</span>
|
|
<span>001 / 008</span>
|
|
</div>
|
|
</div>
|
|
<div class='container hero-grid'>
|
|
<div class='hero-copy'>
|
|
<span class='label' data-reveal>Open-source design studio <span class='ix'>· Nº 01</span></span>
|
|
<h1 class='display' data-reveal>Designing <em>intelligence</em> with skills, <em>taste,</em> and <em>code</em><span class='dot'>.</span></h1>
|
|
<p class='lead' data-reveal>The open-source alternative to Anthropic’s Claude Design. 12 coding agents — Claude, Codex, Cursor, Gemini and friends — drive 31 composable skills and 72 brand-grade design systems. Generate web pages, slide decks, mobile prototypes, images, even short videos — all running on your own laptop.</p>
|
|
<div class='hero-actions' data-reveal>
|
|
<a class='btn btn-primary' href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'>
|
|
Star us on GitHub
|
|
<span class='arrow'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></span>
|
|
</a>
|
|
<a class='btn btn-ghost' href='https://github.com/nexu-io/open-design/releases' target='_blank' rel='noreferrer noopener'>
|
|
Download desktop
|
|
<span class='arrow'><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='9'/><path d='M9 12h6M12 9v6'/></svg></span>
|
|
</a>
|
|
</div>
|
|
<div class='hero-stats' data-reveal>
|
|
<div class='stat'>
|
|
<span class='ring solid'>31</span>
|
|
<span class='stat-label'><b>skills</b>shippable</span>
|
|
</div>
|
|
<div class='stat'>
|
|
<span class='ring'>72</span>
|
|
<span class='stat-label'><b>systems</b>portable</span>
|
|
</div>
|
|
<div class='stat'>
|
|
<span class='ring coral'>12</span>
|
|
<span class='stat-label'><b>CLIs</b>BYO agent</span>
|
|
</div>
|
|
</div>
|
|
<div class='hero-foot' data-reveal>
|
|
<span class='meta'>↳ pnpm tools-dev · 3 commands to start</span>
|
|
<span class='coord'>52.5200° N · 13.4050° E</span>
|
|
</div>
|
|
</div>
|
|
<div class='hero-art' data-reveal='scale'>
|
|
<span class='corner tl'></span>
|
|
<span class='corner tr'></span>
|
|
<span class='corner bl'></span>
|
|
<span class='corner br'></span>
|
|
<span class='annot annot-tl coord'>FIG. 01 / OD-26</span>
|
|
<span class='annot annot-tr'>Plate Nº 08</span>
|
|
<span class='annot annot-bl coord'>SHA · a1b2c3d</span>
|
|
<span class='annot annot-br'>Composed in <span style='color:var(--coral);'>Open Design</span></span>
|
|
<img src='./assets/hero.png' alt='' />
|
|
<div class='index'>
|
|
<span><span class='n'>01</span>Detect</span>
|
|
<span class='on'><span class='n'>02</span>Discover</span>
|
|
<span><span class='n'>03</span>Direct</span>
|
|
<span><span class='n'>04</span>Deliver</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='wire' data-od-id='wire' aria-label='Global wire — cities and contributors'>
|
|
<div class='container wire-inner'>
|
|
<div class='wire-left'>
|
|
<span class='wire-mark' aria-hidden='true'><span class='wire-pulse'></span></span>
|
|
<span class='wire-title'>
|
|
<b>From the field</b>
|
|
<span>Open · 23 cities · 6 contributors</span>
|
|
</span>
|
|
</div>
|
|
<div class='wire-rows'>
|
|
<div class='wire-row'>
|
|
<div class='marquee-track' aria-hidden='true'>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>52.52°N</span><span class='wire-name'>Berlin</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>35.68°N</span><span class='wire-name'>Tokyo</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>31.23°N</span><span class='wire-name'>Shanghai</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>39.90°N</span><span class='wire-name'>Beijing</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>25.03°N</span><span class='wire-name'>Taipei</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>1.35°N</span><span class='wire-name'>Singapore</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>12.97°N</span><span class='wire-name'>Bangalore</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>25.20°N</span><span class='wire-name'>Dubai</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>6.52°N</span><span class='wire-name'>Lagos</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>1.29°S</span><span class='wire-name'>Nairobi</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>33.92°S</span><span class='wire-name'>Cape Town</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>38.72°N</span><span class='wire-name'>Lisbon</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>40.42°N</span><span class='wire-name'>Madrid</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>48.86°N</span><span class='wire-name'>Paris</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>51.51°N</span><span class='wire-name'>London</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>52.37°N</span><span class='wire-name'>Amsterdam</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>59.33°N</span><span class='wire-name'>Stockholm</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>43.65°N</span><span class='wire-name'>Toronto</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>40.71°N</span><span class='wire-name'>New York</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>37.77°N</span><span class='wire-name'>San Francisco</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>19.43°N</span><span class='wire-name'>Mexico City</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>23.55°S</span><span class='wire-name'>São Paulo</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>33.87°S</span><span class='wire-name'>Sydney</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>52.52°N</span><span class='wire-name'>Berlin</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>35.68°N</span><span class='wire-name'>Tokyo</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>31.23°N</span><span class='wire-name'>Shanghai</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>39.90°N</span><span class='wire-name'>Beijing</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>25.03°N</span><span class='wire-name'>Taipei</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>1.35°N</span><span class='wire-name'>Singapore</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>12.97°N</span><span class='wire-name'>Bangalore</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>25.20°N</span><span class='wire-name'>Dubai</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>6.52°N</span><span class='wire-name'>Lagos</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>1.29°S</span><span class='wire-name'>Nairobi</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>33.92°S</span><span class='wire-name'>Cape Town</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>38.72°N</span><span class='wire-name'>Lisbon</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>40.42°N</span><span class='wire-name'>Madrid</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>48.86°N</span><span class='wire-name'>Paris</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>51.51°N</span><span class='wire-name'>London</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>52.37°N</span><span class='wire-name'>Amsterdam</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>59.33°N</span><span class='wire-name'>Stockholm</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>43.65°N</span><span class='wire-name'>Toronto</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>40.71°N</span><span class='wire-name'>New York</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>37.77°N</span><span class='wire-name'>San Francisco</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>19.43°N</span><span class='wire-name'>Mexico City</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>23.55°S</span><span class='wire-name'>São Paulo</span></span>
|
|
<span class='wire-item'><span class='wire-dot'>·</span><span class='wire-coord'>33.87°S</span><span class='wire-name'>Sydney</span></span>
|
|
</div>
|
|
</div>
|
|
<div class='wire-row reverse'>
|
|
<div class='marquee-track'>
|
|
<a class='wire-item is-link' href='https://github.com/tw93' target='_blank' rel='noreferrer noopener' aria-label='Open tw93 on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@tw93</span><span class='wire-role'>kami</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/op7418' target='_blank' rel='noreferrer noopener' aria-label='Open op7418 on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@op7418</span><span class='wire-role'>guizang</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/alchaincyf' target='_blank' rel='noreferrer noopener' aria-label='Open alchaincyf on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@alchaincyf</span><span class='wire-role'>huashu</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/multica-ai' target='_blank' rel='noreferrer noopener' aria-label='Open multica-ai on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@multica-ai</span><span class='wire-role'>daemon</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/OpenCoworkAI' target='_blank' rel='noreferrer noopener' aria-label='Open OpenCoworkAI on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@OpenCoworkAI</span><span class='wire-role'>codesign</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/nexu-io' target='_blank' rel='noreferrer noopener' aria-label='Open nexu-io on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@nexu-io</span><span class='wire-role'>studio</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/nexu-io/open-design/graphs/contributors' target='_blank' rel='noreferrer noopener' aria-label='Open you on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@you</span><span class='wire-role'>be next</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/tw93' target='_blank' rel='noreferrer noopener' aria-label='Open tw93 on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@tw93</span><span class='wire-role'>kami</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/op7418' target='_blank' rel='noreferrer noopener' aria-label='Open op7418 on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@op7418</span><span class='wire-role'>guizang</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/alchaincyf' target='_blank' rel='noreferrer noopener' aria-label='Open alchaincyf on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@alchaincyf</span><span class='wire-role'>huashu</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/multica-ai' target='_blank' rel='noreferrer noopener' aria-label='Open multica-ai on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@multica-ai</span><span class='wire-role'>daemon</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/OpenCoworkAI' target='_blank' rel='noreferrer noopener' aria-label='Open OpenCoworkAI on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@OpenCoworkAI</span><span class='wire-role'>codesign</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/nexu-io' target='_blank' rel='noreferrer noopener' aria-label='Open nexu-io on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@nexu-io</span><span class='wire-role'>studio</span></a>
|
|
<a class='wire-item is-link' href='https://github.com/nexu-io/open-design/graphs/contributors' target='_blank' rel='noreferrer noopener' aria-label='Open you on GitHub'><span class='wire-dot'>·</span><span class='wire-handle'>@you</span><span class='wire-role'>be next</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='about' data-od-id='about'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>II.</span>
|
|
<span class='meta-grp'>
|
|
<span>About / Manifesto</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>Open Design / Volume 01</span>
|
|
</span>
|
|
<span>002 / 008</span>
|
|
</div>
|
|
<div class='about-grid'>
|
|
<div class='about-copy' data-reveal>
|
|
<span class='label'>About the studio <span class='ix'>· Nº 02</span></span>
|
|
<h2 class='display'>We treat <em>your agent</em> as a creative <em>collaborator,</em> not a black box<span class='dot'>.</span></h2>
|
|
<p class='lead'>The strongest coding agents already live on your laptop. We don't ship one — we wire them into a skill-driven design workflow that runs locally with <code class='code-inline'>pnpm tools-dev</code>, deploys the web layer to Vercel, and stays BYOK at every layer.</p>
|
|
<a class='btn btn-ghost' href='https://github.com/nexu-io/open-design/tree/main/apps/daemon' target='_blank' rel='noreferrer noopener'>
|
|
Read our approach
|
|
<span class='arrow'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></span>
|
|
</a>
|
|
<div class='footer-row'>
|
|
<span class='mark'>Ø</span>
|
|
<span>Research · Design · Engineering · Repeat</span>
|
|
<span class='stamp'>
|
|
<span>Studio practice</span>
|
|
<span style='color: var(--ink);'>Est. MMXXVI</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class='about-art' data-reveal='right'>
|
|
<img src='./assets/about.png' alt='' />
|
|
<div class='about-side-note'>
|
|
<b></b>
|
|
From model behavior<br/>to visual taste, we<br/>prototype the full<br/>stack of creative<br/>systems.
|
|
</div>
|
|
<div class='about-caption'>
|
|
<b>Studies in form · perception · machine imagination.</b>
|
|
(Open Design, MMXXVI)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='capabilities' id='agents' data-od-id='capabilities'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>III.</span>
|
|
<span class='meta-grp'>
|
|
<span>Capabilities · Skills · Systems</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>4 surfaces / 1 loop</span>
|
|
</span>
|
|
<span>003 / 008</span>
|
|
</div>
|
|
<div class='capabilities-grid'>
|
|
<div class='capabilities-art' data-reveal='left'>
|
|
<span class='corner tl'></span>
|
|
<span class='corner br'></span>
|
|
<img src='./assets/capabilities.png' alt='' />
|
|
<div class='ribbon'><b>OPEN DESIGN</b> · CAPABILITIES MATRIX · OD/26</div>
|
|
</div>
|
|
<div class='capabilities-copy' data-reveal>
|
|
<span class='label'>Capabilities <span class='ix'>· Nº 03</span></span>
|
|
<h2 class='display'>Skills, systems, and surfaces <em>for creative</em> intelligence<span class='dot'>.</span></h2>
|
|
<p class='lead'>We blend human taste with whichever agent you already trust to ship interfaces, decks, and editorial pages that feel intentional, expressive, and alive.</p>
|
|
<div class='cards'>
|
|
<div class='card' data-reveal>
|
|
<div class='num'>01<span class='tag'>Skills</span></div>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'>
|
|
<circle cx='9' cy='9' r='5'/><path d='M14 14l5 5'/>
|
|
</svg>
|
|
<h3>Skills,<br/>not plugins</h3>
|
|
<p>31 file-based <code class='code-inline sm'>SKILL.md</code> bundles. Drop a folder in, restart the daemon, it appears.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener' aria-label='Learn more about Skills'>
|
|
<svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg>
|
|
</a>
|
|
</div>
|
|
<div class='card' data-reveal>
|
|
<div class='num'>02<span class='tag'>Systems</span></div>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'>
|
|
<rect x='3.5' y='3.5' width='8' height='8'/><rect x='12.5' y='3.5' width='8' height='8'/><rect x='3.5' y='12.5' width='8' height='8'/><rect x='12.5' y='12.5' width='8' height='8'/>
|
|
</svg>
|
|
<h3>Design Systems<br/>as Markdown</h3>
|
|
<p>72 portable <code class='code-inline sm'>DESIGN.md</code> systems — Linear, Vercel, Stripe, Apple, Cursor, Figma…</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/design-systems' target='_blank' rel='noreferrer noopener' aria-label='Learn more about Systems'>
|
|
<svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg>
|
|
</a>
|
|
</div>
|
|
<div class='card' data-reveal>
|
|
<div class='num'>03<span class='tag'>Adapters</span></div>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'>
|
|
<circle cx='8' cy='12' r='4.5'/><circle cx='16' cy='12' r='4.5'/>
|
|
</svg>
|
|
<h3>12 Agent<br/>Adapters</h3>
|
|
<p>Claude · Codex · Gemini · Cursor · Copilot · OpenCode · Devin · Hermes · Pi · Kimi · Kiro · Qwen — auto-detected on $PATH.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/apps/daemon' target='_blank' rel='noreferrer noopener' aria-label='Learn more about Adapters'>
|
|
<svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg>
|
|
</a>
|
|
</div>
|
|
<div class='card' data-reveal>
|
|
<div class='num'>04<span class='tag'>BYOK</span></div>
|
|
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'>
|
|
<path d='M5 8h14v8H5z'/><path d='M9 12h6M12 9v6'/>
|
|
</svg>
|
|
<h3>BYOK<br/>at every layer</h3>
|
|
<p>OpenAI-compatible proxy. DeepSeek, Groq, OpenRouter, your self-hosted vLLM — paste a baseUrl + key, ship.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener' aria-label='Learn more about BYOK'>
|
|
<svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='labs' id='labs' data-od-id='labs'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>IV.</span>
|
|
<span class='meta-grp'>
|
|
<span>Labs / Skills Catalog</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>05 of 31 ongoing</span>
|
|
</span>
|
|
<span>004 / 008</span>
|
|
</div>
|
|
<div class='labs-head'>
|
|
<div data-reveal>
|
|
<span class='label'>Labs <span class='ix'>· Nº 04</span></span>
|
|
<h2 class='display' style='margin-top:30px;'>A living archive of <em>experiments</em> in skills, decks, and machine-made form<span class='dot'>.</span></h2>
|
|
</div>
|
|
<div class='pills' data-reveal='right'>
|
|
<button class='pill active'>All<span class='count'>31</span></button>
|
|
<button class='pill'>Prototype<span class='count'>27</span></button>
|
|
<button class='pill'>Deck<span class='count'>04</span></button>
|
|
<button class='pill'>Mobile<span class='count'>03</span></button>
|
|
<button class='pill'>Office<span class='count'>08</span></button>
|
|
</div>
|
|
</div>
|
|
<div class='labs-meta'>
|
|
<span class='ring'>05</span>
|
|
<div class='meta-text'>
|
|
<b>Ongoing experiments</b>
|
|
documenting ideas in flux<br/>building intelligence<br/>through making
|
|
</div>
|
|
</div>
|
|
<div class='labs-grid'>
|
|
<div class='lab' data-reveal>
|
|
<div class='lab-img'><span class='badge'>Deck</span><img src='./assets/lab-1.png' alt='' /></div>
|
|
<div class='num-row'><span>Nº 01</span><span>2026</span></div>
|
|
<h4>Magazine Decks</h4>
|
|
<p>Editorial-grade slide decks with <code class='code-inline sm'>guizang-ppt</code>. Magazine layout, WebGL hero.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/skills/guizang-ppt' target='_blank' rel='noreferrer noopener' aria-label='Open Magazine Decks'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></a>
|
|
</div>
|
|
<div class='lab' data-reveal>
|
|
<div class='lab-img'><span class='badge'>Media</span><img src='./assets/lab-2.png' alt='' /></div>
|
|
<div class='num-row'><span>Nº 02</span><span>2026</span></div>
|
|
<h4>Synthetic Matter</h4>
|
|
<p>Gpt-image-2 + Seedance + HyperFrames. Image, video, audio — same chat surface as code.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/skills/hyperframes' target='_blank' rel='noreferrer noopener' aria-label='Open Synthetic Matter'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></a>
|
|
</div>
|
|
<div class='lab' data-reveal>
|
|
<div class='lab-img'><span class='badge'>Loop</span><img src='./assets/lab-3.png' alt='' /></div>
|
|
<div class='num-row'><span>Nº 03</span><span>2026</span></div>
|
|
<h4>Prompt Choreography</h4>
|
|
<p>The interactive question form pops before a single pixel is improvised. 30s of radios beats 30min of redirects.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/skills/design-brief' target='_blank' rel='noreferrer noopener' aria-label='Open Prompt Choreography'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></a>
|
|
</div>
|
|
<div class='lab' data-reveal>
|
|
<div class='lab-img'><span class='badge'>Critique</span><img src='./assets/lab-4.png' alt='' /></div>
|
|
<div class='num-row'><span>Nº 04</span><span>2026</span></div>
|
|
<h4>Visual Reasoning</h4>
|
|
<p>5-dim self-critique gates every artifact: philosophy · hierarchy · execution · specificity · restraint.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/skills/critique' target='_blank' rel='noreferrer noopener' aria-label='Open Visual Reasoning'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></a>
|
|
</div>
|
|
<div class='lab' data-reveal>
|
|
<div class='lab-img'><span class='badge'>Runtime</span><img src='./assets/lab-5.png' alt='' /></div>
|
|
<div class='num-row'><span>Nº 05</span><span>2026</span></div>
|
|
<h4>Soft Systems</h4>
|
|
<p>Sandboxed iframe preview. Streaming todos. Real-cwd filesystem. Adaptive loops between human and machine.</p>
|
|
<a class='arrow-mark' href='https://github.com/nexu-io/open-design/tree/main/apps/daemon' target='_blank' rel='noreferrer noopener' aria-label='Open Soft Systems'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></a>
|
|
</div>
|
|
</div>
|
|
<div class='labs-foot'>
|
|
<div class='progress'>
|
|
<span class='on'></span><span class='on'></span><span class='on'></span><span class='on'></span><span class='on'></span><span></span><span></span><span></span>
|
|
</div>
|
|
<span class='meta'>05 / 31 SKILLS · <a class='library-link' href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener' style='color:var(--coral);'>VIEW FULL LIBRARY →</a></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='method' data-od-id='method'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>V.</span>
|
|
<span class='meta-grp'>
|
|
<span>Method / Loop</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>04 stages, iterative</span>
|
|
</span>
|
|
<span>005 / 008</span>
|
|
</div>
|
|
<div class='method-head'>
|
|
<div data-reveal>
|
|
<span class='label'>Method <span class='ix'>· Nº 05</span></span>
|
|
<h2 class='display' style='margin-top:30px;'>From <em>signals</em> to systems<span class='dot'>.</span></h2>
|
|
</div>
|
|
<div class='right' data-reveal='right'>
|
|
<span class='plus'>+</span>
|
|
<p>Every stage is iterative, visual, and research-driven — composable files, not opaque prompts.</p>
|
|
</div>
|
|
</div>
|
|
<div class='method-grid'>
|
|
<div class='method-step' data-reveal>
|
|
<div class='num'>01</div>
|
|
<h4>Detect <span class='arrow-r'>→</span></h4>
|
|
<p>The daemon scans your $PATH for 12 coding agents and auto-loads 31 skills + 72 systems on boot.</p>
|
|
<div class='img'><img src='./assets/method-1.png' alt='' /></div>
|
|
</div>
|
|
<div class='method-step' data-reveal>
|
|
<div class='num'>02</div>
|
|
<h4>Discover <span class='arrow-r'>→</span></h4>
|
|
<p>Turn 1 is a question form — surface, audience, tone, scale, brand context. Locked in 30 seconds.</p>
|
|
<div class='img'><img src='./assets/method-2.png' alt='' /></div>
|
|
</div>
|
|
<div class='method-step' data-reveal>
|
|
<div class='num'>03</div>
|
|
<h4>Direct <span class='arrow-r'>→</span></h4>
|
|
<p>Pick one of 5 deterministic visual directions. Palette in OKLch, font stack, layout posture cues.</p>
|
|
<div class='img'><img src='./assets/method-3.png' alt='' /></div>
|
|
</div>
|
|
<div class='method-step' data-reveal>
|
|
<div class='num'>04</div>
|
|
<h4>Deliver</h4>
|
|
<p>The agent writes to disk, you preview in a sandboxed iframe, export HTML / PDF / PPTX / ZIP / Markdown.</p>
|
|
<div class='img'><img src='./assets/method-4.png' alt='' /></div>
|
|
</div>
|
|
</div>
|
|
<div class='method-foot'>
|
|
<div class='left'>
|
|
<span class='ring'></span>
|
|
<span>Skills inform everything. Files make it real.</span>
|
|
</div>
|
|
<div class='right'><a class='method-repo-link' href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'><b>github.com/nexu-io/open-design</b></a> · Apache-2.0</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='tight' data-od-id='work'>
|
|
<div class='work'>
|
|
<div class='work-rule'>
|
|
<span class='roman'>VI.</span>
|
|
<span style='display:inline-flex;gap:24px;'>
|
|
<span>Selected Work · 2026 Catalog</span>
|
|
<span style='color:var(--coral);'>•</span>
|
|
<span>Edited by Open Design</span>
|
|
</span>
|
|
<span>006 / 008</span>
|
|
</div>
|
|
<div class='work-grid'>
|
|
<div class='work-copy' data-reveal>
|
|
<span class='label'>Selected work</span>
|
|
<h2>Skills that turn briefs into <em>memorable</em> shippable <em>artifacts</em><span class='dot'>.</span></h2>
|
|
<a class='work-link' href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener'>View all 31 skills</a>
|
|
</div>
|
|
<a class='work-card' data-reveal href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener'>
|
|
<div class='label-row'>
|
|
<span class='small-label'>Featured skill</span>
|
|
<span class='index'>01 / 31</span>
|
|
</div>
|
|
<h3>guizang-ppt</h3>
|
|
<p>Magazine-style web PPT for product launches and pitch decks. Bundled verbatim, original LICENSE preserved.</p>
|
|
<div class='img'><img src='./assets/work-1.png' alt='' /></div>
|
|
<div class='meta-row'>
|
|
<span class='year'>2026 · DECK</span>
|
|
<span>DEFAULT</span>
|
|
</div>
|
|
</a>
|
|
<a class='work-card alt' data-reveal href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener'>
|
|
<div class='label-row'>
|
|
<span class='small-label'>Companion system</span>
|
|
<span class='index'>04 / 72</span>
|
|
</div>
|
|
<h3>kami</h3>
|
|
<p>An editorial paper system. Warm parchment canvas, ink-blue accent, serif-led hierarchy — multilingual by design (EN · zh-CN · ja).</p>
|
|
<div class='img'><img src='./assets/work-2.png' alt='' /></div>
|
|
<div class='meta-row'>
|
|
<span class='year'>2026 · PAPER</span>
|
|
<span>SYSTEM</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class='work-arrows'>
|
|
<button class='nav-btn'><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'><path d='M14 6l-6 6 6 6'/></svg></button>
|
|
<button class='nav-btn active'><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.6'><path d='M10 6l6 6-6 6'/></svg></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='testimonial' data-od-id='testimonial'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>VII.</span>
|
|
<span class='meta-grp'>
|
|
<span>Collaborators / Lineage</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>Standing on shoulders</span>
|
|
</span>
|
|
<span>007 / 008</span>
|
|
</div>
|
|
<div class='testimonial-grid'>
|
|
<div class='testimonial-copy' data-reveal>
|
|
<span class='label'>Collaborators <span class='ix'>· Nº 06</span></span>
|
|
<h2 style='margin-top:30px;'>“Open Design helped us turn vague <em>AI ideas</em> into a visual system that felt <em>sharp, believable,</em> and genuinely new.”</h2>
|
|
<div class='author'>
|
|
<span class='avatar'>m</span>
|
|
<p>Mina Kovac<br/><span>Creative Director · North Form</span></p>
|
|
</div>
|
|
<div class='divider'></div>
|
|
<p class='partners-text'>Standing on the shoulders of teams shipping open-source design culture.</p>
|
|
<div class='partners'>
|
|
<a class='partner' data-reveal href='https://github.com/alchaincyf/huashu-design' target='_blank' rel='noreferrer noopener'>
|
|
<div class='glyph'>
|
|
<svg viewBox='0 0 80 30' fill='none' stroke='currentColor' stroke-width='2'>
|
|
<path d='M5 24L20 6L35 24M12 18h16'/>
|
|
</svg>
|
|
</div>
|
|
<span>huashu-design</span>
|
|
<small>Philosophy</small>
|
|
</a>
|
|
<a class='partner' data-reveal href='https://github.com/op7418/guizang-ppt-skill' target='_blank' rel='noreferrer noopener'>
|
|
<div class='glyph'>
|
|
<svg viewBox='0 0 80 30' fill='none' stroke='currentColor' stroke-width='2'>
|
|
<path d='M8 24L20 6L24 22L36 4'/>
|
|
</svg>
|
|
</div>
|
|
<span>guizang-ppt</span>
|
|
<small>Decks</small>
|
|
</a>
|
|
<a class='partner' data-reveal href='https://github.com/multica-ai/multica' target='_blank' rel='noreferrer noopener'>
|
|
<div class='glyph'>
|
|
<svg viewBox='0 0 80 30' fill='none' stroke='currentColor' stroke-width='2'>
|
|
<rect x='6' y='6' width='4' height='18'/><rect x='14' y='6' width='4' height='18'/><rect x='22' y='6' width='4' height='18'/><rect x='30' y='6' width='4' height='18'/>
|
|
</svg>
|
|
</div>
|
|
<span>multica-ai</span>
|
|
<small>Daemon</small>
|
|
</a>
|
|
<a class='partner' data-reveal href='https://github.com/OpenCoworkAI/open-codesign' target='_blank' rel='noreferrer noopener'>
|
|
<div class='glyph'>
|
|
<svg viewBox='0 0 80 30' fill='none' stroke='currentColor' stroke-width='2'>
|
|
<circle cx='15' cy='15' r='9'/><path d='M15 6v18M6 15h18'/>
|
|
</svg>
|
|
</div>
|
|
<span>open-codesign</span>
|
|
<small>UX</small>
|
|
</a>
|
|
<a class='partner' data-reveal href='https://devin.ai/terminal' target='_blank' rel='noreferrer noopener'>
|
|
<div class='glyph'>
|
|
<svg viewBox='0 0 80 30' fill='none' stroke='currentColor' stroke-width='2'>
|
|
<path d='M5 8l9 7-9 7M20 24h18'/>
|
|
</svg>
|
|
</div>
|
|
<span>Devin CLI</span>
|
|
<small>Terminal</small>
|
|
</a>
|
|
<a class='partner' data-reveal href='https://github.com/heygen-com/hyperframes' target='_blank' rel='noreferrer noopener'>
|
|
<div class='glyph'>
|
|
<svg viewBox='0 0 80 30' fill='none' stroke='currentColor' stroke-width='2'>
|
|
<rect x='4' y='5' width='22' height='18'/><rect x='14' y='9' width='22' height='18'/>
|
|
</svg>
|
|
</div>
|
|
<span>hyperframes</span>
|
|
<small>Frames</small>
|
|
</a>
|
|
</div>
|
|
<a class='read-more' href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'>Read more stories</a>
|
|
</div>
|
|
<div class='testimonial-art' data-reveal='right'>
|
|
<img src='./assets/testimonial.png' alt='' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class='cta' id='contact' data-od-id='cta'>
|
|
<div class='container'>
|
|
<div class='sec-rule'>
|
|
<span class='roman'>VIII.</span>
|
|
<span class='meta-grp'>
|
|
<span>Contact / Conversation</span>
|
|
<span class='dot-mark'>•</span>
|
|
<span>Three commands to ship</span>
|
|
</span>
|
|
<span>008 / 008</span>
|
|
</div>
|
|
<div class='cta-grid'>
|
|
<div data-reveal>
|
|
<span class='label'>Start a conversation <span class='ix'>· Nº 07</span></span>
|
|
<h2 class='display'>Let's build something <em>open</em> and <em>visually</em> unforgettable<span class='dot'>.</span></h2>
|
|
<p class='lead'>Star us on GitHub, drop into the issues, or run <code class='code-inline'>pnpm tools-dev</code> tonight. Three commands and the loop is yours.</p>
|
|
<div class='cta-actions'>
|
|
<a class='btn btn-primary' href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'>
|
|
Star on GitHub
|
|
<span class='arrow'><svg viewBox='0 0 24 24'><path d='M5 19L19 5M19 5H8M19 5v11'/></svg></span>
|
|
</a>
|
|
<a class='email-pill' href='https://github.com/nexu-io/open-design/issues' target='_blank' rel='noreferrer noopener'>
|
|
Open an issue
|
|
<span class='arrow-circle'>→</span>
|
|
</a>
|
|
</div>
|
|
<div class='cta-foot'>
|
|
<span class='stamp'>● Live</span>
|
|
<span>v0.3.0 / Apache-2.0</span>
|
|
<span style='margin-left:auto;'>52.5200° N · 13.4050° E</span>
|
|
</div>
|
|
</div>
|
|
<div class='cta-art' data-reveal='right'>
|
|
<img src='./assets/cta.png' alt='' />
|
|
<div class='index'>Nº 08</div>
|
|
<div class='ribbon'>OPEN DESIGN · FIN.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer data-od-id='footer'>
|
|
<div class='container'>
|
|
<div class='foot-grid'>
|
|
<div class='foot-brand'>
|
|
<a href='#top' class='brand'>
|
|
<span class='brand-mark'>Ø</span>
|
|
<span>Open Design</span>
|
|
</a>
|
|
<p style='margin-top:18px;'>The open-source alternative to Claude Design. Built on the shoulders of <a class='inline-link' href='https://github.com/alchaincyf/huashu-design' target='_blank' rel='noreferrer noopener'>huashu-design</a>, <a class='inline-link' href='https://github.com/op7418/guizang-ppt-skill' target='_blank' rel='noreferrer noopener'>guizang-ppt</a>, <a class='inline-link' href='https://github.com/multica-ai/multica' target='_blank' rel='noreferrer noopener'>multica-ai</a>, and <a class='inline-link' href='https://github.com/OpenCoworkAI/open-codesign' target='_blank' rel='noreferrer noopener'>open-codesign</a>.</p>
|
|
<a class='foot-cta' href='https://github.com/nexu-io/open-design/releases' target='_blank' rel='noreferrer noopener'>Download desktop<span class='meta'>macOS · v0.3.0</span></a>
|
|
</div>
|
|
<div class='foot-col'>
|
|
<h5>Studio</h5>
|
|
<ul>
|
|
<li><a href='#agents'>Capabilities</a></li>
|
|
<li><a href='#labs'>Labs</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/apps/daemon' target='_blank' rel='noreferrer noopener'>Method</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'>Manifesto</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class='foot-col'>
|
|
<h5>Library</h5>
|
|
<ul>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/skills' target='_blank' rel='noreferrer noopener'>31 Skills</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/design-systems' target='_blank' rel='noreferrer noopener'>72 Systems</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/design-systems' target='_blank' rel='noreferrer noopener'>5 Directions</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/tree/main/skills/hyperframes' target='_blank' rel='noreferrer noopener'>5 Frames</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class='foot-col'>
|
|
<h5>Connect</h5>
|
|
<ul>
|
|
<li><a href='https://github.com/nexu-io/open-design' target='_blank' rel='noreferrer noopener'>GitHub</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/issues' target='_blank' rel='noreferrer noopener'>Issues</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/graphs/contributors' target='_blank' rel='noreferrer noopener'>Contributors</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/releases' target='_blank' rel='noreferrer noopener'>Releases</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class='foot-col'>
|
|
<h5>Docs</h5>
|
|
<ul>
|
|
<li><a href='https://github.com/nexu-io/open-design/blob/main/QUICKSTART.md' target='_blank' rel='noreferrer noopener'>Quickstart</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/blob/main/docs/architecture.md' target='_blank' rel='noreferrer noopener'>Architecture</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/blob/main/docs/skills-protocol.md' target='_blank' rel='noreferrer noopener'>Skill Protocol</a></li>
|
|
<li><a href='https://github.com/nexu-io/open-design/blob/main/docs/roadmap.md' target='_blank' rel='noreferrer noopener'>Roadmap</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class='foot-bottom'>
|
|
<span><span class='pulse'></span>● <b style='color:var(--ink);'>Open Design</b> · Apache-2.0 · 2026 / Vol. 01 / Issue Nº 26</span>
|
|
<span class='right'>
|
|
<span>Berlin / Open / Earth</span>
|
|
<span>52.5200° N · 13.4050° E</span>
|
|
<span style='color:var(--coral);'>♥ MMXXVI</span>
|
|
</span>
|
|
</div>
|
|
<div class='foot-mega'>
|
|
<div class='word' data-reveal='rise-lg'>Open <em>Design</em>.</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
/*
|
|
* Scroll-reveal observer — mirrors apps/landing-page/app/_components/reveal-root.tsx.
|
|
* Watches every [data-reveal] element and flips data-revealed='true'
|
|
* when it first enters the viewport, triggering the CSS transition.
|
|
*/
|
|
(function () {
|
|
var elements = document.querySelectorAll('[data-reveal]:not([data-revealed])');
|
|
if (!elements.length) return;
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
for (var i = 0; i < elements.length; i++) elements[i].dataset.revealed = 'true';
|
|
return;
|
|
}
|
|
var observer = new IntersectionObserver(function (entries) {
|
|
for (var i = 0; i < entries.length; i++) {
|
|
if (!entries[i].isIntersecting) continue;
|
|
entries[i].target.dataset.revealed = 'true';
|
|
observer.unobserve(entries[i].target);
|
|
}
|
|
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
|
|
for (var j = 0; j < elements.length; j++) observer.observe(elements[j]);
|
|
})();
|
|
|
|
/*
|
|
* Headroom-style sticky header — mirrors apps/landing-page/app/_components/header.tsx.
|
|
* Hides the nav on downward scroll, re-pins it on upward scroll, and
|
|
* always keeps it visible near the top of the page.
|
|
*/
|
|
(function () {
|
|
var nav = document.querySelector('header.nav');
|
|
if (!nav) return;
|
|
var SHOW_TOP = 100;
|
|
var DELTA = 6;
|
|
var lastY = window.scrollY || 0;
|
|
function onScroll() {
|
|
var y = window.scrollY || 0;
|
|
var d = y - lastY;
|
|
if (y <= SHOW_TOP) {
|
|
nav.classList.remove('is-hidden');
|
|
} else if (d > DELTA) {
|
|
nav.classList.add('is-hidden');
|
|
} else if (d < -DELTA) {
|
|
nav.classList.remove('is-hidden');
|
|
}
|
|
lastY = y;
|
|
}
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
/*
|
|
* GitHub star count — pulls live count and replaces the placeholder
|
|
* text in the nav CTA. Failures fall back silently.
|
|
*/
|
|
(function () {
|
|
var cta = document.querySelector('a.nav-cta:not(.ghost)');
|
|
if (!cta) return;
|
|
function format(n) {
|
|
if (!isFinite(n) || n <= 0) return '0';
|
|
if (n < 1000) return String(n);
|
|
var k = (n / 1000).toFixed(1).replace(/\.0$/, '');
|
|
return k + 'K';
|
|
}
|
|
fetch('https://api.github.com/repos/nexu-io/open-design', {
|
|
headers: { Accept: 'application/vnd.github+json' }
|
|
})
|
|
.then(function (r) { return r.ok ? r.json() : null; })
|
|
.then(function (data) {
|
|
if (!data || typeof data.stargazers_count !== 'number') return;
|
|
cta.textContent = 'Star · ' + format(data.stargazers_count);
|
|
cta.setAttribute('aria-label', 'Star on GitHub — ' + format(data.stargazers_count) + ' stars');
|
|
})
|
|
.catch(function () { /* leave placeholder on failure */ });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|