| name | Press | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | kindling’s paper-first design system for editorial websites and Svelte writing applications | ||||||||||||||||||||||||||||||||||||||||||||||||
| category | Editorial | ||||||||||||||||||||||||||||||||||||||||||||||||
| surface | web | ||||||||||||||||||||||||||||||||||||||||||||||||
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||
| radius | 8px | ||||||||||||||||||||||||||||||||||||||||||||||||
| spacing | 4px base; use the full canonical scale | ||||||||||||||||||||||||||||||||||||||||||||||||
| components |
|
Press is kindling’s shared visual language: paper, deliberate typography, measured reading columns, and quiet controls. This is the current design brief for people and coding agents. Use it with the actual components; it is not a substitute for their APIs.
The system serves writers using kindling and people discovering the product on its website. Writing is the main activity. Navigation and metadata support that activity without crowding the manuscript.
design-system/tokens.css is the only editable token source. This file owns design decisions beyond CSS. design-system/website.css owns the opt-in website variant; design-system/application.css and design-system/svelte/ own application controls. Root tokens.css and colors_and_type.css are generated import copies, not competing sources. Follow the current component source and docs/APPLICATION_COMPONENTS.md for exact APIs.
Press is the definitive design system for all kindling surfaces. The sibling brand-assets folder is retired input; do not edit it or sync from it. Open Design is a downstream working copy of this repository. Bring shared improvements back here, rebuild, then sync outward. Earlier snapshots and saved runtime instructions yield to this contract. See docs/CONSOLIDATION.md for the resolved conflicts and docs/DESIGN_GUIDE.md for the extended rules. docs/BASELINE_DESIGN_GUIDE.md is historical evidence only.
| Role / semantic token | Light | Dark |
|---|---|---|
Background / --color-bg |
#F4EFE6 | #1E1A16 |
Raised surface / --color-surface |
#FBF8F1 | #26211B |
Sunken surface / --color-surface-sunken |
#ECE4D6 | #181410 |
Text / --color-text |
#231D18 | #E8E0D4 |
Muted text / --color-text-muted |
#6B635B | #A89C8C |
Accent fill / --color-accent |
#B5532E | #E08A5C |
Small accent text / --color-accent-text |
#9E3D1B | #E08A5C |
Read semantic variables in components. Set data-theme="dark" on the document or a containing surface to select dark chrome. Use the small-text accent token for links; do not substitute the fill accent. Terracotta marks the main action or current selection, not whole page backgrounds. Status uses the success/error/warning/info tokens plus text or icons. Tag colors describe user metadata, not status.
The manuscript remains light paper with dark ink in either theme through --color-prose-*. This is an intentional exception. Website components under .press-web explicitly use the light website treatment. Never invert a manuscript or website specimen simply because the reference chrome is dark.
| Purpose | Family token | Treatment |
|---|---|---|
| Display and editorial headings | --font-display / Fraunces |
Expressive, restrained; no stock sans display substitution |
| Reading and manuscript prose | --font-body / Newsreader |
17px base, 1.7 line height, measured column |
| Controls, navigation, labels | --font-ui / Inter |
Operational language, 16px inputs |
| Code | --font-mono |
Existing Monaco/Menlo/Consolas fallbacks |
Font files and OFL notices are local. Preserve the full fallback stacks in the CSS. design-system/fonts.css serves the canonical variable TTFs for an application that bundles its assets; design-system/fonts-web.css serves the same five faces as WOFF2 from assets/fonts/web/ for delivery over a network. Both are generated from one set of files — npm run fonts:build encodes losslessly, with no subsetting, so axes, weights, italics and glyph coverage are identical. A consumer must not declare these family names against fonts vendored from anywhere else. The foundation hero scales from 32–60px, H1 from 32–44px, H2 from 24–32px, and H3 is 20px. The application has its own heading ceiling of 48px. Small metadata sizes are inherited exceptions, not permission to shrink body text.
Website copy uses Inter as a scoped variant, with Fraunces headings and Newsreader writing samples. Do not spread that variant into manuscript prose. A manuscript — in the editor, in .ka-manuscript-prose (including inside a .press-app workspace embedded in a website page), or in a website sample marked .pw-writing--app — is --text-body at --leading-relaxed held to --measure. An editorial reading column may be larger deliberately; a sample claiming to show the workspace may not. Keep headings authored to fit; wrap user content in details and provide an expansion path for truncated list content.
Use the existing scale: 4, 8, 12, 16, 24, 32, 40, 60, 80, 120, 140px. The marketing frame is --page-frame:1120px; editorial page heroes and sections share --page-frame-editorial:960px. The reading measure is --measure:36rem, and the default gutter is 32px. Reduce gutters at narrow widths while keeping readable type. Use asymmetric columns, hairlines and whitespace to establish hierarchy. Avoid repeated centered marketing bands and grids of decorative cards.
Keep primary content in normal grid/flex flow. Sticky chrome must reserve its space. Use the supplied od-* structural primitives for rows, stacks, text fields and grids. Reflow layouts at narrow widths; do not clip prose or hide required actions. Content images retain their full frame and intrinsic dimensions. Baseline references use matching outer frames with contained images; never stretch them.
Use components.html for compact source specimens and index.html for the full working catalog. The eight pages in preview/ isolate palette, type, spacing, controls, website and editor surfaces.
One implementation per control role. application.css owns operational controls — buttons, fields, checkboxes, segments, tabs, notices, dialogs, menus — on every surface, including websites. A feedback dialog's submit and a share action are the same role a writer meets in the workspace; do not restyle them for marketing. The website layer styles one control, .pw-button, the prominent marketing call to action. It is a documented larger size of the same family (16px label, 12/24px padding, against the operational control's 15px and 8/16px) and differs in nothing else: same accent-text fill, 4px radius, Inter label, inset-ring hover, disabled tokens and 44px target. Never stack .pw-button and .ka-button on one element, and never redefine an accent token to correct a single button.
The core Svelte entry exports 22 components: Button, IconButton, Field, Checkbox, Select, SegmentedControl, Tabs, Badge, Progress, EmptyState, Notice, Dialog, Panel, BeatItem, ManuscriptSurface, StatGroup, NavigationTree, TagPicker, Menu, CommandPalette, ShortcutRecorder and SearchResults. Reuse these before adding another implementation. Choose panels for meaningful groups, not every paragraph.
The separate svelte/editor entry exports NovelEditor and ProseToolbar. NovelEditor is a Tiptap WYSIWYG editor on a paper sheet. Preserve rich HTML, formatting, alignment, blockquotes, indentation, selection and undo/redo. A Field textarea is appropriate for plain notes, never a replacement for prose. ManuscriptSurface presents read-only prose; it does not replace the editor. Keep editor instances mounted when switching views if history and selection must survive.
ui_kits/app/ composes the real navigation, controls and editor as a small starting application. Its edits live in memory. The consuming app retains ownership of persistence, API calls, project stores, shortcut settings, cursor restoration and file workflows. Adopt one component at a time with explicit adapters.
Continue existing radii: 4/6/8/10/12/16px and pill badges. Borders use --border-hair; elevation uses the existing shadow tokens. Paper grain belongs behind content using --grain-tile and --grain-strength, never over text. Keep the original mark geometry and use supplied assets, not a redrawn logo. Use the existing Lucide outline geometry: website icons are 16px with a 1px stroke; application icons default to 20px with a 1.75px stroke in a 24px viewBox. Never use emoji controls.
The brand name is always kindling, with a lowercase k, including sentence starts, headings, navigation, alt text, metadata, logos and social artwork. Never apply uppercase or title-case styling to the name. kindling is the product; Press is the name of its design system, not a second product brand. Use the original book-and-flame geometry and outlined Fraunces wordmark from assets/. The original book-and-flame geometry is retained. Wordmarks, stacked lockups and their raster exports are regenerated with the approved lowercase name.
| Placement | Asset | Minimum size |
|---|---|---|
| Primary signature with room | Stacked lockup | 140px wide |
| Square identity, about screen | Book-and-flame emblem | 32px; prefer 40px+ |
| Small icon, favicon, app tile | Flame | 16px |
| Shallow navigation and footer | Outlined wordmark | Use the supplied website sizing; never typeset a substitute |
Use reversed artwork on dark surfaces and monochrome variants for single-color production. Keep aspect ratios and clear space of at least one quarter of the emblem height around a standalone signature. Ember is reserved for the inner flame, never a competing UI accent. The lockup is not a navigation icon; below its minimum width, select another asset. Build instructions and asset selection live in assets/README.md.
| Surface | Typography and theme | Composition |
|---|---|---|
| Editorial reading, guides | Fraunces titles, Newsreader reading, Inter navigation; light paper | Left-aligned reading columns, 36rem measure, hairline-separated sequences |
Product website (.press-web) |
Fraunces titles, Inter product copy, Newsreader writing samples; light only | Asymmetric hero, aligned section labels, full-width bands, one main action in view |
Writing application (.press-app) |
Inter controls, Fraunces headings, Newsreader manuscript; light/dark/system chrome | Dense task-based groups, visible selection and real status; manuscript stays light |
| Brand, social, print | Original artwork; Fraunces/Newsreader/Inter by role | A clear signature, one message, generous paper space |
On editorial pages, use at most two deliberate terracotta moments per viewport; inline links and the original logo are exempt. A secondary persistent header action with the shared sunken fill supports the primary in-content action. Application selection, focus, tags and true status may coexist; the marketing accent budget does not constrain workspace state. That holds for an interactive .press-app workspace embedded in an editorial page: inside its own bounded surface, its real selection, beat numbers, focus and status are exempt. Decoration and calls to action inside it are not exempt merely for being inside it, and the editorial chrome around it keeps its budget of two.
Preserve the inherited paper grain, mounted-print figures, print folios, running section labels, accent rule and Newsreader pull-quotes. Prefer hairlines in flow; use shadows for mounted prints, the closing action panel and floating overlays. Product screenshots must retain their full frame and controls: use .pw-image-frame for full-frame specimens. A deliberately authored detail capture is welcome; arbitrary CSS cropping of a full interface is not. Use the existing 80px editorial bands and 120–140px opening space when composing long reading pages, with narrower gutters on small screens.
Standalone controls target at least --control-target (44px) in both dimensions; inline prose links are exempt. Controls have a visible label, focus state and accessible name. Use native elements and the existing Svelte components for keyboard behavior. Errors explain a remedy near the affected field. Busy actions expose their state; empty states explain how to proceed. Pair destructive actions with a confirmation when they remove user work.
Use restrained state feedback: foundation and website transitions use 100ms/200ms; the application layer uses its existing 160ms motion token. Respect prefers-reduced-motion. Avoid decorative entrance choreography, hover-only essential information, and color-only state. Aim for 4.5:1 body contrast and 3:1 essential graphics; evaluate both themes independently when doing QA. Hairlines are separators, not the sole signal identifying a control.
One exception: the home-page workspace tour. The interactive .press-app workspace specimen on kindlingwriter.com's home page may tour itself: a looping walk through the scene workspace, with transitions of up to 560ms and reading scrolls of up to 1.7s. It exists because a specimen of a calm writing tool is best shown moving calmly, and it is allowed only while it keeps every one of these terms:
- It starts only when at least half the specimen is on screen, and pauses off-screen and in a background tab.
- Under
prefers-reduced-motionit never starts on its own, and every transition is instant. - The visitor's first click, keypress, keyboard focus or scroll inside the specimen stops it where it is. Nothing resets; a transition already under way completes forwards.
- A visible Pause/Play control stops and resumes it (WCAG 2.2.2), and Play resumes from the current step.
- The visitor's own interactions move exactly as the tour does.
- Motion is opacity, transform, height and scroll, plus colour fades between a control's existing states — no gradient, glow, per-character typing or simulated cursor.
- It never moves focus, records no analytics, and the specimen works completely without JavaScript.
It is an exception, not a pattern. No other page, specimen or application screen may autoplay, loop, or exceed the motion values above by pointing to it; a second case needs its own entry here.
Write clearly, calmly and concretely. Prefer the writer’s language: scene, beat, manuscript, reference, draft. Explain what an action does and what happens next. No fabricated metrics or unsupported product promises. Sample manuscript content is clearly illustrative; do not imply it is a published work. Show real provided brand assets in their original proportions.
- Blue/white generic dashboard styling or Inter-only typography replacing Press.
- Prose represented by a textarea, or rich HTML flattened on view changes.
- App stores and backend APIs moved into design-system components.
- Orange washes, oversized rounded cards, gradients or glow effects.
- New hand-coded palette values when a semantic token exists.
- Remote font or image dependencies in the portable reference.
- Treating a public repository as a grant of brand or source redistribution rights.
Read USAGE.md for code imports and docs/OPEN_DESIGN.md for Open Design setup. Use the root skill for general work and the focused skills listed in SKILLS.md only when their task applies. New requirements may change design decisions explicitly; do not silently normalize them. Keep changes in editable source and regenerate derived files with npm run open-design:build.