@noobsociety/nsds 0.1.0

package/components/primitives.css

@@ -0,0 +1,407 @@
+/* NoobSociety shared component primitives.
+   Import through styles.css; keep these classes token-driven. */
+
+.ns-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ns-container {
+  width: 100%;
+  max-width: var(--ns-container);
+  margin-inline: auto;
+  padding-inline: var(--ns-fluid-container);
+}
+
+.ns-section {
+  position: relative;
+  min-height: var(--ns-section-min);
+  padding-block: var(--ns-fluid-section-top) var(--ns-fluid-section-bottom);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.ns-eyebrow {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  margin: 0 0 var(--ns-space-3);
+  color: var(--ns-gold);
+  font: var(--ns-weight-bold) var(--ns-pixel-lg) / 1 var(--ns-font-body);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.ns-section-title {
+  margin: 0;
+  color: var(--ns-ink);
+  font: var(--ns-weight-bold) var(--ns-title-section) / 1.14 var(--ns-font-body);
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+.ns-section-copy {
+  margin: var(--ns-space-3) 0 0;
+  color: var(--ns-ink-dim);
+  font-size: 1.05rem;
+  line-height: var(--ns-leading-normal);
+  text-wrap: pretty;
+}
+
+.ns-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6em;
+  min-width: 0;
+  border: 0;
+  color: inherit;
+  font-family: var(--ns-font-pixel);
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--ns-transition-fast),
+    background-color var(--ns-transition-fast),
+    border-color var(--ns-transition-fast),
+    box-shadow var(--ns-transition-fast),
+    transform var(--ns-transition-fast);
+}
+
+.ns-button svg {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.ns-button--sm {
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--ns-radius-md);
+  font-size: var(--ns-pixel-sm);
+}
+
+.ns-button--md {
+  padding: 1rem 1.625rem;
+  border-radius: 0.5625rem;
+  font-size: var(--ns-pixel-md);
+}
+
+.ns-button--lg {
+  padding: 1.125rem 2rem;
+  border-radius: var(--ns-radius-lg);
+  font-size: var(--ns-pixel-lg);
+}
+
+.ns-button--play {
+  color: var(--ns-gold-btn-fg);
+  background: var(--ns-gold);
+  border: var(--ns-border-gold);
+  box-shadow: var(--ns-shadow-btn);
+}
+
+.ns-button--play:hover {
+  color: var(--ns-gold-btn-fg);
+  background: var(--ns-gold-pale);
+}
+
+.ns-button--ghost {
+  color: var(--ns-gold);
+  background: transparent;
+  border: 1px solid rgba(248, 248, 242, 0.55);
+  box-shadow: none;
+}
+
+.ns-button--ghost:hover {
+  color: var(--ns-gold-btn-fg);
+  background: var(--ns-gold);
+  border-color: var(--ns-gold);
+}
+
+.ns-button:active {
+  box-shadow: none;
+  transform: translateY(2px);
+}
+
+.ns-button:disabled,
+.ns-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ns-card {
+  background: var(--ns-glass);
+  border: var(--ns-border-card-strong);
+  border-radius: var(--ns-radius-lg);
+  box-shadow: var(--ns-shadow-card-rest);
+  backdrop-filter: var(--ns-blur-glass);
+  -webkit-backdrop-filter: var(--ns-blur-glass);
+  transition:
+    border-color var(--ns-transition-fast),
+    box-shadow var(--ns-transition-fast),
+    transform var(--ns-transition-fast);
+}
+
+.ns-card:hover {
+  border-color: rgba(230, 219, 116, 0.55);
+  box-shadow: var(--ns-shadow-card-hover);
+  transform: translateY(-4px);
+}
+
+.ns-icon-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ns-icon-slot);
+  height: var(--ns-icon-slot);
+  color: var(--ns-gold);
+  background: var(--ns-bg-2);
+  border-radius: var(--ns-radius-sm);
+  flex: 0 0 auto;
+}
+
+.ns-feature-card {
+  --ns-feature-accent: var(--ns-gold);
+  position: relative;
+  display: flex;
+  min-height: 13.25rem;
+  padding: var(--ns-fluid-card-pad);
+  flex-direction: column;
+  gap: var(--ns-space-4);
+  list-style: none;
+}
+
+.ns-feature-card__icon {
+  color: var(--ns-feature-accent);
+}
+
+.ns-feature-card__title {
+  margin: 0 0 var(--ns-space-2);
+  color: var(--ns-ink);
+  font-family: var(--ns-font-pixel);
+  font-size: var(--ns-pixel-base);
+  line-height: var(--ns-leading-normal);
+  text-wrap: balance;
+}
+
+.ns-feature-card__body {
+  margin: 0;
+  color: var(--ns-ink-dim);
+  font-size: var(--ns-text-sm);
+  line-height: var(--ns-leading-normal);
+  text-wrap: pretty;
+}
+
+.ns-tag,
+.ns-status-pill {
+  display: inline-block;
+  width: fit-content;
+  padding: var(--ns-space-1) 0.375rem;
+  border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-pixel);
+  font-size: var(--ns-pixel-xs);
+  line-height: var(--ns-leading-pixel);
+}
+
+.ns-tag {
+  color: var(--ns-feature-accent);
+  background: color-mix(in srgb, var(--ns-feature-accent) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ns-feature-accent) 26%, transparent);
+}
+
+.ns-feature-card__tag {
+  margin-top: auto;
+}
+
+.ns-quest-card {
+  --ns-quest-color: var(--ns-status-later);
+  --ns-quest-pill-bg: rgba(255, 255, 255, 0.05);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--ns-space-3);
+  padding: 0.875rem;
+  border: var(--ns-border-card);
+  border-left: 4px solid rgba(255, 255, 255, 0.18);
+  border-radius: 0.5625rem;
+  background: var(--ns-glass-soft);
+  backdrop-filter: var(--ns-blur-glass);
+  -webkit-backdrop-filter: var(--ns-blur-glass);
+  list-style: none;
+}
+
+.ns-quest-card--done {
+  --ns-quest-color: var(--ns-status-holds);
+  --ns-quest-pill-bg: rgba(166, 226, 46, 0.1);
+  border-left-color: var(--ns-status-holds);
+}
+
+.ns-quest-card--active {
+  --ns-quest-color: var(--ns-status-building);
+  --ns-quest-pill-bg: rgba(253, 151, 31, 0.12);
+  background: rgba(253, 151, 31, 0.06);
+  border-left-color: var(--ns-status-building);
+}
+
+.ns-quest-card--planned {
+  --ns-quest-color: var(--ns-status-planned);
+  --ns-quest-pill-bg: rgba(102, 217, 232, 0.12);
+  border-left-color: var(--ns-status-planned);
+}
+
+.ns-quest-card--locked {
+  opacity: 0.5;
+}
+
+.ns-quest-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ns-icon-slot-sm);
+  height: var(--ns-icon-slot-sm);
+  color: var(--ns-quest-color);
+  background: var(--ns-bg-2);
+  border-radius: var(--ns-radius-full);
+  font-family: var(--ns-font-pixel);
+  font-size: var(--ns-pixel-sm);
+  line-height: 1;
+}
+
+.ns-quest-card__body {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.ns-quest-card__title {
+  margin: 0 0 0.375rem;
+  color: var(--ns-ink);
+  font-family: var(--ns-font-pixel);
+  font-size: 9.5px;
+  line-height: var(--ns-leading-pixel);
+  text-wrap: balance;
+}
+
+.ns-quest-card__desc {
+  margin: 0 0 var(--ns-space-2);
+  color: var(--ns-ink-dim);
+  font-size: 0.8125rem;
+  line-height: var(--ns-leading-snug);
+}
+
+.ns-status-pill {
+  margin-top: auto;
+  color: var(--ns-quest-color);
+  background: var(--ns-quest-pill-bg);
+  font-size: var(--ns-pixel-2xs);
+}
+
+.ns-site-nav {
+  display: flex;
+  align-items: center;
+  height: var(--ns-header-h);
+  padding-inline: var(--ns-fluid-container);
+  background: var(--ns-glass);
+  border-bottom: 1px solid var(--ns-line);
+  backdrop-filter: var(--ns-blur-header);
+  -webkit-backdrop-filter: var(--ns-blur-header);
+}
+
+.ns-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-3);
+  color: var(--ns-ink);
+  text-decoration: none;
+}
+
+.ns-brand:hover {
+  color: var(--ns-ink);
+}
+
+.ns-brand img {
+  width: auto;
+  height: 2rem;
+}
+
+.ns-brand__text {
+  color: var(--ns-ink);
+  font-family: var(--ns-font-pixel);
+  font-size: var(--ns-pixel-lg);
+}
+
+.ns-brand__accent {
+  color: var(--ns-gold);
+}
+
+.ns-nav-links {
+  display: flex;
+  gap: var(--ns-space-8);
+  margin: 0 0 0 auto;
+  padding: 0;
+  list-style: none;
+}
+
+.ns-nav-links a {
+  display: inline-block;
+  padding-bottom: var(--ns-space-1);
+  border-bottom: 2px solid transparent;
+  color: var(--ns-ink);
+  font-size: var(--ns-text-sm);
+  font-weight: var(--ns-weight-medium);
+  transition:
+    color var(--ns-transition-fast),
+    border-color var(--ns-transition-fast);
+}
+
+.ns-nav-links a:hover,
+.ns-nav-links a[aria-current="page"],
+.ns-nav-links a.is-active {
+  color: var(--ns-gold);
+  border-bottom-color: var(--ns-gold);
+}
+
+.ns-section-arrow {
+  position: absolute;
+  left: 50%;
+  bottom: var(--ns-space-6);
+  display: grid;
+  width: var(--ns-arrow-size);
+  height: var(--ns-arrow-size);
+  place-items: center;
+  color: var(--ns-gold-btn-fg);
+  background: linear-gradient(180deg, var(--ns-gold-pale), var(--ns-gold));
+  border: 2px solid rgba(255, 255, 255, 0.72);
+  border-radius: var(--ns-radius-full);
+  box-shadow: var(--ns-shadow-arrow);
+  text-decoration: none;
+  transform: translateX(-50%);
+  animation: ns-arrow 2s var(--ns-ease-in-out) infinite;
+}
+
+.ns-section-arrow:hover {
+  color: var(--ns-gold-btn-fg);
+}
+
+.ns-section-arrow svg {
+  display: block;
+}
+
+@media (max-width: 430px) {
+  .ns-nav-links {
+    display: none;
+  }
+
+  .ns-button--md,
+  .ns-button--lg {
+    width: 100%;
+  }
+}

