---
version: alpha
name: Kirby — Asymmetric CMS Workshop
colors:
  primary: '#000000'
  white: '#FFFFFF'
  supporting-copy: '#999999'
  form-surface: '#F0F0F0'
  light-divider: '#E0E0E0'
typography:
  display:
    fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
  section-heading:
    fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.125
  feature-copy:
    fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.125
  navigation:
    fontFamily: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
  technical-label:
    fontFamily: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  control: 4px
spacing:
  button-y: 8px
  button-x: 24px
  mobile-gutter: 24px
  desktop-gutter: 96px
components:
  primary-action:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.white}'
    typography: '{typography.technical-label}'
    rounded: '{rounded.control}'
  technical-content:
    backgroundColor: '{colors.white}'
    textColor: '{colors.primary}'
    typography: '{typography.technical-label}'
  feature-description:
    textColor: '{colors.supporting-copy}'
    typography: '{typography.feature-copy}'
---

## Overview
Kirby's homepage feels like a carefully arranged developer workshop rather than a conventional centered SaaS pitch. A plain, regular-weight promise sits above a very large CMS panel demonstration. Technical labels, file-tree diagrams, editorial whitespace, thin connector lines, and staggered product imagery explain how the system works. The palette is almost neutral; a richly marbled green/blue demonstration backdrop and small yellow icon accents carry the visual interest.

This reference was inspected at 1440 × 1000 and 390 × 844 on 2026-09-29. The desktop full-page screenshot is 6209px tall. Tokens are measured computed values. Unmeasured visual details are identified as estimates. Mobile screenshot evidence covers the opening viewport, with lower-page geometry available from the DOM; not all mobile sections or interactions were visually tested. Only the displayed company demo state is documented, not every selector or theme state.

## Colors
Use black for headings, navigation, primary actions, and technical text, with white for panels and inverted labels. The page has a very subtle pale warm-to-cool background wash visible in the capture; its stops were not measured and should not be treated as flat white brand tokens. The newsletter panel is measured #F0F0F0, and light divider surfaces include #E0E0E0.

Feature descriptions are measured #999999, directly beneath black headings of the same size. This muted pairing is distinctive but low-contrast on a pale surface; when adapting it, darken explanatory text to meet the intended accessibility standard rather than claiming the observed treatment passes. Small yellow download/lightning accents and the demonstration's saturated marble are image/icon accents; their exact colors were not sampled. Do not promote them into invented global palette values.

## Typography
Rely on the system sans-serif stack instead of a custom display family. The desktop H1 is 48px with 48px leading at weight 400 and a measured width of about 382px. Its two short lines are intentionally modest next to the enormous product demonstration. Feature headings and accompanying gray descriptions both use 28px/31.5px, retaining an editorial continuity between title and explanation.

Technical material uses SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace at 14px/21px: demo selectors, code excerpts, and CTA labels. Desktop navigation is 16px with 16px leading; purchase-oriented links become weight 600. At 390px the H1 is 40px/40px across 342px, still two lines. Keep the distinction between plain-language sans-serif and technical monospace; do not set the whole page in code type.

## Layout
The desktop header and main text align to measured 96px side margins, giving a 1248px content span. Place the outline hexagonal mark left and a dense but light navigation row right. Leave substantial vertical whitespace before the two-line heading. The two hero controls align on its right at the desktop width rather than directly beneath it.

Let the demonstration bleed to the left edge and occupy most of the width, leaving a narrow right-hand list of use cases. The selected company view shows a CMS interface framed by a marbled background. Subsequent feature stories shift horizontally: the files-and-folders copy begins at x=96, the power section at x=504, and the multi-device section at x=772, with 320px-wide desktop copy blocks. Thin stepped connector lines visually join the file tree, code card, and later feature illustrations. Preserve this deliberate asymmetry instead of flattening everything into identical cards.

At 390px the header presents logo, menu icon, and search. The main gutter is 24px. Hero buttons move below the headline as a two-item row. The use-case list moves above the product illustration and becomes two columns. The screenshot then scales to the full viewport width. These are observed rearrangements, not just proportional scaling. No precise breakpoint is inferred from two viewport samples. Large section separations are visually estimated around 120–180px; they are not extracted spacing tokens.

## Elevation & Depth
Most of the page is flat, with delicate rules rather than filled containers. The floating site.txt card and device/browser demonstrations have soft, diffuse shadows. Keep shadows local to objects that represent actual windows or files. The marbled hero frame gives the panel depth through texture, not a generic gradient glow. Avoid boxing every feature paragraph or adding heavy shadows to the navigation.

## Shapes
CTA rectangles have a measured 4px radius with 8px vertical and 24px horizontal padding. This restrained rounding is materially different from pill-button marketing sites. Use straight connector lines, rectangular browser/code surfaces, and a sharply outlined geometric logo. Rounded corners on larger demo surfaces are subtle; exact values were not sampled. The circular theme control over the demo is an exception, not the primary control shape.

## Components
- Header: compact outline brand symbol, resource-oriented navigation, stronger Try/Buy links, and a minimal search icon. Mobile substitutes an icon menu; its expanded state is untested.
- Hero actions: outlined New in v5 control beside black Try now, both with monospace labels and small icons. Desktop measured widths are about 156px each with a 12px gap.
- Demonstration selector: a narrow monospace link list with a subtle selected marker and underline. Mobile turns it into two columns above the demo. Switching behavior and the alternate themes were not tested.
- File explanation: text block paired with a color-coded directory tree leading down to a white code/content card. Keep the tree legible and the lines thin.
- Feature sequence: staggered text, browser images, mobile mockup, and a dark code panel, rather than repeating one left-right template mechanically.
- Social proof: a multirow monochrome logo field followed by testimonial columns with thin black left rules, small portraits, and monospace role text. Source testimonials are examples of layout, not reusable claims.
- Community section: editorial text and social links on the left; pale-gray newsletter form on the right with two white inputs and a full-width black subscribe control. Form submission and validation were not exercised.
- Footer: small utility link columns and payment/support marks, retaining the same quiet surface rather than introducing a heavy color block.

## Do's and Don'ts
- Do use actual interface imagery as the main product proof, with neutral framing and a distinctive visual backdrop.
- Do preserve the contrast between ordinary sans-serif prose and monospace technical controls.
- Do deliberately reorganize the selector and hero controls for mobile.
- Don't replace the asymmetric explanatory sequence with an undifferentiated grid of rounded cards.
- Don't reproduce the source's low-contrast gray copy without checking readability.
- Don't infer working theme toggles, dropdowns, or forms from the captured resting states.