# toDRAMAT design manual

**Brand:** toDRAMAT · **Issued:** 2026-10-01 · **Scope:** websites, series pages, presentations, campaign materials, interactive tools, and video. Video appearance is covered in § 15.

Create work that feels like a Polish story worth following: expressive comic art, human dialogue, a red frame, and an interface that makes the next panel easy to reach. Preserve the warm-paper light theme and near-black dark theme. Let the story carry the emotion and keep the reading experience clear.

## 1. Read this before creating anything

This is a self-contained working manual for designers, developers, content producers, and AI agents. It follows the structure of the [Auditmos design manual](https://auditmos.com/design.md), with toDRAMAT's own identity, assets, and UI patterns. The manual is written in English for production use; public-facing toDRAMAT copy remains Polish.

Three labels distinguish the instructions below:

| Label | Meaning | How to use it |
|---|---|---|
| **Established** | Identity or editorial direction already expressed by the project's published content | Preserve it when creating related work. This label does not claim a separate approval of this manual. |
| **Existing** | Observed asset, token, or implementation pattern | Reuse where suitable; existing code is not proof of accessibility or a permanent design rule. |
| **Default** | Working specification proposed here for new materials | Start here and adjust for content, legibility, or the delivery format. Do not present it as an independently approved brand decision. |

Numeric specifications marked Default are starting values, not claims about shipped work. Before composing, establish the audience, story or task, format, available assets, and publication permissions. Ask only for missing facts that affect the output. This document does not authorize publication of private reference photographs, internal strategy, or commercial figures.

## 2. Universal identity and voice: Established

- **Position:** Polish vertical stories and motion comics, built around recognizable situations, characters, and short episodes. The website introduces the creators and shows series and collaboration possibilities.
- **Audience:** viewers first in narrative surfaces; brands, foundations, educational organizations, and other partners in collaboration sections. Give each audience a useful next step.
- **Authorship:** toDRAMAT is the project name. Tomek is introduced as the engineer; Marcin as the creator. Preserve their actual roles. Comic portrayals are illustrations, not documentary photographs or actors' performances.
- **Tone:** direct, conversational Polish with humor, tension, and local detail. Short dialogue should sound spoken. Explain partnership opportunities plainly, without promising audience growth or educational outcomes that have not been measured.
- **Name:** write **toDRAMAT** in copy and **todramat.pl** for the domain. Keep the lowercase `to` and uppercase `DRAMAT`; do not silently normalize them.
- **Language:** the manual and implementation references may be English. Interface labels, narrative dialogue, captions, and viewer-facing explanations are Polish unless a specific localized edition is commissioned.
- **Narrative principle:** establish a situation, introduce a turn, and give the viewer a reason to continue. A cliffhanger belongs to the story; payment, consent, and navigation must remain straightforward.
- **FAQ:** `/faq` (“Pytania o nasze historie”) contains 12 questions in four groups: format selection, customization and branding, production process, sound and series consistency. Answers are present in server-rendered HTML inside native expandable details with plus/minus indicators. Each question has a stable fragment URL that opens its answer. Contextual links connect galleries, the contact form and values page to relevant answers; answers link back to specific demos or contact. FAQ and branding remain accessible through the side navigation; the footer contains operator details, legal links and the AI disclosure only. No delivery deadlines or revision counts are promised.
- **Homepage sections:** “W co wierzymy” starts above its rooftop comic and includes the Wizja, Misja and Wartości links. “Kontakt” starts above the inbox comic. Section headings are the keyboard navigation stops; active comic navigation buttons show a hand cursor.
- **Current format selection:** “Nasze piony” at `/#piony` presents two choices before showing material samples: Comic-motion and Photo-story. “Jak wybrać format?” links to `/vertical-drama`, with one concise format comparison and two style tables covering all six comic and five photo styles. Each style has a small portrait thumbnail from its existing demo poster, a short distinguishing feature, suggested use and a direct demo link through the thumbnail and name; no extra interaction is required to read the tables. Comic-motion keeps `/vertical-drama/motion-comic` and its six style pages at `/vertical-drama/motion-comic/<artStyle>`: Klasyczny komiks, Szkic odręczny, Papierowa wycinanka, Komiks tuszowy, Ilustracja redakcyjna, Pixel art. Photo-story lives at `/vertical-drama/photo-story` with five 30-second examples: Fotokomiks, Film fotograficzny, Fotografia 2.5D, Żywa fotografia, Kolaż fotograficzny. The former `/piony/*` and `/rysowanie` routes remain removed. Existing narrative dialogue remains unchanged.

**Default copy pattern:** recognizable situation → character response → new information or reversal → next panel or useful action. For partner copy: audience → story format → concrete collaboration opportunity → relevant contact.

| Prefer | Avoid | Why |
|---|---|---|
| “Zobacz film i opis →” | “Odkryj rewolucyjną platformę przyszłości” | Describes the destination. |
| “Ilustracje powstały z pomocą AI.” | Presenting generated characters as real performers | Makes the medium explicit. |
| A specific scene, series, and audience | Guaranteed virality or invented viewing figures | Keeps claims supportable. |

The published values include transparent payments and sponsorship, honest disclosure of AI, protection of underage audiences, and educational review. They exclude alcohol, gambling, e-cigarette, and payday-loan sponsors. Preserve these editorial commitments; this manual is not a legal compliance assessment. Do not publish internal budgets, market projections, or operating plans as brand copy.

## 3. Logos, authorship, and asset handling

### Established direction

Use the red mask with the basic half-smile and the correctly cased toDRAMAT name. The half-smile replaces the circular surprised mouth: the outer silhouette and two identical pill-shaped eyes remain symmetric; only the mouth introduces a slight asymmetry. Keep its straight, gently rising upper edge and rounded lower edge, without an exaggerated raised corner, play shape, or eyebrows. The homepage pairs the mask with a typographic name; sharing artwork uses light `to` and red `DRAMAT` on black. The /branding library now provides derived SVG/PNG lockups with the name outlined in Bricolage Grotesque. Existing sharing artwork remains a separate application.

### Existing asset inventory

| Asset | Exact source/reference | Appearance and use |
|---|---|---|
| Mask symbol | [favicon.svg](https://todramat.pl/favicon.svg); repository `public/favicon.svg` | Master red `#b91c1c` mask with identical white eyes and a white half-smile; square SVG viewBox `77 89 1100 1100`. Used by the homepage and browser tabs. |
| Browser icon | [favicon.ico](https://todramat.pl/favicon.ico) | Raster export of the SVG master, with 16px, 32px and 48px frames. Inspect at actual tab size. |
| Standalone mask PNG | `output/imagegen/todramat-maska/sygnet.png` | 1280 × 1280 transparent export of the same SVG master. Rebuild this and the ICO with `pnpm brand:generate` after changing the master. Earlier artwork in `output/imagegen/todramat-logo-propozycja/` is historical concept work, not the current identity. |
| Main sharing image | [og/todramat.png](https://todramat.pl/og/todramat.png) | 1200 × 630 PNG: dark field, two-color name, comic illustration on the right. |
| Page sharing images | [og/wizja.png](https://todramat.pl/og/wizja.png), [og/misja.png](https://todramat.pl/og/misja.png), [og/wartosci.png](https://todramat.pl/og/wartosci.png) | Existing page-specific PNG exports. |
| Comic panels | `src/content/scenariusze/*.json` contains Cloudflare Images URLs, using the `todramatPanel` variant (1024 × 1536, scale-down) | Vertical illustrations; use the actual scenario's asset and description. All 34 current panels, including Tomek and Marcin, are hosted in Images. `panels:generate` still creates local source exports; upload regenerated panels and update their scenario URLs before publishing. |
| Panel descriptions | `panels/manifest.json` | Scene descriptions and character references used by the offline generation workflow. |
| Narrative text | `src/content/scenariusze/*.json` | Narration, dialogue, speaker identity, order, and image alternatives. |
| Video posters | Cloudflare Images poster URLs in `src/rysowanie/styles.json` and `src/photo-story/styles.json`; Cloudflare Stream thumbnails resolved by `src/stream/index.ts` for players | Derive from the actual episode; do not invent a poster or copy a stale episode identifier. |

Repository paths identify implementation sources, not public URLs unless linked explicitly. Founder reference photographs are production inputs, not public brand downloads. Supply authorized references to an artist when needed; never guess a public location for them.

### Geometry and placement: Default

- Preserve the mask's geometry, white facial features, and proportions. Use the supplied SVG instead of redrawing it with text, emoji, or image generation.
- Let **H** be the visible symbol height. Start with at least **0.5H** clear space for standalone placement. The homepage's compact inline mark is an existing separate treatment.
- Start at **24 CSS px** visible symbol height for ordinary screen use and **6mm** in print. Inspect favicons separately at 16px and 32px.
- Keep the name readable as one unit. For new covers, use the supplied lockup from `/branding`: red mask with the full name in the appropriate ink color. Existing OG artwork keeps its earlier light `to` / red `DRAMAT` treatment.
- Align the visible mark to the content edge. On a cover or ending card, one clear identity placement is normally enough.
- Do not stretch, rotate, add a glow, recolor facial features, or place the symbol over detail that makes the face unreadable. Use a quiet plate when the scene behind it is busy.

### Founder portrait: Existing treatment, Default placement

The website presents Tomek and Marcin through comic illustrations. Preserve recognizability, scene continuity, and the speaker mapping. In the website's two-speaker composition Marcin's bubble is on the left and Tomek's on the right; new illustrations should support that reading order.

Use an authentic portrait only when one has actually been supplied for publication. Do not treat a generated likeness as a real photograph. Keep AI disclosure visible in the relevant artifact; the website footer already states “Ilustracje powstały z pomocą AI.”

## 4. Color and theme

### Established behavior

The identity combines red, warm paper, dark ink, and light speech bubbles. The light theme is warm paper rather than pure white; the dark theme is near-black. Story artwork keeps its own colors in both themes. Red marks frames, selected emphasis, links, and navigation; it is not automatically an error state.

The website uses the saved `jasny` or `ciemny` choice when present and otherwise resolves the system preference on load. A visible sun/moon control switches the two themes. There is no separate System choice in the current control.

### Exact existing tokens

Source: `src/theme/tokens.css`. The first argument of `light-dark()` is light, the second dark.

```css
--surface: light-dark(#f7f3ec, #0b0b0c);
--ink: light-dark(#111111, #f5f5f4);
--muted: light-dark(#57534e, #a8a29e);
--accent: light-dark(#b91c1c, #ef4444);
--panel: light-dark(#b91c1c, #dc2626);
--bubble: light-dark(#ffffff, #f5f5f4);
--bubble-ink: light-dark(#111111, #0b0b0c);
--raster: light-dark(rgb(120 72 32 / 0.16), rgb(255 255 255 / 0.09));
```

| Role | Existing token | Application |
|---|---|---|
| Page canvas | `surface` | Continuous reading background. |
| Main text | `ink` | Headings, prose, and ordinary labels. |
| Supporting text | `muted` | Audience descriptions, counters, and secondary context. |
| Accent | `accent` | Selected emphasis, links, focus, navigation. |
| Comic frame | `panel` | 4px picture frames and narration rules. |
| Speech bubble | `bubble` + `bubble-ink` | Light bubbles with dark text in both themes. |
| Halftone | `raster` | Low-emphasis decoration at the page edges. |
| Current submit action | `ink` fill + `surface` text | Contact form's “Wyślij” button. |

Tailwind maps the color roles to `--color-*`, for example `bg-surface` and `text-accent`. In another renderer, use the resolved colors in § 15 rather than copying Tailwind declarations.

**Default extensions:** use explicit words and an icon where helpful for success, error, loading, or unavailable states. Do not introduce an unrelated rainbow status palette without a need. Verify every foreground/background combination in both themes, including opacity and hover states. The existing token tests check selected solid-color pairs; they do not establish whole-site accessibility.

## 5. Typography and hierarchy

**Existing roles:** Bricolage Grotesque for headings, Inter for reading and dialogue. Both are self-hosted through Fontsource imports in the shared layout. The brand does not currently define a dedicated monospace family.

```css
--font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
--font-display: "Bricolage Grotesque Variable", var(--font-sans);
```

### Reusable scale: Default unless labeled Existing

Screen sizes assume a 16px reference root. Preserve relative sizing and user zoom.

| Role | Size / leading / weight | Application |
|---|---|---|
| Page H1: Existing | 36px / 40px / 600 | Homepage identity and subpage titles. |
| Section H2: Existing | 24px / 32px / 600 | Categories, episodes, and collaboration sections. |
| Introduction: Existing | 18px / 28px / 400 | Category pitch. |
| Body | 16–18px / 1.5–1.7 / 400 | Explanatory reading. |
| Narration: Existing | 16px / 1.4 / 400 | Above the panel image, inside its frame. |
| Dialogue: Existing | 17px / 1.4 / 400 | Speech bubbles. |
| Speaker: Existing | 16px / inherited 1.4 / 700 | Explicit speaker identity. |
| Category label: Existing | 14px / 20px / 600 | Short uppercase label with wide tracking. |
| Supporting text | 14px / 1.5 / 400 | Descriptions, notes, and metadata in new work. |
| Cover title | 40–64px / 1.1 / 600–700 | Short titles outside the website's ordinary page shell. |
| Print body / notes / H1 / H2 | 11pt / 9pt / 26pt / 17pt | Starting print scale; inspect actual-size output. |

Keep dialogue and narration at least 16px on the web. Split an overlong line or panel before shrinking it. Prefer 60–75 characters per line for sustained prose. Use sentence case for headings and retain Polish diacritics. Check “Zażółć gęślą jaźń” in the final renderer. Video uses the same two font families with output-pixel sizes from § 15.

The current OG generator uses Helvetica/Arial for its rasterized name and page label. This is an existing export limitation, not a third brand typography role.

## 6. Composition and the restrained signature

**Established:** vertical comic frames, readable speech bubbles, expressive characters, red borders, and quiet print-like texture. The story is the main visual subject. Use each motif for its actual role.

### Working composition rules: Default

Use an 8px rhythm with 4px adjustments: 4/8 within tight groups, 12/16 between related items, 24/32 between groups, and 48/64 between sections. The website's main reading container is 48rem wide with 24px horizontal padding and 64px vertical padding. Wide comic compositions may extend to 64rem.

| Format | Opening and structure | Evidence and ending |
|---|---|---|
| Homepage | Name → opening comic → drawing styles → beliefs comic → vision/mission/values links → final comic | Real style demos and a contact invitation. |
| Style page | Style name → description → Stream demo → uses, audience, examples | Illustration customization, theme and branding, links to other styles. |
| Narrative subpage | Clear title → ordered comic strip | Return link and shared navigation. |
| Case study | Actual series or campaign, audience, scope | Process → published artifact → measured results if available → limitations → contact. |
| Report/presentation | Identity, purpose, date, central point | Examples and sourced findings; light-first for print. |
| Interactive tool | Purpose, controls, result | Assumptions and validation; clear reset/export when useful. |

Use square frames for pictures and rounded shapes for dialogue. Utility controls may use a small radius; do not make ordinary prose into speech bubbles. For print, start with A4, 18–22mm margins, page numbers, and figures kept with their captions. Partner-owned deliverables follow the agreed authorship and branding arrangement.

### Simplifying an opening: Default

Give the opening one scene or one clear purpose. A viewer should recognize the story and the way forward. Keep series players close to their title and episode labels. Remove repeated claims or competing actions before reducing text size. A working tool or contact form should not inherit a long comic introduction merely because the homepage uses one.

### Detail, variants and provenance: Default

Keep the current episode, panel order, and speaker clear. When variants matter, label them as drafts, previews, or published versions. A generated scene is an illustration; a measured result needs its actual source. Keep sponsorship and important qualifications visible when layouts stack or details collapse.

Use one current source for each asset and content item. Do not maintain a second editable dialogue transcript inside an image. Adapt density to the medium: progressive disclosure on the web, successive slides in a presentation, appendices in a report.

### Motif specification

| Motif | Existing geometry | Default restraint / prohibition |
|---|---|---|
| Picture frame | 4px solid `panel`; vertical 9:16 artwork | Preserve the scene and faces when cropping. |
| Speech bubble | 2px `bubble-ink` border, 20px radius, light fill; roughly 10px/16px/12px padding | Dialogue only; tail points toward its speaker. |
| Narration strip | 16px text, 10px/14px padding, 4px bottom rule | Separate from dialogue and image detail. |
| Halftone field | 1.1px dots fading to transparent at 1.5px, 7px grid, radial mask clear in the center | Keep texture at the edges and away from sustained reading. |
| Strip arrow | 44 × 44px circle, 2px accent border | Navigation, with a readable counter and accessible action name. |
| Category/episode card | 9:16 image, 4px red frame, text below | Do not force episode titles into the image. |
| Sidebar icons | 20 × 20px SVG, 2px stroke, 8px padding | Real destinations and theme action; labels must remain accessible. |

## 7. Evidence, charts, and truthful verification

### Established evidence rules

Use the real episodes, actual creators, and attributable project material. Do not invent audience totals, testimonials, partner logos, outcomes, or review credentials. A compelling story does not establish that a campaign changed behavior. Distinguish editorial commitments from verification of a specific published episode.

### Evidence records and display: Default

For a material claim, retain the source, owner, date or period, measurement basis, permission to publish, and limitations. Display enough context to interpret the claim. Use a nearby source link to the actual artifact; keep private records private.

For metrics, state the unit, platform, period, and denominator. Separate plays from unique viewers, completion from reach, and projections from observed results. Mark illustrative data explicitly. Never treat missing data as zero.

Use bars for magnitude, lines for change over time, and tables for exact lookup. Start magnitude bars at zero and use comparable scales. Red may identify the focal series; labels and line styles must also distinguish it. Use `ink` and `muted` for supporting information, with readable source notes. Tables align text left and comparable numbers right. Provide a text or table equivalent of a chart.

Use a real quotation only with permission and accurate attribution. Preserve its meaning; label paraphrases. Omit a testimonial block if no approved testimonial exists. Educational and health material needs the appropriate subject-matter review before publication; a design treatment is not a substitute for it.

## 8. Screenshots, diagrams, and icons

**Established:** comic illustration is a central medium. AI-assisted artwork is part of the current website and is disclosed. Scene art can carry natural skin tones, clothing, and environmental color; it does not need to be recolored red and black.

**Default handling:**

- Reuse the actual scene assets or produce a clearly authored continuation. Keep character identity, positions, wardrobe, and lighting consistent within a sequence.
- Generate panel artwork without dialogue, captions, or lettering; add those as editable text. On the website they remain semantic HTML.
- Provide image alternatives that explain the visible action. Avoid needlessly repeating dialogue already present beside the image.
- Screenshots must show a real interface or be labeled as a mockup. Preserve context and clearly identify redactions. Do not change numbers to improve a pitch.
- Diagrams use readable labels and arrows with a defined meaning. Differentiate existing, proposed, and external elements.
- Icons use a consistent line style. Give icon-only controls accessible names; hide redundant decorative icons from assistive technology.
- Do not present AI illustrations as real actors, customer photographs, documentary evidence, or endorsements.

## 9. Interaction, accessibility, and responsive behavior: Default

Keep the story readable with native semantics and a logical source order. Aim for body-text contrast of at least 4.5:1 and meaningful control boundaries and large text at least 3:1. These are acceptance targets, not a claim that every existing component passes. Check both themes, keyboard operation, text enlargement, and narrow screens.

Start new touch targets at 44 × 44 CSS px where practical. Preserve visible, unobscured focus. Links navigate; buttons change state. Selected state needs a cue beyond color. Do not rely on hover tooltips for essential instructions.

| State | Required behavior |
|---|---|
| Default / hover | Clear action or destination; legible text. |
| Focus | Visible focus on the actual target; no keyboard trap. |
| Current / selected | Accurate semantic state and understandable visual cue. |
| Loading | Name what is loading; avoid invented progress percentages. |
| Success | Confirm only the completed action. |
| Error | Explain the failure and next step; preserve entered values. |
| Empty / unavailable | Explain what is absent without manufacturing an episode or result. |
| Disabled | Make the boundary understandable, such as the beginning or end of a strip. |

**Comic navigation: Existing:** each act is a horizontal strip with one panel per viewport and mandatory scroll snapping. Desktop adds arrow controls and a counter. On phones, narration sits above the image and bubbles below. At 44rem and above, bubbles move beside the image; the composition can widen to 64rem. Horizontal movement belongs inside the strip, not across the whole page.

**Motion: Existing:** panel entry uses a 0.6-second ease-out fade with directional travel up to 3rem or a scale from 0.9. Hiding is enabled only by JavaScript. Reduced-motion rules remove the comic transitions and transforms and make panels visible. New animation, hover scaling, and smooth scrolling must honor the same preference; the comic rules alone do not cover every component.

**Video: Existing:** episode posters reserve a 9:16 slot. Players are inserted when their section approaches the viewport. Playback does not autoplay. Preserve these behaviors when adding episodes.

**Forms: Default:** visible labels, associated field errors, keyboard access, and honest feedback. Keep consent and price information explicit. Do not use countdowns, guilt copy, or loss threats to force an action.

**Responsive composition:** inspect at 320 CSS px, representative tablet and desktop widths, and enlarged text. Keep the fixed side rail from covering content or focus. Wrap long titles and contact details. Do not hide page overflow to disguise a layout defect.

## 10. Website-specific implementation reference: Existing

These paths belong to `todramat-pl`. Other renderers inherit the visual and editorial rules, not a requirement to use Astro or Tailwind.

| Surface | Source | Reuse guidance |
|---|---|---|
| Shared shell | `src/layouts/Layout.astro` | Fonts, metadata, theme initialization, rail, keyboard navigation, footer. |
| Color and theme | `src/theme/tokens.css`, `src/theme/index.ts`, `src/theme/ThemeToggle.astro` | `light-dark()`, `data-theme="jasny\|ciemny"`, storage key `motyw`. |
| Typography and background | `src/styles/globals.css` | Font roles and edge halftone. |
| Comic | `src/scenario/Scenario.astro`, `src/scenario/komiks.css` | Frames, narration, bubbles, responsive layout, and motion. |
| Content | `src/content/scenariusze/`, `src/content/strony.json`, `src/rysowanie/styles.json` | Current public narrative and style definitions. |
| Format selection | `src/piony/Piony.astro` | Two homepage choices, each with a name and one sentence. |
| Style galleries | `src/piony/Gallery.astro`, `src/piony/gallery.ts`, `src/piony/gallery-browser.ts`, `src/piony/gallery.css` | One style and one short explanation at a time. A sticky stage follows ordinary scrolling; Previous/Next buttons provide another way to browse. Kiedy, Po co and Dla kogo tabs separate the advice. Short viewports use a normal article flow; without JS all advice remains readable. |
| Players and direct style links | `src/rysowanie/StylePage.astro`, `src/stream/`, `src/rysowanie/styles.json`, `src/photo-story/styles.json` | Both formats use Cloudflare Stream players loaded on request, with Polish subtitles available in the player. Posters are hosted in Cloudflare Images; videos and posters are not bundled with the site. Leaving a style stops its media. Existing comic URLs open the gallery at that style. No subtitle download links or decorative navigation arrows. |
| Navigation | `src/strony/SideRail.astro`, `src/klawisze/` | Shared page destinations and keyboard behavior. |
| Contact | `src/pages/kontakt.astro`, `src/kontakt/` | Native fields, validation, anti-spam, result handling. |
| Footer and operator | `src/footer/Footer.astro`, `src/legal/` | Current operator identity, legal links, and AI disclosure. |
| Artwork generation | `scripts/panels-generate.ts`, `scripts/og-generate.ts` | Offline generation; reuse exported assets at runtime. |

### Portable website shell: Default

Use this recipe outside the existing component system. Keep the same reading hierarchy and theme roles.

| Element | Starting specification | Adaptation and checks |
|---|---|---|
| Page | 48rem maximum width; 24px horizontal and 64px vertical padding | Keep room for fixed controls; widen only the comic where needed. |
| Identity | 36px semibold heading, mask aligned to its baseline | Existing inline mask uses 0.7em dimensions and a 0.25em gap. |
| Navigation | Compact rail at the right edge; red border and line icons | Give every destination an accessible name; provide a visible current-page cue. |
| Theme control | Sun/moon icon below navigation | Preserve saved choice and readable colors in both themes. |
| Comic | 9:16 image; red frame; text outside the artwork | Mobile stacks; desktop may place bubbles at the sides. |
| Content sections | 64px major separation; 24px below section title | Reduce density by splitting content before reducing type. |
| Footer | Quiet separator, operator and legal links, AI disclosure | Stack at narrow widths; keep text and links readable. |

### Existing implementation example

This reduced example uses the website's existing utilities and Polish copy:

```astro
<section class="mt-16" aria-labelledby="format-heading">
  <h2 id="format-heading" class="mb-6 text-2xl font-semibold tracking-tight">
    Nasze piony
  </h2>
  <a href="/vertical-drama/motion-comic" class="flex flex-col gap-2">
    <h3 class="text-2xl font-semibold text-accent">Comic-motion</h3>
    <p>Komiksowe kadry ożywione ruchem i dialogiem.</p>
  </a>
</section>
```

Use the shared components for actual style grids and cards. Preserve server-rendered narrative text, descriptive alternatives, and lazy media loading. Do not move readable dialogue into a canvas to reproduce the artwork's appearance.

This manual is published verbatim at [todramat.pl/design.md](https://todramat.pl/design.md), served from `docs/design.md`. Edit that source; there is no second editable public copy. Project verification commands remain in `AGENTS.md`.

## 11. Anti-patterns to reject

- Replacing the comic identity with a generic software dashboard or importing Auditmos's cyan, font families, slash labels, and clipped corners.
- Misspelling toDRAMAT, inventing a wordmark master, or redrawing the mask with AI.
- Applying a red tint to every face and scene, or placing dense halftone under reading text.
- Rasterizing web dialogue, shrinking bubbles to fit, or pointing a tail at the wrong speaker.
- Making the whole page scroll sideways or hiding narrative content when JavaScript fails.
- Autoplaying video, adding decorative movement without reduced-motion handling, or covering text with fixed navigation.
- Inventing testimonials, episode availability, partner endorsements, audience figures, or educational outcomes.
- Concealing sponsorship or AI use; presenting commercial pressure as a story cliffhanger.
- Copying an existing component's compact target or faint border without checking the actual output.

## 12. Comparison with representative existing work

| Representative surface | Consistent with this manual | Difference and intended handling |
|---|---|---|
| Homepage | Mask/name, three comic acts, two format choices between acts, warm/dark themes | Keep this narrative sequence; samples appear after choosing Comic-motion or Photo-story. |
| Vision, mission, values | Shared comic renderer, explicit titles, return links | Use their actual dialogue and published commitments; do not infer completed verification from aspirational copy. |
| Style pages | 9:16 films, one style per view, concise guidance for choosing | Six comic styles and five photo styles share a scroll-driven gallery. Keep the complete original guides in source data; show one short answer at a time. Navigation uses the outlined HomeLink button style. |
| Comic renderer | Separate HTML text, responsive bubble positions, reduced-motion rules | These protections cover the comic; check other transitions separately. |
| Contact and rail | Native fields, result messages, persistent navigation and theme toggle | Current 20px icons with 8px padding produce 36px controls; new 44px defaults are not a claim of an existing fix. Inspect focus and overlap. |
| Footer | Operator details, legal links, AI disclosure | Some existing text is 11–12px; new important qualifications should use the larger default scale. |
| OG artwork | Near-black canvas, red/light name, recognizable comic illustration | Generator uses Helvetica/Arial. Use the § 5 families for new editable masters; do not claim old PNGs were regenerated. |
| Future video, print, and tools | Shared palette and typography can transfer | Numeric recipes below are defaults; no complete video or print-template audit is claimed. |

## 13. Remaining dependencies and decisions

| Item | Status | Consequence / safe fallback |
|---|---|---|
| Vector lockups | SVG and PNG versions for light/dark backgrounds are available through `/branding` | Derived from the mask master and bundled Bricolage Grotesque 700 outlines; use the catalog downloads. |
| Founder reference photographs | Not public brand assets | Use existing published illustrations or request authorized production references. |
| New video series treatment | Must be chosen for that series | Start with Frame in § 15; do not assume all existing episodes use it. |
| Numeric production defaults | Proposed for this manual | Inspect actual-size exports and adapt to content. |
| Campaign metrics and testimonials | Require actual evidence and permission | Omit unsupported claims and placeholders. |
| Existing UI accessibility | Selected token and behavior tests exist | A complete browser/assistive-technology audit is not established by this document. |

## 14. Verification checklist for generated work

Check the actual delivered artifact. Mark applicable items verified, failing, not tested, or awaiting an asset/source; a checklist is not itself proof.

- [ ] **Identity:** correct toDRAMAT name, Polish public copy, appropriate audience and truthful authorship.
- [ ] **Assets:** supplied mask, intact proportions, recognizable characters, actual episode/poster references.
- [ ] **Identity surfaces:** browser icon/title, sharing preview, export metadata, and ending cards carry the intended identity.
- [ ] **Hierarchy:** one clear opening subject, readable type, meaningful section order, no unnecessary repeated containers.
- [ ] **Color/themes:** exact role colors, legible text and focus, equivalent hierarchy in light and dark.
- [ ] **Evidence:** metrics and claims have their actual basis, date, permissions, and limitations.
- [ ] **Charts/tables:** comparable scales, explicit units, readable labels, and a text/data equivalent.
- [ ] **Imagery/quotes:** scene continuity, correct speaker mapping, honest AI disclosure, authorized quotations.
- [ ] **Interaction:** keyboard flow, named controls, current state, labels/errors, and truthful success/failure feedback.
- [ ] **Reflow/motion:** narrow layout, enlarged text, unobscured controls, reduced motion, and readable content without animation.
- [ ] **Export/print:** actual-size inspection, embedded or verified fonts, Polish glyphs, page breaks, working links.
- [ ] **Website integration:** shared modules preserved; types, tests, lint, knip, and production build checked when code changes.
- [ ] **Video:** mobile-size typography, reading time, captions, safe placement, and sound-independent comprehension.
- [ ] **Narrative series:** chosen treatment is consistent; logo, captions, and sponsorship do not obscure the story.
- [ ] **Handoff:** state what was verified and any remaining checks; do not call a composition audited because it builds.

Reference structure: [Auditmos design manual](https://auditmos.com/design.md). The visual specifications above derive from toDRAMAT's implementation and published assets, with proposed extensions labeled Default.

## 15. Video appearance: Default

Adapt the identity to motion while preserving the story's own world. These are production starting points for new work, not a description of every currently hosted episode.

### Color and surfaces

Use `surface` for cards, `ink` for main text, `muted` for supporting text, and `accent` for selected emphasis. Picture frames use `panel`. Dialogue uses light `bubble` with dark `bubble-ink` in both themes. Keep skin and hair natural. Story lighting and backgrounds may use other colors when they serve the scene.

### Typography

Use Bricolage Grotesque for titles and Inter for dialogue, captions, labels, and supporting copy. The following sizes are output pixels for 1920 × 1080 landscape or 1080 × 1920 portrait; scale proportionally for other resolutions.

| Role | Landscape | Portrait | Leading / weight |
|---|---|---|---|
| Opening title | 80–96px | 68–80px | 1.1 / 600–700 display |
| Statement or section | 48–56px | 44–52px | 1.25 / 600 display |
| Supporting prose | 36–40px | 40–48px | 1.4 / 400 body |
| Label, attribution, source | 28–32px | 32–36px | 1.4 / 400–600 body |
| Dialogue and captions | 40–48px | 48–56px | 1.3 / 400–600 body |
| Speaker name | 32–36px | 36–40px | 1.3 / 700 body |

### Composition

Give each shot one dominant action. Start portrait compositions with a central story area, 90px left/right margins for critical text, 240px top reserve, and 320px bottom reserve. These are layout defaults, not guaranteed platform-safe regions: platform overlays vary and must be checked on the intended destination. Reserve additional room for the right-side action column when needed.

For landscape cards, start with 120–160px horizontal and 90–120px vertical margins. Recompose for portrait instead of cropping a landscape layout blindly. Keep faces, dialogue, source notes, and platform captions from competing for the same area.

| Slide or scene | Treatment |
|---|---|
| Title | One short title and optional series/episode label. |
| Dialogue | One exchange at a time; clear speaker; at most two caption lines where practical. |
| Explanation | One idea or example; split dense educational material into successive shots. |
| Episode poster | Recognizable scene and readable series/episode identity. |
| Ending | A story hook and, when useful, one explicit destination or next action. |

### Brand elements and overlays

Use the mask and correctly cased name on opening/ending cards where appropriate. A recurring corner mark is optional and must not obscure faces, dialogue, or platform controls. A readable AI or sponsorship notice carries information; a logo cannot replace it. Avoid placing a large repeated identity over every scene.

Captions use a solid or sufficiently opaque backing. Preserve the difference between narrator, dialogue, and production labels. Keep important qualifications readable for their full display time.

### Motion

Start card transitions with 0.3–0.6-second fades. Gentle panel movement may support a reveal or a change of attention; keep reading text stable. Do not use flashing, constant zoom, or shaky camera effects as a default. Allow at least three seconds after a short card has fully appeared, and extend this for longer dialogue or educational content. Check actual reading time at phone playback size.

For web-based motion, provide reduced-motion behavior with complete static content. A rendered video cannot respond to that preference; favor legible cuts and offer captions and an accessible transcript when distributing it.

### Narrative series and motion comics: Default

Choose one treatment for a series and keep it consistent:

| Treatment | Frame | Logo | Story art | Cards |
|---|---|---|---|---|
| **Frame** | Red borders, light dialogue bubbles, theme-aware narration plates | Optional mask on a quiet plate | Natural scene palette and consistent character design | Optional short opening and ending |
| **Full branding** | Same dialogue and frame system | Mask plus toDRAMAT name on cards; optional corner mask | Paper/ink/red guide environments and accents; skin and hair stay natural | Branded opening and ending |

Frame is the default when the narrative needs a broader palette. Full branding is a proposed option for promotional sequences, not a mandate to repaint existing series. Brand-colored surroundings should not imply that the sponsor is part of a scene's factual setting.

#### Resolved colors for renderers without CSS

Resolved directly from the website tokens as inspected on 2026-10-01. Update this table when those tokens change.

| Role | Token | Dark | Light |
|---|---|---|---|
| Canvas | `surface` | `#0b0b0c` | `#f7f3ec` |
| Main text | `ink` | `#f5f5f4` | `#111111` |
| Supporting text | `muted` | `#a8a29e` | `#57534e` |
| Accent | `accent` | `#ef4444` | `#b91c1c` |
| Picture frame | `panel` | `#dc2626` | `#b91c1c` |
| Bubble | `bubble` | `#f5f5f4` | `#ffffff` |
| Bubble text/border | `bubble-ink` | `#0b0b0c` | `#111111` |

Machine-readable form of the same table:

```yaml
video-tokens:
  dark: { canvas: "#0b0b0c", ink: "#f5f5f4", muted: "#a8a29e", accent: "#ef4444", panel: "#dc2626", bubble: "#f5f5f4", bubble-ink: "#0b0b0c" }
  light: { canvas: "#f7f3ec", ink: "#111111", muted: "#57534e", accent: "#b91c1c", panel: "#b91c1c", bubble: "#ffffff", bubble-ink: "#111111" }
```

Use main text on canvas and bubble text on bubble fill for ordinary reading. Red frame colors are not automatically suitable text backgrounds. Verify any new pairing or transparency over scene art instead of assuming the token names guarantee contrast.

#### Fonts for rendered video

Load Bricolage Grotesque and Inter explicitly in the renderer, including the weights and Polish glyphs used in the composition. Do not rely on a machine's fallback font. Inspect the final render for substituted glyphs, clipping, and line breaks. Keep all dialogue editable in the production source even though the distributed video rasterizes it.

#### Logo in vertical video

At 1080 × 1920, start an optional corner mask at **72px visible height** and maintain **0.5H** clear space. On a brand card, start the typographic name near **400px visible width**, adjusting for the actual font and composition. These are output-pixel defaults, not website dimensions.

Use the SVG from § 3. Place the mark inside the destination's usable region, clear of subtitles, account labels, controls, and faces. Preserve the red face and white features; do not dim it into illegibility as a watermark.

#### Sponsorship notice

Make sponsorship visible at first exposure, in the language of the episode. A useful Polish production label is “Materiał sponsorowany · [nazwa partnera]”, with the actual partner name. Include the disclosure in the accompanying post and use the destination's paid-promotion controls where applicable. A logo alone is insufficient information.

AI-assisted artwork also needs a clear disclosure appropriate to the artifact. Do not hide either notice in tiny type or show it only after the story ends. Verify current platform and applicable advertising requirements for each publication; these design defaults do not certify compliance.

## 16. Public brand library

`/branding` is the Polish, public guide and asset library. The structured block below is its content source and the generator's export specification. Change it here rather than maintaining a second guide in components. Color values are read from `src/theme/tokens.css`; mask geometry comes from `public/favicon.svg`. `src/branding/published.json` records only verified Cloudflare Images exports, never hand-authored asset URLs.

One avatar is shared across platforms. Header compositions are separate exports, with conservative text placement for cropping. Social frames are transparent overlays for real episode artwork, not finished episode posters. The SVG lockups added with this library are derived masters using Bricolage Grotesque outlines. Light/dark refers to the intended background, not a change to the mask's red.

YouTube, X and LinkedIn export sizes follow their linked help pages. LinkedIn assets target a company Page: a 400 × 400 logo, 1512 × 256 cover and 1200 × 627 overlay for a post with a link. Facebook's 1702 × 630 export is a 2× production template based on 851 × 315; check the actual Page crop on desktop and mobile before applying it. The 1080 × 1350 and 1080 × 1920 frames are our production formats, not claims of platform minimums or fixed UI safe zones. Platform interfaces can crop or cover different regions.

Workflow: `pnpm brand:generate` builds local exports and favicon compatibility files; `pnpm brand:sync` uploads content-addressed versions to Cloudflare Images and verifies MIME type and dimensions before atomically replacing the published catalog. It requires `CLOUDFLARE_ACCOUNT_ID` and `CLOUDFLARE_API_TOKEN` (Images Edit) in `.env` or the shell. No token is shipped to the website. Do not edit published files in the Cloudflare dashboard. Keep previous IDs for rollback; the catalog selects the current version. The website's download endpoint accepts catalog filenames only and requests PNG/SVG from the public image delivery URL. ICO remains a local browser compatibility export because Images does not support ICO.

<!-- branding:start -->
```json
{
  "version": "1.1",
  "tagline": "Polskie historie w pionie.",
  "intro": "Jedna maska. Wiele historii. Tutaj znajdziesz aktualne znaki, kolory i pliki toDRAMAT wraz z zasadami ich użycia.",
  "meaning": "Czerwona maska z półuśmiechem to nasz wizualny młotek. Łączy emocje pionowych historii z dystansem ukrytym w nazwie „to dramat”. Rozpoznawalność budujemy przez powtarzanie tego samego znaku, bez zmieniania jego miny.",
  "rules": [
    { "title": "Sama maska", "text": "Używaj jej jako avatara, favicony lub krótkiego podpisu na materiale, gdy nazwa toDRAMAT jest już widoczna albo odbiorca zna kontekst." },
    { "title": "Maska z nazwą", "text": "Wybierz pełne logo przy pierwszym kontakcie: na bannerze, planszy tytułowej, prezentacji, stronie partnera lub w informacji o projekcie. Zachowaj zapis toDRAMAT." },
    { "title": "Daj znakowi oddech", "text": "Wokół samodzielnego znaku zostaw wolną przestrzeń równą co najmniej połowie jego widocznej wysokości. Avatary i małe ikony korzystają z gotowych, ciaśniejszych kompozycji." },
    { "title": "Dobierz rozmiar", "text": "Na ekranie zacznij od 24 px widocznej wysokości maski, a w druku od 6 mm. Favicona ma osobne eksporty 16, 32 i 48 px. Jeśli nazwa przestaje być czytelna, użyj samej maski." },
    { "title": "W filmie", "text": "Pełne logo umieść na planszy otwierającej lub końcowej. Mała maska w rogu jest opcjonalna: nie zasłania twarzy, napisów ani kontrolek aplikacji. Przy 1080 × 1920 zacznij od 72 px wysokości znaku i sprawdź podgląd na telefonie." },
    { "title": "W materiałach partnera", "text": "Użyj gotowego pliku na spokojnym tle. Przy współpracy pokaż obie marki z oddechem; nie łącz ich w nowy znak. Oznaczenia sponsorowania i AI pozostają oddzielną, czytelną informacją." }
  ],
  "avoid": ["Nie rozciągaj ani nie obracaj maski.", "Nie zmieniaj półuśmiechu i nie dodawaj brwi.", "Nie zmieniaj czerwieni maski ani bieli oczu i ust.", "Nie dodawaj cieni, gradientów, obrysu ani efektu 3D.", "Nie umieszczaj logo bezpośrednio na zatłoczonym kadrze.", "Nie sugeruj współpracy lub poparcia marki bez uzgodnienia."],
  "fonts": [
    { "name": "Bricolage Grotesque", "role": "Nazwa marki i nagłówki", "sample": "toDRAMAT. Ciąg dalszy nastąpi.", "url": "https://fonts.google.com/specimen/Bricolage+Grotesque" },
    { "name": "Inter", "role": "Tekst, podpisy i dialogi", "sample": "Polskie historie. Znajome emocje. Jeszcze jeden odcinek.", "url": "https://fonts.google.com/specimen/Inter" }
  ],
  "assets": [
    { "id": "maska", "name": "Maska z półuśmiechem", "kind": "mask", "width": 1280, "height": 1280, "formats": ["svg", "png"], "channels": ["Podstawowe"], "usage": "Samodzielny znak na przezroczystym tle. Do małych podpisów i własnych kompozycji." },
    { "id": "logo-jasne-tlo", "name": "Logo na jasne tło", "kind": "lockup-light", "width": 1600, "height": 400, "formats": ["svg", "png"], "channels": ["Podstawowe"], "usage": "Maska i nazwa w ciemnym kolorze. Przezroczyste tło; umieść na bieli lub ciepłym papierze." },
    { "id": "logo-ciemne-tlo", "name": "Logo na ciemne tło", "kind": "lockup-dark", "width": 1600, "height": 400, "formats": ["svg", "png"], "channels": ["Podstawowe"], "usage": "Maska i jasna nazwa. Przezroczyste tło; umieść na czerni lub spokojnym ciemnym polu." },
    { "id": "avatar", "name": "Wspólny avatar", "kind": "avatar", "width": 1080, "height": 1080, "formats": ["png"], "channels": ["YouTube", "Facebook", "Instagram", "TikTok"], "usage": "Ten sam avatar na wszystkich kanałach. Ciepłe tło i margines dla okrągłego kadrowania. Wgraj cały kwadrat, bez dodatkowego przybliżenia." },
    { "id": "avatar-x", "name": "Avatar X", "kind": "avatar", "width": 400, "height": 400, "formats": ["png"], "channels": ["X"], "usage": "Ta sama kompozycja w rozmiarze 400 × 400. Wgraj jako zdjęcie profilowe." },
    { "id": "youtube-banner", "name": "Banner kanału YouTube", "kind": "youtube", "width": 2560, "height": 1440, "formats": ["png"], "channels": ["YouTube"], "usage": "Logo i tekst mieszczą się w środkowym obszarze 1544 × 420 px. Sprawdź kadrowanie TV, komputera i telefonu w YouTube Studio." },
    { "id": "youtube-watermark", "name": "Znak wodny YouTube", "kind": "mask", "width": 150, "height": 150, "formats": ["png"], "channels": ["YouTube"], "usage": "Przezroczysta maska do ustawienia znaku wodnego filmu w YouTube Studio." },
    { "id": "x-header", "name": "Header X", "kind": "header", "width": 1500, "height": 500, "formats": ["png"], "channels": ["X"], "usage": "Gotowe tło profilu. Ważne elementy są odsunięte od brzegów i miejsca avatara; sprawdź podgląd po wgraniu." },
    { "id": "facebook-cover", "name": "Zdjęcie w tle Facebook", "kind": "header", "width": 1702, "height": 630, "formats": ["png"], "channels": ["Facebook"], "usage": "Eksport 2× względem 851 × 315. Kadrowanie strony różni się na telefonie i komputerze. Ustaw je po wgraniu." },
    { "id": "avatar-linkedin", "name": "Avatar LinkedIn", "kind": "avatar", "width": 400, "height": 400, "formats": ["png"], "channels": ["LinkedIn"], "usage": "Wspólna kompozycja avatara w rozmiarze logo strony firmowej LinkedIn. Wgraj cały kwadrat jako logo strony." },
    { "id": "linkedin-cover", "name": "Zdjęcie w tle LinkedIn", "kind": "header", "width": 1512, "height": 256, "formats": ["png"], "channels": ["LinkedIn"], "usage": "Tło strony firmowej LinkedIn. Logo i tekst są odsunięte od brzegów. Sprawdź kadrowanie na telefonie i komputerze; profil osobisty używa innych proporcji." },
    { "id": "linkedin-post", "name": "Rama do posta LinkedIn", "kind": "post-frame", "width": 1200, "height": 627, "formats": ["png"], "channels": ["LinkedIn"], "usage": "Przezroczysta nakładka do grafiki posta z linkiem. Połóż ją nad kadrem i dodaj tytuł w wolnym obszarze. Przed publikacją wyeksportuj całą kompozycję." },
    { "id": "rama-post", "name": "Rama do posta", "kind": "post-frame", "width": 1080, "height": 1350, "formats": ["png"], "channels": ["Instagram", "Facebook"], "usage": "Przezroczysta nakładka 4:5. Połóż ją nad własnym kadrem, a tytuł i dialog dodaj w wolnym obszarze." },
    { "id": "rama-pion", "name": "Rama do Stories i pionowych filmów", "kind": "vertical-frame", "width": 1080, "height": 1920, "formats": ["png"], "channels": ["Instagram", "TikTok", "YouTube"], "usage": "Przezroczysta nakładka 9:16 do montażu. Przed publikacją sprawdź napisy, prawą kolumnę kontrolek i dół ekranu." },
    { "id": "plansza-pion", "name": "Pionowa plansza marki", "kind": "vertical-card", "width": 1080, "height": 1920, "formats": ["png"], "channels": ["Instagram", "TikTok", "YouTube"], "usage": "Plansza 9:16 do zakończenia filmu lub przedstawienia marki. Okładkę konkretnego odcinka buduj z jego kadru i tytułu." }
  ],
  "sources": [
    { "name": "YouTube: banner i avatar", "url": "https://support.google.com/youtube/answer/12950272?hl=en" },
    { "name": "YouTube: kadrowanie bannera i znak wodny", "url": "https://support.google.com/youtube/answer/10456525?hl=en" },
    { "name": "X: wymiary profilu", "url": "https://help.x.com/en/managing-your-account/how-to-customize-your-profile" },
    { "name": "LinkedIn: logo, tło strony firmowej i post z linkiem", "url": "https://www.linkedin.com/help/lms/answer/a563309" },
    { "name": "Facebook: zdjęcie profilowe i tło strony", "url": "https://www.facebook.com/help/125379114252045" }
  ]
}
```
<!-- branding:end -->

## Realizations and topic channels

The shared layout includes a sticky header with one primary link, “Realizacje”, always without an arrow. Topic channels link back to the main portfolio. Anchor and gallery offsets account for the header; it must not cover content or controls. Existing side navigation remains available.

Portfolio and channel pages keep toDRAMAT typography, palette, panels and theme support. A series' film and supplied artwork retain the commissioned brand identity. The Auditmos series uses an explicit production/sponsor disclosure and acknowledges that toDRAMAT is an Auditmos project. This treatment does not transfer Auditmos branding to the whole security channel.

Episode pages prioritize one video, a descriptive heading, accessible Polish captions and an HTML transcript. Series pages open with a cover, the series title, metadata and an “Oglądaj od początku” action. Episodes form a numbered list with a landscape scene thumbnail, visible play icon, short title, synopsis and duration. On small screens each episode remains a compact row. Scene thumbnails may crop the supplied art; video content and branding remain intact. Production credits use labeled fields, with full details below the episode list and a sponsor credit visible in the hero. Social previews are landscape compositions derived from each episode's thumbnail. Product decisions and publishing workflow: [Realizacje](realizacje.md).

Across the portfolio, topic catalogues, series and episode pages, contact uses the shared secondary outlined button “Porozmawiajmy o Twojej serii”. Portfolio cards group “Zobacz serię”, “Wszystkie serie” and contact inside the card; topic cards group “Zobacz serię” and contact. Series pages place contact after production details, and episode pages beside “Wszystkie odcinki”. Catalogue and episode navigation actions use secondary outlined buttons, wrapping naturally on narrow screens. Underlined inline links are reserved for contextual references such as sponsor credits and breadcrumbs, not standalone calls to action.