Switch between the rendered Visual preview and the Raw DESIGN.md.
Restomatix embodies a premium, modern SaaS aesthetic tailored for restaurant technology and growth-focused operations. The design system blends warmth with sophistication, featuring gradient-driven visuals that evoke culinary excellence and digital innovation. Vibrant orange and coral accents punctuate a refined neutral foundation, creating an energetic yet professional atmosphere. The typography is bold and confident, while generous whitespace and rounded components convey accessibility and trust. This system communicates competence, growth, and operational excellence to restaurant owners and managers seeking transformative business solutions.
Key Characteristics
#FFAE42): Call-to-action buttons, primary interactive elements, and key UI affordances (Book a free demo, Get My Report)#0000EE): Links, active states, and brand emphasis in the design system#00C462): Confirmation states, positive outcomes, and success messaging#4CC02B): Secondary success indicators and growth signals#E89D35): Secondary alert states and caution messaging#0000EE): Navigation links and underlined text elements#0099FF): Hover states and secondary interactive elements#BCE6D1): Subtle highlighting and accent backgrounds#000000): Primary body text and heading text#353535): Secondary text, metadata, and supporting copy#2E2E2E): Subtle text and disabled states#292929): Minimal contrast text for very subtle messaging#191919): Deep background tints and dark overlays#FFFFFF): Primary background surfaces and card backgrounds#F1F3F4): Light background tints and disabled surface states#EDEDE8): Soft borders and subtle dividers#FFAE42): Warning states, alerts, and attention-grabbing notifications#00C462): Positive confirmations and success messaging#0009): Overlay and scrim backgrounds at 9% opacity#FFFC): Light overlay and hover states at 12% opacityPrimary: Montserrat (sans-serif) with fallback stack: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Secondary: Generic sans-serif with fallback: sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/Hero | Montserrat | 64px | 600 | 71px | normal | Large impact headings and hero text |
| H1 | Montserrat | 45px | 600 | 55px | normal | Primary page headings |
| H3 | Montserrat | 32px | 400 | 42px | normal | Section headings and secondary titles |
| H4 | Montserrat | 23px | 600 | 29px | normal | Tertiary headings and emphasis |
| H5 | Montserrat | 23px | 400 | 31px | normal | Subheadings and feature titles |
| Body | Montserrat | 14px | 500 | 21px | normal | Standard body text and paragraphs |
| Link | sans-serif | 12px | 400 | normal | normal | Navigation links and inline links |
| Caption | Montserrat | 12px | 400 | normal | normal | Small supporting text and labels |
#FFAE42#FFFFFF12px 24px6px0px 2px 8px rgba(0, 0, 0, 0.1)#E89D35, shadow 0px 4px 12px rgba(0, 0, 0, 0.15)#D68B2A, shadow 0px 1px 4px rgba(0, 0, 0, 0.1)#F1F3F4, text color #292929, no shadow#FFFFFF#00000012px 24px6px1px solid #EDEDE8#F1F3F4, border 1px solid #2E2E2E#EDEDE8, border 1px solid #000000#0000EE12px 16px6px1px solid #0000EErgba(0, 0, 238, 0.05), border 1px solid #0000EErgba(0, 0, 238, 0.1)#FFFFFF#00000024px15px1px solid #EDEDE80px 1px 3px rgba(0, 0, 0, 0.08)0px 4px 12px rgba(0, 0, 0, 0.12), border 1px solid #BCE6D1linear-gradient(135deg, #FF8A65 0%, #FF6B9D 50%, #E89D35 100%)#FFFFFF32px15px0px 8px 24px rgba(255, 174, 66, 0.2)#F1F3F460px 24px0px0px#FFFFFF#00000012px 16px6px1px solid #EDEDE81px solid #0000EE, box shadow 0px 0px 0px 3px rgba(0, 0, 238, 0.1)#F1F3F4, text color #292929, border 1px solid #EDEDE8#2E2E2E, font style italic#FFFFFF#00000012px 16px6px1px solid #EDEDE8#353535rgba(255, 255, 255, 0.7)60px16px 24px#000000#0000EE#0099FFblur(8px) (optional enhancement)#FFFFFF6px1px solid #EDEDE80px 8px 24px rgba(0, 0, 0, 0.12)12px 16px#F1F3F4#353535#0000EE#0099FF#000000#353535#0000EEThe spacing system is built on a 4px base unit, with a geometric scale applied for consistent rhythm and readability across all components and layouts.
Whitespace is leveraged as a premium design element, not a constraint. Generous vertical spacing between sections (48–80px) creates visual hierarchy and breathing room. Horizontal whitespace within components (16–24px padding) ensures text and interactive elements are never cramped. Asymmetrical whitespace is used strategically to draw attention to CTAs and hero messaging. This approach reinforces the premium, enterprise-grade positioning of the product.
| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, box-shadow: none | Neutral backgrounds, borders, disabled states |
| Raised (1) | box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08) | Default cards, subtle elevation |
| Floating (2) | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1) | Primary buttons, hovered cards |
| Elevated (3) | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12) | Dropdowns, modals, prominent cards on hover |
| Overlay (4) | box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) | Feature cards, hero sections with depth |
| Deep (5) | box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.16) | Modal overlays, full-screen callouts |
Shadow Philosophy
Shadows in Restomatix use subtle, soft blurs to create perceived depth without heaviness. Each elevation level increases blur radius and slightly increases Y-offset, creating a natural light-from-above effect. Black shadows are used with low opacity (8–16%) to maintain contrast with light surfaces. Gradients (especially warm coral-to-magenta) are layered under elevated components to enhance visual interest without relying solely on shadows. This creates a sophisticated, modern aesthetic that feels premium and accessible.
#FFAE42) for all primary CTAs — it signals action and drives conversion#EDEDE8 or #F1F3F4 for subtle dividers and backgrounds rather than harsh black borders#00C462 or #4CC02B) with clear iconography for positive feedback#0000EE) sparingly for links#FFFFFF or light neutrals instead| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 640px | Single-column layout, 16px horizontal padding, 24px vertical spacing, 14px body text |
| Tablet | 641px – 1024px | 2-column grid, 24px horizontal padding, 36px vertical spacing, maintained 14px body text |
| Desktop | 1025px – 1440px | 12-column grid, 40px horizontal padding, 48px+ vertical spacing, 14px body text, max-width container |
| Large Desktop | 1441px+ | Content centering with max-width 1440px, symmetrical margin balancing |
#FFAE42) — use for all primary action buttons and key interactive elements#0000EE) — use for navigation links and inline text links#0099FF) — use for hover states on links#000000) — standard body and heading text#353535) — metadata, supporting text, secondary copy#00C462) — positive confirmations and success messaging#FFAE42) — alerts and attention states (overlaps with CTA)#FFFFFF) — default surface, cards, containers#F1F3F4) — soft section backgrounds and disabled states#EDEDE8) — subtle dividers and card bordersAll buttons use Montserrat 12px weight 500 with 12px vertical × 24px horizontal padding, rounded to 6px. Primary buttons are #FFAE42 on white with hover shadow elevation.
Typography hierarchy relies on three sizes: 45px for H1, 32px for H3, 14px for body — all Montserrat with generous line heights (1.2–1.5x).
Spacing follows the 4px base unit scale: use 16px for component padding, 24px for card content, 36–48px for section breaks, and 60–80px for hero/major sections.
Cards and containers default to 15px border radius with 1px #EDEDE8 borders and Level 1 shadow (0px 1px 3px rgba(0, 0, 0, 0.08)).
Gradients are warm and directional (e.g., coral → magenta → orange at 135deg) — use sparingly on feature cards and hero backgrounds, never on text.
Navigation is a 60px transparent header (rgba(255, 255, 255, 0.7)) with 12px sans-serif links. Links default to #0000EE and shift to #0099FF on hover.
Mobile-first: all layouts reflow below 768px, reducing vertical spacing from 80px → 48px → 32px and converting horizontal grids to single-column stacks.
Accessibility minimums: 44px touch targets, 12px minimum font (14px standard), AA contrast compliance, and proper semantic HTML with ARIA labels.
Form inputs use 14px Montserrat weight 500, 12px padding on 6px radius, with #EDEDE8 borders. Focus state adds 3px blue outline (rgba(0, 0, 238, 0.1)).
Shadows have consistent blur and Y-offset progression: Level 1 (1–3px), Level 2 (2–8px), Level 3 (4–12px), Level 4 (8–24px) — all using rgba(0, 0, 0, 0.08–0.16).