---
version: alpha
name: Bonsai — Quiet Business Workspace
colors:
  primary: '#000000'
  background: '#FFFFFF'
  announcement: '#F6F4F1'
  rail: '#F2F0ED'
  panel: '#E8E6E3'
typography:
  h1:
    fontFamily: Geist, Arial, sans-serif
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  h2:
    fontFamily: Geist, Arial, sans-serif
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.02em
  body:
    fontFamily: Geist, Arial, sans-serif
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
  navigation:
    fontFamily: Geist, Arial, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  chip: 6px
  action: 200px
spacing:
  desktop-gutter: 30px
  mobile-gutter: 37px
  action-inline: 24px
components:
  primary-action:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.background}'
    rounded: '{rounded.action}'
  feature-chip:
    rounded: '{rounded.chip}'
  category-rail:
    backgroundColor: '{colors.rail}'
  announcement:
    backgroundColor: '{colors.announcement}'
---

## Overview

Bonsai's service-business landing page is quiet, spacious and demonstrative. A centered promise and black trial button lead into a wide product showcase; client, project and finance workflows then receive their own repeated text-and-interface rows. The feeling comes from calm typography and real interface density, not oversized decorative graphics. Reference observed at https://www.hellobonsai.com/ on 2026-09-27, desktop 1440 × 1000 and mobile 390 × 844, scale 1.

## Colors

Use black for headings and pill actions on white. Measured warm-neutral backgrounds are #F6F4F1 for the announcement treatment, #F2F0ED for the category rail, and #E8E6E3 for secondary panels. Keep these quiet surfaces subordinate to the product imagery. The green logo and in-product actions, orange photography and olive-to-orange feature frames are artwork accents, not a site-wide replacement for the black CTA. Their exact hues were not sampled as normative tokens. End the long page in a black utility footer with light text. Do not treat all palette entries as foreground/background pairs.

## Typography

The measured family is Geist with Arial and sans-serif fallbacks. Desktop H1 is 56px/61.6px, weight 500 and -1.12px tracking; major section headings are 50px/57.5px with -1px tracking. Keep weight restrained: hierarchy comes from scale and breathing room. Navigation uses 14px/19.6px; base text is 17px/23.8px. At 390px, the main heading measures 40px/44px with -0.8px tracking and wraps into four centered lines. Section-heading computed styles fall to 33px/37.125px; below-fold mobile composition was not visually inspected. Preserve the contrast between large declarative headings, concise supporting copy and muted eyebrow labels.

## Layout

At 1440px the outer content margin is 30px and the hero H1 occupies a centered 555px-wide block. Keep the announcement separate above the welcome label; place support copy, trial action and review line on a single vertical axis. The category rail begins roughly 600px below the desktop top (visual estimate); it leads directly into the broad product demo over warm architectural photography. Subsequent three-column category cards precede repeated two-column workflow rows: text on the left, screenshot on the right. Text columns measure 654px. Generous inter-section whitespace prevents the long feature list from feeling crowded.

On the observed 390px opening viewport, the hero and demo have 37px side margins, leaving 316px of content. The header keeps logo, trial action and a hamburger; the full desktop menu is absent. The announcement wraps; the primary CTA remains centered rather than full width. The feature rail shows only the leading categories within its own clipped/scrollable region, without document overflow (scrollWidth 390). Do not squeeze every desktop tab into the viewport. Exact breakpoints and menu-open behavior were not tested.

## Elevation & Depth

Most page surfaces are flat. Product screenshots provide their own layered windows, thin separators and quiet shadows. Keep these internal interface effects distinct from the host landing page: do not add heavy floating-card shadows to all sections. Warm photographic backgrounds and colored framing create separation around the demo. The black footer is a strong tonal boundary rather than an elevated panel.

## Shapes

Trial actions use a measured 200px radius, producing compact capsules. Feature links and rail tabs use 6px rounding; action padding is 24px inline in the hero and 18px in the header. Rectangular screenshot frames and tightly aligned tables balance these pills. Use fine outlined icon chips for the workflow capabilities rather than large decorative badges.

## Components

- Header: small left logo, compact product/resource links, right login and black trial pill. Mobile substitutes the hamburger while retaining a visible trial action.
- Announcement: warm neutral capsule with one underlined inline link, followed by a separate muted welcome eyebrow.
- Hero: two-line desktop headline, short supporting sentence, black trial pill and muted star/review row. Review content belongs to this source; do not reuse its numerical claims for another product.
- Product showcase: neutral icon-tab rail above a large application view against warm photo scenery. The hero, thumbnail and full-page captures caught different automatic tab states; this is intentional live-page behavior, not evidence that every state was tested.
- Workflow rows: small category eyebrow, two-line heading, short copy, wrapped capability chips and repeated trial button, paired with a framed screenshot.
- Social proof and teams: compact testimonial grid, two automation/report cards, integration icon cluster and four portrait cards with dark captions.
- Closing conversion: onboarding/support points, another spacious trial section, then a dense black multi-column footer.

## Do's and Don'ts

Do retain the broad white canvas, measured medium-weight type, compact black actions and detailed product imagery. Do let category chips wrap in explanatory sections while the showcase rail preserves its own navigation pattern. Do retain the desktop/mobile hierarchy rather than uniformly shrinking the page. Don't turn the green logo accent into a green background theme. Don't add gradients behind every content block or shadows to every chip. Don't infer hover, menu, signup or tab-click results from static captures. Desktop overview, native-scale crops, hero, thumbnail and mobile opening were visually reviewed; the rejected consent banner is absent from the submitted capture.