Tuku Group — Manifesto Landing Page Template

Template Overview

A reusable template for creating ultra-minimal, manifesto-style landing pages that follow the Tuku Group design system. Perfect for sub-brands, ventures, and creative projects under the Tuku Group umbrella.

Design Philosophy: Craft over noise. Fewer, better, slower.

---

Quick Start

1. Copy Template

cp -r TEMPLATE-MANIFESTO-LANDING/ [YOUR-PROJECT-NAME]/
cd [YOUR-PROJECT-NAME]/

2. Customize Content

Replace all placeholder text in index.html:

• [BRAND NAME] → Your brand name
• [BRAND DESCRIPTION] → Meta description
• [HERO COPY LINE 1-3] → Hero section copy
• [PHILOSOPHY LINE 1-3] → Brand philosophy
• [ACCENT CONCEPT 1-3] → Gold-highlighted concepts
• [EMAIL] → Contact email
• [SUBJECT] → Email subject line

3. Add Your Wordmark

• Replace images/wordmark.svg with your brand's SVG wordmark
• Ensure SVG is optimized and uses pure black (#000000)
• Test scaling at different screen sizes

4. Customize Styling (Optional)

• Adjust --color-gold in CSS for different accent color
• Modify wordmark scaling in .wordmark img transform: scale()
• Update accent class name from .accent-header to brand-specific

---

Design System Specifications

Typography

• Primary Font: JetBrains Mono (loaded via Google Fonts)
• Font Size: 16px base, 1rem body text
• Line Height: 1.5 for readability
• Font Weight: 400 (regular)

Layout

• Max Width: 600px centered container
• Vertical Spacing: 80px between sections (60px mobile)
• Horizontal Padding: 40px desktop, 30px mobile
• Mobile Breakpoint: 768px

Colors

• Primary Black: #000000
• Primary White: #FFFFFF
• Accent Gold: #C19A4B (customizable)

Wordmark Implementation

• Format: SVG for infinite scalability
• Scaling: 1.7x desktop, 1.5x mobile
• Positioning: Fixed height container for consistent alignment
• Color: Pure black (#000000) on transparent background

---

Content Structure Template

Section 1: Wordmark

Custom SVG wordmark with responsive scaling

Section 2: Hero Copy

3-line hero statement defining the brand/venture

Section 3: Philosophy

Core brand philosophy in 3 declarative statements

Section 4: Accent Concepts

Key concepts with gold highlighting for emphasis

Section 5: Positioning

Brand positioning and market approach

Section 6: Contact

Single email contact with branded subject line

Section 7: Footer

Tuku Group legal attribution and independence statement

---

Customization Guide

Brand Colors

Update CSS custom properties in :root:

:root {
  --color-black: #000000;     /* Keep consistent */
  --color-white: #FFFFFF;     /* Keep consistent */
  --color-gold: #[YOUR-HEX];  /* Customize accent */
}

Wordmark Scaling

Adjust scaling for optimal brand presence:

/* Desktop */
.wordmark img {
  transform: scale([1.5-2.0]) translateY(-2px);
}

/* Mobile */
@media (max-width: 768px) {
  .wordmark img {
    transform: scale([1.2-1.7]);
  }
}

Accent Styling

Rename and customize accent headers:

.your-brand-header {
  color: var(--color-gold);
  /* Add additional styling if needed */
}

---

Deployment

GitHub Pages Setup

1. Initialize git repository
2. Create GitHub repository (public)
3. Push code to main branch
4. Enable GitHub Pages in repository settings
5. Site will be live at https://[username].github.io/[repository-name]/

Custom Domain (Optional)

1. Add CNAME file with your domain
2. Configure DNS with your domain provider
3. Enable "Enforce HTTPS" in GitHub Pages settings

---

File Structure

TEMPLATE-MANIFESTO-LANDING/
├── index.html              # HTML template with placeholders
├── css/
│   └── main.css            # Complete Tuku Group design system
├── images/
│   └── wordmark.svg        # Placeholder for brand wordmark
├── fonts/                  # (Ready for custom fonts if needed)
├── docs/                   # (Ready for documentation)
├── README.md               # This template guide
└── CUSTOMIZATION-GUIDE.md  # Detailed customization instructions

---

Design Principles

Content Strategy

• Manifesto-driven: Each section communicates a single concept
• Declarative tone: Direct statements without explanation
• Intentional brevity: Every word serves a purpose
• Visual hierarchy: Clear distinction through spacing and typography

Technical Implementation

• Mobile-first: Progressive enhancement from mobile base
• Performance-focused: Minimal dependencies, fast loading
• Accessibility: Semantic HTML and readable typography
• Brand consistency: Maintains Tuku Group design language

Brand Alignment

• Parent company consistency: Visual harmony with Tuku Group
• Distinct identity: Customizable elements for unique positioning
• Scalable system: Works for various types of ventures/brands
• Professional presentation: Craft and intention over noise

---

Usage Examples

Perfect for:

• Creative studios and agencies
• Small-batch product brands
• Cultural ventures and projects
• Professional service offerings
• Artistic collectives
• Independent publishers

Content approach:

• Lead with philosophy, follow with application
• Use accent colors to highlight key concepts
• Maintain poetic flow in copy structure
• Single call-to-action throughout

---

Support and Evolution

This template follows the established Tuku Group design patterns and will be updated as the design system evolves. Each implementation should maintain the core principles while allowing for brand-specific customization.

Template created with intention. Fewer elements, better execution, slower decision-making.