IFEST 2026

Overview

IFEST 2026 is Indonesia's flagship Informatics Festival, serving as the ultimate hub for emerging IT talents to showcase skills, compete, and innovate across cybersecurity, game development, data analysis, and business challenges. The design system embodies a "Tech-Forward Minimalism" aesthetic: a clean, grid-based white canvas punctuated by bold primary blues (#214afe, #0088ff) and warm accent oranges (#ffc878), with pixelated brand elements and dynamic geometric backgrounds that evoke both precision and creative energy. The visual language conveys confidence, accessibility, and forward momentum—inviting participants to see themselves as the next generation of tech leaders.

The brand voice is energetic yet professional, speaking directly to ambitious students and young professionals. Tone: encouraging without being patronizing, technical without jargon overload, celebratory of achievement. Example sentence: "Compete in real-world challenges, build your portfolio, and connect with Indonesia's top tech minds—all in one festival."

Colors

The color palette is anchored by a vibrant primary blue (#214afe, lab(44.0605 29.0279 -86.0352)) used exclusively for primary CTAs, navigation highlights, and focus states—this is the brand's signature accent and appears on all "Home" buttons and key interactive elements. Secondary warm orange (#ffc878, frequency: 128 occurrences) provides supporting emphasis for secondary CTAs, badges, and decorative accents, creating visual warmth and approachability. Tertiary hot pink (#ff0055, frequency: 75 occurrences) is reserved for error states, alerts, and high-priority notifications. The surface stack uses a clean white (#ffffff) as the primary background with carefully calibrated grays (surface-container-low: #f5f5f5, surface-container: #eeeeee, surface-container-high: #e8e8e8) for layering and

Typography

The type system uses IBM Plex Sans as the primary typeface, chosen for its technical clarity and modern warmth—it balances the precision required for a tech festival with approachability for a student audience. Display (60px, 800 weight, -0.04em letter-spacing) is reserved for hero headlines like "Empowering your tech journey with IFEST 2026," where the bold weight and tight tracking create visual impact. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) are used for section titles and card headings, maintaining hierarchy through size and weight rather than color. Body text (16px–18px, 400 weight, 24–28px line-height) is set with 0.01em letter-spacing to improve readability at smaller sizes. Labels (12–14px, 500–600 weight) are used for buttons, badges, and form fields with

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (full grid). The page rhythm is driven by consistent spacing: lg spacing (40px) separates major sections (hero, competitions, testimonials), md spacing (24px) divides cards and content blocks, and sm spacing (12px) provides breathing room within components. The hero section uses full-width background imagery with a parallax effect (animated SVG rectangles at varying depths), establishing visual depth and energy. Content is center-aligned with generous left/right gutters (24px on tablet, 40px on desktop) to prevent text from feeling cramped. Cards are arranged in a 3-column grid on desktop, 2-column on tablet, and single-column on mobile, wi

Elevation & Depth

Depth is conveyed through a restrained shadow system and layering, avoiding heavy drop-shadows in favor of subtle, purposeful elevation. Level 1 (Base): The white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards & Containers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) with a 1px solid border at #e5e7eb (outline-variant), creating a soft separation from the background. Level 3 (Modals, Elevated Cards, Hover States): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with the same border, signaling higher prominence. On hover, cards transition from Level 2 to Level 3 ove

Shapes

The shape philosophy is "Geometric Precision with Approachability"—sharp enough to feel technical and modern, rounded enough to feel welcoming. Buttons and primary interactive elements use rounded: DEFAULT (0.5rem / 8px) for a balanced, contemporary look that's neither too sharp nor too soft. Cards and containers use rounded: md (0.75rem / 12px) to create subtle visual distinction from buttons while maintaining consistency. Input fields and form elements use rounded: DEFAULT (8px) to align with button styling and create a cohesive interaction zone. Badges and pills use rounded: full (9999px) t

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (blue #214afe), secondary (orange #ffc878), and tertiary (pink #ff0055). All buttons use 48px height, 10px vertical padding, 24px horizontal padding, and label-md typography (14px, 600 weight). Primary buttons appear on CTAs like "View Competitions" and navigation items; on hover, the background shifts to #0088ff over 200ms with no shadow change. Secondary buttons support primary actions (e.g., "Learn More") and use the warm orange to create visual variety. Tertiary buttons are reserved for destructive or high-alert actions. All buttons have a 1px transparent border that becomes visible on focus (border-color: {colors.primary}) to support keyboard navigation. Links are unstyled by default