@noobsociety/nsds 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CHANGELOG.md +24 -3
  2. package/README.md +347 -193
  3. package/dist/components/hud/HUDBar.d.ts +17 -0
  4. package/dist/components/hud/HUDDivider.d.ts +11 -0
  5. package/dist/components/hud/HUDLabel.d.ts +17 -0
  6. package/dist/components/icons/RPGIcon.d.ts +42 -0
  7. package/dist/index.cjs +1 -0
  8. package/dist/index.d.ts +18 -0
  9. package/dist/index.js +587 -0
  10. package/{styles.css → dist/styles.css} +1 -0
  11. package/dist/tailwind/package.json +1 -0
  12. package/dist/tailwind/preset.js +144 -0
  13. package/{tokens → dist/tokens}/colors.css +25 -19
  14. package/dist/tokens/hud.css +133 -0
  15. package/{tokens → dist/tokens}/motion.css +9 -9
  16. package/{tokens → dist/tokens}/spacing.css +9 -16
  17. package/{tokens → dist/tokens}/typography.css +2 -2
  18. package/package.json +34 -62
  19. package/SKILL.md +0 -18
  20. package/assets/bg.png +0 -0
  21. package/assets/bloop.png +0 -0
  22. package/assets/hero.png +0 -0
  23. package/assets/lamp.png +0 -0
  24. package/assets/logo.png +0 -0
  25. package/assets/mailbox.png +0 -0
  26. package/assets/plaza.png +0 -0
  27. package/assets/prickle.png +0 -0
  28. package/assets/sign.png +0 -0
  29. package/components/buttons/Button.js +0 -55
  30. package/components/buttons/Button.prompt.md +0 -22
  31. package/components/buttons/buttons.card.html +0 -24
  32. package/components/cards/FeatureCard.js +0 -36
  33. package/components/cards/FeatureCard.prompt.md +0 -17
  34. package/components/cards/QuestCard.js +0 -27
  35. package/components/cards/QuestCard.prompt.md +0 -19
  36. package/components/cards/cards.card.html +0 -54
  37. package/components/navigation/SectionArrow.js +0 -28
  38. package/components/navigation/navigation.card.html +0 -29
  39. package/components/react/index.d.ts +0 -11
  40. package/components/react/index.js +0 -4
  41. package/components/shared/styles.js +0 -22
  42. package/guidelines/brand.card.html +0 -41
  43. package/guidelines/colors.card.html +0 -43
  44. package/guidelines/motion.card.html +0 -24
  45. package/guidelines/pixel-accents.card.html +0 -50
  46. package/guidelines/radii-shadows.card.html +0 -28
  47. package/guidelines/semantic-colors.card.html +0 -30
  48. package/guidelines/spacing.card.html +0 -53
  49. package/guidelines/sprites.card.html +0 -22
  50. package/guidelines/type.card.html +0 -24
  51. package/index.d.ts +0 -1
  52. package/index.js +0 -1
  53. package/mui-theme/ThemeProvider.js +0 -14
  54. package/mui-theme/ThemeProvider.tsx +0 -20
  55. package/mui-theme/examples/FeatureCard.tsx +0 -52
  56. package/mui-theme/examples/QuestStatusChip.tsx +0 -41
  57. package/mui-theme/examples/SectionHeader.tsx +0 -44
  58. package/mui-theme/index.d.ts +0 -49
  59. package/mui-theme/index.js +0 -2
  60. package/mui-theme/index.ts +0 -2
  61. package/mui-theme/preview.dc.html +0 -195
  62. package/mui-theme/support.js +0 -1513
  63. package/mui-theme/theme.js +0 -594
  64. package/mui-theme/theme.ts +0 -604
  65. package/references/noobsociety-monokai.dc.html +0 -360
  66. package/support.js +0 -1513
  67. package/ui-kits/homepage/index.html +0 -319
  68. /package/{components → dist/components}/buttons/Button.d.ts +0 -0
  69. /package/{components → dist/components}/cards/FeatureCard.d.ts +0 -0
  70. /package/{components → dist/components}/cards/QuestCard.d.ts +0 -0
  71. /package/{components → dist/components}/navigation/SectionArrow.d.ts +0 -0
  72. /package/{components → dist/components}/primitives.css +0 -0
  73. /package/{tokens → dist/tokens}/base.css +0 -0
