This document is the single source of truth for Foresio's visual language. Every choice here has a reason. Before you override anything, read the reasoning. If the reasoning is wrong, update it here before you update the code.
The kitchen ticket is the most universally recognized object in restaurant operations. It is monospace, high-contrast, terse, timestamped, and action-oriented. Foresio's design language doesn't look like a kitchen ticket as a gimmick — it behaves like one. Surfaces that demand action, not contemplation. Every design decision flows from this thesis.
Five colors. Adding a sixth is wrong. Every color has one job. When a color does more than one job, it stops communicating. When you feel the urge to add a color, ask whether you're solving a problem or avoiding a layout decision.
Primary text. Primary surfaces on dark sections. Not pure black — pure black feels digital; this is printed ink.
Primary background. The off-white of thermal paper. This single choice differentiates Foresio from every cold-white SaaS product.
CTAs only. Alert states. Left-border accents on active cards. Used scarcely — when users see red, something matters.
ROI numbers. Success states. Savings figures. Positive indicators. Deep forest, not SaaS "growth green."
Secondary surfaces. Section backgrounds. Card interiors. The "paper layer" that sits between Ticket White and Ink.
Use CSS opacity variants for supporting text and borders. Never create new hex colors for muted states.
Three fonts, three jobs. Never mix their jobs. Fraunces for display and headings (editorial, editorial restaurant writing character). Inter for body and UI text (readability on mobile, operator phones). JetBrains Mono for every number, timestamp, price, percentage, and data label on the site — this is the kitchen-ticket move that makes Foresio feel categorically different from every other SaaS product.
An 8-point base grid. All spacing is a multiple of 8. Never use arbitrary pixel values — if the design requires it, the spacing scale is wrong.
Buttons use JetBrains Mono, uppercase, letter-spacing 0.12em. Zero border-radius — always. Border-radius on buttons is the single most common tell of generic SaaS design. Square corners are deliberate. They communicate precision and utility. The text content should include an arrow when the button navigates (→), not when it submits.
Form labels use JetBrains Mono, 9–10px, uppercase, letter-spacing 0.16em. Labels are not placeholders. The label lives above the field, always visible. Placeholders show example content only — "First name" not "Enter your first name." No border-radius on any form element. Forms should feel like filling out a ticket, not a consumer app.
The ticket is Foresio's most distinctive visual element. All cards derive from it. Key properties: white background on paper/tan surfaces (creates lift without shadow), 1px border in var(--tan) or var(--ink-20), and a 3–4px left-border accent that communicates state. Never use box-shadow. The left-border is the signal, not a drop shadow.
Salmon margin
alert pending
Salmon margin
22% — below floor
Reorder halted.
Promo approved.
Pilot registration
confirmed
Every section on the site uses a .section-label above the headline. This label uses JetBrains Mono, 10px, uppercase, with a 18px Signal Red rule to its left. It functions like a section heading on a kitchen ticket — contextualizes what you're about to read. The timestamp pattern (07:30 ↦, 10:14 ↦) pulls directly from the "A Day on Foresio" walkthrough in the pitch deck. Used consistently, it teaches the visitor how Foresio thinks about time — as a shift, not an interface.
Every number that represents data wears JetBrains Mono. No exceptions. Prices, percentages, counts, ROI figures, timestamps, step indicators, ticket numbers, agent counts. If you can measure it, it uses the mono font. This is the single rule that makes Foresio's design feel operationally serious. Violating it makes the site feel like a consumer app. Operator-grade tools use tabular figures because operators read numbers fast.
Above pre-pandemic levels.
QSR alone in 2024.
Gone to DoorDash/Uber.
Annual full-service staff.
| Element | DO | DON'T |
|---|---|---|
| Colors | Use exactly these five colors + their ink opacity variants | Add a sixth color for any reason, including "just a tint" |
| Gradients | Flat, solid fills only — always | Use any CSS gradient anywhere on any element, ever |
| Border radius | 0px on all buttons, cards, inputs, and containers | Add border-radius to make something "feel friendlier" |
| Box shadows | Use border changes and left-border accents for card elevation | Use box-shadow for any hover or card state |
| Numbers | JetBrains Mono for every data number, price, %, timestamp | Display numbers in Inter or Fraunces — ever |
| Icons | Minimal geometric icons (arrows →, checkmarks ✓) in mono | AI sparkle icons, neural-network patterns, robot illustrations |
| Photography | Documentary restaurant interior shots, tight and sparse | Stock photos of smiling chefs, food styled for Instagram |
| CTA copy | "Start 30-Day Pilot — $0 →" (specific, honest, actionable) | "Get Started" / "Sign Up Free" / "Learn More" (vague) |
| Section flow | section-label → headline → subhead → content → CTA | Start a section with a large decorative image or animation |
| Testimonials | Founder section with real quote until pilot operators provide them | Fabricate operator testimonials or use anonymized fake quotes |
| Animation | Opacity + translateY(6px) on entry; 200ms ease on hovers | Auto-playing animations, parallax scrolling, particle systems |
Use between major subsections within the same section. Never decorative.
The kitchen ticket perforated edge. Used as a major section break. Never within a section.
Foresio's motion is purposeful and terse — like the platform itself. No decorative animations. Motion communicates state change (agent firing, form step progression, cascade sequence). The transition speeds are fast: 120ms for hover states, 200ms for state changes, 350ms for the cascade agent sequence. Anything slower feels indulgent.
Foresio's entire product promise is built around SMS — operators check their phone at 7:30am, approve actions with one tap. The website must be as native on mobile as the product is. Design mobile-first, then scale up. Every page must be tested at 390px (iPhone 14 Pro) before it ships.
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1200px max-w | Full navigation, two-column layouts, cascade demo full width |
| Tablet | ≤ 900px | Nav links hidden (hamburger TBD), grid-2 → 1col, cascade stacks |
| Mobile | ≤ 600px | grid-4 → 1col, stat grid → 1col, font sizes clamp to minimum |
All files in this handoff package. Open each in a browser to see the layout in full.