package/components/react/index.d.ts

@@ -0,0 +1,11 @@
+export { Button } from '../buttons/Button.js';
+export type { ButtonProps } from '../buttons/Button.js';
+
+export { FeatureCard } from '../cards/FeatureCard.js';
+export type { FeatureCardProps } from '../cards/FeatureCard.js';
+
+export { QuestCard } from '../cards/QuestCard.js';
+export type { QuestCardProps } from '../cards/QuestCard.js';
+
+export { SectionArrow } from '../navigation/SectionArrow.js';
+export type { SectionArrowProps } from '../navigation/SectionArrow.js';

package/components/react/index.js

@@ -0,0 +1,4 @@
+export { Button } from '../buttons/Button.js';
+export { FeatureCard } from '../cards/FeatureCard.js';
+export { QuestCard } from '../cards/QuestCard.js';
+export { SectionArrow } from '../navigation/SectionArrow.js';

package/components/shared/styles.js

@@ -0,0 +1,22 @@
+export const cx = (...parts) => parts.filter(Boolean).join(' ');
+
+export function mergeStyles(base, override) {
+  return override ? { ...base, ...override } : base;
+}
+
+export const NS = {
+  gold: 'var(--ns-gold)',
+  pink: 'var(--ns-pink)',
+  purple: 'var(--ns-purple)',
+  cyan: 'var(--ns-cyan)',
+  green: 'var(--ns-green)',
+  orange: 'var(--ns-orange)',
+  later: 'var(--ns-ink-faint)',
+};
+
+export const questStatus = {
+  done: { className: 'ns-quest-card--done', label: 'HOLDS', icon: '✓' },
+  active: { className: 'ns-quest-card--active', label: 'BUILDING', icon: '▶' },
+  planned: { className: 'ns-quest-card--planned', label: 'PLANNED', icon: '◌' },
+  locked: { className: 'ns-quest-card--locked', label: 'LATER', icon: '✦' },
+};

