**Dry Ice** is the parent brand; **Dry Ice Technology**, **Dry Ice Cleaning** and **Dry Ice Partners** are its divisions. The business is cleaning surfaces with dry ice and producing dry ice ("čištění povrchů suchým ledem a výroba suchého ledu"), with Partners covering machine rental and sales, consumables, service and spare parts. The identity is two colours, one pixel idea and one typeface: **Blue Whale** and **Ocean Green**, a cluster of square pixels that dissolves the way dry ice sublimates, and **Aktiv Grotesk** for every headline and every line you read.
Use the tokens by name (`ink`, `surface`, `accent`…) through `tokens.css`; never paste hex values except where this book quotes the brand's print specs.
## Brand architecture
- **Parent — `Logo` `lockup="plain"` `layout="stacked"` `colorway="full"`** (file `dryice-plain-stacked-full.svg`). This is the main logo: website header and footer, app login, group-level documents, social profiles, signage, anything that speaks for the whole company. Use `plain` horizontal only where the stacked mark can't fit (app top bar, email signature line).
- **Divisions** — `technology`, `cleaning`, `partners`. A division lockup appears only on that division's own material (its offers, vehicles, stickers, invoices, landing page). It never replaces the parent on group-level surfaces, and two division lockups never sit side by side as equals — show the parent, then name the divisions in text.
- All three division lockups share one construction: the parent wordmark with the division name set beneath it in Rointech capitals (the face the wordmark was drawn from; logo artwork only) at fixed size and spacing, centred (stacked) or aligned to the wordmark's left edge (horizontal). A future division follows the same rule — don't draw new marks.
## Content fundamentals
- **Write in Czech first**, formally: *vykání* with capitalised pronouns — "Rádi Vám představíme tuto technologii osobně a předvedeme její využití přímo ve Vaší společnosti." English or German versions follow the Czech, never replace it.
- **Lead with the benefit, prove it with the process.** The letterhead is the model: a one-line introduction, a question as heading ("Proč zvolit čištění suchým ledem?", "Jak probíhá výroba a využití suchého ledu?"), three benefit lines, then the technical explanation.
- **Benefit lines are noun phrases without full stops**, three to five per list, set with `BulletList`:
- Efektivní a důkladné čištění bez abrazivního působení
- Ekologické řešení bez použití chemikálií
- Minimální dopad na okolní prostředí
- **Be factual and calm, in an enterprise register.** Technical terms are fine (sublimace, CO₂, pelety, tlaková nádrž) — explain them once in plain words. No superlatives, no exclamation marks, no emoji.
- **Naming:** the brand on its own is "Dry Ice"; divisions are "Dry Ice Technology", "Dry Ice Cleaning", "Dry Ice Partners". In legal lines use the entity exactly as registered on that document (e.g. "Dry Ice Technology s.r.o." on the letterhead). The joined, all-caps "DRYICE" belongs to the logo — don't type it in sentences.
- **Casing:** sentence case everywhere — headlines, headings, buttons, labels. The only capitals in running type are eyebrows: write them in sentence case and let `text-transform: uppercase` set them.
- **Czech formats:** 14. 10. 2026 · 12 500,50 Kč · 240 kg · +420 720 940 022 (non-breaking spaces inside numbers, before units and after single-letter prepositions: "v Sokolově", "s námi").
- **Sign-off** as on the letterhead: "S úctou," then name in Bold, company on the next line.
## Visual foundations
### Colour
Two brand colours, from *Barevná paleta*:
| Token | HEX | RGB | CMYK | Pantone | Role |
| --- | --- | --- | --- | --- | --- |
| `blue-whale` | #002845 | 0 / 40 / 69 | 100 / 20 / 0 / 85 | 303 C · 5463 U | "DRY", text on paper, dark grounds |
| `ocean-green` | #289F6D | 40 / 159 / 109 | 80 / 15 / 75 / 0 | 2417 C · 7482 U | "ICE", the pixel mark, colour fields |
- Build every surface from these two plus white. Blue Whale carries text and the dark applications (business-card back, folder cover, Cleaning van); Ocean Green is the energy (letterhead band, green card back, Technology van) as full-bleed fields.
- **Ocean Green is a field colour, not a text colour.** It sits between light and dark, so neither navy nor white small text reads well on it, and it is too light as text on white. Two working shades carry small text: `ocean-green-700` (deep, white text on it, or green text on paper) and `ocean-green-300` (light, green text on blue-whale, or blue-whale text on it).
- Tints exist only for the pixel dissolve: `ocean-green-60`, `ocean-green-25` (from the vehicle livery). `logo-gray` is only for the grayscale logo.
- In UI use the semantic tokens: `surface` / `surface-alt` / `surface-raised` grounds, `ink` / `ink-muted` text, `line` hairlines, `line-strong` control borders, `primary` + `on-primary` for the main action, `accent-strong` + `on-accent-strong` for green buttons and chips, `accent` for green fields without small text, `accent-text` for green words and links, `focus` for the focus ring, and the status pairs `success`, `warning`, `danger`, `info` with their `-soft` grounds.
- **Themes.** `light` is paper: white ground, blue-whale text, deep-green accents. `dark` ("Blue Whale") puts the brand's own blue-whale on the ground with white text; `primary` and `accent-strong` become `ocean-green-300` with a blue-whale label, and the logo switches to its `white` colourway.
### Contrast
Every text pair is checked in both themes against WCAG 2.2 AA (4.5:1 text, 3:1 large text and UI) **and** APCA (Lc 75 body text, Lc 60 labels, links and secondary text, Lc 45 large text). Rules that follow from it:
- No text under 24px on `ocean-green`. Blue-whale on Ocean Green passes WCAG at 4.51:1 but reads at only APCA Lc 39 — muddy at button size; white on it is 3.35:1, large text only.
- The green button is `accent-strong`: `ocean-green-700` with a white label (5.9:1, Lc 84) in light, `ocean-green-300` with a blue-whale label (8.1:1, Lc 65) in Blue Whale.
- Green on blue-whale grounds (eyebrows, column heads, links) is `ocean-green-300` (8.1:1), never Ocean Green.
- The printed letterhead footer sets small white text on Ocean Green; on screen the green band is `ocean-green-700` (`InfoBand`). The printed version stays a print-only choice.
- Focus is a solid 2px `focus` outline (5.2:1+ on every surface). Disabled controls (45 % opacity) are exempt.
### Typography
- **One family: Aktiv Grotesk** (Dalton Maag), served by the Adobe Fonts kit `uuw6roa`, for headings and text alike. A neutral, engineered grotesque in the enterprise register, with the open, straight-sided shapes of the wordmark. Rointech stays what it was: the face the wordmark and the division descriptors were drawn from — logo artwork only, never typed.
- **Weights in the kit:** Regular 400 and Italic for `body-l`, `body`, `body-s`, `caption`; Bold 700 and Bold Italic for `display-xl` → `display-m`, `h1`–`h4`, `label`, `eyebrow`, buttons and badges. Those two weights are the whole system — no Thin, Light or Black. The kit has no Medium or SemiBold: a 500 renders as Regular and a 600 as Bold, so every token uses 400 or 700. For a softer label weight, add Medium to the kit and move `label` to 500.
- **Tracking:** display and headings are tightened (−0.025em at 64px, easing to −0.005em at 22px); text sits at 0; eyebrows are capitals tracked +0.14em.
- **Figures:** Aktiv's default figures are equal-width. Where columns must align (tables, invoices, order lists) add `font-variant-numeric: tabular-nums`, so the fallback faces align too.
- Text colour is `ink` (blue-whale on paper), never pure black.
**Loading.** Put the kit before the system's CSS:
```html
```
The kit declares `aktiv-grotesk` (400, 400 italic, 700, 700 italic), which `--font-sans` names first. It also carries `aktiv-grotesk-thin`, which the system doesn't use — you can remove it from the web project. Adobe Fonts serves the font files from Adobe's servers under the kit's licence — don't download or self-host them. This system ships only the fallbacks. Previews on this page can't reach use.typekit.net, so their live text shows the fallback chain; **Typeface** (Components → Foundations) shows the real face as images and overlays the fallbacks on it.
**The fallback chain.** `--font-sans` is `"aktiv-grotesk", "Instrument Sans", "Inter", "Aktiv Grotesk Fallback", "Helvetica Neue", Arial, sans-serif`. The browser falls back letter by letter, so each step also fills characters the step before it lacks.
| Step | Face | Why |
| --- | --- | --- |
| 1 | Aktiv Grotesk — Adobe kit | the brand face |
| 2 | Instrument Sans — variable 400–700 with italics, `fonts/`, SIL OFL | The closest free match: cap height and x-height within 1.5 % of Aktiv, line widths within 1 % in Regular and Bold, the same single-storey g and straight-tailed y. Latin only, incl. Central and Western European. |
| 3 | Inter — variable 400–700 with italics, `fonts/`, SIL OFL | Cyrillic, Greek and Vietnamese, which Instrument Sans lacks. Its widths run a few percent off Aktiv's, so it stays behind Instrument Sans for Latin. |
| 4 | Aktiv Grotesk Fallback — local Arial, Arimo or Liberation Sans, declared in `bundle.css` | Scaled to Aktiv Regular's width and line metrics (`size-adjust: 101.7%`, `ascent-override: 98%`, `descent-override: 27.8%`, `line-gap-override: 0%`), so body text barely reflows while the web fonts arrive (Bold runs about 5 % narrow). |
| 5 | Helvetica Neue, Arial, sans-serif | last resort |
**Languages: the kit is the limit today.** The kit currently serves a reduced character set. Regular and Bold carry 251 characters — Basic Latin, Czech, German umlauts and Russian. Everything else — Slovak ľ ĺ ŕ ô, Polish, Hungarian ő ű, French, Spanish ñ, Romanian, Ukrainian, Greek, Vietnamese, even the minus sign − — is drawn by a fallback face mid-word. For the multilingual site, widen each family's character set in the Adobe Fonts web project, republish the kit, and re-check with the language panel in **Typeface**.
### Space, grid and shape
- **The pixel is the module.** In the logo the square pixel equals the stroke of the letters. Spacing is a 4px base (`space-1` … `space-9`); pixel art uses `space-2`, `space-4` or `space-6` as the pixel size so squares always land on the grid.
- **Square first.** Pixels, colour bands, framed panels and photos have `radius-0`. Controls and cards take a small `radius-2` (6px) — the soft corner of the wordmark's letters at UI scale; badges and frames `radius-1`; dialogs `radius-3`. Never pills or circles, except the social-media avatar crop.
- **Bands.** Applications are built from full-width horizontal bands: the green footer band of the letterhead, the solid lower stripe of the vans. Use `InfoBand` for footers and full-bleed `accent` or `blue-whale` sections for emphasis.
- **Frames.** A 2px white hairline frame inset on a solid ground (stickers, folder cover) is the brand's "badge" — `FramedPanel`. Use it for stickers, certificates, covers and avatars, not for content cards.
- **Elevation is quiet.** `shadow-1` on raised cards and menus in light; `shadow-2` only for dialogs. Prefer `line` borders and `surface-alt` bands to shadows.
### The pixel motif
- The **mark** (`PixelMark`) fades from 100 % to `pixel-fade` (30 %) bottom-left → top-right. Use one large mark bleeding off a corner (business-card back) or as favicon/avatar.
- The **staircase** (`PixelPattern variant="stair"`): a solid brand field whose edge climbs in pixel steps, a line of `ocean-green-60` pixels one step clear, then half-size `ocean-green-25` pixels dissolving into white — the vehicle livery. Green field for Technology, blue-whale field for Cleaning; the parent uses either.
- The **tiling** (`PixelPattern variant="tile"`): white fading marks scattered on ocean-green — the inside of the folder. For large backgrounds only.
- One pattern per view, at an edge, never under text. Pixels are always axis-aligned squares on the spacing grid; never round, rotated or outlined.
### Imagery
- Photography is cold and clean: dry-ice pellets, the white CO₂ fog, machines and cleaned surfaces in a cool blue-white grade (the Facebook cover). Overlay at most a few `ocean-green` pixels at the edges of a photo, never across the subject.
- Put the `white` logo on photos only over a calm dark area; otherwise place it on a `blue-whale` or `ocean-green` band beside the image.
### Interaction
- Focus is a solid 2px `focus` outline with a 2px offset on every interactive element.
- Hover deepens `primary` to `primary-hover` and `accent-strong` to `accent-strong-hover`, and gives secondary and ghost buttons a `surface-alt` / `accent-soft` ground. Disabled is 45 % opacity, never a different colour.
- No motion is defined by the brand: keep transitions to ~150 ms colour and opacity fades.
## Logo
- Four lockups — `plain` (the parent), `technology`, `cleaning`, `partners` (divisions) — each `stacked` or `horizontal`, each in six colourways: `full`, `blue`, `green`, `white`, `black`, `grayscale`.
- `full` only on white/very light grounds; `white` on `blue-whale`, `ocean-green` and photos; single-ink `blue`/`green` where the gradient can't reproduce; `black`/`grayscale` for monochrome print.
- In code use the `Logo` component (exact paths, all 48 versions; default is the parent mark); as files use **Assets → Logos**. Never retype the wordmark in Rointech, recolour single letters, stretch, outline, shadow or rotate it.
- In the full-colour Cleaning files the word "CLEANING" is #149A6E, a hair off Ocean Green; the component keeps the file's value. Partners uses Ocean Green, like Technology.
- The Partners files exist only digitally (SVG). Print masters (CMYK `.ai`/`.pdf`) still need to be exported from them.
## Iconography
- The brand files contain no icon set. The only glyph of the brand is the square pixel: use it as bullet (`BulletList`), status dot (`Badge`) and separator (the green square between phone numbers on the business card).
- For UI icons use a 2px-stroke outline set with square caps and joins at 18–24px, coloured `ink`, `ink-muted` or `accent-text` — IBM's Carbon icons match the type, Lucide with `strokeLinecap="square"` works too. This is a substitution, not a brand asset. No emoji, no filled multicolour icons.
## Applications
Assets → Applications shows the brand at work: letterhead (white paper, horizontal Technology logo top-left, green footer band), business cards (white front; blue-whale or ocean-green back with a QR code and a fading mark bleeding off the corner), the folder (blue-whale cover with a white hairline frame and the white logo; ocean-green inside with tiled marks), the two vans (Technology: green + white; Cleaning: green + blue-whale, both with the pixel staircase), square stickers (framed, logo + QR), and the Facebook profile (green disc avatar, pellet photo with green pixels). They predate the parent/division structure and the move to Aktiv Grotesk — new material uses the parent logo and Aktiv Grotesk. The mockups still carry the designer's notes ("logo s gradientem", arrows) — they are references, not finals.