--- title: Brand — Intentface description: >- Brand tokens, typography, voice, and downloadable assets. The public view of DESIGN.md. url: 'https://www.intentface.com/brand' site: Intentface --- # Design System ## Overview Intentface is a Finnish agentic experience company. The visual language is dark-mode-first, technical, and confident. Bold display type carries the headline; monospace utility text frames it; everything sits on a soft iridescent gradient that hints at the generative domain without resorting to typical AI imagery. Three rules carry most of the weight: 1. Dark mode is the default. Design dark first, then adapt. 2. Monospace next to Orbiter is the signature pairing. Mono frames, Orbiter states. 3. The brand gradient is atmosphere, never chrome. Surfaces are translucent so the gradient passes through them. **Theme toggle ships at launch.** Both dark and light tokens are live in `@theme`; the toggle in the header (`src/components/ui/theme-toggle.tsx`) writes `data-theme` on `` and persists the choice. Dark is the unconditional default — the no-flash script in `app/layout.tsx` does not read `prefers-color-scheme`, only an explicit user choice flips to light. ## Colors ### Dark mode (default) - **Background** (`#18181c`): The base color of the page — a warm near-black (zinc-900 territory). The conic gradient sits on top of this base as atmospheric blobs. - **On-surface** (`#fafafa`): Primary text and icons. Also the base color for translucent surfaces (cards, panels) at low opacity. - **On-surface muted** (`rgb(255 255 255 / 0.55)`): Secondary text, captions, metadata, descriptions inside cards. White-at-alpha rather than a named gray, so it stays neutral on the gradient. - **Border** (`rgb(255 255 255 / 0.08)`): Hairline borders on cards, dividers, secondary buttons. - **Primary** (`#fafafa`): Filled CTA buttons. Inverts to on-primary text. - **On-primary** (`#18181c`): Text on filled primary buttons. ### Light mode Mirrors the dark palette. Same structural roles, inverted values. The background is **not** pure white — it carries a soft lavender cast so the iridescent gradient still reads on light. - **Background-light** (`#e1e9f5`) - **On-surface-light** (`#18181c`) - **On-surface-muted-light** (`rgb(0 0 0 / 0.55)`) - **Border-light** (`rgb(0 0 0 / 0.1)`) - **Primary-light** (`#18181c`) - **On-primary-light** (`#fafafa`) ### Brand accent (gradient) A conic gradient sweeps through three soft hues: - **Pink** `#f7aef8` - **Sky** `#ade8f5` - **Cream** `#fff4c5` Used in three places, nowhere else: - A diffuse glow behind the hero headline (low opacity, heavily blurred). - Inside the asterisk glyph next to the logo. - An animated vertical accent strip (rare, decorative). Never use these as solid fills, button backgrounds, or text colors. ### No hard surface colors There are no `surface` or `card-background` hex tokens. Surfaces are built by overlaying `on-surface` on the background at low opacity, so the gradient atmospherics pass through. - Card fill: `bg-foreground/5` in Tailwind terms (or `on-surface` at ~4% alpha). - Header fill: `bg-background/60` with a backdrop blur, so the gradient still bleeds through the header. - Tag pills, secondary buttons: fully transparent fill, hairline border only. This is non-negotiable. Solid surface colors flatten the look and kill the gradient. ## Typography Two families, two jobs. The split is strict. - **TASA Orbiter** — Display and body. Headlines, page titles, card titles at large sizes (medium weight, 500). Body copy, descriptions, and long-form text at regular weight (400). A geometric sans with a slightly mechanical feel that holds up at both 72px and 16px. - **IBM Plex Mono** — Utility. Subtitles, taglines, tag pills, section labels, technical metadata, code, timestamps. The pairing rule: Orbiter at large weight is what you read first. Plex Mono frames it (subtitle, label, tag). Orbiter at regular weight is what you read at length. Base size is 16px below 480px, 18px above. ### Type roles in practice - **Hero headline**: `display-xl` in Orbiter Medium. - **Hero subtitle directly under headline**: `body-lg` in Orbiter Regular. Plex Mono is reserved for utility text (section labels, tag pills, the optional eyebrow on the podcast hero) — not for the hero subtitle. - **Section heading** ("Latest articles", "More projects"): `display-lg` in Orbiter Medium. - **Card title** ("AI-powered recruitment campaigns in minutes"): `display-lg` or `heading-md` depending on hierarchy. - **Card body and description**: `body-md` in Orbiter Regular. - **Section label** ("WE WORK WITH AMAZING CLIENTS", "THE CLIENT", "OUR APPROACH"): `label-sm` in Plex Mono, uppercase, letter-spaced, muted color. Apply uppercase via CSS, not by storing pre-uppercased strings. - **Tag pill** ("IMAGE GENERATION", "LLMS"): `mono-sm` in Plex Mono, uppercase. ## Layout Layout is a centered max-width container (`max-w-6xl`, ~1056px) with generous outer margins on desktop (`px-6 lg:px-8`). Mobile is fluid full-width with side gutters of `spacing.md` (16px). Vertical rhythm is loose, not tight. Hero sections breathe. Cards have heavy internal padding (`spacing.lg`). Section spacing is `spacing.4xl` (96px) or `spacing.5xl` (128px) on desktop, scaled down on mobile. The spacing scale (`xs` through `5xl`) is the only allowed set of vertical and horizontal spacing values. No off-scale numbers. ## Elevation & Depth There are no shadows. Elevation is achieved by two means: 1. **Translucent layering.** Cards and panels are `on-surface` at 3-8% alpha over the background gradient. The lift is created by the slight color shift plus the hairline border, not by a drop shadow. 2. **Tonal contrast.** The page background is the darkest layer. Cards sit slightly above it via the translucent overlay. The brightest surfaces are filled primary buttons (`primary` solid). The header is a special case: translucent background fill (60% alpha) plus a 12px backdrop blur, so the gradient still passes through but the content behind stays legible. Do not introduce `box-shadow` for elevation. If something needs to feel higher, increase the border contrast or the alpha of the surface overlay. ## Gradient atmospherics The iridescent gradient is a brand fixture, not a decoration. The implementation lives in [src/components/ui/animated-gradient.tsx](src/components/ui/animated-gradient.tsx) and the per-route hues in [src/lib/gradient-palettes.ts](src/lib/gradient-palettes.ts) — both files encode the rules below. Read them as one specification, not as two independent systems. ### Anatomy Each gradient is made of three layers, painted in this order: 1. **Background fill.** A solid base color, painted edge-to-edge. On dark this is near `#18181c`; on light it's a tinted off-white (`#e1e9f5` and family) — never pure white. Per-route palettes can shift the base by a few RGB units to set mood (slightly warmer for `/work`, cooler for `/services`) but the shift stays within ~10 units of the canonical base. Big bg jumps between routes read as a flash, not an atmosphere. 2. **Three soft radial blobs.** Drawn over the base, never edge-to-edge. Each blob is a multi-lobe radial sprite with heavy falloff (alpha stops `1 → 0.82 → 0.5 → 0.25 → 0.08 → 0.02 → 0`) so the silhouette is an irregular organic puff, not a perfect circle. Blobs are pre-baked as sprites and reused per frame — the cost is one fillRect + three drawImage per paint. 3. **Soft-light noise grain.** A 128px monochrome dither tile tiled over everything at ~40% opacity in `mix-blend-mode: soft-light`. The noise nudges luminance by ±16 units around mid-grey; it modulates the blob colours from within rather than sitting on top as visible hiss. Without it the gradient banding shows on modern displays. ### Never use a full-opacity gradient Blobs are drawn with a global alpha of **0.3–0.5**, never 1.0. The reference values are: | Mood | Palette alpha (dark) | Palette alpha (light) | | ----------------------------- | -------------------- | --------------------- | | Quiet (about, contact, team) | 0.34 | 0.30 | | Default (home, fallback) | 0.40 | 0.40 | | Saturated (labs, brand pages) | 0.46–0.50 | 0.46–0.50 | If the gradient ever reads as a flat colored panel rather than atmosphere passing through the surface, the alpha is too high. Pull it back. ### Hue composition A palette is **three colours**, in fixed slots: - **Slot 0 — the pink anchor.** The Intentface brand pink follows the user through every route, so the site keeps a single recognisable signature. The exact RGB differs by theme: light uses the canonical `#f7aef8` (`[247, 174, 248]`); dark uses a warmer rose `[220, 130, 175]` because the literal candy pink washes out on near-black. - **Slot 1 + slot 2 — per-route hues.** These carry the variation between routes. They must **harmonise with pink** — stay in the violet/rose/cream family, or use the canonical brand Sky+Cream pairing. The one place blue earns its keep is `/services` and `/partnerships`, where pink + sky is the documented brand pairing. Everywhere else, cyan and pink fight each other; do not mix them. Do not introduce a fourth blob. The three-blob composition is the brand silhouette — a fourth point makes the cluster read as decoration, not atmosphere. ### Layout, motion, and lifecycle The blob layout is **fixed across every route**. Positions, sizes, and drift speeds are constant; only the hues and the background tint change between routes. This means route transitions cross-fade colour and nothing else — the gradient reads as a tonal shift, not a layout reshuffle. - **Cluster position.** Upper-right quadrant (roughly `x ∈ [0.6, 0.95]`, `y ∈ [0.12, 0.22]`), so the bloom sits as a focal glow behind the headline, not a full-viewport wash. The lower-left stays dark/quiet — that's where the content lives. - **Drift speeds.** Slow (`speedX/Y ∈ [0.3, 0.65]`). Anything faster reads as a screensaver. The site is selling intent, not motion. - **Frame rate.** Capped at ~30fps. At blob scale this is indistinguishable from 60fps and halves CPU on long pages. - **Cross-fade.** 700ms `easeOutCubic` on route or theme change, with the snapshot of the currently-rendered palette as the "from" state so the lerp starts from where the eye actually sees the gradient. - **Scroll fade.** Full opacity at the top of the page, ~0.2 mid-scroll, full again near the bottom. The gradient frames the hero and the footer CTA, then gets out of the way of the prose. - **Pause when invisible.** RAF early-returns while the tab is hidden or the scroll opacity is below 0.05. - **`prefers-reduced-motion`.** Paint a single static frame; palette swaps snap instead of lerping. ### Where the gradient is NOT allowed - Not as a button background. Not as a card fill. Not behind text that needs to be read at length. - Not as a hard linear/conic edge. If you can see where the gradient stops, it's broken — the falloff isn't doing its job. - Not at full saturation as a flat color. `filter: saturate(1.3)` is applied once at the canvas level to compensate for the blur — do not double-saturate by also picking max-saturation hues in the palette. - Not as a static PNG export. The grain + drift is part of the brand; a frozen PNG reads as a stock background. ### Adding a per-route palette To give a route or a client case study its own atmosphere, add an entry to [src/lib/gradient-palettes.ts](src/lib/gradient-palettes.ts) via the `pair("name", { bg, alpha, hues }, { bg, alpha, hues })` helper. Provide three colours per theme — slot 0 is filled in for you by the anchor. Layout is already taken care of by the fixed `SLOTS` table. Resist the urge to override positions or speeds; the fixed layout is what makes route cross-fades feel cohesive. ## Shapes Two corner radii are used in interactive elements: - **Pill** (`rounded.full`, 9999px): Buttons, tag pills, ghost buttons. - **Card radius** (`rounded.lg`, 16px): Cards, panels, image frames inside content blocks. `rounded.sm` (4px) is reserved for inputs and small inline elements. `rounded.xl` (24px) is reserved for hero-scale containers if ever needed. The shape language is binary: pill for interactive atoms, soft rectangle for containers. Do not mix. ## Component decision tree Before adding a new primitive, check whether the result composes from what exists: | You need… | Use | |---|---| | Boxed block with a heading | `Card` | | Page-top H1 + supporting line + CTAs | `Hero` | | Two- or three-column MDX layout | `Row` + `Col` | | Footnote-style aside | `Note` | | Long-form MDX prose styling | `Prose` | | Small mono label above a section | `SectionLabel` | | Filter / taxonomy chip | `TagPill` | | Pill-shaped CTA | `Button` (`primary` / `secondary` / `ghost`) | Add a new primitive only when the same composition appears in 3+ places. See [src/components/AGENTS.md](src/components/AGENTS.md) for naming + structure conventions. ## Components ### Buttons Pill-shaped, padded `12px × 24px`. Label uses Orbiter Regular or Plex Mono; never Orbiter Medium/Semibold inside a button (that weight is reserved for display). Trailing arrow glyph (`→`) on forward-action labels: "Contact us →", "Book an Intentface Sprint →", "View our projects →". - **Primary** (`button-primary`): Filled with `primary` color, inverted text. Used for the headline CTA per page. - **Secondary** (`button-secondary`): Transparent fill, 1px border in `border` color. Sits next to primary for ancillary actions ("About us", "Our services"). - **Ghost pill** (`button-ghost-pill`): Light, slightly translucent fill on dark backgrounds for "View case" labels on project cards. ### Cards Translucent, not solid. **Use the [`Card`](src/components/ui/card.tsx) primitive — don't hand-roll the class string.** Every card in the site derives from the same surface recipe; if you find yourself writing `rounded-2xl bg-(--on-surface)/4 …` inline, you're rebuilding `Card`. - Background: `on-surface` at ~4% alpha (`bg-(--on-surface)/4`). Hover lifts to ~6% — never higher (8% reads as a chip, not a surface). - **No border.** The card is a translucent overlay on the gradient; a hairline border boxes it in and kills the bleed. The `border` token is for *content dividers between sections* and for the secondary-button outline — not for surfaces. - Radius: `rounded-2xl` (16px). Hero CTA blocks use the same radius; only padding scales (`p-8` via `emphasis`). - Padding: `spacing.lg` (24px) minimum; `spacing.xl` (32px) for hero CTAs. - No drop shadows. Elevation is tonal — adjust the alpha, not the shadow. #### Card content rules - **No eyebrow above the title.** The page-eyebrow ban (see *Hero composition*) applies inside cards too. A small mono `FULL-TIME · REMOTE` line above the role title reads as filler and shrinks the headline. Put metadata *after* the title and body, at `text-sm text-(--on-surface)/55` — that's where supporting facts live. - **Title is the first element.** `font-display`, regular weight, `text-xl` minimum, `text-2xl` when the card is the primary read on the section (role listings, project tiles, partnership cards). Avoid `font-medium`/`font-semibold` on card titles — display weight is reserved for the hero headline. - **Body uses `text-base` (16px), not `text-sm`.** Card descriptions are read at length; `text-sm` (14px) makes the card feel like a tooltip. Reserve `text-sm` for metadata (date, category, attribution) and tag pills. - **Three blocks max per card.** Title, body, metadata. If you reach for a fourth, you're rebuilding a page section inside a card — split it out. Used for testimonials, project entries, role listings, the "Get started with Intentface Sprint" CTA block. ### Tag pills Fully transparent fill, 1px border, `mono-sm` Plex Mono, uppercase. Small (~12px text, ~4px vertical / 10px horizontal padding). Used for project taxonomy: `IMAGE GENERATION`, `LLMS`, `PRODUCT DESIGN`, `AUTOMATION`, `RAG`, `MEDICAL`. ### Section labels `label-sm` in Plex Mono, uppercase, letter-spaced, `on-surface-muted` color. No background, no border. Pure text. Sits above the section title or above a block of content. ### Header Transparent fill, **no bottom border**. The header is positioned in-flow (not fixed), so the gradient behind the hero passes through it as one continuous atmosphere — a divider under the chrome would visually amputate the gradient and is off-brand. Logo left, primary nav center-right, theme toggle far right. ### Dividers Hairline borders are reserved for *content structure inside a page* — between major sections that genuinely need separation, around translucent surfaces (cards, panels), and on the secondary button outline. Use them sparingly: a divider every screen-height kills the airy feel. Color is `border` (white-at-8% on dark, black-at-10% on light) — never a solid mid-gray line. The chrome (header, footer chrome) does not get bordered. ### Logo The logo is an inline SVG React component at [src/components/ui/intentface-logo.tsx](src/components/ui/intentface-logo.tsx), not a static asset file. It contains the `intentface` wordmark and the iridescent asterisk together as `` elements within a single `viewBox="0 0 622 137"`. - Wordmark paths use `fill="currentColor"` so the logo inherits the surrounding text color (`text-(--on-surface)`) and inverts automatically with the theme. - Default render width in the navbar is `width={108}`; height scales proportionally from the viewBox aspect ratio. - Do not recreate the logo in HTML/CSS by typesetting the wordmark in TASA Orbiter and appending a separate asterisk. The `IntentfaceLogo` component is the source of truth. - The asterisk inside the SVG is the only place where the brand gradient is foregrounded. ### Theme toggle Soft-rectangle icon button (`rounded-md`, 8px radius) in the top-right of the header. Sun glyph in dark mode (click to go light), moon glyph in light mode (click to go dark). Borderless with a hover background tint. ### Hero composition Display headline left-aligned, 2-3 lines maximum, in Orbiter Regular (not Medium — the thin display cut). When the headline carries two beats, render the second as a muted continuation on the same H1 at ~50% opacity. Optional subtitle directly beneath in body Regular. CTAs immediately below (primary + secondary side by side). Soft iridescent gradient blurred behind the headline. **Avoid eyebrows.** Don't stack a small mono label ("WRITING", "PEOPLE", etc.) above the H1 — the headline alone almost always carries the page, and a generic eyebrow reads as AI-website filler. The exception is when the eyebrow earns its keep by stating something the headline genuinely can't (e.g. the podcast page's `A PODCAST BY INTENTFACE` situates the show inside the company — the headline is a tagline, not a page label). If you reach for an eyebrow, justify it; otherwise drop it. #### Podcast hero — special case The podcast landing page uses a deliberately different hero treatment from the rest of the site: the show title is rendered centered, all-caps, in Orbiter at display scale, with an eyebrow ("A PODCAST BY INTENTFACE") above it. This is the one place in the site where centered + uppercase is on-brand, because the page is a show poster, not a marketing page. Do not generalize this treatment to other pages — articles, case studies, services, and contact all use the standard left-aligned, sentence-case hero. ### Testimonial carousel Three cards visible at desktop width, one or two on smaller screens. Outline circular arrow buttons on the sides for navigation. Quote in TASA Orbiter Regular, attribution below in Plex Mono muted. Client logo top-left of each card. Cards are translucent like all other cards. ## Do's and Don'ts - Do design dark-first. Light mode is a careful adaptation, not the starting point. - Do use translucent overlays for every surface. The gradient must pass through. - Do use Plex Mono for the hero subtitle. It is a signature. - Do treat the brand gradient as atmosphere: behind hero content, inside the asterisk, nowhere else. - Do use the trailing arrow glyph (`→`) for forward actions. - Do keep elevation tonal: hairline borders plus translucent overlays. No shadows. - Don't use solid hex fills for surfaces. `bg-zinc-900` or any flat surface color kills the gradient and is off-brand. - Don't use TASA Orbiter Medium or Semibold for body copy. Medium/Semibold are display weights. Body is Orbiter Regular. - Don't introduce bright pure-color buttons or backgrounds. The palette is grayscale plus iridescent accent. - Don't use emoji or decorative icons in UI labels. - Don't mix square and pill shapes in interactive elements. Pills for buttons and tags, 16px for cards, nothing in between. - Don't introduce a third typeface. The two-family system (Orbiter + Plex Mono) is the brand. - Don't typeset the logo in HTML. Use the logo asset. - Don't render the gradient as a flat color anywhere. If it stops being soft and diffuse, it stops being on-brand. - Don't add `box-shadow` for elevation. Increase border contrast or surface alpha instead. - Don't put a border on a card. Surfaces are translucent fills; the hairline `border` token is for content dividers and secondary buttons only. - Don't put an eyebrow above a card title. Same rule as the page-headline eyebrow ban — metadata goes after the title, not before, and never in uppercase mono at the top. - Don't use `text-sm` (14px) for card body copy. Body reads at `text-base` (16px); `text-sm` is for metadata, attribution, and tag pills. - Don't hand-roll a card by writing `rounded-2xl bg-(--on-surface)/4 …` inline. Use the [`Card`](src/components/ui/card.tsx) primitive so the recipe stays consistent. - Don't reach for a mono "eyebrow" label above a page or section headline by default. Eyebrows ("WRITING", "ABOUT US", etc.) above the H1 are a well-worn AI-website tell — they read as filler and add a fontsize without earning one. Let the headline carry the page. Section labels are allowed *between* major sections within a page (small mono SectionLabel above mid-page collections). The podcast hero is the documented exception (see *Podcast hero — special case*) — when in doubt, no eyebrow. ```yaml # Tokens (from DESIGN.md frontmatter) version: alpha name: Intentface description: >- Dark-mode-first design system for a Finnish agentic experience company. Translucent surfaces over a soft iridescent gradient, TASA Orbiter for display and body paired with IBM Plex Mono for utility. colors: brand-pink: '#f7aef8' brand-sky: '#ade8f5' brand-cream: '#fff4c5' background: '#18181c' on-surface: '#fafafa' on-surface-muted: rgb(255 255 255 / 0.55) border: rgb(255 255 255 / 0.08) primary: '#fafafa' on-primary: '#18181c' destructive: hsl(0 62.8% 30.6%) background-light: '#e1e9f5' on-surface-light: '#18181c' on-surface-muted-light: rgb(0 0 0 / 0.55) border-light: rgb(0 0 0 / 0.1) primary-light: '#18181c' on-primary-light: '#fafafa' typography: display-xl: fontFamily: TASA Orbiter fontSize: 72px fontWeight: 500 lineHeight: 1.05 letterSpacing: '-0.02em' display-lg: fontFamily: TASA Orbiter fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: '-0.01em' heading-md: fontFamily: TASA Orbiter fontSize: 24px fontWeight: 500 lineHeight: 1.3 heading-sm: fontFamily: TASA Orbiter fontSize: 18px fontWeight: 500 lineHeight: 1.4 body-lg: fontFamily: TASA Orbiter fontSize: 18px fontWeight: 400 lineHeight: 1.5 body-md: fontFamily: TASA Orbiter fontSize: 16px fontWeight: 400 lineHeight: 1.5 mono-md: fontFamily: IBM Plex Mono fontSize: 14px fontWeight: 400 lineHeight: 1.5 mono-sm: fontFamily: IBM Plex Mono fontSize: 12px fontWeight: 400 lineHeight: 1.4 label-sm: fontFamily: IBM Plex Mono fontSize: 12px fontWeight: 400 letterSpacing: 0.05em rounded: none: 0 sm: 4px md: 8px lg: 16px xl: 24px full: 9999px spacing: none: 0 xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px 5xl: 128px components: card: backgroundColor: '{colors.on-surface}' backgroundOpacity: 0.04 borderWidth: 0 rounded: '{rounded.lg}' padding: '{spacing.lg}' bodyTypography: '{typography.body-md}' titleTypography: '{typography.heading-md}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' padding: 12px 24px typography: '{typography.body-md}' button-secondary: backgroundColor: transparent textColor: '{colors.on-surface}' borderColor: '{colors.border}' borderWidth: 1px rounded: '{rounded.full}' padding: 12px 24px typography: '{typography.body-md}' button-ghost-pill: backgroundColor: '{colors.on-surface}' backgroundOpacity: 0.9 textColor: '{colors.on-primary}' rounded: '{rounded.full}' padding: 8px 16px typography: '{typography.body-md}' tag-pill: backgroundColor: transparent textColor: '{colors.on-surface-muted}' borderColor: '{colors.border}' borderWidth: 1px rounded: '{rounded.full}' padding: 4px 10px typography: '{typography.mono-sm}' section-label: backgroundColor: transparent textColor: '{colors.on-surface-muted}' typography: '{typography.label-sm}' header: backgroundColor: transparent position: relative logo: component: src/components/ui/intentface-logo.tsx defaultWidth: 108px fill: currentColor breakpoints: sm: 480px md: 768px lg: 1024px xl: 1280px --- ```