To Be Honest (TBH)

Overview

To Be Honest (TBH) is a student-centric mental health platform that transforms therapy and peer support into an accessible, judgment-free experience. The brand embodies 'Warm Minimalism'—a design philosophy that combines clean, uncluttered layouts with vibrant, human-centered accents and playful illustration. The aesthetic evokes approachability and trust: a warm cream canvas (#f8f4f2) anchors the interface, while a bold orange accent (#ff7e3e) signals action, hope, and the energy of peer connection. The emotional response is one of immediate comfort—students feel seen, not clinical.

The voice is conversational, direct, and free of jargon. TBH speaks like a trusted peer, not a textbook. Vocabulary favors concrete, action-oriented language: 'Join now,' 'Talk to a therapist,' 'Find your people.' The brand personality is optimistic without being saccharine, professional without being cold. Example sentence in TBH's voice: 'Your mental health matters. Let's figure this out together, on your terms.'

Colors

The color system centers on a warm, neutral foundation with strategic accent deployment. The primary surface (#f8f4f2, a soft warm beige) creates psychological safety and visual calm—it's the canvas on which all interaction happens. On-surface text (#211e1d, near-black) maintains high contrast (WCAG AAA) for accessibility and readability at 16px body size.

Primary (#ff7e3e, a warm coral-orange) is the brand's signature accent and appears exclusively on CTAs, active states, and key interactive elements. This color is intentionally warm and approachable—not a cold blue, not a corporate red—signaling energy and invitation. Secondary (#3b82f6, a bright sky blue) supports the primary and is used for secondary actions, highlights, and accent illustrations (e.g., the blue background behind hero

Typography

The type system pairs Recoleta (a high-contrast serif with personality) for headlines with Modern Era (a clean, geometric sans-serif) for body and UI text. This pairing creates visual hierarchy and emotional resonance: Recoleta's bold, expressive forms command attention and convey confidence ('Mental health, reimagined for students'), while Modern Era's neutrality ensures readability and approachability in dense content. Display (70px, 900 weight) is reserved for hero headlines; headline-lg (48px, 700 weight) for section titles; headline-md (36px, 700 weight) for subsections. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) are used for copy blocks and descriptions, with 28px and 24px line-heights respectively to ensure comfortable reading. Label-md (14px, 800 weight) is applied t

Layout

The layout system uses a 12-column grid with a max-width of 1280px and 24px horizontal gutters (reduced to 10px on desktop for tighter container alignment). The page rhythm relies on generous vertical spacing: sections are separated by lg spacing (40px) on mobile, increasing to 60px on desktop, creating a breathing room that reflects the brand's calm, unhurried aesthetic. The hero section uses a two-column asymmetric layout on desktop (6 columns for text, 6 for imagery) with centered alignment on mobile. Container max-widths vary by section (1100px, 1050px, 1200px observed) to create visual interest while maintaining readability. White-space is treated as a design element, not wasted space: the 24px gutter between grid columns and the 40px lg spacing between sections are intentional pauses

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering, not through dramatic drop-shadows. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.05)) for cards and subtle UI elements, md (0 4px 6px rgba(0, 0, 0, 0.1)) for elevated cards and modals, and lg (0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)) for the highest-priority overlays. Shadows are soft and diffuse, never harsh, reflecting the brand's warm, approachable aesthetic. Interactive elements (buttons, cards) use a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition when moving between states, cr

Shapes

The shape philosophy is 'Approachable Geometry'—rounded corners are used consistently to soften the interface and signal friendliness, but not so aggressively as to feel childish. Buttons use lg radius (1rem, 16px), creating a pill-like form that feels inviting and clickable. Cards and containers use xl radius (1.5rem, 24px) for a more pronounced roundness that suggests openness and accessibility. Input fields use DEFAULT radius (0.5rem, 8px) for a subtle, professional appearance. Badges and accent icons use full radius (9999px) to create perfect circles or pills, emphasizing their role as hig

Components

Action Elements Buttons are the primary interaction mechanism and use a bold, high-contrast design. Primary buttons (button-primary) have a background of {colors.primary} (#ff7e3e) with {colors.on-primary} text (#211e1d), padding of 15px 33px, and lg radius (16px). The label-md typography (14px, 800 weight) ensures text is compact and scannable. On hover, the background shifts to #ff9966 (primary-fixed-dim) and the element scales to 1.02 via transform: scale(1.02), with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. Secondary buttons (button-secondary) use a white background with a 1px border in {colors.outline-variant} (#999999), maintaining the same padding and radius. On hover, the background becomes {colors.surface-container-high} (#e8e3e0) and the border shifts to {colors.outlin

Do's and Don'ts

**Do**

• Do use the primary orange (#ff7e3e) exclusively on CTAs and active states—it's the brand's signature and should feel special, not ubiquitous.
• Do maintain the warm cream surface (#f8f4f2) as the default background; it's the foundation of the brand's approachable aesthetic.
• Do pair Recoleta headlines with Modern Era body text to create visual hierarchy and emotional resonance without sacrificing readability.
• Do use lg spacing (40px) between major sections to create breathing room and reduce cognitive load.
• Do apply subtle shadows (sm elevation) to cards and elevated elements; avoid harsh drop-shadows that feel corporate or dated.
• Do use full radius (9999px) for badges and accent icons to emphasize their role as highlights and callouts.
• Do include 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive state changes to create responsive, polished interactions.

**Don't**

• Don't use the primary orange on non-interactive elements or backgrounds; it dilutes its power as a CTA signal.
• Don't apply harsh shadows or gradients that contradict the warm, approachable aesthetic—keep depth subtle and diffuse.
• Don't mix serif and sans-serif typefaces beyond Recoleta + Modern Era; additional fonts fragment the visual identity.
• Don't reduce padding or spacing below the defined scale (xs: 4px, sm: 12px, md: 24px); cramped layouts feel anxious and unwelcoming.
• Don't use near-black (#000000) or pure white (#ffffff) for large text areas; stick to on-surface (#211e1d) and surface-bright (#ffffff) for better warmth and readability.
• Don't apply rounded corners smaller than DEFAULT (8px) to primary interactive elements; they should feel inviting, not sharp.
• Don't override focus states or remove outlines for accessibility compliance; use the defined focus-ring pattern (3px inset box-shadow with primary color at 0.1 opacity).