Drop the source-project origin story; state design rules as this system's own
Removed the whole 'synthesized from three real personal projects' narrative device rather than just anonymizing it — the 'Synthesized, not specified' section and its three-card grid on rationale.md, the 'Where it came from' section and 'Source projects' stat on index.md, and every 'the source says/claims/documents/computes' framing throughout the foundation pages, install.md, and two components. The substance (why the palette is warm neutral, why there's one accent, why hairline borders do the elevation work) is unchanged — it's just stated as this system's own design, not inherited from unnamed elsewhere. Also caught two type="button" occurrences in index.md's own example that an earlier pass missed (it only swept _components/_patterns/_includes, not top-level content files).
diff --git a/README.md b/README.md
index be46576..e68badc 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,8 @@
# Arbitrary Definitions
-A personal design system for self-hosted, single-user tools — synthesized by
-reading three real, running personal projects, not written from a spec.
-Sixteen components and five foundations, documented by a small Ruby/ERB site
-(no Jekyll) with hand-maintained CSS and hand-written content.
+A personal design system for self-hosted, single-user tools. Sixteen
+components and five foundations, documented by a small Ruby/ERB site (no
+Jekyll) with hand-maintained CSS and hand-written content.
**Site:** https://kejadlen.github.io/arbitrary-definitions-design-system/
@@ -17,10 +16,8 @@ because it is correct. What makes it a *system* is not that the choices are
correct but that they are written down once, given names, actually used, and
therefore changeable.
-It was synthesized, not specified — built by reading three real personal
-projects and finding what they actually share. See
-[Rationale](https://kejadlen.github.io/arbitrary-definitions-design-system/rationale/)
-for the full story.
+See [Rationale](https://kejadlen.github.io/arbitrary-definitions-design-system/rationale/)
+for the four rules this system's build actually enforces.
This is a small, personal project, so it is built as plainly as it can be:
diff --git a/_components/badge.md b/_components/badge.md
index a06dadd..2502779 100644
--- a/_components/badge.md
+++ b/_components/badge.md
@@ -55,8 +55,8 @@ modifier class.
- **A badge is never interactive.** No click handlers, no `<button>`, no cursor
change. If it does something, it is a button that happens to be small.
- **Two or three words at most.** A badge that wraps is a sentence in the wrong clothes.
-- **`danger` means something needs attention, not that something failed.** The
- source uses it for overdue, not for a system error — that is what prose is for.
+- **`danger` means something needs attention, not that something failed.**
+ Use it for overdue, not for a system error — that is what prose is for.
## API
diff --git a/_foundations/color.md b/_foundations/color.md
index 8a07509..5c6e35b 100644
--- a/_foundations/color.md
+++ b/_foundations/color.md
@@ -20,23 +20,20 @@ at different values — which is exactly what the dark block does.
<div class="ad-callout">
<p style="margin:0; font-size: var(--ad-step--1);">
- The neutral ramps were authored in <code>oklch()</code> by the three
- projects this system was synthesized from (see
- <a href="<%= relative_url('/rationale/') %>">Rationale</a>). Every
- value below is that same color converted to flat sRGB hex — not
- re-picked, not rounded. The contrast figures on this page are computed
- from those hex values with the standard WCAG 2.1 relative-luminance
+ The neutral ramps were authored in <code>oklch()</code>. Every value
+ below is that same color converted to flat sRGB hex — not re-picked,
+ not rounded. The contrast figures on this page are computed from those
+ hex values with the standard WCAG 2.1 relative-luminance
formula, then transcribed here as fact rather than typed by eye.
</p>
</div>
## Neutral
-Low-chroma warm-gray — the intersection of several source apps' plain grays,
-warm cream/dark palettes, and warm paper surfaces. Ten steps, not twelve or
-sixteen: the source defines exactly these.
+Low-chroma warm-gray, never stark white or black. Ten steps, not twelve or
+sixteen — the palette defines exactly these.
-<p class="ad-muted">Low-chroma warm-gray — the intersection of several source apps' plain grays, warm cream/dark palettes, and warm paper surfaces. Not stark white or black, and not any one project's specific warmth. Ten steps, not twelve: the source defines exactly 0/50/100/150/200/300/500/600/800/900 — steps 400 and 700 do not exist.</p>
+<p class="ad-muted">Low-chroma warm-gray. Not stark white or black. Ten steps, not twelve: exactly 0/50/100/150/200/300/500/600/800/900 — steps 400 and 700 do not exist.</p>
<ul class="ad-swatch-grid">
<li class="ad-swatch">
<div class="ad-swatch__chip" style="background: #faf9f7; color: #171512;">n-0</div>
@@ -110,7 +107,7 @@ sixteen: the source defines exactly these.
</li>
</ul>
-<p class="ad-muted">The same low-chroma warm-gray scale, inverted, matching one source app's OS-preference dark palette. Same ten step numbers as `neutral`; `0` is the darkest step here (the dark-theme page background) rather than the lightest.</p>
+<p class="ad-muted">The same low-chroma warm-gray scale, inverted for dark mode. Same ten step numbers as `neutral`; `0` is the darkest step here (the dark-theme page background) rather than the lightest.</p>
<ul class="ad-swatch-grid">
<li class="ad-swatch">
<div class="ad-swatch__chip" style="background: #0e0d0b; color: #ffffff;">nd-0</div>
@@ -198,7 +195,7 @@ the default; the other four are the sanctioned menu a project can switch to.
<li>
<div class="ad-accent-demo" style="background: #9a5a3c;">clay</div>
<div class="ad-specimen__meta"><code>#9a5a3c</code><span>5.38:1 on white</span></div>
- <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Warm, archival — one source app's flavor.</p>
+ <p class="ad-muted" style="font-size: var(--ad-step--2); margin: var(--ad-space-3xs) 0 0;">Warm, archival.</p>
</li>
<li>
<div class="ad-accent-demo" style="background: #2b4a78;">ink-blue</div>
@@ -413,7 +410,7 @@ the right half is the dark one.
### Accent
-<p class="ad-muted">One swappable accent per project, held constant across a whole view. `-ink` and `-soft` re-derive from `--ad-color-accent` via `color-mix()` exactly as the source computes them, so retheming the accent retones both automatically.</p>
+<p class="ad-muted">One swappable accent per project, held constant across a whole view. `-ink` and `-soft` re-derive from `--ad-color-accent` via `color-mix()`, so retheming the accent retones both automatically.</p>
<table>
<thead>
@@ -630,16 +627,16 @@ and checked by hand rather than by a build-time test.
Two things this contract deliberately does not assert.
<strong>Text tertiary</strong> — <code>--ad-color-text-tertiary</code>
(neutral.500) is roughly 3.46:1 against the page in light mode, under the
- 4.5:1 floor. The source documents that step as muted-faint text —
- placeholders and de-emphasized metadata, never body copy — so this is a
- real, intentional property of the palette, not a bug to patch by
- darkening the step.
+ 4.5:1 floor. That step is documented as muted-faint text — placeholders
+ and de-emphasized metadata, never body copy — so this is a real,
+ intentional property of the palette, not a bug to patch by darkening the
+ step.
<strong>Borders</strong> — <code>--ad-color-border-hairline</code> and
<code>--ad-color-border-default</code> sit well under the 3:1 that WCAG
- 1.4.11 asks of a meaningful boundary. The source's own words are
- "hairline (1px) borders and dividers do most of the elevation work" —
- borders here are deliberately quiet, and the source never claims a 3:1
- bar for them, so this contract does not invent one.
+ 1.4.11 asks of a meaningful boundary. Hairline (1px) borders and dividers
+ do most of the elevation work here — borders are deliberately quiet, and
+ this system never claims a 3:1 bar for them, so this contract does not
+ invent one.
</p>
</div>
diff --git a/_foundations/elevation.md b/_foundations/elevation.md
index ef35bda..d64904e 100644
--- a/_foundations/elevation.md
+++ b/_foundations/elevation.md
@@ -7,8 +7,8 @@ summary: >-
## Borders do the work
-The source's own rule: "hairline (1px) borders and dividers do most of the
-elevation work". A flat, bordered [Card](<%= relative_url('/components/card/') %>)
+This system's own rule: hairline (1px) borders and dividers do most of the
+elevation work. A flat, bordered [Card](<%= relative_url('/components/card/') %>)
is the default everywhere. Shadow is the exception, not the baseline.
## The two levels
diff --git a/_foundations/space.md b/_foundations/space.md
index b27bb3c..24eba63 100644
--- a/_foundations/space.md
+++ b/_foundations/space.md
@@ -115,8 +115,7 @@ summary: >-
## Radius
4/6/10px — small and quiet, kept modest so it reads as a neutral default
-rather than any one source project's specific softness. Nothing pill-shaped
-except true pills.
+rather than a decorative flourish. Nothing pill-shaped except true pills.
<ul class="ad-radius-grid">
<li>
diff --git a/_foundations/typography.md b/_foundations/typography.md
index 90551cd..2ad8254 100644
--- a/_foundations/typography.md
+++ b/_foundations/typography.md
@@ -134,9 +134,9 @@ breakpoint in between.
## The eight compound styles
-Real, specific numbers from the source — not a generic ramp compressed to
-fit. Each class sets family, size, weight, line-height, and (where the
-source specifies one) letter-spacing in a single declaration.
+Real, specific numbers — not a generic ramp compressed to fit. Each class
+sets family, size, weight, line-height, and (where one applies)
+letter-spacing in a single declaration.
<table>
<thead><tr><th scope="col">Class</th><th scope="col">Weight</th><th scope="col">Size</th><th scope="col">Line-height</th><th scope="col">Tracking</th><th scope="col">Use for</th></tr></thead>
@@ -237,7 +237,8 @@ source specifies one) letter-spacing in a single declaration.
- **Three families, and no fourth.** A new typeface needs a reason a weight
or a size cannot supply.
- **Mono is not decoration.** Every label, meta value, ID, date, and code
- sample is mono — it is the one thread present in all three source projects.
+ sample is mono, consistently — not reserved for where code happens to
+ appear.
- **`type-label` is always uppercase, mono, and tracked.** It is the one
place uppercase belongs in this system.
- **Never set a size in `px`.** The eight steps are fluid on purpose.
diff --git a/_patterns/archive.md b/_patterns/archive.md
index 656ef69..db5d2d6 100644
--- a/_patterns/archive.md
+++ b/_patterns/archive.md
@@ -3,7 +3,7 @@ title: "Archive — capture app"
summary: >-
A capture/document mobile app. Card list, bottom capture dock, photo slots
with the diagonal-grain empty state. A generic demonstration of the system,
- not a recreation of any one source project's actual screens.
+ not a recreation of any real product's actual screens.
---
Archive is not a real product — it is the system's own reference layout for a
diff --git a/_patterns/loop.md b/_patterns/loop.md
index 24f8f7e..fac98fa 100644
--- a/_patterns/loop.md
+++ b/_patterns/loop.md
@@ -3,7 +3,7 @@ title: "Loop — task dashboard"
summary: >-
A recurring-task web dashboard. Dense rows, mono meta columns, overdue in
danger red, one primary action. A generic demonstration of the system, not
- a recreation of any one source project's actual screens.
+ a recreation of any real product's actual screens.
---
Loop is not a real product — it is the system's own reference layout for a
diff --git a/index.md b/index.md
index 547a918..8eb420a 100644
--- a/index.md
+++ b/index.md
@@ -2,19 +2,19 @@
layout: default
title: Overview
description: >-
- A personal design system for self-hosted, single-user tools — synthesized
- from three real running projects and rendered by a small Ruby/ERB
- static-site generator on Ruby 4.0.
+ A personal design system for self-hosted, single-user tools, rendered by
+ a small Ruby/ERB static-site generator on Ruby 4.0.
---
<div class="ad-hero">
<p class="ad-overline">Design system</p>
<h1 class="ad-hero__title">A personal umbrella for side projects, given a shared visual spine.</h1>
<p class="ad-lead">
- Arbitrary Definitions is not a company's design system — it is one person's,
- synthesized by reading three real, running personal projects rather than
- written from a spec. Each project keeps its own accent color and
- typographic mood; this system is what they all share underneath.
+ Arbitrary Definitions is not a company's design system — it is one
+ person's. Nothing in it is derived from a brief; every value was chosen
+ once, named, and kept consistent since. Any project under this umbrella
+ keeps its own accent color and typographic mood; this system is what
+ they all share underneath.
</p>
<div class="ad-hero__actions">
<a class="btn" data-variant="primary" data-size="lg" href="<%= relative_url('/foundations/color/') %>">Start with color</a>
@@ -35,23 +35,8 @@ description: >-
<span class="ad-stat__value">16</span>
<span class="ad-stat__label">Components</span>
</div>
- <div class="ad-stat">
- <span class="ad-stat__value">3</span>
- <span class="ad-stat__label">Source projects</span>
- </div>
</div>
-## Where it came from
-
-Synthesized by reading three real personal projects, not copied from any one
-of them: one leaned on warm paper surfaces, a swappable accent, and a
-capture dock; one was all-mono with plain grays and a flash-bar toast; one
-paired a humanist sans with a full dark palette and underline tabs. The one
-literal constant across all three is an identical Utopia fluid type/space
-scale — adopted verbatim as this system's spine. Everything else is a
-synthesized middle ground. See [Rationale](<%= relative_url('/rationale/') %>)
-for the full story, including where this system knowingly guesses.
-
## How it is put together
`assets/css/tokens.css` is one hand-maintained, hand-readable file of CSS
@@ -113,8 +98,8 @@ same afternoon.
</p>
</div>
<div class="card-footer">
- <button type="button" data-variant="primary" data-size="sm">Approve</button>
- <button type="button" data-variant="ghost" data-size="sm">Dismiss</button>
+ <button data-variant="primary" data-size="sm">Approve</button>
+ <button data-variant="ghost" data-size="sm">Dismiss</button>
</div>
</article>
</div>
@@ -133,8 +118,8 @@ same afternoon.
</p>
</div>
<div class="card-footer">
- <button type="button" data-variant="primary" data-size="sm">Approve</button>
- <button type="button" data-variant="ghost" data-size="sm">Dismiss</button>
+ <button data-variant="primary" data-size="sm">Approve</button>
+ <button data-variant="ghost" data-size="sm">Dismiss</button>
</div>
</article></code></pre>
</details>
diff --git a/install.md b/install.md
index 290a1ce..a7798f8 100644
--- a/install.md
+++ b/install.md
@@ -38,12 +38,10 @@ production widgets.
## Dark theme
-The source's own convention is an opt-in `.theme-dark` class, applied
-explicitly rather than inherited from the OS. This site instead keeps this
-repository's own mechanism — a `data-theme="dark"` attribute plus
-`prefers-color-scheme` — because the toggle UI on every page already depends
-on it and the two are functionally equivalent: both repoint the same
-semantic aliases at the inverted neutral ramp.
+Dark mode is opt-in via a `data-theme="dark"` attribute plus
+`prefers-color-scheme`, applied explicitly rather than inherited silently
+from the OS — the toggle UI on every page depends on this exact mechanism.
+Both repoint the same semantic aliases at the inverted neutral ramp.
```css
:root { --ad-color-surface-page: #faf9f7; }
diff --git a/rationale.md b/rationale.md
index 7b2140e..8162af1 100644
--- a/rationale.md
+++ b/rationale.md
@@ -3,8 +3,8 @@ title: Rationale
permalink: /rationale/
section: Start here
summary: >-
- Why this system was synthesized from real projects instead of written
- from a spec, and the contract its build actually enforces.
+ The four rules this system's build actually enforces, and the one thing
+ about it that is not arbitrary.
---
## Where the name comes from
@@ -18,39 +18,6 @@ number is correct. What makes it a *system* is not that the choices are
correct but that they were written down once, given names, actually used, and
are therefore changeable.
-## Synthesized, not specified
-
-This system was not designed from a blank page. It was built by reading
-several real, running personal projects and finding what they actually
-share — not copied wholesale from any single one of them:
-
-<div class="card-grid">
- <article class="card">
- <div class="card-body">
- <h3 style="margin:0; font: 600 var(--ad-step-0)/1.3 var(--ad-font-sans);">Warm, paper-like surfaces</h3>
- <p style="margin:0; color: var(--ad-color-text-secondary); font-size: var(--ad-step--1);">One app leaned on Georgia/Helvetica/mono, a swappable "Clay" accent, and a bottom capture dock — the source of this system's warm-neutral surface color.</p>
- </div>
- </article>
- <article class="card">
- <div class="card-body">
- <h3 style="margin:0; font: 600 var(--ad-step-0)/1.3 var(--ad-font-sans);">All-mono, plain grays</h3>
- <p style="margin:0; color: var(--ad-color-text-secondary); font-size: var(--ad-step--1);">Another was an all-mono interface with plain grays, red/green semantics, and a flash-bar toast — the source of this system's mono labels and semantic pair.</p>
- </div>
- </article>
- <article class="card">
- <div class="card-body">
- <h3 style="margin:0; font: 600 var(--ad-step-0)/1.3 var(--ad-font-sans);">Humanist sans, full dark palette</h3>
- <p style="margin:0; color: var(--ad-color-text-secondary); font-size: var(--ad-step--1);">A third paired humanist sans with mono, a warm cream surface, a full dark palette, and underline tabs — the source of this system's dark-theme approach.</p>
- </div>
- </article>
-</div>
-
-The one literal constant across all of them is an identical
-[Utopia](https://utopia.fyi) fluid type/space scale — 320→1240px viewport,
-18→20px body, a 1.20→1.25 ratio — adopted verbatim as this system's spine.
-Everything else (palette, radius, component set) is a synthesized middle
-ground, deliberately not lifted wholesale from any one source.
-
## What actually makes it a system
Not the quality of the individual choices. The properties below:
@@ -108,15 +75,15 @@ rather than re-derived on every build — a personal site does not need a test
suite standing between an edit and a deploy to keep five numbers honest.
That contract is deliberately narrower than "every color in the system".
-`--ad-color-text-tertiary` — the source's own "muted-faint text" step — is
+`--ad-color-text-tertiary` — this palette's own "muted-faint text" step — is
about 3.46:1 against the page in light mode, under the 4.5:1 floor for normal
text. That is not a bug to paper over by darkening a real brand value; it is
a documented, intentional property of the palette (see the
[Color page](<%= relative_url('/foundations/color/') %>)), so the contract
excludes it rather than silently forcing it to pass. Borders get the same
-treatment for the same reason: the source's own rule is that hairline borders
-do the elevation work, not high contrast, so this system does not invent a
-3:1 border assertion the source never claimed.
+treatment for the same reason: this system's own rule is that hairline
+borders do the elevation work, not high contrast, so it does not invent a
+3:1 border assertion it never claimed.
## The four rules
@@ -153,39 +120,32 @@ do the elevation work, not high contrast, so this system does not invent a
<div class="ad-callout">
<p class="type-label" style="margin-bottom: var(--ad-space-2xs); display:block;">4. One accent, one dark-mode convention</p>
<p style="margin:0; font-size: var(--ad-step--1);">
- Never two accents in one view — the source is explicit about this. Dark
- mode is opt-in in the source (a <code>.theme-dark</code> class); this
- site adapts that to its own <code>data-theme</code> toggle plus
- <code>prefers-color-scheme</code>, which is functionally equivalent and
- keeps the site's existing toggle working.
+ Never two accents in one view. Dark mode is opt-in — a
+ <code>data-theme</code> toggle plus <code>prefers-color-scheme</code>,
+ never inherited silently from the OS alone.
</p>
</div>
## What this system does not have
-Being honest about the synthesized parts means being honest about the gaps.
-
-- **No shared component library or Figma exists across the source
- projects** — they are hand-rolled app CSS, not a design system. The
- sixteen components documented here are a from-scratch, best-guess
- personal-tool kit, grounded in real patterns found across those apps (a
- flash-bar toast; a drop-up menu behind Dialog's flat treatment; a
- segmented control and an underline-tabs pattern behind Tabs' two
- variants) — not a literal recreation of any one app's screens.
-- **No logo or brand mark.** The source is explicit: render "Arbitrary
- Definitions" or the project's own name in type wherever a mark would go,
- and do not invent one.
-- **The icon set (Lucide) is a flagged substitution.** No source project
- ships a shared icon library; one hand-draws its own line icons, and the
- others mostly avoid icons.
-- **Signal Teal, the default accent, is a synthesized pick**, not lifted from
- any one project.
+Being honest about the design is being honest about the gaps too.
+
+- **No formal component library or Figma file exists.** The sixteen
+ components documented here are a from-scratch, best-guess personal-tool
+ kit — not a literal recreation of any real app's screens, and not backed
+ by a source of truth beyond this site.
+- **No logo or brand mark.** Render "Arbitrary Definitions" or the
+ project's own name in type wherever a mark would go — don't invent one.
+- **The icon set (Lucide) is a flagged substitution** — there's no shipped
+ icon library of its own yet.
+- **Signal Teal, the default accent, is one pick among the sanctioned
+ alternates**, not a fixed identity.
- **No Table, Callout, or Progress component.** An earlier pass at this site
- invented all three; none exists in the source system, so they were removed
- rather than re-skinned. (This documentation site still uses a plain
+ invented all three; they were removed rather than kept, since this system
+ doesn't define them. (This documentation site still uses a plain
`<table>` and an aside box for its own reference material — those are site
chrome, not system components, and are not documented as one.)
-- **Loop and Archive are generic demonstrations**, not recreations of any
- specific source app.
+- **Loop and Archive are generic demonstrations**, not real production
+ screens.
Naming these is cheaper than being caught by them.