package/guidelines/brand.card.html

@@ -0,0 +1,41 @@
+<!-- @dsCard group="Brand" viewport="700x160" name="Logo & wordmark" subtitle="Logo usage and wordmark construction" -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { background: var(--ns-bg-1); padding: 24px 32px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
+  .unit { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
+  .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; }
+  .mark { display: flex; align-items: center; gap: 12px; }
+</style>
+</head>
+<body>
+  <div class="unit">
+    <div class="label">Default</div>
+    <div class="mark">
+      <img src="../assets/logo.png" style="height:40px;width:auto">
+      <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:16px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></span>
+    </div>
+  </div>
+  <div class="unit">
+    <div class="label">Header (32px)</div>
+    <div class="mark">
+      <img src="../assets/logo.png" style="height:32px;width:auto">
+      <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:13px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></span>
+    </div>
+  </div>
+  <div class="unit">
+    <div class="label">Icon only</div>
+    <img src="../assets/logo.png" style="height:56px;width:auto">
+  </div>
+  <div class="unit">
+    <div class="label">On dark glass</div>
+    <div class="mark" style="background:rgba(30,31,26,.88);padding:12px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.12)">
+      <img src="../assets/logo.png" style="height:28px;width:auto">
+      <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:11px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></span>
+    </div>
+  </div>
+</body>
+</html>

package/guidelines/colors.card.html

@@ -0,0 +1,43 @@
+<!-- @dsCard group="Colors" viewport="700x320" name="Palette" subtitle="Monokai foregrounds + dark backgrounds — two separate systems" -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { background: var(--ns-bg-1); padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; }
+  .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
+  .swatch { display: flex; flex-direction: column; gap: 6px; }
+  .chip { width: 56px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); }
+  .name { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #75715e; white-space: nowrap; }
+  .hex  { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #a8a28c; }
+  .group-label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; margin: 0 0 8px; }
+  .divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 4px 0; }
+</style>
+</head>
+<body>
+  <div>
+    <p class="group-label" style="color:#e6db74">Monokai foregrounds</p>
+    <div class="row">
+      <div class="swatch"><div class="chip" style="background:#f8f8f2"></div><div class="name">ink</div><div class="hex">#f8f8f2</div></div>
+      <div class="swatch"><div class="chip" style="background:#75715e"></div><div class="name">comment</div><div class="hex">#75715e</div></div>
+      <div class="swatch"><div class="chip" style="background:#e6db74"></div><div class="name">yellow</div><div class="hex">#e6db74</div></div>
+      <div class="swatch"><div class="chip" style="background:#a6e22e"></div><div class="name">green</div><div class="hex">#a6e22e</div></div>
+      <div class="swatch"><div class="chip" style="background:#fd971f"></div><div class="name">orange</div><div class="hex">#fd971f</div></div>
+      <div class="swatch"><div class="chip" style="background:#66d9e8"></div><div class="name">cyan</div><div class="hex">#66d9e8</div></div>
+      <div class="swatch"><div class="chip" style="background:#f92672"></div><div class="name">pink</div><div class="hex">#f92672</div></div>
+      <div class="swatch"><div class="chip" style="background:#ae81ff"></div><div class="name">purple</div><div class="hex">#ae81ff</div></div>
+    </div>
+  </div>
+  <hr class="divider">
+  <div>
+    <p class="group-label" style="color:#a8a28c">Dark backgrounds</p>
+    <div class="row">
+      <div class="swatch"><div class="chip" style="background:#1a1a16"></div><div class="name">bg-0</div><div class="hex">#1a1a16</div></div>
+      <div class="swatch"><div class="chip" style="background:#272822"></div><div class="name">bg-1</div><div class="hex">#272822</div></div>
+      <div class="swatch"><div class="chip" style="background:#32332b"></div><div class="name">bg-2</div><div class="hex">#32332b</div></div>
+      <div class="swatch"><div class="chip" style="background:rgba(30,31,26,.88);backdrop-filter:blur(8px)"></div><div class="name">glass</div><div class="hex">rgba 88%</div></div>
+    </div>
+  </div>
+</body>
+</html>