package/components/buttons/Button.js DELETED
@@ -1,55 +0,0 @@
1
- import React from 'react';
2
-
3
- import { cx } from '../shared/styles.js';
4
-
5
- const VALID_VARIANTS = new Set(['play', 'ghost']);
6
- const VALID_SIZES = new Set(['sm', 'md', 'lg']);
7
-
8
- export function Button({
9
- variant = 'play',
10
- size = 'md',
11
- href,
12
- onClick,
13
- children,
14
- disabled = false,
15
- className,
16
- type = 'button',
17
- ...props
18
- }) {
19
- const resolvedVariant = VALID_VARIANTS.has(variant) ? variant : 'play';
20
- const resolvedSize = VALID_SIZES.has(size) ? size : 'md';
21
- const classes = cx(
22
- 'ns-button',
23
- `ns-button--${resolvedVariant}`,
24
- `ns-button--${resolvedSize}`,
25
- className,
26
- );
27
- const commonProps = {
28
- ...props,
29
- className: classes,
30
- onClick: disabled ? undefined : onClick,
31
- };
32
-
33
- if (href) {
34
- return React.createElement(
35
- 'a',
36
- {
37
- ...commonProps,
38
- href: disabled ? undefined : href,
39
- 'aria-disabled': disabled || undefined,
40
- tabIndex: disabled ? -1 : props.tabIndex,
41
- },
42
- children,
43
- );
44
- }
45
-
46
- return React.createElement(
47
- 'button',
48
- {
49
- ...commonProps,
50
- type,
51
- disabled,
52
- },
53
- children,
54
- );
55
- }
package/components/buttons/Button.prompt.md DELETED
@@ -1,22 +0,0 @@
1
- Use `Button` for primary and secondary actions in NoobSociety interfaces.
2
-
3
- ```jsx
4
- <Button variant="play" href="https://noobsociety.com">▶ Enter the world</Button>
5
- <Button variant="ghost" href="https://github.com/noobsociety">★ Star on GitHub</Button>
6
- <Button variant="play" size="sm">▶ Play</Button>
7
- ```
8
-
9
- **Variants**
10
- - `play` — primary CTA. Gold fill, dark text, gold border, physical press shadow.
11
- - `ghost` — secondary CTA. Transparent surface, gold text, soft border, gold fill on hover.
12
-
13
- **Sizes**
14
- - `sm` — compact header actions
15
- - `md` — default actions
16
- - `lg` — hero and major CTA sections
17
-
18
- **Notes**
19
- - Always uses Press Start 2P — never Inter.
20
- - Pass `href` to render as `<a>`. Omit for `<button>`.
21
- - Import `styles.css` so the `ns-button` primitive classes are available.
22
- - Use a short pixel symbol prefix such as `▶` or `★` when it clarifies the action.
package/components/buttons/buttons.card.html DELETED
@@ -1,24 +0,0 @@
1
- <!-- @dsCard group="Components" viewport="700x200" name="Button" subtitle="Play (primary) and Ghost (secondary) — SVG icons, fluid padding" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
9
- .row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
10
- .label { font-family: var(--ns-font-pixel); font-size: 7px; color: var(--ns-ink-faint); min-width: 3.75rem; }
11
- </style>
12
- </head>
13
- <body>
14
- <div class="row">
15
- <span class="label">Play</span>
16
- <a class="ns-button ns-button--play ns-button--md" href="#"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor" aria-hidden="true"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>Enter the world</a>
17
- <a class="ns-button ns-button--play ns-button--sm" href="#"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor" aria-hidden="true"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>Play</a>
18
- </div>
19
- <div class="row">
20
- <span class="label">Ghost</span>
21
- <a class="ns-button ns-button--ghost ns-button--md" href="#"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor" aria-hidden="true"><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>Star on GitHub</a>
22
- </div>
23
- </body>
24
- </html>
package/components/cards/FeatureCard.js DELETED
@@ -1,36 +0,0 @@
1
- import React from 'react';
2
-
3
- import { NS, cx, mergeStyles } from '../shared/styles.js';
4
-
5
- export function FeatureCard({
6
- icon,
7
- title,
8
- body,
9
- tag,
10
- iconColor = NS.gold,
11
- className,
12
- style,
13
- ...props
14
- }) {
15
- return React.createElement('li', {
16
- ...props,
17
- className: cx('ns-card ns-feature-card', className),
18
- style: mergeStyles({ '--ns-feature-accent': iconColor }, style),
19
- },
20
- React.createElement('span', {
21
- className: 'ns-icon-slot ns-feature-card__icon',
22
- 'aria-hidden': true,
23
- }, icon),
24
- React.createElement('div', null,
25
- React.createElement('h3', {
26
- className: 'ns-feature-card__title',
27
- }, title),
28
- React.createElement('p', {
29
- className: 'ns-feature-card__body',
30
- }, body),
31
- ),
32
- tag && React.createElement('span', {
33
- className: 'ns-tag ns-feature-card__tag',
34
- }, tag),
35
- );
36
- }
package/components/cards/FeatureCard.prompt.md DELETED
@@ -1,17 +0,0 @@
1
- Use `FeatureCard` for short feature grids and value propositions. Render cards inside a `ul`.
2
-
3
- ```jsx
4
- <ul style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, listStyle:'none', margin:0, padding:0 }}>
5
- <FeatureCard icon={<CursorIcon/>} title="The site is a world" body="Pages are maps, links are interactables." tag="Spatial" />
6
- <FeatureCard icon={<BoltIcon/>} title="One typed bridge" body="A map object in Phaser fires the matching React overlay." tag="Live" iconColor="var(--ns-pink)" />
7
- <FeatureCard icon={<BubbleIcon/>} title="Sprite-forward" body="Clear silhouettes, readable at a glance." tag="Personal" iconColor="var(--ns-purple)" />
8
- <FeatureCard icon={<BookIcon/>} title="Built in the open" body="CI on every push. Cloudflare Pages deploy." tag="Open" iconColor="var(--ns-cyan)" />
9
- </ul>
10
- ```
11
-
12
- **Notes**
13
- - Keep titles short. Pixel headings lose clarity when they wrap too often.
14
- - `iconColor` should use a semantic Monokai token: gold by default, or pink, purple, or cyan when the meaning fits.
15
- - Import `styles.css` so the `ns-card`, `ns-feature-card`, and `ns-tag` classes are available.
16
- - Keep `tag` to one short word.
17
- - Hover: `translateY(-4px)` + gold border glow.
package/components/cards/QuestCard.js DELETED
@@ -1,27 +0,0 @@
1
- import React from 'react';
2
-
3
- import { cx, questStatus } from '../shared/styles.js';
4
-
5
- export function QuestCard({ gate, title, body, status = 'locked', className, ...props }) {
6
- const s = questStatus[status] || questStatus.locked;
7
- return React.createElement('li', {
8
- ...props,
9
- className: cx('ns-quest-card', s.className, className),
10
- },
11
- React.createElement('span', {
12
- className: 'ns-quest-card__icon',
13
- 'aria-hidden': true,
14
- }, s.icon),
15
- React.createElement('div', { className: 'ns-quest-card__body' },
16
- React.createElement('p', {
17
- className: 'ns-quest-card__title',
18
- }, `Gate ${gate} · ${title}`),
19
- React.createElement('p', {
20
- className: 'ns-quest-card__desc',
21
- }, body),
22
- React.createElement('span', {
23
- className: 'ns-status-pill',
24
- }, s.label),
25
- ),
26
- );
27
- }
package/components/cards/QuestCard.prompt.md DELETED
@@ -1,19 +0,0 @@
1
- Use `QuestCard` for roadmap gates, progress checkpoints, and locked future work. Render cards inside an `ol`.
2
-
3
- ```jsx
4
- <ol style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:11, listStyle:'none', margin:0, padding:0 }}>
5
- <QuestCard gate={1} title="Space" body="Walkable area exists." status="done" />
6
- <QuestCard gate={2} title="Movement" body="Movement feels right." status="done" />
7
- <QuestCard gate={3} title="Objects" body="In-space sections open content." status="active" />
8
- <QuestCard gate={6} title="Identity" body="Space and character read as one." status="planned" />
9
- <QuestCard gate={8} title="Combat" body="Unlocks after single-player loop." status="locked" />
10
- </ol>
11
- ```
12
-
13
- **Status mapping**
14
- - `done` → `HOLDS`, green `#a6e22e`
15
- - `active` → `BUILDING`, orange `#fd971f`
16
- - `planned` → `PLANNED`, cyan `#66d9e8`
17
- - `locked` → `LATER`, faint `#75715e`, reduced opacity
18
-
19
- Import `styles.css` so the `ns-quest-card` and `ns-status-pill` classes are available.
package/components/cards/cards.card.html DELETED
@@ -1,54 +0,0 @@
1
- <!-- @dsCard group="Components" viewport="700x380" name="Cards" subtitle="FeatureCard (semantic colors) and QuestCard (status system)" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
9
- .label { font-family: var(--ns-font-pixel); font-size: 7px; color: var(--ns-ink-faint); margin: 0 0 0.625rem; }
10
- .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.875rem; list-style: none; margin: 0; padding: 0; }
11
- .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.875rem; list-style: none; margin: 0; padding: 0; }
12
- </style>
13
- </head>
14
- <body>
15
- <p class="label">Feature cards — icon colors are Monokai semantic</p>
16
- <ul class="grid-4">
17
- <li class="ns-card ns-feature-card">
18
- <div class="ns-icon-slot ns-feature-card__icon"><svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true"><path d="M5 2.6 L5 18.6 L9.2 14.7 L12 20.8 L14.4 19.6 L11.6 13.7 L17.4 13.7 Z"/></svg></div>
19
- <div><p class="ns-feature-card__title">The site is a world</p><p class="ns-feature-card__body">Pages are maps, links are interactables.</p></div>
20
- <span class="ns-tag ns-feature-card__tag">Spatial</span>
21
- </li>
22
- <li class="ns-card ns-feature-card" style="--ns-feature-accent: var(--ns-pink)">
23
- <div class="ns-icon-slot ns-feature-card__icon"><svg viewBox="0 0 24 24" width="26" height="26" fill="currentColor" aria-hidden="true"><path d="M13 2.5 L5 13.6 H11 L10.2 21.5 L19 9.4 H12.4 Z"/></svg></div>
24
- <div><p class="ns-feature-card__title">One typed bridge</p><p class="ns-feature-card__body">Phaser fires the matching React overlay.</p></div>
25
- <span class="ns-tag ns-feature-card__tag">Live</span>
26
- </li>
27
- <li class="ns-card ns-feature-card" style="--ns-feature-accent: var(--ns-purple)">
28
- <div class="ns-icon-slot ns-feature-card__icon"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M12 3.5 C6.9 3.5 3 7.1 3 11.7 C3 15.1 5.5 17.2 8.3 17.2 C9.9 17.2 10.4 16 11.7 16 C12.8 16 13.1 17.3 14.7 17.3 C18 17.3 21 14.7 21 11.1 C21 6.8 17 3.5 12 3.5 Z" stroke-linejoin="round"/><circle cx="8" cy="9" r="1.1" fill="currentColor" stroke="none"/><circle cx="12" cy="7.4" r="1.1" fill="currentColor" stroke="none"/><circle cx="16" cy="9" r="1.1" fill="currentColor" stroke="none"/></svg></div>
29
- <div><p class="ns-feature-card__title">Sprite-forward</p><p class="ns-feature-card__body">Clear silhouettes, readable at a glance.</p></div>
30
- <span class="ns-tag ns-feature-card__tag">Personal</span>
31
- </li>
32
- <li class="ns-card ns-feature-card" style="--ns-feature-accent: var(--ns-cyan)">
33
- <div class="ns-icon-slot ns-feature-card__icon"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" aria-hidden="true"><path d="M12 6.5 C9.5 4.9 6 4.6 3.6 5.5 V18.7 C6 17.8 9.5 18.1 12 19.8 C14.5 18.1 18 17.8 20.4 18.7 V5.5 C18 4.6 14.5 4.9 12 6.5 Z"/><path d="M12 6.5 V19.8"/></svg></div>
34
- <div><p class="ns-feature-card__title">Built in the open</p><p class="ns-feature-card__body">CI on every push. Cloudflare Pages deploy.</p></div>
35
- <span class="ns-tag ns-feature-card__tag">Open</span>
36
- </li>
37
- </ul>
38
- <p class="label">Quest cards — status → Monokai color</p>
39
- <ul class="grid-3">
40
- <li class="ns-quest-card ns-quest-card--done">
41
- <span class="ns-quest-card__icon" aria-hidden="true">✓</span>
42
- <div class="ns-quest-card__body"><p class="ns-quest-card__title">Gate 1 · Space</p><p class="ns-quest-card__desc">Walkable area exists.</p><span class="ns-status-pill">HOLDS</span></div>
43
- </li>
44
- <li class="ns-quest-card ns-quest-card--active">
45
- <span class="ns-quest-card__icon" aria-hidden="true"><svg viewBox="0 0 10 10" width="8" height="8" fill="currentColor"><polygon points="1,0.5 9.5,5 1,9.5"/></svg></span>
46
- <div class="ns-quest-card__body"><p class="ns-quest-card__title">Gate 3 · Objects</p><p class="ns-quest-card__desc">In-space sections open content.</p><span class="ns-status-pill">BUILDING</span></div>
47
- </li>
48
- <li class="ns-quest-card ns-quest-card--planned">
49
- <span class="ns-quest-card__icon" aria-hidden="true">◌</span>
50
- <div class="ns-quest-card__body"><p class="ns-quest-card__title">Gate 6 · Identity</p><p class="ns-quest-card__desc">Space and character read as one.</p><span class="ns-status-pill">PLANNED</span></div>
51
- </li>
52
- </ul>
53
- </body>
54
- </html>
package/components/navigation/SectionArrow.js DELETED
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
-
3
- import { cx } from '../shared/styles.js';
4
-
5
- function ChevronDownIcon() {
6
- return React.createElement('svg', {
7
- viewBox: '0 0 12 8',
8
- width: 12,
9
- height: 12,
10
- 'aria-hidden': true,
11
- fill: 'none',
12
- stroke: 'currentColor',
13
- strokeWidth: 2,
14
- strokeLinecap: 'round',
15
- strokeLinejoin: 'round',
16
- },
17
- React.createElement('polyline', { points: '1,1.5 6,6.5 11,1.5' }),
18
- );
19
- }
20
-
21
- export function SectionArrow({ href, label, className, children, ...props }) {
22
- return React.createElement('a', {
23
- ...props,
24
- href,
25
- 'aria-label': label,
26
- className: cx('ns-section-arrow', className),
27
- }, children || React.createElement(ChevronDownIcon));
28
- }
package/components/navigation/navigation.card.html DELETED
@@ -1,29 +0,0 @@
1
- <!-- @dsCard group="Components" viewport="700x120" name="Navigation" subtitle="SiteNav header with scroll-spy + SVG section arrow" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 0; display: flex; flex-direction: column; }
9
- .arrow-demo { position:relative; height:3.5rem; background:rgba(30,31,26,.3); }
10
- .arrow-demo .ns-section-arrow { bottom:0.75rem; }
11
- .nav-play { margin-left:2rem; }
12
- </style>
13
- </head>
14
- <body>
15
- <nav class="ns-site-nav">
16
- <a class="ns-brand" href="#"><img src="../../assets/logo.png" alt=""><span class="ns-brand__text">Noob<b class="ns-brand__accent">Society</b></span></a>
17
- <ul class="ns-nav-links">
18
- <li><a href="#">Why</a></li>
19
- <li><a href="#" aria-current="page">World</a></li>
20
- <li><a href="#">Roadmap</a></li>
21
- <li><a href="#">Devblog</a></li>
22
- </ul>
23
- <a class="ns-button ns-button--play ns-button--sm nav-play" href="#"><svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor" aria-hidden="true"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>Play</a>
24
- </nav>
25
- <div class="arrow-demo">
26
- <a class="ns-section-arrow" href="#" aria-label="Go to next section"><svg viewBox="0 0 12 8" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1,1.5 6,6.5 11,1.5"/></svg></a>
27
- </div>
28
- </body>
29
- </html>
package/components/react/index.d.ts DELETED
@@ -1,11 +0,0 @@
1
- export { Button } from '../buttons/Button.js';
2
- export type { ButtonProps } from '../buttons/Button.js';
3
-
4
- export { FeatureCard } from '../cards/FeatureCard.js';
5
- export type { FeatureCardProps } from '../cards/FeatureCard.js';
6
-
7
- export { QuestCard } from '../cards/QuestCard.js';
8
- export type { QuestCardProps } from '../cards/QuestCard.js';
9
-
10
- export { SectionArrow } from '../navigation/SectionArrow.js';
11
- export type { SectionArrowProps } from '../navigation/SectionArrow.js';
package/components/react/index.js DELETED
@@ -1,4 +0,0 @@
1
- export { Button } from '../buttons/Button.js';
2
- export { FeatureCard } from '../cards/FeatureCard.js';
3
- export { QuestCard } from '../cards/QuestCard.js';
4
- export { SectionArrow } from '../navigation/SectionArrow.js';
package/components/shared/styles.js DELETED
@@ -1,22 +0,0 @@
1
- export const cx = (...parts) => parts.filter(Boolean).join(' ');
2
-
3
- export function mergeStyles(base, override) {
4
- return override ? { ...base, ...override } : base;
5
- }
6
-
7
- export const NS = {
8
- gold: 'var(--ns-gold)',
9
- pink: 'var(--ns-pink)',
10
- purple: 'var(--ns-purple)',
11
- cyan: 'var(--ns-cyan)',
12
- green: 'var(--ns-green)',
13
- orange: 'var(--ns-orange)',
14
- later: 'var(--ns-ink-faint)',
15
- };
16
-
17
- export const questStatus = {
18
- done: { className: 'ns-quest-card--done', label: 'HOLDS', icon: '✓' },
19
- active: { className: 'ns-quest-card--active', label: 'BUILDING', icon: '▶' },
20
- planned: { className: 'ns-quest-card--planned', label: 'PLANNED', icon: '◌' },
21
- locked: { className: 'ns-quest-card--locked', label: 'LATER', icon: '✦' },
22
- };
package/guidelines/brand.card.html DELETED
@@ -1,41 +0,0 @@
1
- <!-- @dsCard group="Brand" viewport="700x160" name="Logo & wordmark" subtitle="Logo usage and wordmark construction" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 32px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
9
- .unit { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
10
- .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; }
11
- .mark { display: flex; align-items: center; gap: 12px; }
12
- </style>
13
- </head>
14
- <body>
15
- <div class="unit">
16
- <div class="label">Default</div>
17
- <div class="mark">
18
- <img src="../assets/logo.png" style="height:40px;width:auto">
19
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:16px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></span>
20
- </div>
21
- </div>
22
- <div class="unit">
23
- <div class="label">Header (32px)</div>
24
- <div class="mark">
25
- <img src="../assets/logo.png" style="height:32px;width:auto">
26
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:13px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></span>
27
- </div>
28
- </div>
29
- <div class="unit">
30
- <div class="label">Icon only</div>
31
- <img src="../assets/logo.png" style="height:56px;width:auto">
32
- </div>
33
- <div class="unit">
34
- <div class="label">On dark glass</div>
35
- <div class="mark" style="background:rgba(30,31,26,.88);padding:12px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.12)">
36
- <img src="../assets/logo.png" style="height:28px;width:auto">
37
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:11px;color:#f8f8f2">Noob<b style="color:#e6db74">Society</b></span>
38
- </div>
39
- </div>
40
- </body>
41
- </html>
package/guidelines/colors.card.html DELETED
@@ -1,43 +0,0 @@
1
- <!-- @dsCard group="Colors" viewport="700x320" name="Palette" subtitle="Monokai foregrounds + dark backgrounds — two separate systems" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 28px; display: flex; flex-direction: column; gap: 22px; }
9
- .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
10
- .swatch { display: flex; flex-direction: column; gap: 6px; }
11
- .chip { width: 56px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); }
12
- .name { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #75715e; white-space: nowrap; }
13
- .hex { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #a8a28c; }
14
- .group-label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; margin: 0 0 8px; }
15
- .divider { border: none; border-top: 1px solid rgba(255,255,255,.08); margin: 4px 0; }
16
- </style>
17
- </head>
18
- <body>
19
- <div>
20
- <p class="group-label" style="color:#e6db74">Monokai foregrounds</p>
21
- <div class="row">
22
- <div class="swatch"><div class="chip" style="background:#f8f8f2"></div><div class="name">ink</div><div class="hex">#f8f8f2</div></div>
23
- <div class="swatch"><div class="chip" style="background:#75715e"></div><div class="name">comment</div><div class="hex">#75715e</div></div>
24
- <div class="swatch"><div class="chip" style="background:#e6db74"></div><div class="name">yellow</div><div class="hex">#e6db74</div></div>
25
- <div class="swatch"><div class="chip" style="background:#a6e22e"></div><div class="name">green</div><div class="hex">#a6e22e</div></div>
26
- <div class="swatch"><div class="chip" style="background:#fd971f"></div><div class="name">orange</div><div class="hex">#fd971f</div></div>
27
- <div class="swatch"><div class="chip" style="background:#66d9e8"></div><div class="name">cyan</div><div class="hex">#66d9e8</div></div>
28
- <div class="swatch"><div class="chip" style="background:#f92672"></div><div class="name">pink</div><div class="hex">#f92672</div></div>
29
- <div class="swatch"><div class="chip" style="background:#ae81ff"></div><div class="name">purple</div><div class="hex">#ae81ff</div></div>
30
- </div>
31
- </div>
32
- <hr class="divider">
33
- <div>
34
- <p class="group-label" style="color:#a8a28c">Dark backgrounds</p>
35
- <div class="row">
36
- <div class="swatch"><div class="chip" style="background:#1a1a16"></div><div class="name">bg-0</div><div class="hex">#1a1a16</div></div>
37
- <div class="swatch"><div class="chip" style="background:#272822"></div><div class="name">bg-1</div><div class="hex">#272822</div></div>
38
- <div class="swatch"><div class="chip" style="background:#32332b"></div><div class="name">bg-2</div><div class="hex">#32332b</div></div>
39
- <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>
40
- </div>
41
- </div>
42
- </body>
43
- </html>
package/guidelines/motion.card.html DELETED
@@ -1,24 +0,0 @@
1
- <!-- @dsCard group="Spacing" viewport="700x140" name="Motion" subtitle="Keyframes and timing tokens for ns-* animations" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 32px; display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
9
- .unit { display: flex; flex-direction: column; align-items: center; gap: 10px; }
10
- .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; }
11
- .sub { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 6px; color: #49483e; }
12
- .bob { animation: ns-bob-plain 3.6s ease-in-out infinite; image-rendering: pixelated; }
13
- .blink { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 10px; color: #e6db74; animation: ns-blink 1.5s steps(1) infinite; }
14
- .live { width: 10px; height: 10px; border-radius: 50%; background: #a6e22e; animation: ns-live 2.4s ease-in-out infinite; }
15
- .twinkle { font-size: 18px; color: #f8f8f2; animation: ns-twinkle 5.5s ease-in-out infinite; }
16
- </style>
17
- </head>
18
- <body>
19
- <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>
20
- <div class="unit"><span class="blink">PRESS START</span><div class="label">ns-blink</div><div class="sub">1.5s steps(1)</div></div>
21
- <div class="unit"><span class="live"></span><div class="label">ns-live</div><div class="sub">2.4s pulse</div></div>
22
- <div class="unit"><span class="twinkle">✦</span><div class="label">ns-twinkle</div><div class="sub">5.5s fade</div></div>
23
- </body>
24
- </html>
package/guidelines/pixel-accents.card.html DELETED
@@ -1,50 +0,0 @@
1
- <!-- @dsCard group="Type" viewport="700x120" name="Pixel accents" subtitle="SVG symbols used as UI icons — never glyphs or emoji" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 1.5rem 2rem; }
9
- .row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
10
- .unit { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
11
- .label { font-family: var(--ns-font-pixel); font-size: 7px; color: var(--ns-ink-faint); }
12
- </style>
13
- </head>
14
- <body>
15
- <div class="row">
16
- <div class="unit">
17
- <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>
18
- <span class="label">eyebrow</span>
19
- </div>
20
- <div class="unit">
21
- <svg viewBox="0 0 10 10" width="22" height="22" fill="#e6db74"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>
22
- <span class="label">play / CTA</span>
23
- </div>
24
- <div class="unit">
25
- <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>
26
- <span class="label">star / github</span>
27
- </div>
28
- <div class="unit">
29
- <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>
30
- <span class="label">section nav</span>
31
- </div>
32
- <div class="unit">
33
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:20px;color:#a6e22e">✓</span>
34
- <span class="label">holds</span>
35
- </div>
36
- <div class="unit">
37
- <svg viewBox="0 0 10 10" width="22" height="22" fill="#fd971f"><polygon points="1,0.5 9.5,5 1,9.5"/></svg>
38
- <span class="label">building</span>
39
- </div>
40
- <div class="unit">
41
- <span style="font-family:'Press Start 2P',system-ui,sans-serif;font-size:20px;color:#66d9e8">◌</span>
42
- <span class="label">planned</span>
43
- </div>
44
- <div class="unit">
45
- <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>
46
- <span class="label">later</span>
47
- </div>
48
- </div>
49
- </body>
50
- </html>
package/guidelines/radii-shadows.card.html DELETED
@@ -1,28 +0,0 @@
1
- <!-- @dsCard group="Spacing" viewport="700x160" name="Radii & Shadows" subtitle="Border radii and shadow system" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
9
- .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
10
- .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; }
11
- .label { font-family: 'Press Start 2P', system-ui, sans-serif; font-size: 7px; color: #75715e; text-align: center; margin-top: 6px; }
12
- .unit { display: flex; flex-direction: column; align-items: center; }
13
- .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; }
14
- </style>
15
- </head>
16
- <body>
17
- <div class="row">
18
- <div class="unit"><div class="box" style="border-radius:4px"></div><div class="label">sm · 4px</div></div>
19
- <div class="unit"><div class="box" style="border-radius:8px"></div><div class="label">md · 8px</div></div>
20
- <div class="unit"><div class="box" style="border-radius:10px"></div><div class="label">lg · 10px</div></div>
21
- <div class="unit"><div class="box" style="border-radius:12px"></div><div class="label">xl · 12px</div></div>
22
- <div class="unit"><div class="box" style="border-radius:9999px;width:80px"></div><div class="label">full</div></div>
23
- <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>
24
- <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>
25
- <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>
26
- </div>
27
- </body>
28
- </html>
package/guidelines/semantic-colors.card.html DELETED
@@ -1,30 +0,0 @@
1
- <!-- @dsCard group="Colors" viewport="700x180" name="Semantic roles" subtitle="What each Monokai foreground color means" -->
2
- <!DOCTYPE html>
3
- <html>
4
- <head>
5
- <meta charset="utf-8">
6
- <link rel="stylesheet" href="../styles.css">
7
- <style>
8
- body { background: var(--ns-bg-1); padding: 24px 28px; }
9
- table { border-collapse: collapse; width: 100%; }
10
- 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; }
11
- td { font-size: 13px; color: var(--ns-ink-dim); padding: 5px 12px 5px 0; border-top: 1px solid rgba(255,255,255,.06); }
12
- .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
13
- </style>
14
- </head>
15
- <body>
16
- <table>
17
- <thead><tr><th>Color</th><th>Role</th><th>Used on</th></tr></thead>
18
- <tbody>
19
- <tr><td><span class="dot" style="background:#f8f8f2"></span>#f8f8f2</td><td>Primary text</td><td>Headings, body, labels</td></tr>
20
- <tr><td><span class="dot" style="background:#75715e"></span>#75715e</td><td>Muted / comment</td><td>Captions, timestamps, placeholders</td></tr>
21
- <tr><td><span class="dot" style="background:#e6db74"></span>#e6db74</td><td>Primary accent</td><td>Wordmark "Society", CTAs, eyebrows, active nav</td></tr>
22
- <tr><td><span class="dot" style="background:#a6e22e"></span>#a6e22e</td><td>Holds / success / live</td><td>Quest "HOLDS", live dot, Gate ✓</td></tr>
23
- <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>
24
- <tr><td><span class="dot" style="background:#66d9e8"></span>#66d9e8</td><td>Planned / info</td><td>Quest "PLANNED", feature icon (open)</td></tr>
25
- <tr><td><span class="dot" style="background:#f92672"></span>#f92672</td><td>Highlight / accent</td><td>CTA panel border, feature icon (energy)</td></tr>
26
- <tr><td><span class="dot" style="background:#ae81ff"></span>#ae81ff</td><td>Decorative / personal</td><td>Feature icon (sprite-forward / identity)</td></tr>
27
- </tbody>
28
- </table>
29
- </body>
30
- </html>