SayBriefly

Overview

SayBriefly is a scope-management and project-tracking platform designed for freelancers, studios, and small teams who need to lock agreements and prevent scope creep. The brand embodies a philosophy of clarity through constraint: every meeting becomes a deliverable, every Figma comment is monitored, and every change is visible. The aesthetic is 'Structured Minimalism with Playful Accents'—a deliberate contrast between a calm, paper-like cream canvas (#fcfaf5) and a bold forest-green primary (#173300) paired with a vibrant yellow accent (#ffeb5b). The UI evokes the feeling of a well-organized brief: clean, intentional, and impossible to misinterpret. The emotional response is one of relief: users feel in control, not overwhelmed.

The brand voice is direct, confident, and slightly irreverent. SayBriefly speaks to the frustration of scope creep with empathy and humor, never condescending. Vocabulary leans toward action verbs (deliver, lock, monitor, detect) and concrete nouns (brief, deliverable, task, change). The tone avoids corporate jargon; instead, it uses the language of makers and teams. Example sentence in brand voice: 'Your brief is locked. Every change gets flagged. Scope creep dies here.'

Colors

The color system is built on a principle of high contrast and intentional hierarchy. The primary color, forest green (#173300), is the brand's signature and appears on all CTAs, primary navigation, and locked-state indicators. It conveys trust, stability, and authority—the feeling of a locked brief. The on-primary color is a bright, almost acidic yellow (#ffeb5b), which creates maximum contrast (WCAG AAA) and signals action and urgency. Secondary colors are soft pastels drawn from a playful palette: cyan (#a8e5e5) for calm, supportive UI elements; soft pink (#f6d0ff) and soft blue (#a5b3f1) for accent highlights in feature cards; and a warm orange (#dd6c3e) for warnings or change-detection alerts. The surface stack is anchored in a warm cream (#fcfaf5) that mimics paper, with progressively

Typography

The type system pairs Bricolage Grotesque (a geometric, slightly playful sans-serif) for headlines and display text with Inter (a neutral, highly legible sans-serif) for body and UI copy. This pairing communicates both personality and clarity: Bricolage brings warmth and character to headlines, while Inter ensures body text is scannable and precise. The display level (80px, 800 weight) is reserved for hero headlines like 'Deliver what was agreed. And stop scope creep.' Headline-lg (48px, 700 weight) is used for section titles and major feature headings. Headline-md (32px, 600 weight) is for subsection titles. Title-lg (22px, 600 weight) is for card titles and prominent labels. Body-lg (18px, 400 weight) is for hero copy and long-form descriptions. Body-md (16px, 400 weight) is the default

Layout

The page layout uses a 12-column grid with a max-width of 1320px, centered on the viewport. The spacing philosophy is 'generous white space with semantic rhythm': sections are separated by lg spacing (40px on mobile, 64px on desktop) to create breathing room and visual hierarchy. The gutter (24px) is applied consistently to all container padding and horizontal margins, creating a predictable rhythm. The hero section uses a full-width radial gradient background (#ffeb5b at 25% opacity) that fades to transparent, creating a subtle energy without overwhelming the content. Cards and containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. The navigation bar is sticky and uses a dashed border (2px dashed #b6b6b6) to create a visual separation from t

Elevation & Depth

Depth in SayBriefly is achieved through a subtle shadow system and strategic use of borders rather than heavy drop shadows. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and standard containers, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. The primary visual separator is the dashed border (2px dashed #b6b6b6), used on the navigation bar, dropdown menus, and card borders to create a sense of intentional structure without visual heaviness. Cards tr

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are used strategically to soften the geometric grid without sacrificing clarity. The rounded scale progresses from sm (4px) for small UI elements like input focus rings, to DEFAULT (6px) for buttons and small cards, to md (12px) for navigation items and dropdown menus, to lg (16px) for standard cards and containers, to xl (20px) for larger feature cards and modals, and full (40px) for badges and pill-shaped elements. Buttons use DEFAULT (6px) to feel modern but not overly rounded. Cards use lg (16px) to create a friendly, appro

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (solid forest green with yellow text), secondary (transparent with green text and dashed border), and ghost (transparent with green text and no border). Primary buttons use 48px height, 12px 24px padding, and 6px border-radius. On hover, the background darkens to #0a3400 with a 200ms transition using cubic-bezier(0.22, 1, 0.36, 1) for a snappy, intentional feel. Secondary buttons use a 2px dashed border in #b6b6b6, which transitions to solid green on hover. Ghost buttons are used for tertiary actions and have no border; they transition to a light gray background on hover. All buttons use Inter at 14px, 600 weight, with 0.01em letter-spacing.

Containers & Surfaces Cards are the primary c

Do's and Don'ts

**Do**

• Do use the forest green (#173300) primary color exclusively on CTAs, active navigation items, and locked-state indicators to maintain visual hierarchy and brand recognition.
• Do pair Bricolage Grotesque headlines with Inter body text to create a balance between personality and clarity; never use Bricolage for body copy.
• Do apply the dashed border treatment (2px dashed #b6b6b6) to navigation, dropdowns, and card borders to reinforce the hand-drawn, intentional aesthetic.
• Do use the yellow accent (#ffeb5b) only on primary buttons and urgent badges; overuse dilutes its signal strength.
• Do maintain the 24px gutter and 40px section spacing consistently across all breakpoints to preserve the rhythm and breathing room.
• Do use the cubic-bezier(0.22, 1, 0.36, 1) easing function for all interactive transitions (200–300ms) to create a snappy, premium feel.

**Don't**

• Don't use the secondary colors (cyan, pink, blue) on primary CTAs or navigation; reserve them for supporting UI elements and feature-card icons.
• Don't apply heavy drop shadows (> 0.2 opacity) or blur effects; the system relies on subtle shadows (0.06–0.15 opacity) and dashed borders for depth.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the visual system.
• Don't mix Bricolage Grotesque and Inter weights arbitrarily; follow the defined typography scale (display, headline-lg, headline-md, title-lg, body-lg, body-md, label-md, label-sm).
• Don't reduce the gutter below 24px or section spacing below 40px on desktop; white space is a core part of the brand identity.
• Don't use the primary green (#173300) on backgrounds or large surface areas; it's an accent color, not a canvas color.