Brand Assets

Download the complete TAPTAP Records brand guidelines package

What's Included

🎨

Complete Color Palette

All brand colors with hex codes, RGB values, and usage guidelines

🔤

Typography System

Font hierarchy, sizing, weights, and responsive scaling

🧩

Component Specs

Detailed specifications for buttons, cards, modals, and forms

📐

Spacing & Layout

4px-based spacing scale and responsive breakpoints

✅

Do's & Don'ts

Best practices and guidelines for brand consistency

♿

Accessibility

Color contrast, focus states, and ARIA standards

TAPTAP Records

Brand Guidelines

Complete Brand Asset Package

Version 1.2 | 2025

🎨 Color Palette

Primary Colors

Cyan Primario

#00C2C7 | RGB: 0, 194, 199

Main CTAs, key accents, interactive icons

Cyan Oscuro

#00A9B0 | RGB: 0, 169, 176

Hover states, secondary buttons, active elements

Secondary Colors

Verde Petróleo

#0A3A45 | RGB: 10, 58, 69

Premium backgrounds, special cards, overlays

Coral

#FF6F61 | RGB: 255, 111, 97

External communication only

Neutral Colors

Negro Puro

#0B0B0B | RGB: 11, 11, 11

Main interface background

Gris Oscuro

#1A1A1A | RGB: 26, 26, 26

Cards, alternates

Gris Claro

#E8E8E8 | RGB: 232, 232, 232

Body text

🔤 Typography System

Font Family: Inter (all weights: 400, 500, 600, 700, 800, 900)

Element	Size	Weight	Usage
Hero Title	60px	700	Page headlines
Section Heading	40px	700	Section titles
Subheading	32px	600	Secondary headings
Card Title	20px	600	Card headings
Body Large	18px	400	Large text
Body Regular	16px	400	Standard text
Body Small	14px	400	Small text

🧩 Components

Buttons

Primary: BG #00C2C7, Text #0B0B0B, 12px 24px padding, 8px radius

Secondary: Transparent, 1px white/20 border, white text, 8px radius

Cards

Standard: BG #1A1A1A, 1px border, 8px radius, 24px padding

Premium: Cyan gradient background, 0 0 40px cyan glow shadow

Modals

Max 660px, BG #0F0F0F, 2px cyan top border, 24px radius, 56px 48px padding, fade+slide 0.3s animation

📐 Spacing & Layout

Spacing Scale (Base 4px)

4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 56px, 64px, 80px, 128px

Container Sizes

Max Width: 1280px | Content: 1200px | Compact: 1024px

Responsive Breakpoints

Mobile	320px - 640px
Tablet Small	640px - 768px
Tablet	768px - 1024px
Desktop	1024px - 1280px
Large	1280px+

✅ ❌ Do's & Don'ts

✅ Do

• Use Inter font exclusively
• Maintain cyan + dark aesthetic
• Respect 4px spacing scale
• Apply consistent border-radius
• Include focus states
• Test responsive behavior
• Ensure color contrast

❌ Don't

• Use non-Inter typography
• Use colors outside palette
• Use Coral in product UI
• Break dark mode
• Apply heavy shadows
• Use border-radius greater than 24px
• Skip focus states

TAPTAP Records Brand Guidelines v1.2 | 2025

Additional Resources

Digital Assets

The PDF includes everything you need: color codes, typography scales, component specifications, spacing guidelines, and best practices. All files are also available separately in the `/public/branding-assets/` folder.

📁 colors.json - Color definitions

🎨 colors.css - CSS variables

🔤 typography.css - Typography utilities

📐 spacing.css - Spacing system

⚙️ tailwind.config.js - Tailwind configuration

Ready to Use the Brand?

Click below to download the PDF guide and start implementing brand consistency.