Frituur Rumbeke Platse

Overview

Frituur Rumbeke Platse embodies 'Warm Brutalism'—a design philosophy that marries industrial directness with convivial comfort. The brand serves Belgian frituur enthusiasts who value authenticity, daily indulgence, and a sense of place. The visual system centers on a deep burgundy canvas (#67242B) that evokes the rich, earthy tones of a traditional fry shop, while vivid accent colors (primary red #FC3845, golden yellow #EED03A) punctuate the interface like the sizzle and warmth of fresh-fried food. The UI conveys unpretentious confidence: bold typography at 144px, generous spacing at 64px intervals, and unapologetic color contrast create an environment that feels both welcoming and energetic.

The brand voice is direct, celebratory, and rooted in Flemish hospitality. Sentences are short, declarative, and often use imperative mood: 'Kom langs op het Kerkplein en proef waarom Platse zo geliefd is' (Come by the town square and taste why Platse is so beloved). The vocabulary avoids pretension—no 'artisanal' or 'craft,' just 'vers, krokant en onweerstaanbaar lekker' (fresh, crispy, and irresistibly delicious). Tone is warm but never saccharine; confident but never arrogant. Example: 'Elke dag een reden om langs te komen'—a simple statement that treats daily indulgence as a given, not a guilty pleasure.

Colors

The color system is built on a warm, saturated foundation that reflects the sensory experience of a Belgian frituur. Primary (#FC3845) is the signature accent—a vivid, slightly desaturated red used exclusively on call-to-action buttons, active states, and brand-critical interactive elements. It appears at full opacity on the light surface (#F2F2F2) and at reduced opacity (rgba(252, 56, 69, 0.3)) as a divider or focus indicator on the dark burgundy canvas. Secondary (#67242B) is the dominant background and structural color—a deep, warm burgundy that grounds the entire interface and evokes both tradition and appetite. Tertiary (#EED03A) is a golden yellow accent reserved for highlights, badges, and decorative elements; it provides visual relief and draws attention to secondary CTAs or status

Typography

The type system employs a two-family strategy: Instrument Serif for display and headlines, Archivo for body and UI text. Instrument Serif (400 weight, 144px, -3% letter-spacing) dominates the visual hierarchy at the display level, creating a monumental, confident presence that commands attention without shouting. Headline-lg (96px, -3% letter-spacing) and headline-md (48px, -2% letter-spacing) maintain the serif's elegance while scaling down for section breaks and feature titles. The negative letter-spacing (-0.03em to -0.02em) tightens the letterforms, creating a compressed, energetic feel that contrasts with the generous spacing around type blocks. Body and UI text switches to Archivo (16px, 500 weight, uppercase, 120% line-height), a geometric sans-serif that conveys modernity and clari

Layout

The layout employs a fluid, full-width container model with a max-width of 1800px, allowing the design to breathe on large screens while maintaining control on desktop. The grid is 12-column, but sections often use asymmetric layouts: hero sections span full width with 5% horizontal padding, while content sections use 64px (lg spacing) gaps between columns to create visual breathing room. The page rhythm is driven by lg spacing (64px) for section separation and md spacing (24px) for component-level grouping. Vertical rhythm follows a 32px widget baseline, creating a predictable cadence that feels both structured and generous. The container max-width of 1800px ensures that on ultra-wide displays, the design doesn't stretch awkwardly; instead, the burgundy background extends to the viewport

Elevation & Depth

Depth in this system is achieved through a restrained shadow vocabulary and strategic use of the surface-container stack rather than aggressive drop shadows. Level 1 (Base): The burgundy background (#67242B) serves as the foundation; no shadow is applied. Level 2 (Standard Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) lifts elements subtly off the surface, creating a shallow depth that suggests interactivity without visual noise. Level 3 (Elevated/Modals & Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) creates a more pronounced lift, used on modals, expanded cards, a

Shapes

The shape philosophy is 'Geometric Warmth'—rounded corners are used strategically to soften the industrial edge of the burgundy palette without introducing organic or playful curves. Buttons and interactive elements use full rounding (border-radius: 50%, or 9999px), creating pill-shaped buttons that feel approachable and clickable. Cards and containers use lg rounding (1rem / 16px), providing a subtle softness that prevents the design from feeling harsh. Input fields and smaller components use DEFAULT rounding (0.5rem / 8px), maintaining visual consistency while keeping the interface crisp. Im

Components

Action Elements Buttons are the primary interactive currency. The primary button uses {colors.primary} (#FC3845) background with {colors.on-primary} (#F2F2F2) text, {typography.label-md} (Roboto, 15px, 600 weight), and full rounding (border-radius: 50%). Padding is 12px 24px, height 48px. On hover, the background transitions to {colors.primary-container} (#FF6B75) with a 200ms ease-out transition; no shadow is added in the default state, but a subtle box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) appears on hover. Secondary buttons use a transparent background with a 1px solid border in {colors.on-surface} (#F2F2F2) and matching text color; on hover, the background fills with {colors.on-surface} and text inverts to {colors.surface} (#67242B). Ghost buttons (tertiary CTAs) use transparent ba

Do's and Don'ts

**Do**

• Do use {colors.primary} (#FC3845) exclusively for primary CTAs, active states, and focus indicators—never on passive elements or backgrounds.
• Do maintain the 64px (lg spacing) rhythm for section separation and 24px (md spacing) for component grouping; this creates visual predictability and breathing room.
• Do apply Instrument Serif at 144px with -3% letter-spacing for hero headlines; the compressed letterforms create energy and confidence.
• Do use full rounding (border-radius: 50%) on all buttons to make them unmistakably interactive; reserve lg rounding (16px) for cards and images.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-out timing; avoid instant state changes.
• Do maintain 7.5:1 contrast ratio between {colors.on-surface} (#F2F2F2) and {colors.surface} (#67242B) for all body text; test small text (12px) with a contrast checker.
• Do use {colors.tertiary} (#EED03A) as a highlight or accent only; never as a background for large content areas.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards in their default state and upgrade to 0 8px 24px rgba(0, 0, 0, 0.2) on hover for tactile feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) in the interface; stick to {colors.surface} (#67242B) and {colors.on-surface} (#F2F2F2) for consistency.
• Don't apply shadows to buttons in their default state; reserve shadows for hover and active states to signal interactivity.
• Don't mix Instrument Serif and Archivo in the same headline; use Serif for display/headlines and Archivo for body/UI text exclusively.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the visual rhythm.
• Don't reduce the letter-spacing on Instrument Serif below -3% or increase it above -2%; the compressed letterforms are essential to the brand's energy.
• Don't apply {colors.primary} (#FC3845) to passive elements like dividers or backgrounds; reserve it for interactive elements and focus states.
• Don't use {colors.secondary} (#67242B) as a text color on the burgundy background; always use {colors.on-surface} (#F2F2F2) for legibility.
• Don't animate state changes faster than 150ms or slower than 300ms; the 200ms ease-out standard creates a responsive, not sluggish, feel.