Switch between the rendered Visual preview and the Raw DESIGN.md.
RAK'ENG embodies a bold, contemporary urban street food aesthetic infused with rural authenticity and community spirit. The design exudes energy through striking neon-lime accents against a refined neutral foundation, creating high contrast and immediate visual impact. The typography is dramatic and unapologetic—oversized headlines in Bebas Neue command attention, while clean Inter typefaces handle information hierarchy with precision. This is a design system that celebrates boldness and accessibility, blending minimalist restraint with explosive accent color to convey the brand's mission of bringing premium street food experiences to underserved communities. The overall mood is confident, inclusive, and street-smart without sacrificing sophistication.
Key Characteristics
#D4FF00): Hero CTAs, accent highlights, brand identity markers, warning states, visual breakers in dense layouts#000000): Text links, nav items, default button states, primary readable content#0A0A0A): Deep backgrounds, premium container fills, high-contrast overlays#E5E7EB): Secondary backgrounds, borders, light UI surfaces, subtle dividers#737373): Secondary body text, muted labels, disabled states#525252): Tertiary text, diminished importance callouts#404040): Borders with slight emphasis, input focus states#A3A3A3): Placeholder text, de-emphasized copy#FFFFFF): Hero text overlays, positive space, inverted text on dark backgrounds#E5E7EB): Dividing lines, form input underlines, minimal visual separation#D4FF00): Alert states, call-to-action emphasis, brand accent everywhere"Trebuchet MS", sans-serif-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/Hero | Bebas Neue | 64px | 400 | 64px | 0px | Largest, most dramatic headlines |
| Display Medium | Bebas Neue | 30px | 400 | 36px | 0px | Secondary hero text, major accents |
| Heading 1 | Inter | 24px | 400 | 36px | 0px | Section headers, large copy blocks |
| Body Standard | Inter | 16px | 400 | 24px | 0px | Primary body text, nav items, button labels |
| Body Small | Inter | 13px | 500 | 19.5px | 0px | Secondary links, fine print, footer text |
| Caption | Inter | 11px | 600 | 16.5px | 0px | Button text, CTA labels, emphasis callouts |
#D4FF00#00000016px 32px51px0px0px solid transparent16.5px#CCFF00, text #000000#B8E600, text #000000transparent#FFFFFF16px 32px51px0px1px solid rgba(255, 255, 255, 0.4)16.5px1px solid rgba(255, 255, 255, 0.8), text #FFFFFFrgba(255, 255, 255, 0.1), border 1px solid #FFFFFFtransparent#00000016px 32px64px0px0px solid transparent32px#D4FF00#B8E600transparent#D4D4D416px 32px64px0px0px solid transparent32px#FFFFFF#D4FF00rgba(0, 0, 0, 0.3) (dark overlay with transparency)0px48px 40px0px solid transparent#FFFFFF#FFFFFF0px40px 48px1px solid #E5E7EB#000000none#0A0A0A0px40px 48px0px solid transparent#FFFFFFtransparent#FFFFFF16px 0px57px0px1px solid #40404024pxrgba(255, 255, 255, 0.6)1px solid #D4FF00, text #FFFFFFtransparent#FFFFFF16px 0px57px0px1px solid #40404024px1px solid #D4FF00transparent#FFFFFF16px 0px129px0px1px solid #40404024px1px solid #D4FF00transparent (when static), rgba(255, 255, 255, 0.95) (when scrolled)80px0px 24px0px0px solid transparentrgba(0, 0, 0, 0.2) 0px 25px 50px -12px (on scroll)#00000024pxtransparent#000000 (default), rgba(255, 255, 255, 0.6) (footer context)0px0px0px solid transparent19.5px1.0, underline nonetransparent#0000000px44px44px0px0px solid transparent24px#D4FF00Base unit: 4px. Scale progresses 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80 px.
Generous, intentional whitespace dominates; layouts breathe. Padding is applied liberally (40–48px standard for sections) to prevent cramped feels. Horizontal and vertical margins are balanced equally. Large typography (64px headlines) sits on abundant vertical whitespace to create gravitas. Negative space is design, not waste.
0px — applied to all components (buttons, cards, inputs, navigation)| Level | Treatment | Use |
|---|---|---|
| Floating (z-high) | rgba(0, 0, 0, 0.2) 0px 25px 50px -12px | Navigation on scroll, modals, dropdowns |
| Raised (z-mid) | rgba(0, 0, 0, 0.1) 0px 4px 12px -2px | Cards with subtle lift, hover states |
| Surface (z-base) | none | Buttons, inputs, standard UI elements |
| Depressed (z-low) | inset 0px 2px 4px rgba(0, 0, 0, 0.1) | Pressed buttons, focus states |
Shadow Philosophy: Shadows are minimal and deployed sparingly. The system favors flat design with strategic depth only for interactive elements that need hover/active states. Navigation receives a subtle drop shadow on scroll to signal state change. Most components (buttons, cards) use no shadow; contrast and color manage hierarchy instead.
#D4FF00 as the hero accent—apply it to primary CTAs, key nav items, and visual breakers#0A0A0A, #000000) with white or lime text; ensure WCAG AA contrast minimum (4.5:1)0px border radius; maintain the contemporary sharp aesthetic0px radius design-wide#D4FF00) to backgrounds for extended content (reserves for accents and CTAs only)| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Full-width layout, 24px side padding, 16px gaps between sections, stacked hero and content, nav collapses to icon menu |
| Tablet | 768px–1024px | 2-column flex layouts available, 32px side padding, 32px section gaps, navigation remains visible |
| Desktop | 1025px–1440px | Full 12-column grid enabled, 40–48px side padding, 48px+ section margins, max-width 1440px enforced |
| Large Desktop | > 1440px | Content centers with fixed max-width, equal side margins |
44px for all interactive elements (buttons, nav links, icon buttons)44px for button-like controls; longer minimum (80px) for primary CTAs16px internal padding minimum on tap targets to prevent accidental adjacent taps24px between stacked buttons or close interactive elements#D4FF00)#D4FF00)#0A0A0A)#FFFFFF)#000000)#000000)#E5E7EB)#737373)#A3A3A3)Always apply 0px border radius to every button, card, input, and container—no exceptions. This is the defining visual trait.
Spacing scales in multiples of 4px: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80. Use 40–48px as default padding on section sides; never go below 24px.
Typography: Bebas Neue 64px (display) + Inter 16px (body). Bebas is always 400 weight; Inter ranges 400–600. Jump sizes aggressively (6–14px minimum between levels).
Lime accent (#D4FF00) is reserved for primary CTAs, nav highlights, and visual breakers. Apply sparingly for maximum impact. Pair always with black text or white on dark overlay.
Contrast compliance mandatory: Black text on white (#000000 on #FFFFFF), white text on dark (#FFFFFF on #0A0A0A), lime on black (#D4FF00 on #000000). All meet WCAG AA 4.5:1 minimum.
Navigation: 80px height, transparent background by default, drop shadow (rgba(0, 0, 0, 0.2) 0px 25px 50px -12px) on scroll. Links are Inter 16px, black text, no underline.
Forms: Use transparent backgrounds with bottom borders only (1px solid #404040). Focus state: border becomes lime (#D4FF00), text stays white on dark backgrounds.
Buttons follow four variants: Primary CTA (lime bg, black text), Secondary Outline (transparent, white border), Ghost (transparent, black/muted text, hover-to-lime), Icon Button (44×44px square, transparent).
Padding standard for content cards: 40–48px on desktop, 32px on tablet, 24px on mobile. Maintain equal horizontal and vertical margins at section level (40–80px between sections).
On responsive breakpoints: At 768px, switch to hamburger nav and stacked layouts. Reduce heading size 64px → 48px → 36px. Keep 40px minimum padding always; never compress below 24px on any device.