Design System v1.0

Brand Guidelines

Standard desain, visual, dan komunikasi untuk membangun konsistensi brand TukTix

1

Brand Identity

Brand Essence

"Your Gateway to Unforgettable Events"

Brand Promise

Connecting people to experiences through effortless, reliable, and exciting ticketing solutions.

Brand Personality

Reliable

Trustworthy platform for seamless ticket transactions.

Dynamic

Energetic and exciting, matching the events we serve.

Inclusive

Accessible to everyone, from local to major events.

2

Logo Guidelines

TukTix Logo

Variations

  • TUKTIX
    Full Color
    Primary brand colors on light backgrounds
  • TUKTIX
    Reversed
    White on dark backgrounds

Spacing & Sizing

Minimum Width 120px / 30mm
Icon Only Min 32px x 32px
Clear Space Equal to the height of "TUK" on all sides
3

Color System

Primary Colors

Navy Blue
#194087
Primary CTA, Headers, Nav
Vibrant Red
#EB0303
Accent, Urgent Actions

Secondary Colors

Sky Blue
#4A90E2
Coral Red
#FF4D4D

Neutral Colors

Charcoal
#1F2937
Slate Gray
#64748B
Light Gray
#F1F5F9
Pure White
#FFFFFF
Pure Black
#000000

Semantic Colors

Success
#059669
Warning
#D97706
Error
#DC2626
Info
#2563EB
4

Typography

Primary Typeface
Plus Jakarta Sans
Aa
Scale Specs Example
H1 Display 48px / 800 The quick brown fox
H2 Heading 36px / 700 The quick brown fox
H3 Heading 28px / 700 The quick brown fox
Body Large 18px / 400 The quick brown fox jumps over the lazy dog.
Body Regular 16px / 400 The quick brown fox jumps over the lazy dog.
5

UI Components

Buttons

Default
Mobile Action
Secondary
Ghost

Forms

This field is required

6

Iconography

We use Heroicons (Outline) for consistency across the platform.

7

Imagery & Photography

Concert
Energetic
Audience
Authentic

Style Guide

  • Use high-quality, high-resolution images.
  • Focus on capturing genuine emotions and moments.
  • Avoid staged or overly stock-looking photography.
  • Ensure diverse representation of people and events.
8

Social Media Guidelines

Brand Hierarchy

1. TukTix Corporate

Platform-level branding. Modern, professional, and trustworthy.

2. Event Organizers

Co-branding with TukTix. Balanced visibility.

3. Individual Events

Event branding with TukTix badge. Exciting and engaging.

Logo Usage for Social

Full Horizontal Logo

Use for headers, wide banners, and YouTube thumbnails.

Min Width: 150px

Logo Mark (Icon Only)

Use for profile pictures, app icons, and story highlights.

Min Size: 180px × 180px

Placement Rules

  • Primary: Top-left or Bottom-right corner (15-20% size).
  • Secondary: Top-right or Bottom-left corner.
  • Clear Space: Minimum equal to height of "TUK" in logo.

Content Pillars

40%
Event Highlights
25%
Brand Building
20%
Engagement
15%
Education

Do's and Don'ts

Do

  • Use the white logo on dark or busy backgrounds.
  • Maintain the minimum clear space around the logo.
  • Use high-quality imagery that reflects our brand energy.

Don't

  • Stretch, skew, or rotate the logo.
  • Change the logo colors or add effects (shadows, glows).
  • Place the logo on low-contrast backgrounds.

Post Sample Mockup

T
tuktix_official
Concert
TukTix

tuktix_official Get ready for the biggest night of the year! 🎸🔥 #TukTix #LiveMusic