Kimera Corp — Design System Reference

1. Visual Theme & Atmosphere

Kimera Corp is a type foundry and branding studio, and its homepage is built like a shop window for its own typefaces — a dense masonry grid of typeface releases (Melange Grotesk, Waldenburg, Apparat), identity work (Souvenir, Transmoderna, Wastecare), and physical products (keychains, posters, a printed “Release Notes” publication), all sitting behind a functioning shopping cart. The signature move is that the site sets its own UI type — Waldenburg — as the body face across the entire interface, so browsing the catalogue is itself a live demo of the product. The palette stays almost entirely black-on-white, letting a tightly rationed set of accents (an electric blue, two greens, a brick red) do all the color work, usually as small UI flags rather than backgrounds. Typography runs unusually small and dense — 12px body copy, 9.6px paragraphs, a 6.6px uppercase button label — which reads less like an oversight and more like a foundry flexing that its type holds up at small, functional sizes with full OpenType feature sets (calt, kern, liga, rclt, rlig, rvrn) switched on. The overall tone is clinical, confident, and product-first: a studio selling craft through restraint.

2. Color Palette & Roles

Foundation

• #fff (--white) — page canvas, footer surface
• #000 (--black) — body text, primary button background, cart container background
• #eaeaea (--kimera-white) — off-white UI surface (grid item cards, inverted button text/border)
• #d6d6d6 (--kimera-grey) — secondary surface (.kimera-button fill)
• #bcbcbc (--kimera-medium-grey) — mid-tone UI grey
• #4b4b4b (--kimera-dark-grey) — dark UI grey, likely muted text/secondary labels

Accents (functional, not decorative)

• #15abff (--kimera-blue) — the one saturated brand accent; used on the cart-items counter badge
• #48ec6c (--kimera-green) / #31c852 (--kimera-green-dark) — success/positive state pair
• #c84531 (--kimera-red) — warning/error or destructive state

Utility

• hsla(0,0%,59%,.4) (--kimera-filter-color) — a translucent grey overlay, used for filter/dim treatments (likely category filters or disabled states)

Roles observed

• body — transparent background, black text and border (the page itself carries no explicit fill; white comes from the canvas beneath)
• footer — white background, black text
• button — black background, #eaeaea text and border (an inverted “stamp” treatment, similar in spirit to a dark pill on a light page)
• span.cart-items-counter — kimera-blue background, black text (the single spot of saturated color in the default chrome)

Surface luminance confirms a tight four-step ramp: pure white page-overlay (1.0) → #eaeaea grid-item-inner (0.918) → #d6d6d6 kimera-button (0.839) → pure black shopping-cart container (0). Depth is built entirely from that grey ramp, not from color.

3. Typography Rules

One typeface family runs the entire interface: Waldenburg, falling back to Arial, sans-serif. Waldenburg is also one of the foundry’s own commercial releases (sold on this same page as /typefaces/waldenburg) — the studio uses its own product as its UI font, which is the whole point of the site.

Principles

• Hierarchy is carried almost entirely by weight (400 vs 700) and by size shifts inside a very small type scale — the whole system lives under 12px at the base tier, with p and button dropping even smaller.
• body/h4/a run the lean "kern"-only feature set; p and button switch on the full contextual set (calt, liga, rclt, rlig, rvrn) — the richer OpenType treatment is reserved for reading copy and interactive labels, where ligatures and contextual alternates matter most.
• Buttons are the only uppercase, tracked text in the system (0.528px letter-spacing at 6.6px) — a micro-label treatment, not a heading treatment.
• Positive tracking scales inversely with size: p gets 0.192px at 9.6px, button gets 0.528px at 6.6px — smaller text is opened up more to stay legible.

4. Component Stylings

Buttons (default button element)

• Black background, #eaeaea text and matching #eaeaea border — an inverted stamp, same logic as an ink-on-paper pill
• Text set 6.6px uppercase Waldenburg with 0.528px tracking — a genuinely tiny, badge-like button label

.kimera-button

