Redlimit CTF Lab

Overview

Redlimit CTF Lab is a cybersecurity skill development platform built for penetration testing learners across Indonesia, from beginners to professionals. The design system embraces a **Technical-Neon** aesthetic: a deep, near-black canvas (rgb(20, 21, 40)) anchors the interface, while high-saturation accent colors—vivid pink (#ff2d55), electric cyan (#00e5a0), and electric blue (#3d7fff)—punctuate CTAs, status indicators, and interactive moments. This creates visual tension between austere professionalism and energetic urgency, evoking the intensity of live hacking competitions and real-world incident response. The brand personality is direct, precise, and uncompromising: voice is technical but never gatekeeping, confident but never arrogant. Example: "Solve 73 active challenges. Own machines. Climb the leaderboard. Real skills, real stakes."

The UI prioritizes clarity and speed—learners must navigate challenges, machines, and learning paths without friction. Every interactive element signals its affordance through color and contrast. The typography system pairs Space Grotesk (geometric, technical, 700 weight for headlines) with Inter (neutral, readable, 400 weight for body), creating a hierarchy that feels both authoritative and approachable. Dark mode is the only mode; the brand does not compromise on the deep-space aesthetic that makes neon accents sing.

Colors

The color system is built on a **dark-first, accent-driven** philosophy. The surface stack descends from #141528 (surface) through #0b0c18 (surface-dim, the page background), creating a subtle depth gradient without sacrificing contrast. All text sits on these surfaces at high contrast: on-surface is #eceaf8 (near-white, 95% brightness), ensuring WCAG AAA compliance at 18px+. Primary (#ff2d55, a vivid magenta-red) is the signature accent—used exclusively on CTAs, active states, and error conditions. It commands attention: at 100% saturation and 50% lightness, it pops against the dark canvas with a 12:1 contrast ratio. Secondary (#00e5a0, electric cyan) supports success states, achievements, and positive feedback; tertiary (#3d7fff, electric blue) highlights information and learning paths.

Typography

The type system enforces a two-family hierarchy: Space Grotesk (Google Fonts, 700 weight) for all display and headline levels, and Inter (Google Fonts, 400–600 weight) for body and labels. Space Grotesk's geometric, slightly condensed letterforms (letter-spacing: -0.03em on display, -0.02em on headlines) convey technical precision and forward momentum; Inter's neutral, open letterforms (letter-spacing: 0.01em on body) ensure readability at small sizes and on dark backgrounds. Display (68px, 700, -0.03em letter-spacing) is reserved for hero headlines; headline-lg (40px, 700) for section titles; headline-md (28px, 700) for subsections. Body-lg (18px, 400) is used for long-form copy and descriptions; body-md (16px, 400) for standard UI text. Label-md (14px, 700, 0.05em letter-spacing) is appl

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport. Gutters are 24px on desktop, 16px on tablet, 12px on mobile—defined by the gutter token. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is semantic: use md (24px) for standard padding inside cards and sections, lg (40px) for vertical separation between major sections, and xl (64px) for hero-to-content transitions. Horizontal rhythm is maintained through consistent left/right padding (24px) on container elements; vertical rhythm uses multiples of 8px (the unit token). The page background (surface-dim, #0b0c18) extends edge-to-edge; content containers (surface-container, #141528) sit inset by gutter spacing. Cards and elevated surfaces use surface-container-highest (#252840) wit

Elevation & Depth

Depth is conveyed through a three-level shadow system and discrete background color shifts, avoiding blur or glassmorphism. Level 1 (Base/Surface): no shadow, background is surface-container (#141528). Level 2 (Standard Card/Hover): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background is surface-container (#141528) or surface-container-high (#1a2332) on hover. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), background is surface-container-highest (#252840). Shadows use pure black (rgba(0, 0, 0, ...)) with opacity values (0.15, 0.2) calibrated for the dark background; they

Shapes

The shape system follows a **Geometric-Technical** philosophy: rounded corners are used sparingly and consistently to signal interactivity and hierarchy, never to soften or obscure. Buttons use rounded.lg (1rem, 16px) for a subtle, professional curve that distinguishes them from cards. Cards and elevated surfaces use rounded.xl (1.5rem, 24px) for a slightly more generous radius, creating visual distinction from buttons. Input fields use rounded.DEFAULT (0.5rem, 8px) for a tight, utilitarian appearance. Badges and tags use rounded.full (9999px) for a pill shape, signaling their role as discrete

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** (background: #ff2d55, color: #ffffff, padding: 12px 24px, height: 48px, rounded: 1rem, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) is used for primary CTAs (e.g., "Mulai Gratis Sekarang", "Gabung Gratis"). On hover, transition to button-primary-hover (background: #ff6b85) with a 200ms ease-out curve. **button-secondary** (background: transparent, border: 1px solid #353355, color: #eceaf8, padding: 12px 24px, height: 48px, rounded: 1rem) is used for secondary actions (e.g., "Lihat Learning Paths"). On hover, button-secondary-hover applies background: #1a2332 and border-color: #7875a8. **button-accent** (background: #00e5a0, color: #0b0c18, padding: 12px 24px, height: 48px, rounded: 1rem, font-weight: 700) i

Do's and Don'ts

**Do**

• Do use primary (#ff2d55) exclusively for CTAs and error states—never for decorative elements or backgrounds.
• Do maintain at least 24px padding inside cards and containers; use the spacing scale (md, lg, xl) for consistent rhythm.
• Do apply a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active).
• Do use Space Grotesk (700 weight) for all headlines and display text; use Inter (400–600 weight) for body and labels.
• Do ensure all interactive elements have a minimum 48px touch target height and a visible focus state (3px box-shadow with primary color at 10% opacity).
• Do use the outline-variant border (1px solid #353355) on cards and inputs to define boundaries without harsh contrast.

**Don't**

• Don't use secondary (#00e5a0) or tertiary (#3d7fff) on CTAs; reserve them for success, achievement, and informational states.
• Don't apply rounded.full (pill shape) to buttons or inputs; use rounded.lg for buttons and rounded.DEFAULT for inputs.
• Don't use blur, glassmorphism, or semi-transparent overlays; the system relies on discrete color tokens and opacity shifts.
• Don't mix font families within a single headline or body paragraph; maintain strict separation between Space Grotesk (headlines) and Inter (body).
• Don't use shadows with blur-radius greater than 24px; keep shadows soft and diffuse (0 8px 24px max).
• Don't apply text-shadow to body text or large headlines; use it only on small labels (12px or smaller) over high-contrast backgrounds.