Refactor project name from "Open Claude Design" to "Open Design" (#1)
* Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines.
This commit is contained in:
Tom Huang
@@ -0,0 +1,381 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>Open Design — cover</title>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500&display=swap' rel='stylesheet'>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d0a06;
|
||||
--bg-2: #14100a;
|
||||
--ink: #f3ead8;
|
||||
--muted: #9b8f78;
|
||||
--rule: #4a3f2c;
|
||||
--accent: #f0833f;
|
||||
--accent-2: #e85a2c;
|
||||
--paper: #f6efdd;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1200px 700px at 78% 22%, rgba(240,131,63,0.12), transparent 70%),
|
||||
radial-gradient(900px 600px at 12% 80%, rgba(232,90,44,0.06), transparent 70%),
|
||||
linear-gradient(180deg, #0e0b07 0%, #0a0805 100%);
|
||||
padding: 56px 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
header .l { text-align: left; }
|
||||
header .r { text-align: right; }
|
||||
header .center {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
header .center .dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin: 0 8px 4px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 1fr;
|
||||
column-gap: 64px;
|
||||
padding-top: 56px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.eyebrow .pill {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: #f6e9d4;
|
||||
background: rgba(240,131,63,0.16);
|
||||
border: 1px solid rgba(240,131,63,0.45);
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.eyebrow .pill.alt {
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
border-color: var(--rule);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 116px;
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
margin: 0 0 36px 0;
|
||||
}
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
h1 .small {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.lede {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 300;
|
||||
font-size: 22px;
|
||||
line-height: 1.5;
|
||||
color: #d8cdb6;
|
||||
max-width: 640px;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
.lede b {
|
||||
font-weight: 500;
|
||||
color: #f3ead8;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 22px;
|
||||
}
|
||||
.meta .cell {
|
||||
border-right: 1px solid var(--rule);
|
||||
padding-right: 18px;
|
||||
}
|
||||
.meta .cell:last-child { border-right: none; }
|
||||
.meta .num {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 42px;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.meta .num em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.meta .lbl {
|
||||
margin-top: 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* right artifact collage */
|
||||
.right {
|
||||
position: relative;
|
||||
}
|
||||
.stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.card {
|
||||
position: absolute;
|
||||
border-radius: 18px;
|
||||
overflow: hidden;
|
||||
background: #1a140d;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.04) inset,
|
||||
0 24px 60px rgba(0,0,0,0.55),
|
||||
0 6px 18px rgba(0,0,0,0.45);
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.card .tag {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #ffd9b6;
|
||||
background: rgba(20, 14, 8, 0.7);
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(255,217,182,0.18);
|
||||
}
|
||||
|
||||
/* arrange three artifacts as an editorial collage */
|
||||
.card.a { /* gamified-app — back-left */
|
||||
width: 540px;
|
||||
height: 320px;
|
||||
top: 70px;
|
||||
right: 280px;
|
||||
transform: rotate(-3.5deg);
|
||||
}
|
||||
.card.b { /* digital-eguide — front-right hero */
|
||||
width: 620px;
|
||||
height: 360px;
|
||||
top: 220px;
|
||||
right: 0;
|
||||
transform: rotate(2.5deg);
|
||||
z-index: 3;
|
||||
}
|
||||
.card.c { /* dating-web — bottom-left */
|
||||
width: 520px;
|
||||
height: 300px;
|
||||
top: 460px;
|
||||
right: 230px;
|
||||
transform: rotate(-1.5deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* decorative marks */
|
||||
.mark-circle {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
right: 24px;
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #ffb37a, var(--accent-2) 80%);
|
||||
color: #2a1408;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: rotate(8deg);
|
||||
box-shadow: 0 14px 30px rgba(232,90,44,0.45);
|
||||
z-index: 5;
|
||||
}
|
||||
.mark-circle span { padding: 0 10px; }
|
||||
|
||||
footer {
|
||||
margin-top: 48px;
|
||||
padding-top: 22px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
}
|
||||
footer .l { text-align: left; }
|
||||
footer .r { text-align: right; }
|
||||
footer .c {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.28em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.underline-accent {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.underline-accent::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: 4px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class='mono l'>Open Design · Manifesto · 2026 Edition</div>
|
||||
<div class='center'><span class='dot'></span>open.design</div>
|
||||
<div class='mono r'>Cover · 01 / 08 · OSS Alternative</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class='left'>
|
||||
<div>
|
||||
<div class='eyebrow'>
|
||||
<span class='pill'>· APACHE 2.0</span>
|
||||
<span class='pill alt'>Local-first · BYOK</span>
|
||||
</div>
|
||||
<h1>
|
||||
Design with the<br/>
|
||||
<em>agent</em> already<br/>
|
||||
<span class='small'>on your <span class='underline-accent'>laptop</span>.</span>
|
||||
</h1>
|
||||
<p class='lede'>
|
||||
Open Design is the open-source alternative to Claude Design.
|
||||
Your existing coding agent — <b>Claude Code · Codex · Cursor · Gemini · OpenCode · Qwen</b> —
|
||||
becomes the design engine, driven by 19 composable Skills and 71 brand-grade Design Systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class='meta'>
|
||||
<div class='cell'>
|
||||
<div class='num'>71</div>
|
||||
<div class='lbl'>Design<br/>Systems</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>19</div>
|
||||
<div class='lbl'>Composable<br/>Skills</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>06</div>
|
||||
<div class='lbl'>Coding<br/>Agents</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'><em>0</em></div>
|
||||
<div class='lbl'>Lock-in /<br/>Vendor Cloud</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='right'>
|
||||
<div class='stage'>
|
||||
<div class='card a'>
|
||||
<span class='tag'>· Hi-Fi Prototype · iPhone</span>
|
||||
<img src='../../screenshots/skills/gamified-app.png' alt=''>
|
||||
</div>
|
||||
<div class='card b'>
|
||||
<span class='tag'>· Digital E-guide · 64pp</span>
|
||||
<img src='../../screenshots/skills/digital-eguide.png' alt=''>
|
||||
</div>
|
||||
<div class='card c'>
|
||||
<span class='tag'>· Dating App · Web</span>
|
||||
<img src='../../screenshots/skills/dating-web.png' alt=''>
|
||||
</div>
|
||||
<div class='mark-circle'><span>OPEN<br/>SOURCE</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class='mono l'>BYOK at every layer · No cloud lock-in</div>
|
||||
<div class='c'>· pnpm dev · vercel deploy · npm start ·</div>
|
||||
<div class='mono r'>github.com/open-design</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,520 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<title>71 Design Systems — cover</title>
|
||||
<link rel='preconnect' href='https://fonts.googleapis.com'>
|
||||
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
|
||||
<link href='https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,700;1,9..144,500;1,9..144,700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500&display=swap' rel='stylesheet'>
|
||||
<style>
|
||||
:root {
|
||||
--surface: #d9c3bd;
|
||||
--surface-2: #e6d2cc;
|
||||
--paper: #f5ecd9;
|
||||
--paper-edge: #e8dcc4;
|
||||
--ink: #1c1814;
|
||||
--ink-soft: #4d4339;
|
||||
--muted: #8a7e70;
|
||||
--rule: #c8b9a1;
|
||||
--accent: #c44a3a;
|
||||
--accent-2: #d4593f;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: 'Inter', -apple-system, system-ui, sans-serif;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1100px 700px at 28% 12%, var(--surface-2), transparent 70%),
|
||||
radial-gradient(900px 600px at 88% 90%, #cab1aa, transparent 70%),
|
||||
var(--surface);
|
||||
padding: 60px 80px;
|
||||
display: flex;
|
||||
gap: 56px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.page {
|
||||
background: var(--paper);
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
padding: 56px 60px;
|
||||
box-shadow:
|
||||
0 0 0 1px var(--paper-edge),
|
||||
0 30px 60px rgba(60, 30, 24, 0.18),
|
||||
0 8px 22px rgba(60, 30, 24, 0.12);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(28,24,20,0.04), transparent 8%, transparent 92%, rgba(28,24,20,0.05));
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: 'JetBrains Mono', ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pageHead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ---------- LEFT (cover) page ---------- */
|
||||
.cover h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 96px;
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
margin: 64px 0 32px 0;
|
||||
}
|
||||
.cover h1 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.cover .tagline {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 1.45;
|
||||
color: var(--ink-soft);
|
||||
max-width: 480px;
|
||||
margin: 0 0 36px 0;
|
||||
}
|
||||
.byline {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
.stats .cell { padding-right: 16px; }
|
||||
.stats .cell + .cell { border-left: 1px solid var(--rule); padding-left: 24px; }
|
||||
.stats .num {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 64px;
|
||||
line-height: 1;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.stats .num em { font-style: italic; color: var(--accent); }
|
||||
.stats .lbl {
|
||||
margin-top: 10px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
margin: 8px 0 18px 0;
|
||||
color: var(--ink);
|
||||
}
|
||||
.toc-title em { font-style: italic; color: var(--accent); }
|
||||
|
||||
.toc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.toc-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 17px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.toc-row .name { flex: 0 0 auto; }
|
||||
.toc-row .dots {
|
||||
flex: 1;
|
||||
border-bottom: 1px dotted #b6a487;
|
||||
margin: 0 10px;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.toc-row .pg {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.cover .footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
/* ---------- RIGHT (index) page ---------- */
|
||||
.index .h2 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
margin: 32px 0 12px 0;
|
||||
}
|
||||
.index .h2 em {
|
||||
font-style: italic;
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
.index .sub {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
color: var(--ink-soft);
|
||||
line-height: 1.5;
|
||||
max-width: 540px;
|
||||
margin: 0 0 28px 0;
|
||||
}
|
||||
.drop {
|
||||
float: left;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 76px;
|
||||
line-height: 0.85;
|
||||
color: var(--accent);
|
||||
margin: 8px 12px -4px 0;
|
||||
}
|
||||
.drop + p {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-soft);
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 36px;
|
||||
row-gap: 6px;
|
||||
margin: 18px 0 12px 0;
|
||||
border-top: 1px solid var(--rule);
|
||||
border-bottom: 1px solid var(--rule);
|
||||
padding: 14px 0;
|
||||
}
|
||||
.item {
|
||||
display: grid;
|
||||
grid-template-columns: 26px 1fr auto;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 16px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.item .n {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.item .swatch {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
transform: translateY(2px);
|
||||
margin-right: 6px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
|
||||
}
|
||||
.item .name { font-weight: 500; }
|
||||
.item .tag {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.item.featured .name { color: var(--accent); font-style: italic; }
|
||||
|
||||
.spotlight {
|
||||
display: grid;
|
||||
grid-template-columns: 110px 1fr;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
background: #f0e3c8;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 6px;
|
||||
padding: 18px 20px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.spotlight .swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
.spotlight .sw {
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
|
||||
}
|
||||
.spotlight .label {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.spotlight h3 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 22px;
|
||||
margin: 0 0 6px 0;
|
||||
color: var(--ink);
|
||||
}
|
||||
.spotlight h3 em { color: var(--accent); }
|
||||
.spotlight p {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-soft);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.index .footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid var(--rule);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.stamp {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
right: 56px;
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff5e9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
transform: rotate(8deg);
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
line-height: 1.15;
|
||||
box-shadow: 0 12px 28px rgba(196,74,58,0.35);
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- LEFT PAGE: cover -->
|
||||
<article class='page cover'>
|
||||
<div class='pageHead'>
|
||||
<div class='mono'><span class='dot'></span>Style & Format Guide for Designers</div>
|
||||
<div class='mono'>2026 Edition</div>
|
||||
</div>
|
||||
|
||||
<h1>The <em>71</em><br/>Systems<br/>Library.</h1>
|
||||
<p class='tagline'>
|
||||
Linear, Stripe, Vercel, Airbnb, Tesla, Notion, Anthropic, Apple, Cursor, Supabase, Figma —
|
||||
seventy-one brand-grade systems, one open library, zero lock-in.
|
||||
</p>
|
||||
<div class='byline'>By Open Design · Maintained on GitHub · 19 / 04 / 2026</div>
|
||||
|
||||
<div class='stats'>
|
||||
<div class='cell'>
|
||||
<div class='num'>71</div>
|
||||
<div class='lbl'>Design<br/>Systems</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'>19</div>
|
||||
<div class='lbl'>Composable<br/>Skills</div>
|
||||
</div>
|
||||
<div class='cell'>
|
||||
<div class='num'><em>1</em></div>
|
||||
<div class='lbl'>Library, zero<br/>vendor cloud</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class='toc-title'>What's <em>inside</em>.</h2>
|
||||
<div class='toc'>
|
||||
<div class='toc-row'><span class='name'>Tokens, palettes, motion</span><span class='dots'></span><span class='pg'>04</span></div>
|
||||
<div class='toc-row'><span class='name'>Pick a direction</span><span class='dots'></span><span class='pg'>12</span></div>
|
||||
<div class='toc-row'><span class='name'>Tone & typography</span><span class='dots'></span><span class='pg'>18</span></div>
|
||||
<div class='toc-row'><span class='name'>71 systems index</span><span class='dots'></span><span class='pg'>24</span></div>
|
||||
<div class='toc-row'><span class='name'>Bring-your-own-key</span><span class='dots'></span><span class='pg'>40</span></div>
|
||||
<div class='toc-row'><span class='name'>The anti-AI-slop checklist</span><span class='dots'></span><span class='pg'>52</span></div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<div class='mono'>Tokens, palettes & type</div>
|
||||
<div class='mono'>01 / 64</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- RIGHT PAGE: index -->
|
||||
<article class='page index'>
|
||||
<div class='pageHead'>
|
||||
<div class='mono'><span class='dot'></span>Chapter 02 · Index</div>
|
||||
<div class='mono'>71 entries · A → Z</div>
|
||||
</div>
|
||||
|
||||
<h2 class='h2'>All systems —<br/><em>one library.</em></h2>
|
||||
<p class='sub'>
|
||||
Every system ships a deterministic OKLch palette, a font stack, and a tone profile.
|
||||
Pick one tile and the agent inherits the whole brand.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<span class='drop'>S</span>
|
||||
eventy-one product systems, two hand-authored starters, five visual directions. Imported and curated
|
||||
from awesome-design-md, hand-tuned for Open Design's discovery loop. Drop one in,
|
||||
every artifact downstream changes accordingly — no model freestyle.
|
||||
</p>
|
||||
|
||||
<div class='columns'>
|
||||
<div class='item featured'>
|
||||
<span class='n'>03</span>
|
||||
<span><span class='swatch' style='background:#5e6ad2'></span><span class='name'>Linear</span></span>
|
||||
<span class='tag'>· graphite · violet</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>07</span>
|
||||
<span><span class='swatch' style='background:#635bff'></span><span class='name'>Stripe</span></span>
|
||||
<span class='tag'>· payments · indigo</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>09</span>
|
||||
<span><span class='swatch' style='background:#000000'></span><span class='name'>Vercel</span></span>
|
||||
<span class='tag'>· void · grayscale</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>14</span>
|
||||
<span><span class='swatch' style='background:#ff385c'></span><span class='name'>Airbnb</span></span>
|
||||
<span class='tag'>· rausch · rounded</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>18</span>
|
||||
<span><span class='swatch' style='background:#cc0000'></span><span class='name'>Tesla</span></span>
|
||||
<span class='tag'>· red · industrial</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>22</span>
|
||||
<span><span class='swatch' style='background:#000000'></span><span class='name'>Notion</span></span>
|
||||
<span class='tag'>· paper · serif</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>27</span>
|
||||
<span><span class='swatch' style='background:#cc785c'></span><span class='name'>Anthropic</span></span>
|
||||
<span class='tag'>· clay · serif</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>31</span>
|
||||
<span><span class='swatch' style='background:#a8a8a8'></span><span class='name'>Apple</span></span>
|
||||
<span class='tag'>· chrome · sf pro</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>34</span>
|
||||
<span><span class='swatch' style='background:#1a1a1a'></span><span class='name'>Cursor</span></span>
|
||||
<span class='tag'>· terminal · mono</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>41</span>
|
||||
<span><span class='swatch' style='background:#3ecf8e'></span><span class='name'>Supabase</span></span>
|
||||
<span class='tag'>· emerald · rounded</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>48</span>
|
||||
<span><span class='swatch' style='background:#0acf83'></span><span class='name'>Figma</span></span>
|
||||
<span class='tag'>· spectrum · canvas</span>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<span class='n'>57</span>
|
||||
<span><span class='swatch' style='background:#000000'></span><span class='name'>OpenAI</span></span>
|
||||
<span class='tag'>· void · sober</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='spotlight'>
|
||||
<div class='swatches'>
|
||||
<span class='sw' style='background:#1c1816'></span>
|
||||
<span class='sw' style='background:#5e6ad2'></span>
|
||||
<span class='sw' style='background:#9b9bd6'></span>
|
||||
<span class='sw' style='background:#f3ead8'></span>
|
||||
</div>
|
||||
<div>
|
||||
<div class='label'>Spotlight · Linear · 03 / 71</div>
|
||||
<h3>Graphite + electric <em>violet.</em></h3>
|
||||
<p>IBM Plex Sans · Inter Display · 4-step OKLch palette · 16/24 grid · square radius. The agent inherits the full token tree the moment you tap the tile.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='footer'>
|
||||
<div class='mono'>Chapter 02 · Index</div>
|
||||
<div class='mono'>24 / 64</div>
|
||||
</div>
|
||||
|
||||
<div class='stamp'><span>71<br/>SYSTEMS</span></div>
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 MiB After Width: | Height: | Size: 87 KiB |
@@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 800" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Hero banner placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="2400" height="800" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="2336" height="736" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(1200 340)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="1200" y="430" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
OPEN DESIGN
|
||||
</text>
|
||||
<text x="1200" y="510" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Hero banner
|
||||
</text>
|
||||
<text x="1200" y="575" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/assets/banner.svg
|
||||
</text>
|
||||
<text x="1200" y="640" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Replace with a wide product screenshot or marketing illustration.
|
||||
</text>
|
||||
<text x="1200" y="744" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 79 KiB |
@@ -0,0 +1,43 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Design Systems library placeholder">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBF7EF"/>
|
||||
<stop offset="100%" stop-color="#EFE7D7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="1600" height="900" fill="url(#bg)"/>
|
||||
<rect x="32" y="32" width="1536" height="836" rx="28" ry="28"
|
||||
fill="none" stroke="#C2532D" stroke-width="3" stroke-dasharray="16 12" opacity="0.85"/>
|
||||
<g transform="translate(800 390)" stroke="#1F1B16" stroke-width="6"
|
||||
stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.9">
|
||||
<rect x="-110" y="-72" width="220" height="144" rx="18"/>
|
||||
<rect x="-36" y="-94" width="72" height="26" rx="8"/>
|
||||
<circle r="42"/>
|
||||
<circle r="18"/>
|
||||
</g>
|
||||
<text x="800" y="480" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="34" font-weight="600" letter-spacing="6" fill="#C2532D">
|
||||
71 DESIGN SYSTEMS
|
||||
</text>
|
||||
<text x="800" y="560" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="56" font-weight="700" fill="#1F1B16">
|
||||
Design Systems library
|
||||
</text>
|
||||
<text x="800" y="625" text-anchor="middle"
|
||||
font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
font-size="26" fill="#6B6258">
|
||||
docs/assets/design-systems-library.svg
|
||||
</text>
|
||||
<text x="800" y="690" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="24" fill="#6B6258">
|
||||
Replace with a screenshot of the design-system browser.
|
||||
</text>
|
||||
<text x="800" y="844" text-anchor="middle"
|
||||
font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"
|
||||
font-size="20" letter-spacing="4" fill="#6B6258" opacity="0.85">
|
||||
SCREENSHOT PENDING · 截图占位
|
||||
</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Reference in New Issue
Block a user