Bee Home

# Bee Home — Style Reference
> natural blueprint, organic craft

**Theme:** light

Bee Home's design system evokes a handcrafted blueprint aesthetic, combining structured layouts with an organic, tactile feel. Predominantly monochrome with subtle creams and charcoal grays, the visual system suggests natural materials and understated functionality. Typography uses a single confident, yet friendly, sans-serif, often in outlined states for interactive elements. Components prioritize soft edges and a light touch, focusing on content over heavy decoration.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Inkwell Black | `#2a2920` | `--color-inkwell-black` | Primary text, headings, button borders, navigation accents — a deep, muted charcoal that provides strong contrast against lighter surfaces |
| Canvas Cream | `#e9e9e1` | `--color-canvas-cream` | Secondary text, ghost button outlines, navigation borders, card backgrounds in content areas. Serves as a less stark alternative to pure white, contributing to the organic feel |
| Linen White | `#ffffff` | `--color-linen-white` | Card backgrounds, overall page background in some sections, providing a clean working surface |
| Stone Gray | `#d3d3ce` | `--color-stone-gray` | Subtle card backgrounds, creating a slight visual distinction from Canvas Cream without introducing strong color |
| Text Secondary Dim | `#2a29208a` | `--color-text-secondary-dim` | Muted helper text and secondary information, a translucent variant of Inkwell Black |

## Tokens — Typography

### Neue Haas Unica W1G — All textual elements from body copy to headings. Its singular weight and consistent line height contribute to a unified, approachable voice across the interface. The custom font choice avoids generic system fonts. · `--font-neue-haas-unica-w1g`
- **Substitute:** Helvetica Neue
- **Weights:** 400
- **Sizes:** 14px, 16px, 17px, 28px, 32px
- **Line height:** 1.30
- **Role:** All textual elements from body copy to headings. Its singular weight and consistent line height contribute to a unified, approachable voice across the interface. The custom font choice avoids generic system fonts.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-sm | 14px | 1.3 | — | `--text-body-sm` |
| heading | 28px | 1.3 | — | `--text-heading` |
| heading-lg | 32px | 1.3 | — | `--text-heading-lg` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 6 | 6px | `--spacing-6` |
| 9 | 9px | `--spacing-9` |
| 10 | 10px | `--spacing-10` |
| 12 | 12px | `--spacing-12` |
| 14 | 14px | `--spacing-14` |
| 20 | 20px | `--spacing-20` |
| 30 | 30px | `--spacing-30` |
| 40 | 40px | `--spacing-40` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 22px |
| buttons | 38px |
| navItems | 38px |

### Layout

- **Section gap:** 40px
- **Card padding:** 20px
- **Element gap:** 6px

## Components

### Pill Ghost Button (Inkwell Text)
**Role:** Primary Call to Action

Ghost button with Inkwell Black text and a 2px stroke border of Inkwell Black. Rounded with a 38px radius, providing a tactile, pill-like shape. Padding: 6px top, 9px bottom, 20px horizontal.

### Pill Ghost Button (Canvas Text)
**Role:** Secondary Call to Action, Navigation

Ghost button with Canvas Cream text and a 2px stroke border of Canvas Cream. Rounded with a 38px radius for a soft, pill-like appearance. Padding: 6px top, 9px bottom, 20px horizontal.

### Underlined Text Button
**Role:** Tertiary Action, Inline Navigation

Ghost button with Inkwell Black text and a 2px stroke border of Inkwell Black, but with a 0px radius, essentially creating an underlined text link. Padding: 0px top/bottom, 30px horizontal.

### Content Card (Linen White)
**Role:** Categorized Content Display

Card with Linen White background and no shadow, featuring a top border-radius of 22px and bottom squared (0px). No internal padding specified for primary content.

### Content Card (Canvas Cream)
**Role:** Categorized Content Display

Card with Canvas Cream background and no shadow, featuring a top border-radius of 22px and bottom squared (0px). No internal padding specified for primary content.

### Content Card (Stone Gray)
**Role:** Categorized Content Display

Card with Stone Gray background and no shadow, featuring a top border-radius of 22px and bottom squared (0px). No internal padding specified for primary content.

## Do's and Don'ts

