Busy Bee

Overview

Busy Bee is a recruitment software platform designed for small-to-medium businesses that want to simplify hiring without sacrificing professionalism. The brand embodies a 'Playful Minimalism' aesthetic—combining warm, energetic accent colors (teal, cyan, blue) with clean typography and generous whitespace to make HR feel collaborative rather than bureaucratic. The visual language is deliberately approachable: rounded corners (6–12px), soft shadows (0 2px 12px rgba(51, 51, 51, 0.26)), and a vibrant hero illustration featuring a woman at work in a colorful, organized environment. The emotional response is one of calm competence: users feel supported, not overwhelmed.

The brand voice is conversational, direct, and occasionally playful—never corporate-speak. Busy Bee speaks to HR managers and founders as peers, using Romanian idioms and humor (e.g., 'zumzăie' meaning 'hum along peacefully' vs. 'bâzâie' meaning 'buzz chaotically'). The vocabulary favors action words (atrage, simplify, concentrate) and avoids jargon. Example sentence in brand voice: 'Creează-ți site-ul de cariere într-un minut—nu ai nevoie de cunoștințe tehnice, totul se face intuitiv.'

Colors

The Busy Bee color system balances a professional core with energetic accents. Primary (#247bff) is a confident, trust-building blue used on all CTAs, active states, and key interactive elements—it signals action without aggression. Secondary (#45bfb7) is a warm teal that appears in highlights, hover states, and the accordion open state (box-shadow: 0 0 0 2px #45bfb7, 0 0 0 6px rgba(69, 191, 183, 0.3)), creating a sense of progress and calm. Tertiary (#38d1ff) is a bright cyan reserved for supporting accents and illustrations, adding visual energy without competing for attention. Error (#ff1d25) is a vivid red for validation and alerts, applied sparingly. The surface stack is deliberately light: surface (#ffffff) for primary content, surface-container-low (#f7f8fa) for subtle section backg

Typography

The type system uses a single sans-serif family (system-ui stack) across all scales, prioritizing clarity and web performance. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with confident presence; headline-lg (40px, 700 weight) is reserved for major section titles like 'Cum funcționează?'; headline-md (28px, 600 weight) breaks up content into digestible chunks. Body text (16px, 400 weight, 24px line-height) is set at a comfortable measure with 1.5 line-height for accessibility. Labels (14px, 600 weight) are used on buttons and form fields, with 0.01em tracking to add subtle sophistication. The type pairing communicates 'modern but approachable'—bold headlines (700 weight) contrast with regular body text (400 weight), creating visual hierarchy without fussiness. On sma

Layout

The layout uses a fluid 12-column grid with a max-width of 1320px (container-max-width), scaling down to 1140px at 1200px viewport, 960px at 992px, and 720px at 768px. This ensures content remains readable on all devices without excessive line lengths. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections (hero, 'Cum funcționează?', FAQ); md (24px) is used for card padding and component internal spacing; sm (12px) for form field padding and list item gaps. The gutter is 24px on desktop, reducing to 16px on mobile. Whitespace is generous—sections breathe with 40–64px vertical separation—reflecting the brand's 'calm efficiency' philosophy. The hero section uses a two-column layout (text left, illustration right) on desktop, stacking vertically on mobile. Ca

Elevation & Depth

Depth in Busy Bee is achieved through subtle shadows and border treatments rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow, representing the primary content plane. Level 2 (Cards & Inputs): 1px solid border in #ccc or #ededed, with a soft shadow of 0 2px 12px color-mix(in srgb, #333 26%, transparent)—this creates gentle separation from the background. Level 3 (Modals, Dropdowns, Elevated States): the same 1px border plus a stronger shadow of 0 3px 8px rgba(0, 0, 0, 0.15), signaling higher importance. Hover states on cards transition from Level 2 to Le

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but not excessive, balancing approachability with professionalism. Buttons use 6px (DEFAULT) or 8px (md) border-radius, creating a friendly but not childish appearance. Cards and input fields use 6px (DEFAULT) or 8px (md) radius. The accordion items use 6px radius with a 1px border, and when open, the border becomes 2px in the secondary color (#45bfb7). Larger containers and modals use 12px (lg) or 20px (xl) radius for visual emphasis. The full (9999px) radius is reserved for badges and pill-shaped elements. This graduated sc

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #247bff background, white text, 18px font-size, 600 weight, 12px 24px padding, and 6px border-radius. On hover (button-primary-hover), the background transitions to #1a5ecf over 0.2s, providing clear feedback. The button-secondary uses a light gray background (#f2f2f2), dark text (#333333), and a 1px solid #ededed border; on hover, it shifts to #f0f9fa (surface-container-high). The button-dark is used for primary CTAs in the header ('Conectează-te') and uses #333333 background with white text, 40px height, and 5px border-radius. All buttons include a 0.2s ease transition on background-color and box-shadow to signal interactivity.

Containers & Surfaces Cards (card component) have a whit

Do's and Don'ts

**Do**

• Do use the primary blue (#247bff) exclusively for CTAs, active states, and focus indicators—it's the brand's signature accent and must remain distinctive.
• Do maintain generous whitespace (40–64px between sections, 24px internal padding) to reinforce the 'calm efficiency' brand personality.
• Do apply the 0.2s ease transition to all interactive elements (buttons, cards, inputs) to signal responsiveness and build user confidence.
• Do use the secondary teal (#45bfb7) for success states, accordion open states, and highlights—it's the 'progress' color and should feel encouraging.
• Do keep border-radius between 6–12px for interactive elements and 12–20px for larger containers to maintain the 'soft-technical' aesthetic.
• Do use the system-ui font stack for all text—it's performant, accessible, and aligns with the modern, no-nonsense brand voice.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to #333333 for text and #ffffff for surfaces to maintain warmth.
• Don't apply shadows stronger than 0 3px 8px rgba(0, 0, 0, 0.15)—heavier shadows feel corporate and contradict the approachable brand.
• Don't mix border-radius values within the same component family (e.g., don't use 4px on one button and 12px on another)—consistency reinforces professionalism.
• Don't use the tertiary cyan (#38d1ff) on interactive elements like buttons—reserve it for illustrations and supporting accents only.
• Don't reduce line-height below 1.5 on body text or 1.2 on headings—the brand prioritizes readability and accessibility over density.
• Don't apply transitions longer than 0.3s on interactive elements—faster feedback (0.2s) feels more responsive and aligns with the 'efficient' brand promise.