---
name: Misuko Be
description: "This site is a strong example of a restrained, high-end service portfolio that uses photography and typography to build brand trust."
version: alpha

colors:
  background: "#F2EFE3"
  primary: "#000000"
  secondary: "#6A6965"
  neutral: "#BCBEB2"
  bg-soft: "#FCF9EE"
  line: "rgba(188,186,178,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.15px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 34px
    lineHeight: 1.12
    fontWeight: 400
    letterSpacing: "-0.75px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.36
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A B2B service provider for healthy drink formulation and production.

*A clean, professional packaging studio for beverage brands*

## Colors

Earthy, muted background palette with sharp black typography for high contrast.

- **Background (`#F2EFE3`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#6A6965`)** — uses `ink-soft` token
- **Muted (`#BCBEB2`)** — uses `muted` token
- **Borders (`rgba(188,186,178,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Headlines use tight negative letter-spacing
- Body text maintains a comfortable 1.36 line-height
- Nav links and body copy share the same base font size

## Layout

Split-screen hero layout transitioning into a full-width alternating image-and-text grid.

*Rhythm:* Generous padding inside sections (e.g., 116px top/bottom) creates a rhythmic, breathing layout.

## Elevation & Depth

- rgba(0,0,0,0.15) 0px 0px 8px 3px
- Borders: Thin 1px borders in muted tones (#BCBEB2) or solid black (#000000) are used for buttons and structural dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Pill-shaped outline buttons with black borders and uppercase text, or simple text links with a preceding arrow icon.
- **card:** Content is presented in large, split-screen blocks rather than traditional cards.
- **chip:** Minimal use of chips, focusing on clean text links for navigation.
- **input:** Standard form fields with thin borders.
- **hero:** A massive split-screen block featuring a large headline on one side and a full-height lifestyle image on the other.

## Do's and Don'ts

**Don't:**
- don't use vibrant or neon colors — screenshot shows a muted, earthy palette of beige, brown, and black
- don't use heavy drop shadows — screenshot shows minimal, almost imperceptible shadowing on elements
- don't use centered text for main copy — screenshot shows left-aligned headlines and body text throughout
- don't use cluttered layouts with many columns — screenshot shows a clean, spacious split-screen grid
- don't use decorative or script fonts — screenshot shows clean, functional grotesque-sans typography
- don't use rounded cards with soft backgrounds — screenshot shows sharp, full-bleed imagery and crisp borders

---

## System Prompt (paste into AI agent)

```
This is a B2B service website for a beverage production and packaging studio. The design is clean, professional, and grounded in an earthy palette of beige (#F2EFE3), black (#000000), and muted gray (#6A6965). The typography is a clean grotesque-sans with tight negative letter-spacing on headlines, creating a modern and structured feel. The layout utilizes large, split-screen sections that pair bold text with high-quality product photography. Critical constraints: Do not introduce bright accent colors or gradients; maintain the warm, neutral aesthetic. Do not use centered text layouts; stick to strong left alignment. Avoid cluttered, multi-column grids in favor of spacious, breathable split-screen arrangements.
```