Majority Web Style Guide¶

1. Brand Core¶

Essence: A movement for the power of diversity. "Personality over nationality"

Tone: Authentic, Pioneering, Relevant, Aware, Essential
Key Principle: Accessibility and convenience—making life easier for the many

The typographic system relies on a balance between functional legibility and expressive impact.

Usage: Body copy, UI elements, functional information, subheadlines
Weights: Thin, Light, Regular, Medium (Italics allowed)
Restricted Weights: Do not use Bold or Black weights
Styling:
- Body Copy Leading: 120%
- Large Format Leading: 105%
- Tracking: Optical -10
- Alignment: Left-aligned. Center-aligned only for small text blocks
- Case: Standard sentence case (No All Caps)

Usage: External communication, "loud" headlines, campaigns
Weight: Medium
Styling:
- Leading: 90% (Standard), 95% (with diacritics ÅÄÖ)
- Tracking: Metric -10
- Case: ALL CAPS ONLY
Restriction: Do not mix sizes inline; do not use for long text

The palette includes 16 primary colors plus black and white. Use specific pairings to ensure WCAG accessibility.

Darker colors are generally text-safe on lighter backgrounds. Refer to the specific pairing chart for compliance.

The visual identity uses a modular grid system called "The Canvas," composed of triangles, rectangles, and circles.

Grid Logic: Layouts are created by cropping the canvas
Scalability: Shapes can be stretched or compressed, but curved shapes (circles/arches) must not be distorted; anchors must be moved manually to preserve curve integrity

Icons are geometric, built on a grid, and avoid beveled edges.

Style: Graphic, stylized, solid brand-color backgrounds
Lighting: Soft, diffused, natural temperature. No harsh shadows or colored gels
Framing: Centered, eye-level. Space above head for cropping. No hands in shot

Style: Authentic, "real people" in native environments
Subject: Focus on community stories. Do not show people using phones or products

Motion is derived from the behavior of the canvas shapes.

Micro (UI): Subtle gestures for feedback (e.g., icons scaling, buttons popping)
Core (Transitions): Page transitions and text reveals using sliding masks
Macro (Brand): Full canvas animations for loading screens or hero sections

Expressive: Use localized photography and illustrations to connect culturally
Helpful: Use neutral colors and standard typography for clarity
Flags: Use flag icons for functional selection. Do not recolor flags with brand colors