← All designs

KIVRA AI Design System

0
ByIosif Nicolae
1 view2871 KB

Previews

ui_kits/marketing/index.htmlPrimaryOpen ↗
ui_kits/marketing/features.htmlOpen ↗
ui_kits/marketing/process.htmlOpen ↗
ui_kits/marketing/product.htmlOpen ↗
ui_kits/marketing/reserve.htmlOpen ↗

SKILL.md

SKILL.md

name: kivra-design description: Use this skill to generate well-branded interfaces and assets for KIVRA AI — the dark, cork-textured, deadpan-luxurious brand for KIVRA-1 (the world's most unnecessarily sophisticated cork coaster). Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping marketing pages, product surfaces, and decks. user-invocable: true

KIVRA Design Skill

Read README.md for full brand context, content voice, and visual foundations. Open colors_and_type.css for the design tokens (or tailwind.css for the v4 @theme form). Browse ui_kits/marketing/ for a clickable recreation of the live site, plus reusable JSX components (Hero.jsx, Nav.jsx, ModelRail.jsx, LusionCard.jsx, VideoCard.jsx, Features.jsx, Footer.jsx, Icons.jsx). Pull product photography and reference imagery from assets/.

When invoked

  1. If creating visual artifacts (slides, mocks, throwaway prototypes), copy the assets out and write static HTML files that load colors_and_type.css directly.
  2. If working on production code, copy the tokens (or import tailwind.css) and lift component patterns from the UI kit — they are intentionally simple so they read as recipes, not library code.
  3. If the user invokes this skill without other guidance, ask what they want to build (landing page section, product page, deck, social card, packaging insert?), then ask a couple of pointed questions and act as an expert designer for the KIVRA brand. Lean into the deadpan-luxury voice — over-precise, third-person, no exclamation points, no emoji.

Non-negotiable rules

  • Dark #100904 background. Cream #ffedd7 text. One rust #dc5000 accent, used sparingly.
  • Headlines huge and tightly tracked. Body 14–16px. Mono for codes.
  • 36px radius on buttons + badges. 12px on cards. 0px on inputs.
  • No drop shadows. No emoji. No icon sets — at most a chevron, dot, triangle, or hairline arrow as inline SVG.
  • Imagery is warm, tactile, slightly orange-tinted product photography. Never illustrated, never abstract.

README.md

README.md

KIVRA AI Design System

Cork-textured midnight laboratory. A dark, tactile, almost reverent product brand for the world's most unnecessarily sophisticated cork coaster.

KIVRA is a single-product brand by Lusion (an award-winning design studio). The product is the KIVRA-1, a cork coaster — but the marketing positions it like a fine instrument or a flagship piece of consumer electronics. The "AI" suffix is part of the conceit: serious-engineer presentation applied to a deliberately humble object. The site's primary surface is the kivra.ai marketing page.

The design language is dark, dense, and engineered-looking: a deep #100904 "Pitch Darkness" canvas, a warm cream #ffedd7 "Cork Dust" foreground, and a single saturated #dc5000 rust accent. Headlines are enormous and tightly tracked. Body copy is sparse, deadpan, and over-precise. Cork as material — its grain, its warmth, its absurd lift-and-insulate properties — is the only visual hero.

Sources

  • Live site: https://kivra.ai/
  • Hero screenshot reference: assets/kivra-hero-reference.png
  • Style reference doc: provided in chat by the user (full token list — see colors_and_type.css and tailwind.css)
  • Designed by: Lusion (mentioned on the site itself)

No codebase, no Figma file, no font files were provided. The UI kit and preview cards are built from the style reference + live-site screenshot.

Index

File / folder What's in it
README.md This file. Brand context, content + visual foundations, iconography, font notes.
colors_and_type.css All design tokens as CSS custom properties + semantic type classes (.kivra-display-hero, .kivra-body, etc.) + button/input/badge primitives. Start here.
tailwind.css Mirror of the tokens as a Tailwind v4 @theme block.
SKILL.md Agent-Skill front matter so this folder works as a Claude Code skill.
assets/ Logos, hero reference, product placeholders.
preview/ Small HTML cards that render in the Design System tab.
ui_kits/marketing/ Marketing site recreation — full clickable hero + sections.

Content fundamentals

The voice is deadpan, hyperbolic-precise, and a little smug — like a watchmaker explaining why their second hand sweeps. Copy reads as if the team is wholly convinced their cork coaster is industry-defining technology.

  • Casing: All-caps for labels, eyebrows, nav, badges (MADE FOR MUGS. BUILT FOR TABLES., KIVRA-1 MODEL, SCROLL TO CONTINUE). Sentence case for body. Headlines are the brand name itself, set huge.
  • Pronouns: Third-person + product-name ("Kivra makes the simplest moment feel considered."). Never "we." Rarely "you."
  • Sentence shape: Short. Triadic. Trailing periods. "Designed to lift, insulate, and grip in all the right ways."
  • Adjectives: Over-engineered, considered, sophisticated, unnecessary, refined, precise. Never fun, exciting, easy, simple-as-a.
  • Tone-marking phrases: "The world's most unnecessarily sophisticated cork coaster." — exact specimen; this is the rosetta stone for the voice.
  • No emoji. No exclamation points. No questions to the reader. A capital-S Serious tone.
  • Numbers and codes ("KIVRA-1") read as model designations, like camera bodies. Use them liberally as ornament; treat them as content.
  • Avoid: marketing CTAs that sound urgent ("Buy now!"), feel-good benefit language, second-person hand-holding, conversational filler.

Specimens to imitate:

  • Eyebrow: MADE FOR MUGS. BUILT FOR TABLES.
  • Hero subhead: Designed to lift, insulate, and grip in all the right ways. Kivra makes the simplest moment feel considered.
  • Brag card: DESIGNED BY LUSION, THE AWARD-WINNING DESIGN STUDIO. … The world's most unnecessarily sophisticated cork coaster.

Visual foundations

Palette behavior

  • Background is always --color-pitch-darkness (#100904). Sections do not change background. Variation comes from imagery, not surface tone.
  • Foreground is always --color-cork-dust (#ffedd7), used at full saturation. No half-opacity gray for muted text — instead step to --color-aged-stone or --color-faint-hazel.
  • Rust accent (#dc5000) is rationed. Reserved for: primary CTA fill, single ghost-button outline, focus rings, model-number type ornament, the occasional vertical rule. Never a headline color.
  • Olive / moss greens appear only in product photography (cutting-mat backdrop) and never as UI fills.
  • The rainbow-spectrum gradient is a once-per-page feature — hero or single full-bleed section. Never on cards, buttons, or small surfaces.

Type

  • halyard-display-variable is the workhorse — display headlines, body, nav, buttons, badges. Variable weights 400–700; negative tracking (-0.018em mid, -0.045em huge) gives the dense engineered feel. Substituted with Inter in this project (see Font substitutions below).
  • Literata (light/italic) is the foil — used sparingly for a serif subheading or a pull-quote when one section needs warmth. Italic at 300 weight is the canonical use.
  • DM Mono for codes, model numbers, technical captions. 14px / 1.33.
  • Body never exceeds 16px on marketing. The system favors small body next to gigantic display, which is part of the visual signature.
  • Headlines reach 410px (--text-display-hero) — the brand wordmark itself functions as a hero image.

Layout

  • Full-bleed dark surfaces. No max-width content wrappers that show empty bands of background — the dark is the design.
  • Asymmetric grids. Hero anchors a large wordmark top-left, a vertical model-name pill on the right edge, a small floating info card bottom-left, a small video card bottom-right. Centerline empty for product hero imagery.
  • Vertical rhythm via section gap (45px) and large product imagery — no horizontal rules between sections.
  • Sticky right-edge model selector is a distinctive fixed element. Rotated text, pill-bordered.
  • Section gap 45px / element gap 18px / card padding 18px. Stick to these.

Backgrounds

  • Backgrounds are either flat Pitch Darkness or full-bleed product photography. There is no third option.
  • Product photography has a warm, slightly yellow-orange tint and a tactile, in-progress feel (cutting mat, paperclips, pencils, x-acto knives). Subjects are floating or top-down.
  • No abstract gradients on regular sections. No noise-texture overlays. No stripes/patterns.

Animation & states

  • Easing: smooth and slow. Cubic-bezier-style ease-out, ~400–600ms. Nothing bouncy, nothing snappy.
  • Hover (buttons): subtle background-color darkening (~10–15%). No scale, no shadow change.
  • Hover (text links): opacity shift to ~70% — minimal underline behavior; underlines only appear on inline body links.
  • Press: 1px translateY, no scale-down.
  • Page entry: fades, mask-reveals, slow vertical drifts. Never slide-from-right or spring-pops.
  • Scrolling: the brand likes a small SCROLL TO CONTINUE affordance with a chevron — copy that pattern.

Borders, shadows, depth

  • No drop shadows. The system is flat. Depth comes from texture in imagery, not elevation.
  • Borders are 1px, in --color-deep-mocha, --color-cork-dust, or --color-rust-accent. Hairlines only.
  • Cards: 12px radius, faded-bark fill, deep-mocha 1px border, 18px padding, no shadow.
  • The bottom-left "DESIGNED BY LUSION" card is a notable specimen: light, low-opacity cream surface with backdrop-blur over the photo backdrop. This is the closest the system gets to a glass effect — reserve for floating cards over imagery.
  • No inner shadows. No protection gradients. If text sits on a busy photo, the photo is composed to leave room (e.g. dark vignette corner). Reach for backdrop-blur cards before reaching for gradient scrims.

Corner radii

  • Cards: 12px (slightly soft, but obviously square-ish).
  • Buttons + badges: 36px → full pill.
  • Inputs: 0px — sharp corners are part of the engineered look. Don't soften them.

Transparency & blur

  • Used sparingly, and only over imagery. The Lusion card on the hero is the canonical example: ~10% cream tint + backdrop-filter: blur(20px).
  • Never on flat dark surfaces.

Imagery color vibe

  • Warm, slightly desaturated, slightly orange-tinted. The cutting mat green is the only cool color, and it reads neutral against the warm wood tones.
  • Photography has light grain and natural shadow falloff — no over-polished CGI sheen, no rim lighting, no bokeh.

Iconography

The brand is resolutely minimal on iconography. Live-site icon usage observed:

  • A small chevron-down under "SCROLL TO CONTINUE."
  • A tiny bullet dot in the top-left corner (status / focus indicator).
  • A play triangle on the video thumbnail.
  • That's roughly it.

There is no icon font, no Phosphor/Lucide/Heroicons set, no sprite sheet visible. Icons are 1-of, hand-placed, simple geometric fills in Cork Dust or Pitch Darkness.

Rules

  • Default to no icon. Most labels stand alone.
  • When you must add one: a simple chevron, dot, triangle, or hairline arrow, drawn as inline SVG. Stroke 1px or solid fill. Color matches surrounding text.
  • No emoji, ever, in product UI. (Acceptable in tongue-in-cheek long-form copy if used surgically — but the default is no.)
  • No unicode pseudo-icons (★ ✓ →) — they don't match the typographic precision of the headlines.
  • CDN substitution: if a richer icon set is needed (rare), use Lucide at 1.25px stroke for closest brand match. Flagged as a substitution — the live brand has no real icon set.

Documented inline-SVG primitives are in ui_kits/marketing/Icons.jsx so you can drop them anywhere.

Font substitutions (please confirm or replace)

Brand font Status Substitute used Action
halyard-display-variable Adobe Fonts (Typekit) — not redistributable Inter (variable, 400/500/600/700) If you have a Typekit kit ID, send it; I'll wire <script src="https://use.typekit.net/<kit>.js"> and update the --font-halyard-display-variable stack.
Literata Free on Google Fonts Literata (full italic + variable weights) None needed.
DM Mono Free on Google Fonts DM Mono None needed.
Arial System Arial None needed.

Currently all three Google-friendly families load via a single @import at the top of colors_and_type.css. Adobe-licensed halyard is not loaded — Inter takes the slot via the font-family fallback chain.

Quick start

<link rel="stylesheet" href="../colors_and_type.css">
<body class="kivra-base">
  <h1 class="kivra-display">Make the simplest moment feel considered.</h1>
  <p class="kivra-body-lg">Designed to lift, insulate, and grip in all the right ways.</p>
  <button class="kivra-btn kivra-btn--primary">Order KIVRA-1</button>
</body>

Or with Tailwind v4: drop tailwind.css into your global stylesheet — all --color-*, --text-*, --spacing-*, --radius-* tokens become utility classes (bg-pitch-darkness, text-cork-dust, text-display, p-18, rounded-3xl, etc.).