Cobra Tate

Overview

Cobra Tate is a **Aggressive Minimalism** design system built for personal brand dominance. The aesthetic combines a near-black canvas (#0a0d12) with strategic crimson-red accents (#cc334f) to create visual tension and command attention. The brand serves ambitious individuals seeking wealth creation education, and the UI evokes confidence, exclusivity, and uncompromising ambition. Every element is stripped to its essential function—no decorative flourishes, no soft transitions—only the most direct path to action.

The voice is commanding yet instructional: direct, declarative, and unapologetically confident. Vocabulary skews toward power dynamics ("Top," "Billionaire," "Deserving," "Secrets"), aspiration, and meritocratic hierarchy. The brand rejects false humility; it speaks as a peer to those who have already decided to win. Example sentence: "I grew up broke and now I am a Billionaire. I teach the deserving the secrets to modern wealth creation."

Colors

The color system operates on a **high-contrast, accent-driven model** where the dark surface stack (#0a0d12 to #1f2229) provides the canvas, and the primary crimson (#cc334f) serves as the exclusive call-to-action color. Primary (#cc334f) is applied exclusively to CTAs, active states, and brand-critical interactive elements—never to passive UI. On-primary is always #ffffff for maximum legibility at small sizes (22px+). Secondary (#fff451) is a bright yellow reserved for highlights, badges, and secondary emphasis; it appears sparingly to avoid visual chaos. Tertiary (#5667fc) is a deep blue used for accent links and tertiary actions. Error (#f67c36) is an orange reserved for warnings and destructive states. Surface-variant (#14161a) is used for dividers and subtle background layers. All tex

Typography

League Spartan is the exclusive typeface—a geometric sans-serif that communicates precision and modernity without softness. The type hierarchy is aggressive and compressed: display (55px, 700 weight, -0.03em tracking) is used for hero headlines and commands immediate attention; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 600 weight) for subsections; body-lg (18px, 400 weight, 28px line-height) for long-form content; body-md (16px, 400 weight) for standard paragraph text; label-md (14px, 600 weight, 0.02em tracking) for buttons and UI labels; label-sm (12px, 500 weight) for captions and metadata. All display and headline weights use negative letter-spacing (-0.03em to -0.01em) to tighten the letterforms and increase visual impact. Body text uses positive tracking (

Layout

The layout operates on a **12-column fluid grid** with a max-width of 1280px (1280px) and a gutter of 24px between columns. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section uses full-bleed video backgrounds with a semi-transparent overlay (rgba(10, 13, 18, 0.4) to rgba(10, 13, 18, 0.7)) to ensure text legibility. Content containers are centered with symmetric padding; the primary CTA button sits 40px below the hero copy. Responsive breakpoints: 1439px (desktop), 991px (tablet), 767px (mobile), 479px (small mobile). At each breakpoint, spacing scales proportionally: lg spacing becomes md on tablet, md becom

Elevation & Depth

Depth is conveyed through **layered shadows and subtle background shifts** rather than glassmorphism or blur effects. Level 1 (Base): solid background #0a0d12 with no shadow. Level 2 (Cards/Containers): background #14161a with a 1px border at #444748 and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Modals/Overlays): background #1f2229 with a 1px border at #8a8c8d and box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5). Hover states on cards elevate to Level 3 with a transition: all 200ms ease-in-out. The purchase popup modal uses box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5) and a 15px bord

Shapes

The design system embraces **Architectural Sharpness**: minimal rounding, clean edges, and geometric precision. Border-radius follows a strict scale: sm (0.25rem / 4px) for subtle rounding on inputs and small components; DEFAULT (0.5rem / 8px) for buttons and standard cards; md (0.75rem / 12px) for medium containers; lg (1rem / 16px) for larger cards and modals; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for circular badges and icon buttons. Buttons use DEFAULT (8px) for a clean, modern appearance without excessive rounding. Cards use lg (16px) for a softer,

Components

Action Elements Buttons are the primary interaction mechanism and must always use the primary color (#cc334f) for CTAs. The button-primary component uses backgroundColor: {colors.primary}, textColor: #ffffff, padding: 24px 48px, height: 56px, border-radius: 8px, fontWeight: 600, and typography: label-md (14px). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#e63d5a) over 200ms ease-in-out. Secondary buttons use a transparent background with a 2px border at {colors.primary} and the same padding/height; on hover, apply a 8% opacity background (rgba(204, 51, 79, 0.08)). All buttons must have no box-shadow by default; only apply elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) on active/pressed states. The "JOIN" button in the hero uses the prima

Do's and Don'ts

**Do**

• Do use the primary crimson (#cc334f) exclusively for CTAs, active states, and brand-critical interactions—never on passive UI or backgrounds.
• Do apply negative letter-spacing (-0.03em to -0.01em) on all display and headline text to tighten the letterforms and increase visual impact.
• Do maintain the 24px gutter and md (24px) spacing for section separation to create a clean, organized rhythm across the page.
• Do use the full surface-container stack (surface-container-low to surface-container-highest) to create subtle depth without relying on blur or transparency.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on card hover states with a 200ms transition to signal interactivity.

**Don't**

• Don't use secondary (#fff451) or tertiary (#5667fc) colors for primary CTAs—reserve them for badges, highlights, and secondary emphasis only.
• Don't apply border-radius greater than lg (16px) on buttons or standard cards; maintain the sharp, architectural aesthetic.
• Don't use system fonts or generic sans-serifs; League Spartan is mandatory for all text to preserve brand consistency.
• Don't add blur filters, glassmorphism effects, or transparency stacking; all depth must be achieved through shadows and color contrast.
• Don't use the inverse-surface (#ffffff) background for primary content areas; reserve it for modals, overlays, and purchase popups only.