Lucas WintherandClaude Opus 5.5
17ecebc4a4
The user chose the direction over two mockup rounds (samples/mockups, gitignored): the Obi Shelf's shelf and colours, Graphite Console side panels, the Annotated Edition timeline as a second view, and warm off-colour grounds in both themes. Selects look editable; labels are source-neutral. impeccable finish review: ship. Co-Authored-By: Claude Opus 5.5 <[email protected]>
18 KiB
name, description, colors, typography, rounded, spacing, components
| name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| MangaBaka Seeder | Every cover a series has worn, standing on one shelf in a three-column console. |
|
|
|
|
|
Design System: MangaBaka Seeder
Overview
Creative North Star: "The Obi Shelf"
Every cover a series has ever worn stands on one bookshop shelf, each wrapped in an obi band that prints its evidence: role, size, where and when it was seen, how long the archive saw it. The shelf sits inside a working console: a sticky left desk where links are written on paper slips and the run is stamped off, a middle shelf (or, as a second view, an annotated timeline of years), and a sticky right desk for rehosting and filing. The materials are book-jacket paper, sumi ink, obi red, kraft board, and one deep teal for "done".
Density is that of a well-kept tool, not a dashboard: small tracked uppercase labels, printed hairlines, square corners, tabular numerals. Depth comes from the books themselves, which cast a soft shadow onto their rail; nothing else floats except the userscript panel over mangabaka.org. The system refuses the category default (a white card grid of rounded tiles with checkboxes and select boxes) and anything corporate or SaaS-flavoured.
The whole world is scoped so it can live inside a shadow root on mangabaka.org: every rule hangs off the mbseed- scope, there are no webfonts and no external assets, and drawn details (the select chevron) are inline SVG data. Desktop and the userscript panel come first; the narrow, stacked layout exists for the panel, and phone layouts are deferred.
Key Characteristics:
- Warm paper (light) and warm umber (dark) grounds; never pure black or white.
- Covers stand on kraft rails, each with an obi band carrying its evidence.
- Obi red marks the main cover and the two stamps; teal marks done, rehosted, added, and focus.
- Square corners and printed hairlines; the radio is the only round form.
- Unselected covers go grayscale and lean back.
- Two views of one set: Shelf and Timeline.
Colors
A bookshop palette: paper and umber grounds, sumi ink, one red band, one teal for completion, kraft for the furniture. Each light token has a dark (umber) counterpart under prefers-color-scheme: dark; obi-ink is shared by both schemes.
Primary
- Obi Red (
obi-red; darkumber-obi-red): the band of the main cover, the stamp buttons ("Find covers", "Rehost and file for review"), a failed stage plate, the active plate's blinking pip, the rule above notices, and the main-cover checkbox. Its depth companion Obi Red Deep (obi-red-deep) is the stamp's hover and the main band's top rule. Obi Ink (obi-ink) is the only text colour on red.
Secondary
- Rehost Teal (
rehost-teal; darkumber-teal): completion and safety. Done-stage pips, the progress fill, the "Rehosted" mark on a band, added lines in the change preview, and the focus ring.
Tertiary
- Kraft Rail (
kraft-rail; darkumber-kraft-rail): the 10px shelf rail under every book, the note bullets, the side-panel scrollbar. Rail Lip (rail-lip) is the darker 2px edge under the rail.
Neutral
- Book-Jacket Paper (
paper-page) / Warm Umber (umber-page): the page and the middle column. - Desk Paper (
paper-panel/umber-panel): the two side desks, one step darker than the page. - Slip Paper (
paper-slip/umber-slip): raised paper: link slips, obi bands, selects, ticks, the selected host row, text areas. - Sumi Ink (
sumi-ink/umber-ink): text, the 3px rules (brand underline, obi top edge), outline buttons, the active view and plate. - Faded Ink (
sumi-ink-muted/umber-ink-muted): labels, hints, facts on the band, inactive plates and host rows. - Hairline (
hairline), Cover Frame (cover-frame), Track (track): translucent ink for dividers and box edges, the 1px frame on every cover and select box, and the seen-range and progress tracks.
Named Rules
The Warm Ground Rule. No ground is ever pure black or white. Every cover carries a 1px inset frame in cover-frame, so black- or white-ground art still shows its edge on either scheme.
The Red Is a Band Rule. Obi red is a fill: the main cover's band, the stamps, failure. It appears once per desk as a stamp and once on the shelf as the main cover. Small type in red on paper or umber does not reach 4.5:1 at the current values, so status and error text should not rely on red alone.
The Teal Means Done Rule. Teal is the only "finished/safe" signal: done plates, progress, rehosted, added, and keyboard focus. Do not use it decoratively.
Typography
Display Font: the system UI sans stack (no webfonts; the userscript shadow root forbids external fonts) Label/Mono Font: the system monospace stack, for the paste-out text and the catbox userhash
Character: One family, hierarchy carried by weight and tracking: heavy, tightly set titles (800, negative tracking) against small, widely tracked uppercase labels that read like print on a band or a stamp.
Hierarchy
- Display (800, clamp 24-38px on container width, 1.1): the series title over the review.
- Headline (800, clamp 22-30px): the empty-state statement; balanced wrapping.
- Title (800, 17px): the brand line at the top of the left desk, over a 3px ink rule.
- Body (400, 14px, 1.5): base text and slip inputs; empty-state paragraphs run at 15px, capped at 62ch.
- Body Small (13px): settings, buttons, host rows, status lines; hints step down to 12.5px.
- Band (11.5px, tabular numerals): obi band facts, notes, and per-cover fields.
- Label (700, 10.5px, 0.14em, uppercase): desk section caps, slip labels (10px, 0.12em), obi role lines (800, 0.12em), stage plates (0.1em).
- Stamp (800, 12.5px, 0.14em, uppercase): red stamp buttons only.
Named Rules
The Printed Label Rule. Uppercase tracking is reserved for things printed on an object: slip labels, band roles, plate names, desk section caps, stamps. Running text and headings stay in sentence case.
The Tabular Facts Rule. Every count, size, date and year uses tabular numerals so columns of facts align on the bands and plates.
Layout
A three-column console on a container query, not a viewport query: left desk (250-290px), the shelf (fluid), right desk (260-300px). Both desks are sticky, full-height, and scroll on their own with a thin kraft scrollbar; they are separated from the shelf by hairlines. At a container width of 1000px or less the columns stack (left desk, shelf, right desk), the desks stop sticking, and a 3px ink rule opens the right desk. This stacked form is what the userscript panel shows.
The shelf is a dense auto-fill grid of 150px-minimum slots with no column gap, so rails run continuously across a row; rows sit 32px apart and books align to the rail at their bottom. Wide art (banners) spans two slots, one below 420px. The timeline is a centre double rail with a 64px year column, covers alternating left and right (the right side dropped 46px to stagger); at 760px or less the rail moves to a 56px left gutter and every cover stacks to its right.
Spacing rhythm: 4 / 8 / 12 / 18 / 26 / 32px, with tight 2-6px gaps inside slips and bands. Middle column padding is 18px 26px 56px (16px when stacked); desks are 18px 16px 24px with 14px between blocks. Desktop and panel first; phone layouts are deferred.
Elevation & Depth
Flat paper with exactly three shadows, each with a physical cause. Everything else separates by hairline, ground step (page, desk, slip), and 3px ink rules.
Shadow Vocabulary
- Book cast (
box-shadow: 0 8px 14px -8px var(--mb-shadow)): under every cover image, as it stands on its rail. - Rail lip (
box-shadow: 0 2px 0 var(--mb-rail)): the edge of the kraft rail under each shelved book. It is shelf furniture, not a card shadow. - Floating panel (
box-shadow: 0 18px 40px -18px var(--mb-shadow)): the userscript panel over mangabaka.org only.
Named Rules
The Shelf Shadow Rule. Only books and the floating panel cast shadows. Cards, buttons, bands, and desks never do.
Shapes
Square corners throughout (rounded.none): slips, bands, buttons, selects, plates, checkboxes, ticks, covers. The one exception is the radio, which is round so single choice reads differently from multiple choice (rounded.radio). Edges are printed: 1px hairlines for boxes, 1.5px ink for buttons and checks, 3px ink for rules that open a thing (the brand, the obi's top edge, the stacked right desk). Stacked lists (plates, host rows) overlap their borders by 1px so they print as one ruled table. Inputs are underlined, not boxed: dotted at rest, solid on focus.
Components
Buttons
Printed, square, and decisive.
- Shape: square, 1.5px ink border, full width of the desk.
- Outline (default): transparent with ink text and border; fills ink with page-coloured text on hover (0.15s).
- Stamp: obi red fill, obi-ink tracked uppercase; deepens to obi-red-deep on hover. Used for "Find covers" and the final "Rehost and file for review" only, the latter isolated at the bottom of the right desk below a dashed hairline.
- Quiet: borderless underlined text for secondary run actions (skip history, cancel).
- Disabled: 0.4 opacity, not-allowed cursor.
Inputs / Fields
- Slip: a slip-paper box with a hairline edge holding a tracked label, an underlined (dotted) input, and an optional hint. On focus the underline goes solid ink and the slip's edge turns ink.
- Select: always visibly editable: slip-paper box, cover-frame edge, a 2px ink bottom edge, and a drawn SVG chevron. Hover darkens the edge to ink and steps the fill to page.
- Select on a band: printed onto the obi: underline and chevron only, boxed on hover or focus. On the red main band the chevron is dropped.
- Checkbox and radio: custom, 15px, 1.5px ink edge on slip, filled with an ink square (radio: dot) when checked; the main-cover checkbox fills red.
- Text area: slip paper, hairline, mono 11.5px.
Navigation
- View switch (Shelf | Timeline): a segmented pair inside one 1.5px ink border, right-aligned in the review head; the pressed view is ink-filled with page text.
Stage Plates
A ruled table of five run stages that change in place like a split-flap board: tracked uppercase name, count at the right in tabular numerals, a 7px square pip. Pending is faded ink; done turns ink with a teal pip; active inverts to ink with a blinking red pip; failed fills red. A 3px teal progress line sits under the table.
Host List
Rehost targets as a ruled table of radio rows (name plus a one-line retention fact). The chosen row lifts to slip paper with full ink and weight 600; a warning line appears only under the chosen row.
Book and Obi Band (signature)
Each cover is a book: the image (max 250px tall on the shelf, 170px in the timeline, contained, framed, casting the book shadow) with a 22px square include tick in its top-left corner, and an obi band overlapping its foot by 14px. The band is slip paper with a 3px ink top edge and prints: role (tracked uppercase), facts (tabular, " · " separated), a 5px seen-range bar drawn to scale with a teal "Rehosted" mark, the role and rating selects, and an underlined moderator note. The main cover's band is obi red with obi-ink text. An unselected book goes grayscale, fades to half opacity, and drops 8px (on the shelf; it stays put in the timeline).
Timeline (second view)
The Annotated Edition: a centre double ink rail with year keys set in heavy tabular numerals on a page-coloured knockout, books beside it as image-plus-band pairs.
Motion
One authored motion: when a run finishes, books are shelved left to right (rise 14px, 0.55s, cubic-bezier(0.16, 1, 0.3, 1), 28ms stagger capped at 24 books). The active plate's pip blinks in two steps. Everything else is 0.12-0.3s state transitions. prefers-reduced-motion removes all animation and transitions.
Do's and Don'ts
Do:
- Do frame every cover with the 1px inset
cover-frameso dark and light art keeps its edge on both grounds. - Do keep every select boxed with a 2px ink bottom edge and a drawn chevron; on a band, keep the underline and chevron.
- Do label inputs and data source-neutrally ("Source series link", "Series page"); the source's name comes from data, never from the chrome.
- Do scope every rule under the
mbseed-scope and use only system font stacks and inline assets, so the same CSS runs in the userscript's shadow root. - Do reserve obi red for the main cover's band, the stamps, and failure; use teal for done, rehosted, added, and focus.
- Do turn unselected covers grayscale and lower them rather than hiding them.
- Do design for the desktop console and the stacked userscript panel first.
Don't:
- Don't use pure black or pure white as a ground in either scheme.
- Don't build a white card grid of rounded, shadowed tiles, or anything that reads as corporate or SaaS.
- Don't round corners; the radio is the only round form.
- Don't add shadows beyond the book cast, the rail lip, and the floating userscript panel.
- Don't name WEBTOON (or any one source) in chrome labels or headings; a source name appears only as data or as an honest note of what is supported today.
- Don't load webfonts, icon fonts, or external scripts.
- Don't set small text in band red (
--mb-obi): it is 3.9:1 on paper. Small red text (year keys, errors, removed lines, link hover) uses--mb-obi-text(#a3261f light, #f2867b dark; 5.5–6.1:1), and never as the only signal of an error or state.