TheFork Manager

Overview

TheFork Manager is a restaurant management software platform that empowers hospitality operators to streamline daily operations, maximize revenue, and deliver exceptional guest experiences. The design system embraces **Operational Clarity**—a philosophy that marries enterprise software rigor with approachable, human-centered aesthetics. The brand personality is confident yet accessible: it speaks to restaurant professionals with precision and respect, avoiding jargon while celebrating the craft of hospitality. The UI evokes a sense of control and mastery; every interface element is purposefully placed to reduce cognitive load and accelerate decision-making. The emotional response is one of relief: users feel empowered to manage complexity without friction.

Voice and tone are direct, encouraging, and solution-oriented. TheFork Manager uses active verbs and concrete outcomes: "Boost your revenue by 23%" rather than "Improve performance." The vocabulary leans into restaurant vernacular ("covers," "seating," "reservations") while maintaining professional polish. Example sentence in brand voice: "Unlock real-time insights into your dining room and turn every reservation into a revenue opportunity."

Colors

The color palette is rooted in **Teal-Centric Professionalism** with strategic accent layers. Primary (#00665a) is a deep, sophisticated teal that commands attention on CTAs, active states, and key data visualizations—it conveys trust, stability, and operational mastery. Secondary (#05c15c), a vibrant emerald-green, energizes success states, confirmations, and growth metrics, reinforcing positive outcomes. Tertiary (#fcae18), a warm golden-amber, highlights warnings, special offers, and secondary calls-to-action, adding warmth without compromising clarity.

The surface stack is anchored in clean whites and near-whites: surface (#ffffff) for primary content areas, surface-container-lowest (#f0f9fa) for subtle background differentiation, and surface-container (#e9ecef) for secondary containe

Typography

The type system pairs **Valizas** (custom serif, 400/600/700 weights) for headlines and display text with **Montserrat** (geometric sans-serif, 400/500/600 weights) for body and UI labels. This pairing creates visual distinction: Valizas conveys editorial authority and brand personality in headlines ("Your trusted partner to grow & run your restaurant"), while Montserrat ensures clarity and scannability in dense operational interfaces. Display (60px, 700 weight, -0.04em tracking) anchors hero sections; Headline-lg (40px, 600 weight, -0.02em) frames major sections; Body-lg (18px, 400 weight) carries narrative copy; Label-md (14px, 500 weight, 0.01em tracking) labels form fields and buttons. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) to small labels (12px) when overlaid on busy backgro

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1280px (container-max-width), centered on viewport. Horizontal gutters are 24px ({spacing.gutter}), collapsing to 12px on tablets and 8px on mobile. Vertical rhythm is built on an 8px unit scale: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element spacing uses sm (12px) or xs (4px). The hero section spans full-width with 64px top/bottom padding ({spacing.xl}), creating breathing room around the primary headline and CTA cluster. Cards and containers use 24px internal padding with 1px borders at rgba(0, 0, 0, 0.1) to define boundaries without visual heaviness. White-space philosophy: generous margins between sections (40–64px) prevent cognitive overload; tight internal

Elevation & Depth

Depth is conveyed through a **three-tier shadow system** that mimics subtle light diffusion rather than dramatic drop-shadows. Level 1 (Base/Flat): no shadow; used for inline elements, badges, and text-only components. Level 2 (Raised Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to standard cards, input fields, and floating UI elements; creates gentle separation from the surface. Level 3 (Elevated/Modals): box-shadow: 0 0 12px rgba(0, 0, 0, 0.3), 0 1px 5px rgba(0, 0, 0, 0.2), used for modals, popovers, and high-priority overlays; the dual-layer shadow (ambient + directional) crea

Shapes

The shape language is **Architectural Precision**—clean, rectilinear, with minimal rounding that conveys professionalism and control. Buttons use rounded.sm (4px / 0.25rem) for a subtle, modern edge that feels refined without playfulness. Cards and containers use rounded.lg (16px / 1rem) for a softer, more approachable appearance that humanizes dense data. Input fields use rounded.DEFAULT (8px / 0.5rem) as a middle ground, balancing form-like familiarity with contemporary design. Modals and popovers use rounded.xl (24px / 1.5rem) to create a distinct, elevated visual layer. Badges and pills us

Components

Action Elements **Button-Primary** (48px height, 13px vertical / 24px horizontal padding, rounded.sm, background: {colors.primary}, text: {colors.on-primary}) is the dominant CTA for high-intent actions ("GET STARTED," "BOOK A DEMO"). On hover, background shifts to #004d45 (darker teal) with transition: background-color 200ms ease-in-out. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) to indicate tactile feedback. **Button-Secondary** uses a transparent background with a 2px solid border at {colors.primary}, maintaining the same height and padding; on hover, background becomes {colors.surface-container-low} (#edf6f5) to indicate interactivity. **Button-Accent** (secondary CTA) uses {colors.secondary} (#05c15c) for confirmations and positive actions; hover state

Do's and Don'ts

**Do**

• Do use Valizas (600–700 weight) for all headlines and hero copy to establish brand authority and visual hierarchy.
• Do apply primary (#00665a) exclusively to high-intent CTAs and active/focus states; never use it for decorative elements or backgrounds.
• Do maintain 24px gutters and 40–64px section spacing to prevent cognitive overload in dense dashboards.
• Do use the three-tier shadow system (Level 1/2/3) consistently; never mix shadow styles or apply shadows to text elements.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) for smooth, professional feedback.
• Do use secondary (#05c15c) exclusively for success states, confirmations, and positive metrics to reinforce positive outcomes.

**Don't**

• Don't use rounded corners >24px on any component; excessive rounding undermines the software's operational seriousness.
• Don't apply shadows to text, badges, or inline elements; reserve shadows for containers and elevated surfaces only.
• Don't mix Montserrat and Valizas weights arbitrarily; use Valizas 600+ for headlines, Montserrat 400–500 for body/UI.
• Don't use tertiary (#fcae18) as a primary accent or CTA color; reserve it for warnings, promotions, and secondary highlights.
• Don't exceed 1280px container width; wider layouts reduce readability and dilute the focused, professional aesthetic.
• Don't apply instant state changes without transitions; all interactive feedback must use 150–200ms ease-in-out timing to feel intentional and polished.