### Do
- Use Neue Haas Unica W1G weight 400 for all text, maintaining a consistent brand voice without font variation.
- Prioritize Canvas Cream (#e9e9e1) and Inkwell Black (#2a2920) for ghost button borders and primary text to highlight interactive elements.
- Apply a 38px border-radius to all interactive buttons and navigation items for a distinct pill shape.
- Use 22px border-radius for cards, applied only to the top corners, to create a consistent grounded element.
- Employ a 2px solid border for all strokes, borders, and outlined elements to maintain the handcrafted aesthetic.
- Maintain a compact spacing rhythm, with element gaps typically around 6px and card padding at 20px.
- Utilize Inkwell Black for primary text and headings, providing strong legibility against cream and white backgrounds.

### Don't
- Avoid using box-shadows or significant elevation; maintain a flat, natural surface aesthetic.
- Do not introduce additional font weights or families; Neue Haas Unica W1G 400 is the only typographic choice.
- Steer clear of vivid or vibrant colors; the palette is strictly monochrome with muted, natural tones.
- Do not use sharp 0px radii for cards or buttons, unless it explicitly represents an underlined text link.
- Avoid large empty spaces; maintain a compact information density across layouts.
- Do not add gradients or complex background fills; surfaces should be solid, single colors.

## Imagery

The imagery is split between stylized product photography and lifestyle photography. Product shots feature the bee home modules as wooden architectural models, precisely lit against a warm, neutral background, emphasizing craftsmanship and material. Lifestyle photography features people engaged in creative or natural activities. All images are contained within rounded (22px) card frames, or integrated seamlessly as background textures for hero sections. Icons are minimal, outlined, and monochromatic, matching the overall subdued aesthetic. Imagery serves both decorative atmosphere and explanatory content, often pairing human activity with the product ethos.

## Layout

The page primarily uses a max-width contained layout, though the hero section is full-bleed. The hero features a centered headline over a background image of the product. Subsequent sections alternate between full-width typographic elements and a grid-based content consumption. A common pattern is a 2-column layout for text and image; images are often treated as cards with specific radii. Vertical spacing is consistent but compact, creating a flowing, unified experience. Navigation is a top-bar sticky header with ghost buttons, converting to a hamburger menu on smaller screens or specific interactions. A consistent feature is the use of large, stylized typographic elements acting as visual dividers or section headlines.

## Agent Prompt Guide

Quick Color Reference:
text: #2a2920
background: #ffffff
border: #2a2920
accent: no distinct accent color
primary action: no distinct CTA color

Example Component Prompts:
1. Create a primary navigation item: "Design" using Neue Haas Unica W1G 400, Canvas Cream (#e9e9e1) text, with a 2px Canvas Cream (#e9e9e1) border, 38px radius, and 6px top, 9px bottom, 20px horizontal padding.
2. Create a content card: using Linen White (#ffffff) background, 22px top-left/top-right radius, 0px bottom-left/bottom-right radius, no shadow or border.
3. Create a section heading: "BEEHOME" using Neue Haas Unica W1G 400, Inkwell Black (#2a2920) text, size 32px, 1.3 line height, centered on a Canvas Cream (#e9e9e1) background. Followed by a body paragraph at 16px size of the same font, Inkwell Black text, with 40px of vertical spacing above.

## Motion Philosophy

Motion is subtle and purposeful, favoring `ease` timing functions over linear, preventing abrupt changes. Durations are generally short (0.2s, 0.3s) for common interactions like color and opacity changes, making UI feel responsive. The presence of a `slideFadeIn` animation hint suggests gentle introductions of content, contributing to a fluid, unobtrusive user experience. Large transitions may use slightly longer durations (0.75s, 2s) for a more deliberate reveal without feeling slow.

## Similar Brands

- **Oura Ring** — Monochrome palette with earthy tones, minimalist UI, and emphasis on product design with high-quality photography.
- **Sense by Headspace** — Tactile, organic aesthetic, soft neutral colors, and subtle UI elements over bold statements.
- **B&O (Bang & Olufsen)** — Focus on natural materials, considered typography, and an understated, premium visual identity, with subtle ghost buttons.
- **Linear (before dark mode)** — Clean, functional design with a strong typographic presence and minimal use of color for functional accents, though Bee Home is softer.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-inkwell-black: #2a2920;
  --color-canvas-cream: #e9e9e1;
  --color-linen-white: #ffffff;
  --color-stone-gray: #d3d3ce;
  --color-text-secondary-dim: #2a29208a;

  /* Typography — Font Families */
  --font-neue-haas-unica-w1g: 'Neue Haas Unica W1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --text-heading: 28px;
  --leading-heading: 1.3;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.3;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 20px;
  --element-gap: 6px;

  /* Border Radius */
  --radius-2xl: 22px;
  --radius-3xl: 38px;

  /* Named Radii */
  --radius-cards: 22px;
  --radius-buttons: 38px;
  --radius-navitems: 38px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-inkwell-black: #2a2920;
  --color-canvas-cream: #e9e9e1;
  --color-linen-white: #ffffff;
  --color-stone-gray: #d3d3ce;
  --color-text-secondary-dim: #2a29208a;

  /* Typography */
  --font-neue-haas-unica-w1g: 'Neue Haas Unica W1G', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body-sm: 14px;
  --leading-body-sm: 1.3;
  --text-heading: 28px;
  --leading-heading: 1.3;
  --text-heading-lg: 32px;
  --leading-heading-lg: 1.3;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;

  /* Border Radius */
  --radius-2xl: 22px;
  --radius-3xl: 38px;
}
```