Sesamo

Overview

Sesamo is a boutique Italian software consultancy specializing in custom development and AI-driven process optimization. The brand embodies a philosophy of "Structural Clarity"—transforming chaotic business workflows into elegant, intelligible systems through precision engineering and intelligent automation. The visual language is decidedly tech-forward yet approachable: a clean, light-dominant palette punctuated by a vibrant orange accent (#ff6a00) that signals energy, innovation, and actionable intelligence. The UI conveys confidence without coldness, professionalism without rigidity.

The brand voice is direct, solution-oriented, and grounded in Italian craftsmanship values. Sesamo speaks to decision-makers and technical leaders with clarity and respect for their time. The tone avoids hype; instead, it emphasizes measurable outcomes, structural thinking, and bespoke tailoring. Example sentence in brand voice: "We don't build generic software—we architect solutions that fit your process, not the other way around."

Colors

The Sesamo color system is anchored in a neutral, light foundation (surface: #ffffff, surface-dim: #fafafa) that projects clarity and professionalism, with a carefully curated accent stack that drives visual hierarchy and interaction. Primary (#ff6a00, a warm, saturated orange) is the signature brand accent—deployed on all primary CTAs, focus states, and key interactive elements to signal actionable moments. This orange is energetic without being aggressive, evoking both technical precision and approachable innovation. Secondary (#0073ce, a professional blue) supports secondary actions and informational contexts, creating a complementary accent pair that avoids monotony. Tertiary (#9b1aaa, a deep purple) is reserved for status indicators, badges, and tertiary interactions, adding visual ri

Typography

The type system employs matterFont (a custom, geometric sans-serif loaded via @font-face) as the primary typeface for display and headline scales, paired with system fonts (-apple-system, Segoe UI, Roboto) for body and label text to ensure consistent rendering across platforms. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major section breaks; headline-md (28px, 600 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; body-md (16px, 400 weight, 24px line-height) is the default for running text and descriptions. Label-md (14px, 700 weight, 0.01em letter-spacing) is applied to button text and form labels to ensure legib

Layout

Sesamo employs a fluid 12-column grid system with a maximum container width of 1280px, allowing responsive scaling from mobile (320px) through tablet (768px) to desktop (1280px+). The page rhythm is governed by a semantic spacing scale: unit (8px) as the baseline, with sm (12px), md (24px), lg (40px), and xl (64px) used for progressive separation of content blocks. Section separation typically uses lg spacing (40px) to create breathing room between major content areas; internal card padding uses md (24px); form field spacing uses sm (12px). The gutter (24px) is applied consistently to horizontal margins on all breakpoints, creating a safe zone that prevents content from touching viewport edges. White-space is treated as a structural element: generous margins around hero headlines (lg spaci

Elevation & Depth

Depth in Sesamo is achieved through a restrained shadow system that reinforces hierarchy without introducing visual noise. The elevation scale consists of three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle surface separation and form inputs; md (0 4px 12px rgba(0, 0, 0, 0.1)) for elevated cards and modals; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements and top-level overlays. Base cards use sm elevation and a 1px solid border at {colors.outline-variant} (#b8b8b8) to define edges crisply. On hover, cards transition to md elevation (200ms ease-out) to signal interactivity. In

Shapes

The Sesamo shape philosophy is termed "Geometric Precision"—favoring subtle, purposeful rounding that softens technical rigor without sacrificing clarity. The rounded scale progresses from sm (0.25rem / 4px) for small, tight elements (badges, small buttons) through DEFAULT (0.5rem / 8px) for inputs and standard components, md (0.75rem / 12px) for cards and containers, lg (1rem / 16px) for larger cards and modals, xl (1.5rem / 24px) for hero sections and prominent containers, and full (9999px) for pill-shaped buttons and fully rounded elements. Primary buttons use lg (16px) to balance visual we

Components

Action Elements Buttons are the primary interaction mechanism and are differentiated by role and state. Primary buttons (button-primary) use {colors.primary} (#ff6a00) background with white text, lg rounding (16px), and padding 8px 32px, achieving a 48px height. On hover, the background shifts to {colors.primary-container} (#ff8533) with a 200ms ease-out transition, providing clear feedback without animation jank. Secondary buttons (button-secondary) use {colors.secondary} (#0073ce) with full rounding (pill shape) to visually distinguish them as supporting actions; they follow the same hover pattern. Ghost buttons (button-ghost) have transparent backgrounds with a 1px outline at {colors.outline} (#cccccc) and {colors.primary} text; on hover, they fill with {colors.surface-container-low

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff6a00) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain visually distinct and reserved.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between hero and first section to create clear visual rhythm and breathing room.
• Do use matterFont for all display and headline scales (60px–28px) to reinforce the brand's geometric precision and technical identity.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease-out to provide smooth, predictable feedback without animation fatigue.
• Do maintain 1px borders on all cards and containers at {colors.outline-variant} (#b8b8b8) to define edges crisply against the light background.
• Do apply sm elevation (0 1px 2px rgba(0, 0, 0, 0.06)) to base cards and md elevation (0 4px 12px rgba(0, 0, 0, 0.1)) on hover to signal interactivity subtly.

**Don't**

• Don't use {colors.primary} (#ff6a00) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and focus states to maintain visual hierarchy.
• Don't apply rounding values below 4px (sm) or use 0px border-radius anywhere; even technical components require subtle rounding to humanize the interface.
• Don't mix matterFont with system fonts in the same headline or display scale; use matterFont for scales 28px and above, system fonts for 20px and below.
• Don't use shadows larger than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) on any component; excessive shadow depth contradicts the brand's structural clarity and creates visual noise.