--- title: "Bee design system" variant: extended source: https://bee.computer/ captured_at: 2026-10-12 theme: light industry: ai generator: Design DNA (https://four.wiralomi.com/style/bee-computer) ai_generated: true ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content" --- # Bee · Design System > Warm personal AI, expressed in bold yellow and soft cards **Theme:** light · **Industry:** ai · **Source:** https://bee.computer/ · **Captured:** 2026-10-12 (1440×900 desktop) _AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._ Bee pairs a warm off-white canvas and near-black typography with vivid yellow, lavender, and soft gray card surfaces. Large lifestyle photography introduces the wearable, while rounded feature panels and product imagery make the AI’s capabilities feel approachable and tangible. ## North star Let warm, rounded surfaces and real-life product imagery carry the story, with yellow used as a precise brand signal rather than a wash. ## Overview The page balances a quiet, warm canvas (#fbf9f8) with deep olive-black (#21200b) navigation, headings, and footer surfaces. Signal yellow (#ffd900) supplies the strongest brand cue in the logo, controls, and select feature panels; lavender (#d2c4ff) alternates with pale gray cards to organize product capabilities. Oversized lifestyle photography leads the hero, using rounded framing and a dark overlay to keep white headline text legible. Acidgrotesk sets the display voice: bold, compact headlines with confident scale. Inter Variable handles supporting copy and detailed product information. The layout moves from a broad photographic introduction into an asymmetrical feature mosaic, a dedicated search panel, and a centered product presentation. Generous separation between large rounded blocks contrasts with compact text groupings inside them. The footer returns to the dark brand surface and uses oversized yellow lettering as a graphic anchor. ## Colors | Name | Hex | Token | Group | Role | |---|---|---|---|---| | Olive Ink | `#21200b` | `--color-olive-ink` | brand | Primary text, dark navigation and footer surfaces, and dark feature cards. | | Warm Canvas | `#fbf9f8` | `--color-warm-canvas` | surface | Main page background and the open breathing space around sections. | | Stone Card | `#e5e0dd` | `--color-stone-card` | surface | Neutral feature cards and the product and press section backgrounds. | | Signal Yellow | `#ffd900` | `--color-signal-yellow` | accent | Brand mark, highlighted feature panel, button details, and select accents. | | Soft Lavender | `#d2c4ff` | `--color-soft-lavender` | accent | Alternating feature and search panels, with occasional highlighted content. | | Muted Gray | `#b5b4b3` | `--color-muted-gray` | neutral | Measured gradient-section color; secondary and less defining than the main surfaces. | | Pale Blush | `#f7f3f1` | `--color-pale-blush` | surface | Light link and content surfaces, including inset cards against darker areas. | | Pure Black | `#000000` | `--color-pure-black` | semantic | Small isolated card use; not a defining page-wide brand color. | | Clean White | `#ffffff` | `--color-clean-white` | neutral | Hero copy over photography and selected footer links. | | Slate Green | `#535b58` | `--color-slate-green` | semantic | Minor footer color occurrence; not a primary text or surface tone. | | Deep Violet | `#150a45` | `--color-deep-violet` | semantic | Appears in the hiring announcement band shown over the page; treat as announcement-specific. | ### Semantic aliases `--color-canvas` → `#fbf9f8` (Warm Canvas) · `--color-surface` → `#e5e0dd` (Stone Card) · `--color-surface-2` → `#d2c4ff` (Soft Lavender) · `--color-surface-3` → `#21200b` (Olive Ink) · `--color-surface-4` → `#f7f3f1` (Pale Blush) · `--color-text` → `#21200b` (Olive Ink) · `--color-text-muted` → `#ffffff` (Clean White) · `--color-border` → `#ffd900` (Signal Yellow) · `--color-accent` → `#ffd900` (Signal Yellow) · `--color-accent-2` → `#d2c4ff` (Soft Lavender) ### Contrast (WCAG 2.x) | Text | Background | Ratio | Level | |---|---|---|---| | `#21200b` | `#fbf9f8` | 15.68:1 | AAA | | `#21200b` | `#e5e0dd` | 12.57:1 | AAA | | `#21200b` | `#d2c4ff` | 10.25:1 | AAA | | `#ffffff` | `#fbf9f8` | 1.05:1 | fail | | `#ffffff` | `#e5e0dd` | 1.31:1 | fail | | `#ffffff` | `#d2c4ff` | 1.61:1 | fail | | `#ffffff` | `#21200b` | 16.46:1 | AAA | | `#ffd900` | `#fbf9f8` | 1.32:1 | fail | | `#ffd900` | `#e5e0dd` | 1.06:1 | fail | | `#ffd900` | `#d2c4ff` | 1.16:1 | fail | ### Gradients - `linear-gradient(0deg, rgba(0, 0, 0, 0) 57.53%, rgba(0, 0, 0, 0.1) 89.07%), linear-gradient(rgba(0, 0, 0, 0) 12.88%, rgba(0, 0, 0, 0.28) 51.89%)` ## Typography | Family | Token | Source | Weights | Role | Free substitute | |---|---|---|---|---|---| | Inter Variable | `--font-body` | webfont | 400, 600, 500 | Body copy, product details, and selected links. | Inter | | Fff Acidgrotesk | `--font-display` | webfont | 500, 700 | Display headlines, navigation, captions, and buttons. | Space Grotesk | - **Inter Variable:** Use readable regular body text with restrained negative tracking; medium and semibold weights support subheads. - **Fff Acidgrotesk:** Bold display headlines and medium UI labels; large type feels compact and direct, without forced uppercase. ### Type scale — Augmented Fourth (ratio ≈ 1.431, base 16px) | Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for | |---|---|---|---|---|---|---|---| | display | 96px | 700 | 1 | -0.033em | — | Fff Acidgrotesk | Oversized hero and footer brand wordmark-style display. | | h1 | 59px | 700 | 1.2 | 0 | — | Fff Acidgrotesk | Primary hero headline. | | h2 | 48px | 700 | 1.2 | 0 | — | Fff Acidgrotesk | Major feature and product section headings. | | h3 | 32px | 600 | 1.5 | 0 | — | Inter Variable | Feature titles and prominent supporting headings. | | h4 | 24px | 500 | 1.2 | -0.016em | — | Inter Variable | Product and card subheadings. | | body | 16px | 400 | 1.8 | -0.03em | — | Inter Variable | Explanatory copy and product descriptions. | | caption | 13px | 500 | 1.5 | -0.03em | — | Fff Acidgrotesk | Eyebrows, short labels, and compact card notes. | | button | 20px | 500 | 1 | 0 | — | Fff Acidgrotesk | Primary rounded calls to action. | | nav | 16px | 500 | 1.5 | 0 | — | Fff Acidgrotesk | Header navigation and compact site links. | | link | 24px | 500 | 1 | 0 | — | Inter Variable | Prominent footer or announcement links. | ## Spacing & layout - Base unit **2px**, density **compact**. - Scale (most used values): 5, 6, 8, 13, 16, 19, 24, 26, 32, 40, 48, 50, 57, 60, 80 px. - Section rhythm 40px · element gap 8px · card padding — · max content width 1376px. The measured content max width is 1376px, with the screenshot showing broad, inset blocks and full-bleed media within rounded containers. The opening is a two-column hero, followed by a feature split and an irregular two-column card mosaic; a single-column lavender search panel breaks that rhythm. Product and press sections are centered and card-led. Use compact internal groupings, clear section separation, and alignment that shifts between left-led feature content and centered product headings. ## Shape & elevation - Radius: button `9999px` · card `38px` · nav `9999px` · link `38px` · xs `38px` · pill `9999px` - No box shadows measured: the page is flat. - Motion: standard transition `0.4s ease` on interactive elements. The design is mostly flat: color blocks and generous rounded corners define cards instead of drop shadows. Large cards use a measured radius around 38px, while pill-shaped navigation and buttons use fully rounded ends. Preserve contrast through surface changes and selective borders; avoid adding prominent elevation or decorative outlines. ## Imagery Use natural lifestyle photography prominently in the hero and feature split, with warm light and a visible wearable in context. Product and capability sections use device and app imagery inside rounded, pastel or neutral panels. Keep image compositions large and immersive; the hero has a darkened photographic treatment behind white text. The page includes a product video thumbnail, but the visual system is primarily photography and interface imagery rather than illustration. ## Components ### Top navigation A dark Olive Ink bar with the yellow Bee mark at left and an outlined pill-shaped Bee Pioneer link at right. ### Photographic hero Large rounded lifestyle image with an overlaid video thumbnail, small introduction label, and oversized white headline near the bottom. ### Feature split A bright yellow text panel sits beside a lifestyle photo; concise benefit rows use fine dividers. ### Capability cards An asymmetric mosaic alternates Stone Card, Soft Lavender, and dark surfaces, framing app screenshots and short feature labels. ### Search panel A full-width lavender block centers a heading above a phone interface image. ### Product details Centered Bee Pioneer presentation with device imagery, compact feature details, and a yellow-on-dark rounded CTA. ### Press and footer A rounded neutral logo cloud leads into a dark footer with yellow links and oversized yellow brand lettering. ### Measured component styles - **Primary button** (“Learn more about Bee Pioneer”): background #21210a · text #ffd900 · border 1px solid #21210a · radius 100px · padding 22px 30px · 500 20px Fff Acidgrotesk - **Link** (“View openings”): transparent background · text #ffffff · radius 0px · padding 0px · 500 24px Inter Variable - **Card** (“Suggested to-dos”): background #e5e0dd · text #21200b · radius 38.325px · padding 0px · 400 12.775px Fff Acidgrotesk - **Navigation item** (“Bee Pioneer”): transparent background · text #21200b · radius 0px · padding 0px · 400 12.775px Fff Acidgrotesk ## Do - Use warm off-white as the primary page canvas. - Keep Olive Ink for strong text and dark brand surfaces. - Reserve Signal Yellow for recognizable highlights and actions. - Alternate lavender and stone cards to group capabilities. - Use rounded framing for major images and card surfaces. - Pair oversized Acidgrotesk headlines with restrained Inter copy. ## Don't - Do not make every section yellow or lavender. - Do not replace lifestyle photography with generic abstract gradients. - Do not add heavy shadows to flat card layouts. - Do not make body copy compete with the display headlines. - Do not force all sections into identical centered grids. - Do not treat screenshot-only colors as core brand colors. ## Agent prompt Build a new Bee-style page with a warm, human product feel. Use Warm Canvas (#fbf9f8) as the main background and Olive Ink (#21200b) for primary text and dark surfaces. Apply Signal Yellow (#ffd900) sparingly to brand marks and key actions; use Soft Lavender (#d2c4ff) and Stone Card (#e5e0dd) to distinguish feature panels. Set display headlines in a bold Acidgrotesk-like face and supporting copy in Inter. Create a strong photographic lead image with rounded framing, then vary the content rhythm with split layouts, asymmetric capability cards, and a centered product feature. Keep cards flat, with broad rounded corners and compact internal copy. Favor clear hierarchy and generous separation over ornamental effects. ## Page sections (top to bottom) | # | Type | Layout | UX patterns | UI patterns | |---|---|---|---|---| | 1 | hero | Two-column hero led by a large rounded lifestyle image and overlaid video thumbnail. | Product introduction, Primary product link, Video preview | Dark top navigation, Yellow logo, White overlay headline, Rounded photography | | 2 | feature-grid | Feature split followed by an asymmetric, multi-column card mosaic. | Benefit overview, Capability discovery | Yellow text panel, Lifestyle image, Lavender and stone cards, App screenshots | | 3 | product-showcase | Single-column lavender panel with centered heading and phone interface image. | Conversational search demonstration | Lavender surface, Centered phone mockup | | 4 | product-detail | Centered product title and device image above an inset feature-details area. | Price and availability, Feature overview, Product CTA | Neutral rounded panel, Device product image, Dark pill button with yellow text | | 5 | logo-cloud | Centered heading above a single row of five rounded press-logo tiles. | Press credibility | Stone Card background, Pale logo tiles, Centered alignment | | 6 | footer | Dark rounded footer with logo, grouped links, app badges, and oversized brand lettering. | Site navigation, Social links, App downloads | Olive Ink surface, Yellow links and wordmark, Multi-column link groups | ## Source CSS custom properties (selected) ```css --base-color--light-black: #21200b; --base-color--black: #000; --base-color--white: white; --border-color--border-primary: #eee; --base-color--dark-green: #121e1b; --text-color--text-secondary: #222; --link-color--link-primary: #2d62ff; --base-color--off-white: #f7f3f0; --background-color--background-tertiary: #dd23bb; --background-color--background-warning: #f6f6f0; --text-color--text-warning: #c2c2a8; --base-color--yellow: #ffd900; --base-color--violet: #d2c4ff; --base-color-neutral--neutral-lightest: #eee; --base-color-neutral--neutral-darker: #222; --base-color-brand--blue: #2d62ff; --base-color-brand--pink: #dd23bb; --base-color--grey: #f6f6f0; --base-color--light-olive: #c2c2a8; ``` --- 本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 Generated by Design DNA · https://four.wiralomi.com/style/bee-computer