Keras Organizer

Overview

Keras Organizer is a competitive esports event management platform serving tournament organizers and gaming teams across Southeast Asia, with a primary focus on Bali's thriving esports community. The design system embraces a "Dark Competitive Minimalism" aesthetic—a high-contrast, tech-forward visual language that combines deep charcoal backgrounds (rgb(8, 11, 20)) with bold accent colors (maroon #8b0000 for primary actions, neon green #00e676 for live status, and golden yellow #f5c518 for warnings). The interface evokes the intensity and precision of competitive gaming: every element is purposeful, every color carries meaning, and every interaction feels responsive and immediate.

The brand voice is direct, energetic, and community-focused. Keras speaks to esports athletes and organizers with respect for their competitive spirit and practical understanding of tournament logistics. The tone avoids corporate jargon; instead, it uses gaming vernacular ("GG WP," "grind harder," "comeback") and Indonesian cultural references to build trust with its primary audience. Example sentence in brand voice: "Daftarkan timmu sekarang dan buktikan siapa yang terkuat—skill is earned, not given."

Colors

The color system is built on a foundation of deep, dark surfaces that reduce eye strain during extended tournament management sessions while maximizing contrast for critical information. Surface colors range from #080b14 (surface-dim, used for the page background) through #161d2f (surface-container, standard card backgrounds) to #2a3142 (surface-container-highest, elevated modals). All surfaces use rgba(255,255,255,0.08) to rgba(255,255,255,0.1) borders to create subtle depth without harsh lines.

Primary accent is maroon #8b0000, reserved exclusively for high-stakes CTAs ("Lihat Turnamen," "Daftar Tim") and primary navigation buttons. On hover, primary buttons darken to #6b0000 and gain a glow effect (box-shadow: 0 0 22px rgba(139,0,0,0.65)) to signal interactivity. Secondary accent is ne

Typography

The type system pairs Orbitron (a geometric monospace font loaded from Google Fonts) for all headlines, labels, and competitive branding elements with Inter (system-ui fallback) for body copy and interface text. This pairing creates a visual hierarchy that signals importance: Orbitron's rigid, technical letterforms (font-weight: 900 for display, 700 for headlines) convey precision and competitive intensity, while Inter's humanist proportions (font-weight: 400 for body) ensure readability during information-dense tournament browsing. Display text (60px, 900 weight, -0.04em letter-spacing) is reserved for hero headlines like "WELCOME TO KERAS ORGANIZER." Headline-lg (40px, 900 weight) is used for section titles. Body-md (16px, 400 weight, 24px line-height) is the standard for event descripti

Layout

The layout uses a 12-column responsive grid with a max-width of 1280px (container-max-width: 1280px). The page rhythm is built on an 8px unit system: spacing tokens are xs (4px), sm (12px), md (24px), lg (40px), and xl (64px). Section separation uses lg spacing (40px margin-bottom) to create breathing room between tournament lists, service cards, and testimonials. Card padding is consistently md (24px) for standard event cards, with gutter spacing (24px) applied between grid columns. The hero section uses asymmetric layout: the left column (text + CTA) occupies ~55% width on desktop, while the right column (hero image with cyan border accent) occupies ~45%, creating visual tension that mirrors competitive gaming's dynamic energy. On mobile (max-width: 991px), the layout stacks vertically w

Elevation & Depth

Depth is conveyed through layered box-shadows and subtle background color shifts rather than flat design. Level 1 (Base): The page background is surface (#080b14) with no shadow. Level 2 (Standard Cards): Event cards use background: {colors.surface-container} (#161d2f) with a 1px border at rgba(255,255,255,0.08) and box-shadow: 0 6px 16px rgba(232,0,28,0.3)—the warm shadow reinforces the maroon brand color. Level 3 (Elevated/Modals): Modal backgrounds use surface-container-low (#0f1523) with a 1px border at rgba(255,255,255,0.1) and a larger shadow: 0 0 60px rgba(0,0,0,0.82) to separate the mo

Shapes

The shape philosophy is "Competitive Precision"—rounded corners are used strategically to soften the technical aesthetic while maintaining a professional, esports-forward appearance. Buttons use rounded.lg (1rem / 16px border-radius) for primary CTAs and bracket buttons, creating a balanced, approachable form factor. Cards and modals use rounded.xl (1.5rem / 24px border-radius) for a more generous, inviting appearance that contrasts with the sharp, dark background. Input fields and small UI elements use rounded.DEFAULT (0.5rem / 8px border-radius) for a tighter, more technical feel. Status bad

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background: #8b0000, text-color: #ffffff, padding: 14px 28px, border-radius: 10px, font-family: Inter, font-size: 14px, font-weight: 700, with transition: all 0.2s ease. On hover, the background darkens to #6b0000 and gains a glow: box-shadow: 0 0 22px rgba(139,0,0,0.65), plus transform: translateY(-1px) for a subtle lift. The button-secondary (ghost variant) uses background: transparent, border: 1px solid rgba(255,255,255,0.22), text-color: rgba(255,255,255,0.78), padding: 7px 16px, border-radius: 7px, font-family: Orbitron, font-size: 10px, font-weight: 700, letter-spacing: 1.2px. On hover, the border brightens to rgba(255,255,255,0.55) and background becomes rgba(255,255,255,0.07). The but

Do's and Don'ts

**Do**

• Do use maroon (#8b0000) exclusively for primary CTAs and high-stakes actions—never dilute its impact by applying it to secondary elements.
• Do apply neon green (#00e676) only to live/active states and real-time indicators; pair it with the liveBlink animation (1.2s ease-in-out infinite) to signal urgency.
• Do maintain the 8px spacing unit consistently across all padding, margins, and gaps—use semantic tokens (sm: 12px, md: 24px, lg: 40px) to enforce rhythm.
• Do use Orbitron (font-weight: 700–900, letter-spacing: 0.01em–0.08em) for all competitive branding, tournament titles, and status labels to reinforce the esports aesthetic.
• Do apply box-shadow: 0 6px 16px rgba(232,0,28,0.3) to standard cards and increase to 0 8px 24px rgba(232,0,28,0.25) on hover to create depth without harsh contrast.

**Don't**

• Don't use light backgrounds or near-white surfaces—the dark mode (#080b14 surface) is non-negotiable for brand identity and competitive gaming context.
• Don't apply rounded corners larger than 1.5rem (rounded.xl) to buttons or interactive elements; keep them sharp and technical (rounded.lg: 1rem maximum for buttons).
• Don't mix Orbitron and Inter within a single headline or label—use Orbitron for competitive/technical content, Inter for body and descriptive text only.
• Don't animate elements with durations shorter than 0.2s or longer than 2.5s; maintain snappy, responsive feedback (e.g., button hover: 0.2s, live pulse: 2.5s).
• Don't use opacity below 0.06 or above 0.2 for background overlays on dark surfaces; the range rgba(255,255,255,0.06)–rgba(255,255,255,0.2) ensures readability without washing out the dark aesthetic.