Trenali YouTube Coaching

Overview

Trenali YouTube Coaching embodies a **Structured Clarity** aesthetic—a design philosophy that transforms complex business coaching into an intuitive, confidence-building visual experience. The brand serves ambitious business owners seeking YouTube mastery, lead generation, and sales growth through personalized systems and community. The UI employs a warm, neutral palette (cream #F6F6F5, soft taupe #C1B39A, deep navy #122B56) anchored by a vibrant growth-green primary (#37ca37) that signals action, progress, and opportunity. The emotional response is one of calm professionalism mixed with energetic possibility—users feel guided, not overwhelmed.

The voice is direct, results-oriented, and conversational. Trenali speaks in the language of business outcomes: "leads," "sales," "growth," "system." Sentences are short, active, and benefit-driven. The brand avoids hype; instead, it promises clarity and proven methodology. Example: "Your YouTube system generates leads while you sleep—we show you how."

Colors

The color system balances **warm neutrals with strategic accent deployment**. The primary green (#37ca37) appears exclusively on CTAs, active states, and key conversion moments—it's the color of "go" and "growth." Secondary blue (#188bf6) supports secondary actions and highlights, creating visual rhythm without competing for attention. The tertiary mauve (#c292a1) is reserved for badges, testimonials, and softer supporting elements.

Surface colors form a deliberate hierarchy: the base surface (#F6F6F5) is a near-white cream that feels warm and approachable, never sterile. Surface containers progress through soft grays (#F1EFEB → #CEDCE0 → #A3BECC) to create depth without darkness. The outline navy (#122B56) is used sparingly for borders, dividers, and the vertical timeline element (2px so

Typography

The type system pairs **Carrois Gothic for headlines** (bold, uppercase-friendly, commanding presence) with **Lexend for body and UI text** (geometric, highly legible, modern). This pairing creates a visual hierarchy that feels both authoritative and approachable. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements; Headline-lg (40px, 600 weight) anchors sections; Body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at 1.5 line-height ratio. Labels use 14px Lexend with 0.01em tracking for UI clarity. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain contrast. Strong text within body copy uses Carrois Gothic at 1.15em with 800 weight and 1px letter-spacing for emphasis without breaking rhythm.

Layout

The layout operates on a **12-column fluid grid with a 1170px max-width container**, centered with 24px gutters on desktop. Sections use 40px (lg spacing) for vertical separation, creating a breathing rhythm that prevents cognitive overload. The design favors 50/50 and 70/30 column splits for two-column layouts, with 100% full-width sections for hero and call-to-action zones. Padding within cards is consistently {spacing.md} (24px), with {spacing.sm} (12px) for compact UI elements like badges and list items. The container max-width of 1170px ensures readability while accommodating video embeds and wide imagery. Mobile breakpoint at 480px collapses to single-column with 20px padding, maintaining the visual hierarchy through typography scale rather than layout complexity.

Elevation & Depth

Depth is conveyed through **subtle layering and strategic borders** rather than heavy shadows. The primary elevation technique uses a 2px solid border in outline-variant (#C1B39A) on cards and containers, creating a hand-drawn, intentional aesthetic. For video containers and modals, apply box-shadow: none with a 2px solid border in #000000 (as seen in .cvideo-LQRNjXQXHkv), creating a bold frame effect. The vertical timeline uses a 2px solid #122B56 line (via .vertical-line-center::before) to anchor multi-step processes. Hover states transition background-color over 200ms, never shadow blur-rad

Shapes

The shape language is **Geometric Precision with Warmth**—a blend of sharp utility and approachable curves. Buttons and inputs use 10px border-radius (DEFAULT rounded token), creating a slightly softened rectangle that feels modern without being overly rounded. Cards and containers also use 10px, maintaining consistency. Step indicators and badges use 50% border-radius (full token) for perfect circles, signaling completion and achievement. FAQ headings use 50px border-radius for pill-shaped containers, creating visual interest in long-form content. The 15px radius (lg token) is used sparingly

Components

Action Elements Buttons are the primary conversion driver. The button-primary uses {colors.primary} (#37ca37) background with white text, 16px horizontal padding, 48px height, and 10px border-radius. On hover, transition to {colors.primary-fixed-dim} (#37ca37 at reduced opacity) over 200ms. The button-ghost variant uses a 2px solid primary border with transparent background, ideal for secondary actions. All buttons use Lexend at 14px, 600 weight, with 0.01em letter-spacing for UI clarity. Apply a 3px focus ring (rgba(55, 202, 55, 0.3)) on keyboard navigation.

Containers & Surfaces Cards use {colors.surface-container} (#F6F6F5) background with a 2px solid {colors.outline-variant} (#C1B39A) border and 24px padding. On hover, transition background-color to {colors.surface-container-h

Do's and Don'ts

**Do**

• Do use the primary green (#37ca37) exclusively for CTAs, active states, and moments of conversion—never for passive elements or backgrounds.
• Do pair Carrois Gothic headlines with Lexend body text; this pairing is the brand's signature and ensures visual hierarchy.
• Do apply 2px solid borders in outline-variant (#C1B39A) on cards and containers; this creates the hand-crafted, intentional aesthetic.
• Do use 40px (lg spacing) for section separation and 24px (md spacing) for card padding to maintain breathing room.
• Do transition all interactive states over 200ms ease-in-out; this signals responsiveness without feeling sluggish.
• Do use 10px border-radius for buttons and inputs; this is the brand's default and creates visual consistency.

**Don't**

• Don't use heavy shadows (blur-radius > 12px) or drop shadows; the brand relies on borders and flat layering for depth.
• Don't apply the primary green to backgrounds, text bodies, or passive elements—reserve it for interactive moments only.
• Don't mix Carrois Gothic and Lexend weights arbitrarily; use Carrois Gothic at 600–800 weight for headlines and Lexend at 400–600 for body.
• Don't exceed 1170px container width; this ensures readability and maintains the intentional, focused layout.
• Don't use rounded corners > 50px except for full circles (50% radius); the brand avoids over-rounded, bubbly aesthetics.
• Don't apply color transitions longer than 200ms; the brand feels responsive and immediate, not sluggish or delayed.