AI Design Brief

Company: Ultimate Performance Academy (UPA)

Mission Statement:
To redefine what success means for the modern man by forging Kings who build powerful businesses, unlock their freedom, and rise to lead with purpose and legacy.

Brand Positioning:
A systematic transformation engine for Australian male business owners, grounded in battle-tested strategy, proven frameworks and tactical accountability. Not a motivation brand.

Brand Personality:
- Premium and professional
- Results-driven and action-oriented
- Supportive but demanding
- Masculine energy with family focus
- High performance culture

Company Values:
1. Shoshin - Beginners Mind (Humility)
2. Unyielding Thirst For Growth (Improvement)
3. Everything Worldclass (Discipline)
4. Complete Ownership (Stories)
5. Collaboration (Teamwork)
6. Passion (Enthusiasm)
7. Actions Not Words (Trust)
8. Live By The Codes (Prosperity)

Target Audience:
- Australian male business owners, mid 30s to late 50s
- 80% trades and service-based businesses, blue-collar backgrounds
- Minimum 5 employees, turnover $500k to $3.5M+
- Mostly self-taught, left school around year 10
- Trapped by their own success. Working 60+ hour weeks with health, relationships and identity suffering
- Three emotional states: Overstretched Providers, Disconnected Partners and Fathers, Battle-Weary Heroes

Yellow 400: #facc15  /* Primary accent, CTAs, highlights */
Black 950:  #09090b  /* Text, backgrounds, premium feel */
White:      #FFFFFF  /* Backgrounds, text on dark */

Yellow 50:  #fefce8
Yellow 100: #fef9c3
Yellow 200: #fef08a
Yellow 300: #fde047
Yellow 400: #facc15  /* Brand primary */
Yellow 500: #eab308  /* Hover */
Yellow 600: #ca8a04  /* Active */
Yellow 700: #a16207
Yellow 800: #854d0e
Yellow 900: #713f12

Black 50:   #fafafa
Black 100:  #f5f5f5
Black 200:  #e5e5e5
Black 300:  #d4d4d4
Black 400:  #a3a3a3
Black 500:  #737373
Black 600:  #525252
Black 700:  #404040
Black 800:  #262626
Black 900:  #18181b
Black 950:  #09090b  /* Brand primary */
Black 1000: #000000

Success 700: #15803D  /* AA on white, 5.02:1 */
Warning 700: #C2410C  /* AA on white, 5.18:1 */
Error 600:   #DC2626  /* AA on white, 4.83:1 */
Info 600:    #2563EB  /* AA on white, 5.17:1 */

Yellow Brand:     linear-gradient(135deg, #facc15 0%, #FDE047 100%)
Black to Yellow:  linear-gradient(135deg, #09090b 0%, #facc15 100%)
Gold Linear:      linear-gradient(135deg, #9E9300 0%, #867E01 50%, #E3D302 100%)
Silver Linear:    linear-gradient(135deg, #C0C0C0 0%, #808080 100%)

Font Family: Inter (Google Fonts, loaded via next/font)
Fallback:    ui-sans-serif, system-ui, sans-serif
Weights:     400, 500, 600, 700, 800, 900

Type Scale (strict 8px-divisible):
Display:           72px, weight 900, line-height 1.1,  letter-spacing -0.03em  /* Logo only */
Hero Headline:     64px, weight 800, line-height 1.1,  letter-spacing -0.02em
Marketing Headline: 56px, weight 800, line-height 1.15, letter-spacing -0.02em
Feature Heading:   48px, weight 800, line-height 1.2,  letter-spacing -0.02em
Page Title H1:     40px, weight 800, line-height 1.2,  letter-spacing -0.015em
Section Heading H2: 32px, weight 800, line-height 1.25
Card Heading H3:   24px, weight 800, line-height 1.3
Body:              16px, weight 400, line-height 1.6
Small:             14px, weight 400, line-height 1.5   /* Metadata only */

1:  4px
2:  8px
3:  12px
4:  16px
5:  20px
6:  24px
8:  32px
10: 40px
12: 48px
16: 64px
20: 80px
24: 96px

sm:   4px    /* Inline elements, tags */
md:   8px    /* Inputs, buttons, small cards */
lg:   12px   /* Primary cards, panels */
xl:   16px   /* Feature cards, modals */
2xl:  24px   /* Hero cards, marketing blocks */
full: 9999px /* Pills, avatars */

sm:  0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25)

Primary:
- Background: #facc15
- Text:       #09090b
- Weight:     700
- Padding:    12px 24px
- Radius:     8px
- Hover:      #eab308

Secondary:
- Background: transparent
- Text:       #09090b (light) / #FFFFFF (dark)
- Border:     2px solid #d4d4d4 (light) / #404040 (dark)
- Weight:     600
- Padding:    10px 22px
- Radius:     8px
- Hover:      #f5f5f5 (light) / #262626 (dark)

- Height:        44px minimum
- Padding:       12px 16px
- Border:        1px solid #d4d4d4
- Radius:        8px
- Font size:     16px
- Focus:         2px Yellow 400 ring
- Error state:   #DC2626 border, #FEE2E2 background
- Success state: #15803D border, #DCFCE7 background

Success: #DCFCE7 background, #166534 text, check icon
Warning: #FFEDD5 background, #9A3412 text, triangle icon
Error:   #FEE2E2 background, #991B1B text, cross icon
Info:    #DBEAFE background, #1E40AF text, info icon

- Background: #FFFFFF (light) / #09090b (dark)
- Border:     1px #e5e5e5 (light) / #404040 (dark)
- Radius:     12px
- Padding:    24px
- Shadow:     shadow-md on hover

- Body text contrast: minimum 4.5:1
- Large text (24px or 19px bold): minimum 3:1
- UI and graphic contrast: minimum 3:1
- Touch targets: minimum 44 by 44 pixels
- Focus rings: 2px, clearly visible in both themes
- Never rely on colour alone, always pair with icons, labels or patterns

1.  Maintain 4.5:1 contrast minimum for body text
2.  Use Inter for every UI and content element
3.  Never drop below 16px for body copy
4.  Line-height 1.6 for body, 1.1 to 1.3 for headings
5.  Letter-spacing -0.02em for headings 48px and above
6.  Maximum line length 50 to 75 characters
7.  Always include icons with status colours
8.  Test every design on mobile before publishing
9.  Yellow is for CTAs, accents and highlights only, never body text
10. Never use Yellow text on white backgrounds