# Kalanta — Brand & Design Guidelines > **For humans and AI agents.** This is the single source of truth for designing anything for Kalanta — web pages, decks, social posts, ads, docs, UI. Follow it literally. When a request is ambiguous, default to the rules here. Kalanta is a growth-marketing agency: paid acquisition, media placement, and creative testing for product, app, and game teams. Audience skews enterprise. --- ## 1. Brand essence - **What we are:** a performance-marketing partner that turns attention into measurable growth. - **Positioning line:** *Turn attention into measurable growth.* - **One-liner:** Kalanta finds the audiences, placements, and creative angles that move installs, signups, and revenue — not vanity metrics. - **Personality:** confident, precise, calm, modern. Operator energy, not hype. - **The big idea — "the signal":** out of noisy channels, Kalanta finds the one high-fit *signal* and scales it. This is expressed visually by a single bright **signal dot** (green) in the logo. ### Voice & tone - Clear, direct, declarative. Short sentences. Active voice. - Lead with outcomes (CPI, ROAS, installs, revenue), not activity. - Confident, never boastful. No exclamation marks. No emoji. No buzzword soup. - Sentence case for almost everything (headlines, buttons, nav). Reserve ALL-CAPS for small mono eyebrow labels only. - Good: "Channel fit before spend." · "Bring the product. We'll bring the channel plan." - Avoid: "Supercharge your growth!!!", "synergy", "ninja/rockstar", generic AI filler. --- ## 2. Logo The logo is the **wordmark** "Kalanta" set in Hanken Grotesk ExtraBold, with an optional **signal dot** — a small circle in signal green at the bottom-right baseline, sitting like a period after the word. ### Variants | Variant | Use | |---|---| | **Wordmark** (primary) | Default everywhere there's room: site header, decks, docs, email. | | **Lettermark / icon** — a "K" with the signal dot, on a rounded square tile | App icons, favicons, avatars, social profile images, square placements where the full word won't fit. | | **Horizontal lockup** — icon tile + wordmark | Wide brand bars, presentation footers, partner co-brand strips. | ### The signal dot - It is the one expressive detail. Keep it **signal green** on light backgrounds and the **brighter green** on dark backgrounds. - Use the dot on the **primary** wordmark and icon. Drop it only when the mark is extremely small (≤16px) or when production is strictly single-colour (1-color print, engraving, embroidery). - Never restyle the dot (no gradients, no ring, no second dot, no other color). ### Clear space & minimum size - **Clear space:** keep padding around the logo equal to the **cap height of the "K"** on all sides. Nothing intrudes into this zone. - **Minimum size:** wordmark ≥ 96px wide on screen (≥ 20mm print). Icon ≥ 20px; below 20px use the dot-less "K". ### Logo do / don't - ✅ Use the provided files. ✅ Keep ample clear space. ✅ Use ink-on-light, white-on-dark, and the dark/green tiles as specified. - ❌ Don't recolor the wordmark (only ink, white, or — rarely — full signal green). - ❌ Don't stretch, skew, rotate, outline, add shadows/glows (except the approved soft glow on the dark hero), or re-typeset in another font. - ❌ Don't place the ink wordmark on a busy or low-contrast background — use the white version or an ink/paper panel. - ❌ Don't reposition or resize the signal dot. --- ## 3. Color Kalanta is **near-monochrome** (ink + paper) with a **single green accent**. Restraint is the brand. Use green sparingly — for the signal dot, one key metric, a single CTA, or a small highlight. Most surfaces are black, white, and warm off-white. | Token | Hex | OKLCH | Role | |---|---|---|---| | **Ink** | `#0A0A0A` | `oklch(0.15 0 0)` | Primary text, dark surfaces, buttons, logo on light | | **Paper** | `#FAF9F7` | `oklch(0.98 0.004 85)` | Warm off-white section background | | **White** | `#FFFFFF` | `oklch(1 0 0)` | Cards, base page background | | **Signal green** | `#23A136` | `oklch(0.62 0.18 145)` | Accent on light bg: the dot, highlights, success | | **Signal green (on-dark)** | `#67D36F` | `oklch(0.78 0.17 145)` | The same accent, brightened for dark backgrounds | | **Ink 70** | `#54545A` | `oklch(0.42 0.006 285)` | Body text on light | | **Ink 45** | `#8A8A8E` | `oklch(0.62 0.006 285)` | Muted/secondary text, captions | | **Hairline** | `#EDEDEA` / `#EFEEE9` | — | Borders, dividers on light | | **Hairline (dark)** | `rgba(255,255,255,0.09)` | — | Borders on dark surfaces | **Aurora tints** (decorative hero gradients only, low chroma, heavily blurred — never behind body text): `oklch(0.86 0.11 50)` peach · `oklch(0.80 0.12 290)` violet · `oklch(0.82 0.12 230)` blue. ### Color rules - Default text is Ink on Paper/White. Never pure `#000` — always `#0A0A0A`. - Green is an accent, not a theme. Roughly: ≤ 10% of any composition. One green moment per view is ideal. - Maintain WCAG AA. Signal green `#23A136` on white passes for large/graphic use; for green *text* on white keep it ≥ 18px bold or darken. On dark, use `#67D36F`. - Dark sections are Ink `#0A0A0A` with white text and the brighter green. --- ## 4. Typography Two families. No others. | Family | Use | Weights | |---|---|---| | **Hanken Grotesk** | Everything: display, headings, body, UI, buttons | 400, 500, 600, 700, 800 | | **JetBrains Mono** | Small eyebrow labels, tags, metrics, code, "technical" captions | 400, 500, 600 | Both are free on Google Fonts. Hanken Grotesk is the brand font and powers the logo (ExtraBold / 800). ### Type rules - **Display & headings:** Hanken Grotesk **800**, line-height `0.98–1.05`, letter-spacing **`-0.04em` to `-0.05em`** (tight). The bigger the text, the tighter. - **Body:** Hanken Grotesk 400–500, 16–21px, line-height `1.5–1.6`, color Ink 70. Set `text-wrap: pretty`. - **Eyebrows / labels:** JetBrains Mono, 11–12px, `letter-spacing: 0.16em`, `text-transform: uppercase`, color Ink 45. Often preceded by a tiny green dot. - **Buttons/nav:** Hanken Grotesk 600, sentence case. - Sentence case for headlines. Never set body in mono. Never use Inter, Roboto, Arial, or system-ui as the *intended* brand font (only as silent fallbacks). ### Suggested scale (desktop) `Display clamp(40–92px)` / `H2 clamp(30–52px)` / `H3 21–22px` / `Body-lg 18–21px` / `Body 15–16px` / `Eyebrow 11–12px`. --- ## 5. Iconography & shapes - **Radii:** small `8–13px`, cards `20–24px`, pills/marquee `999px`, large feature panels `30px`. Icon tiles use `~22%` of their size. - **Icon glyphs in tiles:** simple geometric marks (a square, circle, triangle, ascending bars) in white/green inside an ink rounded square. Keep them minimal and flat. - **Borders:** 1px hairlines (`#EDEDEA` light / `rgba(255,255,255,0.09)` dark). Borders + subtle shadow define cards — not heavy drop shadows. - **Shadows:** soft and far: e.g. `0 30px 60px -30px rgba(0,0,0,0.22)`. Avoid tight dark shadows. - **No emoji.** **No clip-art.** **No left-border-accent callout boxes.** **No heavy gradients** except the approved blurred aurora and the dark-panel radial glows. --- ## 6. UI components - **Primary button:** Ink `#0A0A0A` bg, white text, radius 11–13px, weight 600, padding ~`15px 26px`. Hover: lift `translateY(-2px)` + soft shadow. On dark surfaces the primary button can be white with ink text, or signal green with ink text for the single most important CTA. - **Secondary button:** white/paper bg, ink text, 1px hairline border. Hover: bg → `#F5F4F1`. - **Cards:** white or paper, 1px hairline, radius 20–24px, generous padding (28–30px). Hover (when interactive): `translateY(-4px)` + soft shadow. - **Chips/tags:** pill, 1px hairline, white bg, weight 600; the "active/featured" chip is solid ink (or green) with contrasting text. - **Eyebrow:** mono uppercase label + small green dot, above section headings. - **Metric/stat card:** big 800 number (letter-spacing -0.03em) with a small mono label and an optional green delta. ### Motion - Tasteful only. Scroll-reveal: fade + `translateY(26px→0)`, ~`0.8s cubic-bezier(.16,1,.3,1)`, small stagger (60–80ms). - Hover: 0.2–0.3s ease on transform/shadow/color. Respect `prefers-reduced-motion`. - No autoplay carousels, parallax overload, or bouncing. --- ## 7. Layout & imagery - **Grid:** centered container `min(1200px, 92vw)`. Section vertical padding `clamp(44px, 6vw, 96px)`. - **Density:** generous whitespace; let headlines breathe. Prefer fewer, larger elements over dense dashboards. - **Backgrounds:** alternate White and Paper between sections; use one Ink dark section as a focal moment (CTA or channels). Max 1–2 background colors per page. - **Hero art:** blurred low-chroma aurora blobs (peach/violet/blue) behind the headline, or a clean product/metric card. Keep aurora away from text for contrast. - **Photography (when used):** real product/screens, crisp, neutral. No cheesy stock, no busy collages. Provide as placeholders until real assets exist; never invent fake numbers in final work. --- ## 8. Asset inventory All files live in `brand/`. Backgrounds: **transparent** (PNG/SVG with alpha), **white**, **dark** (`#0A0A0A`). ### Vector — `brand/svg/` (scalable; live text in Hanken Grotesk) - `wordmark-ink.svg` — wordmark, ink + green dot, transparent - `wordmark-white.svg` — wordmark, white + bright-green dot, transparent (for dark bg) - `icon-dark.svg` — square icon, ink tile / white K / green dot - `icon-light.svg` — square icon, paper tile / ink K / green dot - `icon-mono-ink.svg` — square icon glyph only (ink), transparent - `icon-mono-white.svg` — square icon glyph only (white), transparent - `lockup-ink.svg` — horizontal lockup, transparent - `lockup-ondark.svg` — horizontal lockup on ink ### Raster — `brand/png/` (font baked in; no dependencies) - Wordmark: `wordmark-ink-small.png` (600w), `…-medium.png` (1200w), `…-large.png` (2400w), `wordmark-white.png`, `wordmark-onwhite.png`, `wordmark-ondark.png` - Icon (square): `icon-dark-1024.png`, `icon-dark-512.png`, `icon-dark-128.png`, `icon-favicon-32.png`, `icon-light-512.png`, `icon-mono-ink-512.png`, `icon-mono-white-512.png` - Lockup (rectangular): `lockup-ink.png`, `lockup-onwhite.png`, `lockup-ondark.png` ### Font — `brand/font/` - `HankenGrotesk-var.ttf` — variable font (wght 100–900). Logo uses **800**. Also free on Google Fonts. (Body/UI also Hanken Grotesk; mono labels use JetBrains Mono.) **Choosing a file:** SVG for web/print where scaling matters and the Hanken font is available; PNG when you need a fixed, dependency-free image (social, email, slides, app stores). Transparent for placing on any surface; white/dark when you need a baked background. For tiny favicons use `icon-favicon-32.png`. > **SVG note:** the SVGs use live `` in Hanken Grotesk ExtraBold (kept editable + tiny). They render exactly when the font is available (it's loaded across Kalanta web properties and bundled in `brand/font/`). For a fully self-contained file with no font dependency, either use the PNGs or open an SVG in a vector editor and "convert text to outlines". --- ## 9. Quick reference (copy/paste) ```css /* Color */ --ink:#0A0A0A; --paper:#FAF9F7; --white:#FFFFFF; --signal:#23A136; /* green on light */ --signal-on-dark:#67D36F;/* green on dark */ --ink-70:#54545A; --ink-45:#8A8A8E; --hairline:#EDEDEA; /* Type */ font-family:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif; /* brand */ font-family:'JetBrains Mono',ui-monospace,monospace; /* labels/metrics */ /* headings */ font-weight:800; letter-spacing:-0.045em; line-height:1.0; /* eyebrow */ font:600 12px/1 'JetBrains Mono'; letter-spacing:.16em; text-transform:uppercase; ``` ```html ``` **Checklist for any new artifact:** Hanken Grotesk + JetBrains Mono only · ink/paper/white base · green used once, sparingly · tight negative tracking on big type · generous whitespace · 1px hairlines + soft shadows · rounded corners · sentence case · no emoji · real or placeholder imagery (never fake metrics in final).