• Fills with --kimera-grey (#d6d6d6), radius driven by --kimera-button-border-radius: 2em — a fully pill-shaped, size-relative radius (scales with the button’s own font-size rather than a fixed pixel value)

Grid item cards (.grid-item-inner)

• #eaeaea surface — the off-white card tier that separates catalogue tiles from the pure-white page canvas

Cart badge (.cart-items-counter)

• --kimera-blue (#15abff) fill with black text — the only moment the brand accent appears as a filled chip rather than a line or state color

Shopping cart container

• Pure black (#000) inner surface — the deepest point on the luminance ramp, reserved for the cart drawer/panel

Radius system

• General radius token: --kimera-border-radius: 0.7rem (renders at 13.2px in the extracted DOM, implying a non-16px root size)
• Button-specific radius: --kimera-button-border-radius: 2em — pill shape, relative to element font-size
• No shadows detected anywhere in the extracted system

5. Layout Principles

• Grid gaps are explicit and small: --kimera-grid-gap: 8px (column) and --kimera-grid-row-gap: 14px (row) — a tighter horizontal rhythm than vertical, typical of a masonry/tile catalogue where cards need to breathe more vertically than horizontally.
• --kimera-side-padding: 1.25rem sets the outer page margin; header padding (4px 15px) and footer padding (2.4px 15px, 4px bottom) are both far shallower than the side padding, keeping chrome thin so the product grid dominates the viewport.
• --kimera-small-gap: max(4px, min(0.333em, 8px)) is a genuinely fluid spacing token — it scales with the element’s own font-size (0.333em) but is clamped between 4px and 8px, so tiny UI clusters (badges, icon+label pairs) never collapse or overflow regardless of local type size.
• body and main are fully reset (0 padding, 0 margin) — all spacing is delegated to header, footer, and the grid gap tokens rather than the document flow.
• Breakpoint set — 480 / 767–768 / 769 / 1023–1024 — reads as three real tiers (mobile / tablet / desktop) expressed as paired max-width/min-width queries, a standard Nuxt/CSS-modules pattern rather than anything bespoke.

6. Depth & Elevation

Depth is a pure greyscale ramp, with zero shadows in the extracted system:

Each tier is a small, deliberate step down from white — page overlay, then card surface, then button fill — before the system jumps all the way to black for the cart drawer. That jump (0.839 → 0.0) is the only dramatic contrast move in the whole ramp, which makes the cart panel feel like a distinct, weightier layer rather than another card in the stack. --kimera-filter-color: hsla(0,0%,59%,.4) is the one non-opaque token — a translucent mid-grey scrim, presumably for filter dropdowns or dimmed/inactive states.

7. Do’s and Don’ts

Do

• Set body copy in Waldenburg at 12px/18px line-height with "kern" only — reserve the fuller OpenType feature set (calt, liga, rclt, rlig, rvrn) for p and button text specifically.
• Keep buttons small, uppercase, and tightly tracked (6.6px, 0.528px letter-spacing) — treat them as labels, not headlines.
• Build depth from the grey ramp (#fff → #eaeaea → #d6d6d6 → #000), not from shadows.
• Reserve --kimera-blue for functional badges (cart counters, active states) rather than large fills.
• Use the 2em pill radius only on button-class elements; keep the 0.7rem radius for general cards/containers.
• Let the small, clamped gap token (max(4px, min(0.333em, 8px))) handle tight inline clusters so they scale with local type size without breaking.

Don’t

• Don’t introduce a second typeface — the entire system, including the tiniest UI labels, runs on Waldenburg.
• Don’t add box-shadows for elevation; none exist in the source system, and the greyscale-ramp approach is the whole point.
• Don’t blow out the accent colors (blue, greens, red) into backgrounds or large surfaces — they’re state/badge colors, not brand wallpaper.
• Don’t use a fixed pixel radius on buttons — the 2em token is intentionally relative to the button’s own type size.
• Don’t loosen the header/footer padding to match the side padding — chrome stays thin on purpose so grid content reads as the main event.

8. Responsive Behavior

Breakpoints cluster at 480, 767/768, and 769/1023/1024 — effectively three tiers (mobile, tablet, desktop) expressed through paired max-width/min-width queries rather than a single clean set, consistent with a component-scoped Nuxt build. The fluid --kimera-small-gap token (max(4px, min(0.333em, 8px))) is the clearest responsive signal in the token set: spacing that tracks local font-size but never drops below 4px or exceeds 8px, so compact UI groupings stay legible from the smallest to the largest tier without a media query of their own.

9. Agent Prompt Guide

Build a UI that matches Kimera Corp’s design language.

Use Waldenburg (fallback Arial, sans-serif) as the only typeface, site-wide — this is a type-foundry product page, so the UI font is itself the exhibit. Run body/nav/link text at 12px/18px line-height with "kern"-only features; drop paragraph copy to 9.6px/14.4px with 0.192px tracking and the full OpenType feature set (calt, kern, liga, rclt, rlig, rvrn) switched on; set buttons at a tiny 6.6px, uppercase, 0.528px tracking, with the same full feature set. Keep weight binary — 400 for everything except h4 at 700 — and let size and case carry hierarchy. Base the palette on black text on a white canvas (#000 / #fff), with #eaeaea for card surfaces, #d6d6d6 for secondary button fills, and pure black for the deepest panel (a cart drawer or modal). Reserve #15abff for small functional badges only (like a cart counter), and hold #48ec6c/#31c852 and #c84531 back as success/error state colors, not decoration. Radius: 0.7rem on general containers, a fully relative 2em pill on button-class elements. No shadows — depth comes purely from the white → #eaeaea → #d6d6d6 → black luminance ramp. Grid gaps stay tight (8px columns, 14px rows), side padding at 1.25rem, and header/footer padding kept shallow (4–15px range) so a dense product grid dominates the page.

Generated by Sparkbites — extracted from live CSS analysis