package/guidelines/motion.card.html

@@ -0,0 +1,24 @@
+<!-- @dsCard group="Spacing" viewport="700x140" name="Motion" subtitle="Keyframes and timing tokens for ns-* animations" -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { background: var(--ns-bg-1); padding: 24px 32px; display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
+  .unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
+  .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; }
+  .sub { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #49483e; }
+  .bob { animation: ns-bob-plain 3.6s ease-in-out infinite; image-rendering: pixelated; }
+  .blink { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 10px; color: #e6db74; animation: ns-blink 1.5s steps(1) infinite; }
+  .live { width: 10px; height: 10px; border-radius: 50%; background: #a6e22e; animation: ns-live 2.4s ease-in-out infinite; }
+  .twinkle { font-size: 18px; color: #f8f8f2; animation: ns-twinkle 5.5s ease-in-out infinite; }
+</style>
+</head>
+<body>
+  <div class="unit"><img class="bob" src="../assets/hero.png" style="height:72px"><div class="label">ns-bob</div><div class="sub">3.6s idle</div></div>
+  <div class="unit"><span class="blink">PRESS START</span><div class="label">ns-blink</div><div class="sub">1.5s steps(1)</div></div>
+  <div class="unit"><span class="live"></span><div class="label">ns-live</div><div class="sub">2.4s pulse</div></div>
+  <div class="unit"><span class="twinkle">✦</span><div class="label">ns-twinkle</div><div class="sub">5.5s fade</div></div>
+</body>
+</html>

package/guidelines/pixel-accents.card.html

@@ -0,0 +1,50 @@
+<!-- @dsCard group="Type" viewport="700x120" name="Pixel accents" subtitle="SVG symbols used as UI icons — never glyphs or emoji" -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { background: var(--ns-bg-1); padding: 1.5rem 2rem; }
+  .row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
+  .unit { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
+  .label { font-family: var(--ns-font-pixel); font-size: 7px; color: var(--ns-ink-faint); }
+</style>
+</head>
+<body>
+<div class="row">
+  <div class="unit">
+    <svg viewBox="0 0 10 10" width="22" height="22" fill="#e6db74"><polygon points="5,0.5 6.2,3.8 9.8,3.8 6.9,5.9 8,9.2 5,7.1 2,9.2 3.1,5.9 0.2,3.8 3.8,3.8"/></svg>
+    <span class="label">eyebrow</span>
+  </div>
+  <div class="unit">
+    <svg viewBox="0 0 10 10" width="22" height="22" fill="#e6db74"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>
+    <span class="label">play / CTA</span>
+  </div>
+  <div class="unit">
+    <svg viewBox="0 0 10 10" width="22" height="22" fill="#e6db74"><polygon points="5,0.5 6.2,3.8 9.8,3.8 6.9,5.9 8,9.2 5,7.1 2,9.2 3.1,5.9 0.2,3.8 3.8,3.8"/></svg>
+    <span class="label">star / github</span>
+  </div>
+  <div class="unit">
+    <svg viewBox="0 0 12 8" width="22" height="22" fill="none" stroke="#e6db74" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1,1.5 6,6.5 11,1.5"/></svg>
+    <span class="label">section nav</span>
+  </div>
+  <div class="unit">
+    <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:20px;color:#a6e22e">✓</span>
+    <span class="label">holds</span>
+  </div>
+  <div class="unit">
+    <svg viewBox="0 0 10 10" width="22" height="22" fill="#fd971f"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>
+    <span class="label">building</span>
+  </div>
+  <div class="unit">
+    <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:20px;color:#66d9e8">◌</span>
+    <span class="label">planned</span>
+  </div>
+  <div class="unit">
+    <svg viewBox="0 0 10 10" width="22" height="22" fill="#75715e"><polygon points="5,0.5 6.2,3.8 9.8,3.8 6.9,5.9 8,9.2 5,7.1 2,9.2 3.1,5.9 0.2,3.8 3.8,3.8"/></svg>
+    <span class="label">later</span>
+  </div>
+</div>
+</body>
+</html>

package/guidelines/radii-shadows.card.html

@@ -0,0 +1,28 @@
+<!-- @dsCard group="Spacing" viewport="700x160" name="Radii & Shadows" subtitle="Border radii and shadow system" -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { background: var(--ns-bg-1); padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
+  .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
+  .box { background: rgba(30,31,26,.88); border: 1px solid rgba(255,255,255,.22); width: 60px; height: 44px; display: flex; align-items: center; justify-content: center; }
+  .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; text-align: center; margin-top: 6px; }
+  .unit { display: flex; flex-direction: column; align-items: center; }
+  .shadow-box { width: 80px; height: 44px; background: rgba(30,31,26,.88); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #75715e; text-align: center; }
+</style>
+</head>
+<body>
+  <div class="row">
+    <div class="unit"><div class="box" style="border-radius:4px"></div><div class="label">sm · 4px</div></div>
+    <div class="unit"><div class="box" style="border-radius:8px"></div><div class="label">md · 8px</div></div>
+    <div class="unit"><div class="box" style="border-radius:10px"></div><div class="label">lg · 10px</div></div>
+    <div class="unit"><div class="box" style="border-radius:12px"></div><div class="label">xl · 12px</div></div>
+    <div class="unit"><div class="box" style="border-radius:9999px;width:80px"></div><div class="label">full</div></div>
+    <div class="unit"><div class="shadow-box" style="box-shadow:0 16px 34px rgba(0,0,0,.38)">card</div><div class="label">card hover</div></div>
+    <div class="unit"><div class="shadow-box" style="box-shadow:0 24px 56px rgba(0,0,0,.5)">modal</div><div class="label">modal</div></div>
+    <div class="unit"><div class="shadow-box" style="box-shadow:0 3px 0 #b5a83f;background:#e6db74;color:#1c1c17">btn</div><div class="label">btn press</div></div>
+  </div>
+</body>
+</html>

package/guidelines/semantic-colors.card.html

@@ -0,0 +1,30 @@
+<!-- @dsCard group="Colors" viewport="700x180" name="Semantic roles" subtitle="What each Monokai foreground color means" -->
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+  body { background: var(--ns-bg-1); padding: 24px 28px; }
+  table { border-collapse: collapse; width: 100%; }
+  th { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: var(--ns-ink-faint); text-align: left; padding: 0 12px 10px 0; font-weight: 400; }
+  td { font-size: 13px; color: var(--ns-ink-dim); padding: 5px 12px 5px 0; border-top: 1px solid rgba(255,255,255,.06); }
+  .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
+</style>
+</head>
+<body>
+<table>
+  <thead><tr><th>Color</th><th>Role</th><th>Used on</th></tr></thead>
+  <tbody>
+    <tr><td><span class="dot" style="background:#f8f8f2"></span>#f8f8f2</td><td>Primary text</td><td>Headings, body, labels</td></tr>
+    <tr><td><span class="dot" style="background:#75715e"></span>#75715e</td><td>Muted / comment</td><td>Captions, timestamps, placeholders</td></tr>
+    <tr><td><span class="dot" style="background:#e6db74"></span>#e6db74</td><td>Primary accent</td><td>Wordmark "Society", CTAs, eyebrows, active nav</td></tr>
+    <tr><td><span class="dot" style="background:#a6e22e"></span>#a6e22e</td><td>Holds / success / live</td><td>Quest "HOLDS", live dot, Gate ✓</td></tr>
+    <tr><td><span class="dot" style="background:#fd971f"></span>#fd971f</td><td>Building / in-progress</td><td>Quest "BUILDING", active quest border + bg</td></tr>
+    <tr><td><span class="dot" style="background:#66d9e8"></span>#66d9e8</td><td>Planned / info</td><td>Quest "PLANNED", feature icon (open)</td></tr>
+    <tr><td><span class="dot" style="background:#f92672"></span>#f92672</td><td>Highlight / accent</td><td>CTA panel border, feature icon (energy)</td></tr>
+    <tr><td><span class="dot" style="background:#ae81ff"></span>#ae81ff</td><td>Decorative / personal</td><td>Feature icon (sprite-forward / identity)</td></tr>
+  </tbody>
+</table>
+</body>
+</html>