# Digital Agency — Brand Manual

Version 0.1 · Website-derived baseline · 4 October 2026

This manual is the shared reference for the agency website, future products, and communications. It captures the current website's visual identity and gives practical guidance for applying it elsewhere.

The baseline comes from the clean `agency-web` checkout at commit [`88e4e2e`](https://github.com/your-digitalagency/agency-web/tree/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0). Website measurements below describe that implementation. Guidance for other products is an adaptation of those patterns, rather than evidence that those products already exist.

## 1. Brand character

The agency connects design, technology, and communication. Its website presents three connected services: **Weby & aplikace**, **Značka & obsah**, and **Sociální sítě & kampaně**.

The visual character is cinematic, expressive, and precise: large typography and rich imagery carry the message; navigation, borders, and controls remain quiet. Warm light surfaces alternate with deep dark sections. Magenta provides a recognizable point of energy.

Carry these principles into each touchpoint:

- Give one message or action a clear visual lead.
- Use generous space and strong typographic hierarchy.
- Let imagery and purposeful motion express ideas, progress, and growth.
- Keep controls simple and easy to recognize.
- Make the result usable before adding decoration.

## 2. Name and logo

Use **Digital agency** in prose. The website wordmark is **digital agency.**, lowercase with a final period. The header stacks `digital` above `agency.`; the footer uses a single line.

**Approved logo rule — 4 October 2026:** the final dot is always **magenta `#ff00c8` (`--accent`)**, on every surface and in every logo use. Letters may be white on dark surfaces or near-black on light surfaces; the dot keeps its magenta color in stacked and single-line wordmarks, headers, footers, assets, and future products. Do not let the dot inherit the letters' color, including on hover or focus.

For an HTML wordmark, keep the period in the text and wrap it in `<span class="brand-dot">.</span>`, with `.brand-dot { color: var(--accent); }`. Exported vector or raster wordmarks must retain the same magenta dot. This rule applies to logo treatments; ordinary punctuation in prose follows the text color.

| Asset | Current website use | Construction |
| --- | --- | --- |
| [Agency mark](assets/agency-mark.svg) | Header mark, section labels, discipline separators and animation | Open corner frame with a northeast arrow; 32 × 32 viewBox, 3-unit strokes, `currentColor` |
| [Digital agency logo](assets/digital-agency-logo.svg) | Favicon and structured-data organization logo | Filled corner frame and cursor; 64 × 64 viewBox, magenta fill |

These are two distinct existing variants. Use the arrow mark when reproducing the visible website identity; keep the cursor variant for its documented uses until a logo consolidation is agreed.

The header combines a magenta mark with white letters and a magenta final dot: mark **34 × 34px**, gap **12px**, text **23px / 700**, tracking **−1px**, line height **0.92**. At widths up to 640px, the mark is **28 × 28px** and the text is **20px**. The footer wordmark has near-black letters and a magenta dot, **20px / 700**, tracking **−1px**, or **18px** on mobile.

The copied SVG files preserve the website originals. The arrow SVG inherits color when embedded inline; an SVG loaded through an image element does not inherit its host's CSS color. The website also uses the file as a CSS mask with a magenta background.

Preserve proportions, geometry, and the wordmark spelling. Avoid stretching, shadows, outlines, or placing the mark over a busy image without a clear area. Print minimum sizes and formal clear-space measurements have not yet been defined; the website dimensions above are references, not print specifications.

## 3. Color

Use the following digital sRGB colors. [tokens.css](tokens.css) contains the reusable definitions.

| Token | Value | Role |
| --- | --- | --- |
| `--ink` | `#111111` | Main text on light surfaces; dark section background |
| `--paper` | `#f5f5f2` | Warm off-white page and section background |
| `--white` | `#ffffff` | White services surface; text on dark surfaces |
| `--muted` | `#777774` | Secondary phrases in large light-surface headings |
| `--line` | `#d9d9d4` | Quiet separators and light-surface control borders |
| `--accent` | `#ff00c8` | Brand mark, logo dot, title dot, decoration, filled actions and focus ring |
| `--accent-text` | `#c20099` | Small accent text and links on light surfaces |
| `--accent-hover` | `#e500b4` | Hover background for the main filled action |

Additional existing text colors are **`#62625e`** for supporting copy on light surfaces, **`#aaaaaa`** for supporting copy on dark surfaces, and **`#999992`** for muted dark-surface heading phrases. The token file names these `--body-text`, `--dark-body-text`, and `--dark-muted`; those names are introduced here for colors currently written inline in the website CSS.

Use magenta deliberately for identity, actions, and selected details. Keep the surrounding interface neutral. Image colors and muted decorative greens, pinks, and lilacs are artwork colors; they do not create additional interactive accents or status meanings.

### Text contrast

Choose color pairs for the actual text size. Normal text needs at least **4.5:1** contrast; large text needs **3:1**. Large means at least **24 CSS pixels**, or approximately **18.67 CSS pixels when bold**. See [W3C's contrast guidance](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html).

The following ratios were calculated from the solid source colors, without transparency or imagery; displayed ratios are rounded.

| Pair | Ratio | Use |
| --- | --- | --- |
| Accent text `#c20099` on paper | 5.12:1 | Small links and labels |
| Supporting text `#62625e` on paper | 5.61:1 | Body copy |
| Ink on magenta | 5.47:1 | Contrast reference; filled actions use white labels |
| White on magenta | 3.45:1 | Large text only; the website CTA uses 22px bold, 20px bold on mobile |
| White on accent hover | 4.21:1 | Large text only |
| Muted `#777774` on paper | 4.11:1 | Large heading phrases; avoid for small body text |

Use **white labels on filled magenta buttons**, following the owner's preference recorded on 4 October 2026. Keep labels at least **20px / 700** so they meet the large-text contrast requirement on both the accent and hover fills. If a control requires smaller text, use a darker magenta fill that provides at least 4.5:1 contrast with white. Check text over imagery against the actual frame and overlay. These pairing checks are not a complete accessibility audit.

## 4. Typography

The website uses installed fonts, with no downloaded font files or `@font-face` definitions:

```css
font-family: Arial, Helvetica, system-ui, sans-serif;
font-synthesis: none;
```

Use this sans-serif stack for headings, body copy, labels, and controls. Use **`monospace`** for editorial section labels, service numbers, chapter indicators, and captions. The specific monospace face depends on the platform.

The website requests **500** for display headings and **700** for the wordmark and primary CTA. Body copy uses the normal weight. A requested 500 does not imply that a separate Medium font file is provided; rendering depends on the installed font.

### Website type reference

| Role | Size | Line height | Tracking / weight |
| --- | --- | --- | --- |
| Hero headline | `clamp(76px, 10.6vw, 192px)` | `0.89` | `−0.075em` / 500 |
| Section headline | `clamp(45px, 5.8vw, 104px)` | `1.02` | `−0.065em` / 500 |
| Dark approach headline | `clamp(42px, 4.5vw, 80px)` | `1.02` | `−0.065em` / 500 |
| Contact headline | `clamp(60px, 9vw, 165px)` | `1` | `−0.075em` / 500 |
| Service title | `clamp(27px, 3vw, 46px)` | Inherited normal | `−0.055em` / 500 |
| Lead paragraph | `clamp(21px, 2vw, 29px)` | `1.35` | `−0.025em` / normal |
| Supporting paragraph | 14–15px | `1.6–1.7` | Normal |
| Section eyebrow | 10px monospace | Inherited normal | `1.4px` / normal |
| Main CTA | 22px | `1.2` | Normal tracking / 700 |

Headings often split into two short lines; the second phrase may use muted color. Tight tracking belongs to large display text, not dense paragraphs. The hero's small magenta dot is a decorative signature, sized at **0.12em** and fully round.

At widths up to **1000px**, the hero becomes `clamp(80px, 12vw, 125px)`. At widths up to **640px**, the main sizes are:

- Hero: `clamp(66px, 15vw, 95px)`.
- Section heading: `clamp(40px, 10vw, 62px)`.
- Approach heading: `clamp(37px, 9vw, 55px)`.
- Contact heading: `clamp(49px, 12vw, 76px)`.
- Lead: 22px; service title: 27px; CTA: 20px.

The final short-viewport rule, at heights up to **600px**, overrides the hero size with `clamp(48px, 8.5vw, 90px)`.

For product interfaces, retain the stack and hierarchy, but choose comfortable reading sizes for the task. The website's 9–10px editorial labels and oversized headlines are not a universal product type scale.

## 5. Layout and surfaces

The website uses full-width sections with a shared responsive horizontal gutter:

```css
--gutter: clamp(24px, 4.4vw, 88px);
```

Desktop sections use **100px top / 110px bottom** padding. At widths of at least **1700px**, both become **140px**. At widths up to **640px**, the shared section padding becomes **70px** vertically. The contact section has a desktop bottom-padding override of **90px**.

| Pattern | Website reference |
| --- | --- |
| Intro grid | `1.25fr 1fr`, gap `7vw`; supporting copy capped at 470px |
| Approach grid | `1.15fr 1fr`, gap `6vw` |
| Service row | `50px 150px 1fr 60px`, gap 40px, 48px vertical padding |
| Mobile service row | `24px 1fr 44px`, gap 12px, 32px vertical padding; symbol hidden |
| Section label to content | 84px gap on desktop; 48px on mobile |
| Image study | Rectangular 4:5 crop; square on mobile |

At widths up to **1000px**, grids tighten. At widths up to **640px**, intro and approach stack into one column, desktop navigation and secondary micro-labels hide, and decoration is reduced. The mobile media selection threshold is separately **767px**; it is not the layout breakpoint.

Surfaces are mostly flat. Use whitespace and **1px** rules to separate content. Keep editorial imagery rectangular. Reserve circular shapes for arrow controls and pill shapes for the strongest CTA; avoid applying large rounded cards or shadows to every region.

For future products, preserve this hierarchy and restraint while adapting gutters and density to the content. Do not copy the marketing site's large section spacing into a table, form, or dashboard by default.

## 6. UI patterns

| Element | Base treatment | Interaction / adaptation |
| --- | --- | --- |
| Header navigation | 13px white text over shaded media; 35px gap; minimum 44px link height | Thin white underline grows on hover in 0.3s; 20px gap at the intermediate breakpoint |
| Text link | 13px `--accent-text`, arrow, 35px gap; minimum 44px height | Use descriptive text; preserve visible keyboard focus |
| Hero arrow link | 56px circular outline; white arrow | Magenta fill, ink foreground and 10° rotation on hover; 48px mobile, 44px in short viewports |
| Service arrow link | 56px circle, 1px line border, accent-text arrow | Magenta fill, ink foreground and 10° rotation on hover; 44px mobile |
| Main contact CTA | Magenta pill, white 22px bold label, arrow; padding 23px 30px; 50px radius; minimum 60px height | Hover uses accent-hover; mobile uses 20px bold and padding 18px 24px; see contrast guidance before reducing type size |
| Service list | Number, geometric symbol, heading, description, plain tags and arrow; thin row divider | Tags are plain text with magenta slash prefixes, not button chips |
| Section eyebrow | Uppercase monospace label, darker magenta text on light surfaces, 14px magenta mark | On dark surfaces, the label uses vivid magenta |
| Focus state | 3px solid magenta outline with 6px offset | Applies to links and buttons; keep the indicator visible and unclipped |

Arrows such as **↗**, **↘**, and **↑** are recurring directional cues. An arrow-only action needs an accessible name explaining its destination or purpose. Decorative arrows and illustrations are hidden from assistive technology.

There is no website baseline for forms, alerts, tables, disabled controls, or validation states. Add those when a product needs them, using the same typography and neutral surfaces. Define success, warning, and error meanings explicitly; magenta is the brand accent, not an established status system.

## 7. Imagery and illustration

Use immersive imagery that suggests transformation, ideas, and movement. The current hero is a cinematic rocky landscape with suspended fragments; the detail image uses folded botanical forms in green, pink, and turquoise.

![Current website hero imagery](assets/hero-poster.webp)

![Current website detail imagery](assets/motion-detail.jpg)

These are unchanged reference images from the website. The hero and study use centered **`object-fit: cover`** crops. Preview each crop at its intended aspect ratio instead of relying on the uncropped source.

The hero places white content over a darkening gradient: `#00000080` at 0%, `#00000073` at 32%, `#00000040` at 55%, and `#000000bd` at 100%. Keep headline and control areas legible throughout moving footage.

Illustrations extend the same language:

- Services: stacked web frames, rotated squares, and overlapping circles; 1.5px strokes, one magenta layer.
- Intro: lightbulb, upward arrow, cursor, and connected nodes.
- Approach: decorative stems, folded leaves, and flowers.
- Contact: simplified envelopes and an @ symbol.

Keep background illustrations faint, behind the content, and non-interactive. Their muted greens, blues, pinks, and lilacs support the artwork; foreground actions remain magenta. The garden uses three existing artwork palettes: `#68aaa0 / #e6a0ce / #d4dfa6`, `#91b9a0 / #bd9ed9 / #f0c6d9`, and `#79b4bb / #ed99bd / #dbe7be`.

Media ownership and permissions for uses beyond the current project are not recorded in the website repository. Record that information before treating these reference images or the video as generally licensed brand assets.

## 8. Motion

Motion communicates **idea → reality** and growth. It supports the content rather than being required to understand or access it.

The current website has a sticky fullscreen hero. With motion enabled, its scroll section spans **250svh** on desktop or **220svh** on mobile; the stage remains **100svh**. The muted video loops independently of scrolling. Scroll changes headline opacity, position, and the media scale; chapter progress follows video playback.

Lower content reveals use **0.85s** opacity and upward-position transitions from **30px**, with easing `cubic-bezier(0.2, 0.7, 0.2, 1)` for position. Arrow controls transition in **0.2–0.25s**. The study image scales to **1.04** on hover over **1s**.

Preserve the existing behavior when adapting motion:

- Offer a labeled pause/play control. Pause freezes the current video frame and scroll-driven artwork.
- Respect reduced-motion preferences: show the poster and readable static content, and do not request video until motion is explicitly enabled.
- Pause media offscreen and when the browser tab is hidden.
- Keep content available without JavaScript and when media fails.
- Reduce decorative density on mobile; load the appropriate mobile media rather than downloading both sizes.
- Disable CSS transitions and smooth scrolling for reduced motion.

Long scroll sequences are a marketing-page pattern. Use brief feedback and static content in task-focused product interfaces.

## 9. Voice and language

Czech is the website's primary language. Its voice is direct, inviting, and focused on what people can create and achieve. Use short sentences, concrete verbs, and clear next steps. Address the visitor respectfully with `váš` / `vaše`, and use collaborative `pojďme` for invitations.

Existing copy provides the reference:

| Purpose | Website example |
| --- | --- |
| Main message | „Digitál, který žije.“ |
| Service promise | „Tvoříme weby, značky a digitální zážitky. Pro lidi. Pro váš další krok.“ |
| Connected offering | „Jeden tým. Celý váš digitál.“ |
| Approach | „Odvaha tvořit. Důraz na výsledek.“ |
| Contact | „Máte nápad? Dejme mu tvar.“ |
| Action | „Pojďme si napsat“ |
| Closing signature | „Design. Technologie. Lidé.“ |

Use uppercase sparingly for small editorial labels. Keep normal copy in sentence case, preserve Czech diacritics, and use concise descriptive action labels. For English products, carry the same clarity and warmth; approved English taglines have not yet been defined.

## 10. Applying and maintaining the manual

Start with these shared foundations: the name and mark, sans-serif stack, neutral surfaces, magenta identity, clear hierarchy, quiet controls, and accessible interactions. Adapt component sizes and spacing to the product's task.

Before handing off a design, check that:

- The logo variant and color match the intended use.
- Text remains readable at mobile widths, with zoom, and over imagery.
- Interactive elements have visible focus and at least a 44px target where applicable.
- Color pairs suit the text size, including hover states.
- Motion can be paused, reduced, or omitted while content remains available.
- Copy follows the agency voice and clearly describes each action.

This manual is the shared baseline from this version onward. Website source links record its origin, rather than automatically overriding future decisions here. Update the manual, tokens, and affected assets together when the shared brand changes, then align consuming products. Record deliberate exceptions with their reason and scope.

Still to define as the agency develops: final logo variant policy, print specifications, media rights, product state colors and form patterns, and approved English messaging.

The magenta final-dot rule above is approved and applies across all logo variants; the remaining variant policy is still open.

## Source references

All website references are pinned to the baseline commit:

- [Global styles: colors, fonts, components, responsive rules](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/src/styles/global.css)
- [Homepage: identity, content, imagery, markup](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/src/pages/index.astro)
- [Motion controller and fallback behavior](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/src/scripts/scroll-experience.ts)
- [Garden geometry and artwork palettes](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/src/lib/garden-geometry.ts)
- [Original arrow mark](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/public/assets/agency-mark.svg) and [cursor logo](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/public/assets/digital-agency-logo.svg)
- [Website overview and media descriptions](https://github.com/your-digitalagency/agency-web/blob/88e4e2e38fc77918bcf39ca3457bb1cd697fc8f0/README.md)

The website README records the removal of its earlier `DESIGN.md`. Its remaining `AGENTS.md` still mentions an older Action Blue direction; that instruction was not used as visual evidence for this website-derived manual. The baseline here documents the current magenta implementation.