Suteki

Overview

Suteki is a contemporary Japanese restaurant that celebrates the intersection of culinary precision and warm hospitality. The brand embodies 'Refined Minimalism with Warmth'—a design philosophy that balances the austere elegance of Japanese aesthetics with the approachable, inviting energy of a neighborhood gathering place. The visual identity uses a striking deep red accent (#d41e2f) against a soft, cream-colored canvas (#f4ecda), creating a sense of refined drama without coldness. The emotional response is one of anticipation: the red draws the eye to calls-to-action and key moments, while the warm background and generous whitespace signal comfort and care. Voice: precise yet conversational, knowledgeable but never pretentious. Suteki speaks in the language of craft—mentioning specific ingredients, preparation techniques, and the philosophy behind each dish—while maintaining an accessible, inviting tone. Example sentence: 'Our nigiri is hand-pressed daily at 6 AM; each piece reflects the season's finest catch.'

Colors

The color system is built on a warm, neutral foundation with two strategic accent colors that drive interaction and emotion. Primary (#d41e2f) is the brand's signature deep red—used exclusively on CTAs, hover states, and moments requiring immediate attention. This red is warm and slightly muted, evoking both the intensity of fresh wasabi and the energy of a bustling sushi counter. Secondary (#2f8682) is a sophisticated teal-green, used for supporting actions, tags, and secondary navigation; it provides visual breathing room and suggests freshness and natural ingredients. Tertiary (#13aff0) is a bright, cool cyan reserved for highlights, accents on imagery, and tertiary interactions. The surface stack anchors the design: surface (#f4ecda) is the primary background—a soft, warm cream that re

Typography

The type system pairs two distinct voices: Cubano (a geometric, modern sans-serif) for headlines and display text, and Open Sans (a humanist sans-serif) for body copy and UI labels. Cubano's bold, confident letterforms (used at 700 weight, 60px for display, 40px for headlines) command attention and communicate the brand's contemporary energy; its geometric precision mirrors the craftsmanship of sushi preparation. Open Sans provides warmth and readability in body text (16px, 400 weight, 24px line-height), with generous 0.28 line-height ratio (24px ÷ 16px) ensuring comfortable reading on both mobile and desktop. Futura Md BT is reserved for labels and UI text (14px, 600 weight), adding a mid-century modern accent that reinforces the brand's refined aesthetic. All headlines use -0.02em to -0.

Layout

The layout follows a 12-column grid system with a fixed container max-width of 1240px, ensuring content remains scannable and focused on desktop while adapting fluidly to mobile (320px and up). The spacing scale uses semantic tokens: gutter (24px) for section separation, lg (40px) for major section breaks, and md (24px) for card padding and internal component spacing. The design favors generous whitespace—sections are separated by at least 40px vertically, and cards maintain 24px internal padding to prevent visual crowding. Hero sections use full-width imagery with 64vh height on desktop, scaling to 330px on mobile, creating immersive moments that showcase the restaurant's culinary artistry. The page rhythm alternates between image-heavy sections (sliders, galleries) and text-driven sectio

Elevation & Depth

Depth is conveyed through a restrained shadow system that maintains the warm, approachable aesthetic without introducing darkness or coldness. Level 1 (Base): no shadow; the surface (#f4ecda) provides the foundation. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that separates content from the background without visual drama. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer, more diffuse shadow that suggests greater distance and importance. Hover states on cards transition from Level 2 to Level 3 over 0.3s, signaling

Shapes

The shape philosophy is 'Soft-Technical Precision'—rounded corners are used strategically to soften the geometric rigor of the interface while maintaining clarity and functionality. Buttons and primary interactive elements use 5px border-radius (md), a subtle curve that feels contemporary without appearing playful or childish. Cards and containers use 10px border-radius (lg), creating a more pronounced softness that invites interaction. Tags and badges use 50% border-radius (full), forming perfect circles or pills that feel approachable and modern. Input fields use 3px border-radius (DEFAULT),

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#d41e2f on #ffffff, 44px height, 10px 20px padding, 5px border-radius) use 1px solid borders and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background transitions to #1e1e1c (on-surface) over 0.3s, maintaining the border and shadow. Secondary buttons (#2f8682 background, same dimensions) follow the same pattern, transitioning to #1a4d49 on hover. All buttons use label-md typography (Futura Md BT, 14px, 600 weight) for consistency and scannability. Transitions use cubic-bezier(0.4, 0, 0.2, 1) for a natural, responsive feel.

Containers & Surfaces Cards are the primary content container. Standard cards use surface-container (#f4ecda) background, 10px border-radius, 24px padding, and box-shadow

Do's and Don'ts

**Do**

• Do use the primary red (#d41e2f) exclusively for CTAs and hover states—it's the brand's signature accent and must remain distinctive.
• Do maintain at least 24px padding inside cards and 40px between major sections to preserve the warm, spacious aesthetic.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to small labels overlaid on food photography to ensure legibility.
• Do use Cubano for all headlines (40px and above) to reinforce the brand's contemporary, confident voice.
• Do transition all interactive elements (buttons, cards, inputs) over 0.3s using cubic-bezier(0.4, 0, 0.2, 1) for a natural, responsive feel.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—stick to the warm palette (#1e1e1c for text, #f4ecda for surfaces).
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur values greater than 24px; the aesthetic must remain light and approachable.
• Don't use secondary (#2f8682) or tertiary (#13aff0) as primary CTAs—reserve primary (#d41e2f) for all high-priority interactions.
• Don't mix Cubano and Open Sans in the same headline; use Cubano for all display/headline text and Open Sans for body/UI only.
• Don't apply border-radius greater than 10px to cards or containers; the brand uses precision, not organic softness.