Six colors, one typeface, one easing curve, two temperatures.
Everything here is generated from tokens/ in the
kissd-design repo — the website is the reference
implementation, this page is the human projection.
Use this like a working reference: search, copy tokens, then build from generated CSS instead of memory.
One drawn wordmark: lowercase kissd, hairline strokes, never title case. It follows the same pairing law as everything else — any palette color on black, black on color fields, never color-on-color. Vector master: kissd_logo.ai; the canon rasters below are 1000×538 with transparency.
Primary — red on black. Red is the wordmark
color: when KISSD itself is speaking, it speaks in red. The default when nothing else decides.
Red — Primary
Off White — System
Magenta
Lime
Grey
Off-white on black is the system variant — quiet chrome like tool surfaces, headers, and footers. Magenta, lime, and grey are expressive: campaign, poster, social.
On Red
On Magenta
On Lime
On Grey
160px — the digital floor
The hairline stroke is 0.66% of the logo’s width. Below ~155px it renders under one screen pixel and the mark breaks apart, so the floor is 160px wide on screen and 20mm in print (hairline ≈ 0.38pt).
Smaller than that — favicons, badges, dense chrome — switch to the text wordmark: kissd
The three accents have meanings, not vibes. Pick by asking, in order: 1. Interactive or live? → lime. 2. About people, creators, or a creative-manifesto moment? → magenta. 3. Everything else → red. When in doubt, red.
It’s the wordmark color — when KISSD itself speaks, it speaks in red. Identity, structure, wayfinding.
Highest voltage in the palette. Means "this is on / this responds / go". Earned by interactivity — passive lime devalues the signal.
Exception: lime may appear in any section — but only in its action role.
The expressive, playful color — reserved for humans and acts of creation. Keeps creator surfaces distinct from corporate ones.
Composition: one dominant accent per section (red keeps its structural role and lime its action role anywhere). Never more than two accents in one composition. On the web, neutrals carry ~90% of the screen — accents are punctuation, not paint. Poster mode inverts this with full-bleed color fields.
Accessibility is part of the system. If the label says body, every bit of text in the card uses the actual body-safe foreground. No decorative pale labels. On color fields, body/UI text is black. On black, body/UI text is off-white or grey.
Red, magenta, and lime may sit on black for labels, emphasis, and display moments. They are not approved long body-copy colors.
Contrast guardrail: approvedBody passes 4.5:1 and only contains true body/UI pairs. approvedAccentOnDark is for emphasis on black. approvedDisplay passes 3:1. Off-white on magenta/grey is poster-only/non-UI and intentionally excluded from these approved grids.
All color-on-color type is out — including pairs the 2025 brand book allowed (magenta-on-red, grey-on-lime, etc.). tokens/semantic.json encodes the full list; agents and /brand-check reject these mechanically.
Web only
Brand colors may be tinted on the web at these steps only: 10 · 15 · 20 · 40 · 60 · 80 · 90. Hairlines are grey/15. Poster mode uses solid color, no tints.
Surface decides type. Brand/display surfaces can use uppercase Light (300) at scale.
Tool surfaces, docs, dashboards, and agent-generated workspaces default to sentence case,
clearer Regular (400) UI text, and the generated .tool-* classes.
Body-size text on solid color backgrounds always uses Regular — Light strokes disappear
against saturated color. The website type scale remains canon for brand/display web surfaces.
Variants override the parent’s variables — use both classes together
(class="type-hero type-hero-page"). A few at true size; the full list
lives in tokens/core.json → type.variants.
pagePadX | 24px → 64px | horizontal padding on every section (px-6 md:px-16) | |
sectionPadY | 64px → 96px | standard section (py-16 md:py-24) | |
sectionFeaturePadY | 96px → 128px | feature sections — About, CTA (py-24 md:py-32) | |
navOffsetTop | 92px | every page root clears the fixed navbar (pt-[92px]) | |
cardPad | 24px → 32px | card interior (p-6 md:p-8) | |
gap.card | 24px | card grids (gap-6); tight variant 16px | |
gap.columns | 40px | two-column editorial layouts (gap-10) | |
stackGap | 40px | minimum vertical gap between sibling content blocks in a section — text never touches the grid/media below it. Tighten to 12px only for heading → supporting-note pairs | |
eyebrowMarginBottom | 16px | eyebrow → headline (mb-4) | |
radii.card | 0.25rem | cards & media (rounded-sm); pills are full | |
border.hairline | grey / 15 | resting borders & dividers |
Everything eases with cubic-bezier(0.22, 1, 0.36, 1) — fast out,
long settle. Marquees and spins are linear. Durations: micro 0.3s (hovers) ·
base 0.5s (most transitions) · slow 0.7s (large media) · reveal 0.9s (headlines).
FadeUp.tsx
Eight custom marks: starburst, lips/fangs, robot, rock-hand, eye, eggs, lips, frog. Thicker stroke at small sizes, thinner at large (brand book rule). Inline with type, icons share the cap-height of adjacent all-caps text. The starburst spins (14s linear) when decorative.
Canon SVGs live in public/icons/ (paths in tokens → icons.assets):
tight viewBoxes, stroke: currentColor at width 2 — the thin cut for large sizes; use a heavier stroke below ~48px.
LABEL — rule — 01. Accent color, hairline rule at /40, numbered index.
One left edge anchors eyebrow → headline → rule → deck → divider. No floating columns.
CMS headlines: a line wrapped in *asterisks* renders in the section accent color.
Headlines rise from y:110% inside overflow-hidden wrappers, stagger 0.12.
Duplicated list, 38s linear loop, edge fades, equal slots + per-logo optical scale.
Animated Bayer-dither canvas behind feature sections. Poster energy only.
Spring count-up 1.4s, underline draws at 1.2s, grey eyebrow label.
All CMS copy auto-converts straight quotes to typographer’s marks at render.
Canonical implementations linked in patterns/README.md.
Campaigns, decks, social. Full volume: solid color fields, giant type (leading may tighten to 0.7), icons as heroes. No alpha tints.
Dashboards & internal apps. Calm: grey/offwhite carry the UI, one accent max, micro-motion only. KISSD without the megaphone.
This uses generated .tool-* classes: sentence case, warm panels, one orange accent, readable form controls.