Bento

Overview

Bento is a creator-first outreach platform designed with warm, organic minimalism and bold typographic presence. The design system evokes approachability and efficiency through a carefully balanced palette: a deep forest green (#014638) anchors trust and professionalism, while a vibrant yellow (#f7ee6f) energizes CTAs and moments of user success. The aesthetic movement is 'Creator-Centric Warmth'—combining the precision of modern SaaS with the human, approachable feel of a trusted collaborator. The UI celebrates creator achievements through playful micro-interactions (0.18s transitions, subtle lift effects on hover) and a generous, breathing layout that respects user attention.

The brand voice is direct, encouraging, and peer-to-peer. Bento speaks to creators as collaborators, not customers. Vocabulary emphasizes agency ('land deals', 'your voice', 'always-on partner') and avoids corporate jargon. Tone is conversational yet professional—confident without arrogance. Example sentence in brand voice: 'Your pitch, drafted in your voice—ready to send in 60 seconds.'

Colors

The color system is built on a warm, earthy foundation with strategic accent pops. Primary (#f7ee6f, a warm butter yellow) is the signature CTA color—used on all action buttons, success states, and key interactive moments. It commands attention without aggression, reinforcing the brand's approachable energy. Secondary (#014638, deep forest green) is the brand's trust anchor, deployed in headers, navigation, and premium UI elements; it conveys stability and creator-focused values. Tertiary (#b1b3f8, soft periwinkle) provides a secondary accent for status badges, highlights, and supporting UI—creating visual rhythm without competing with primary. The surface stack uses warm off-whites and creams (#f9f8f7 base, #f7f6f0 card, #ffffff paper) to evoke natural, tactile materials. Error red (#ff4d

Typography

The type system pairs NeuePlak (custom, 900 weight) for display-level headlines with Archivo (700–900 weights) for secondary headings, creating a bold, confident visual hierarchy. Body copy uses Inter (400–600 weights) for clarity and readability at small sizes. Inter Tight (600–700 weights) handles UI labels and buttons, providing a compact, modern feel. Display headlines (76.8px, 900 weight, -0.04em letter-spacing) anchor hero sections with dramatic presence; headline-lg (48px, 700 weight) breaks sections; headline-md (32px, 700 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and feature descriptions, maintaining 1.55 line-height globally for comfortable reading. Label-md (15.2px, 600 weight) is applied to all buttons and interactive lab

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered with 24px gutters on desktop. Sections stack vertically with 80px padding (lg spacing) between major sections on desktop, reducing to 40px on tablet and 24px on mobile. The hero section spans full-width with a two-column grid (content left, visual right) that collapses to single-column on screens below 1060px. Container max-widths vary by section (1060px, 1180px, 920px, 820px) to create visual rhythm and prevent monotony. White-space is generous: 40px (lg) separates major content blocks, 24px (md) separates cards within a grid, 12px (sm) separates inline elements. The spacing scale is semantic: 'unit' (8px) is the baseline; 'xs' (4px) for micro-spacing; 'sm' (12px) for component padding; 'md' (24px) for section marg

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle vertical lift on interaction. Level 1 (Base): no shadow; flat surfaces at surface-container-lowest (#f7f6f0). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); used on cards, modals, and floating UI. Level 3 (Elevated/Hover): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); applied on button hover and card hover states. Interactive elements use a 0.18s ease transition for shadow and transform changes. Buttons lift 2px on hover (transform: translateY(-2px)) paired with shadow elevation. Focus states add a 4px ring at r

Shapes

The shape philosophy is 'Soft-Technical Warmth'—combining rounded corners with precision to feel both approachable and modern. Buttons and primary CTAs use full radius (999px) to maximize approachability and visual softness. Cards and containers use lg radius (22px) for a balanced, friendly feel. Input fields use full radius (999px) to match button styling and create a cohesive interaction zone. Secondary UI elements (badges, tags) use full radius (999px). Modals and overlays use xl radius (32px). Dividers and subtle UI use sm radius (4px). The rationale: full-radius buttons and inputs signal

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#f7ee6f) background with {colors.on-primary} (#151f16) text, 11px 20px padding, 44px height, and full radius (999px). On hover, apply transform: translateY(-2px) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 0.18s ease transition. Button-secondary uses transparent background with a 1.5px border at rgba(247, 238, 111, 0.5) and {colors.primary} text; on hover, increase border opacity to 0.8 and add a subtle background tint (rgba(247, 238, 111, 0.08)). Button-ghost uses transparent background with a 1px border at rgba(1, 70, 56, 0.35) and {colors.secondary} text; on hover, apply background: rgba(1, 70, 56, 0.08). All buttons use {typography.label-md} (15.2px, 600 weight, Inter Tight)

Do's and Don'ts

**Do**

• Do use {colors.primary} (#f7ee6f) exclusively for primary CTAs and success moments—it's the signature brand accent and should never be diluted.
• Do apply full radius (999px) to all buttons and primary input fields to maximize approachability and signal 'safe to interact'.
• Do use {typography.display} (NeuePlak, 900 weight) only for hero headlines; it's a premium asset and loses impact if overused.
• Do maintain 0.18s ease transitions on all interactive state changes (hover, focus, active) to create a cohesive, polished feel.
• Do respect the lg spacing (40px) between major sections and md spacing (24px) between cards to create visual breathing room.
• Do apply the focus ring (4px at rgba(1, 70, 56, 0.16)) to all interactive elements for accessibility and visual clarity.

**Don't**

• Don't use {colors.secondary} (#014638) as a background for body text—it's a trust anchor for headers and premium UI only.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't apply shadows to flat, surface-level elements; reserve {elevation.md} and {elevation.lg} for cards, modals, and hover states.
• Don't use Inter or Inter Tight for display headlines; NeuePlak and Archivo are the only approved display typefaces.
• Don't reduce line-height below 1.55 globally; body copy must remain readable and spacious.
• Don't disable transitions on interactive elements; the 0.18s ease timing is core to the brand's polished, responsive feel.