Lasero

Overview

Lasero is an AI-powered assistant for laser engraving that eliminates guesswork from material settings and machine parameters. It serves makers, small businesses, and professional engravers who need instant, expert guidance without manuals or trial-and-error. The design aesthetic is **Technical Minimalism**—a clean, no-nonsense interface that prioritizes clarity and speed while maintaining warmth through a vibrant red accent and approachable typography. The brand personality is confident, knowledgeable, and direct: Kamil (the AI persona) speaks like a seasoned technician who has seen every material and machine, offering precise advice without jargon. The UI evokes trust through simplicity: a light, airy canvas (#F6F4F0) with bold red CTAs (#FF0000) that demand action, paired with a friendly illustrated avatar that humanizes the technical experience.

The voice is conversational yet authoritative. Example: "Anodized aluminum at 60% power, 100 mm/s—Kamil knows this will give you a crisp, permanent mark without heat damage." Every interaction prioritizes speed and confidence: no loading spinners, no hidden settings, no ambiguity. The brand rejects corporate sterility in favor of maker-friendly directness.

Colors

The color system balances a warm, inviting light background with a commanding red accent that drives all critical interactions. **Primary (#FF0000)** is the signature call-to-action color, used exclusively on buttons, focus states, and interactive highlights—it is the visual embodiment of urgency and expertise. **On-Primary (#FFFFFF)** ensures maximum contrast for text and icons on red surfaces. **Secondary (#1F9D55, a vibrant green)** supports status indicators and success states, particularly in parameter grids and material-selection contexts. **Tertiary (#1F5FCC, a professional blue)** is reserved for informational elements, links, and secondary navigation. The surface stack uses warm, off-white tones: **Surface (#F6F4F0)** is the primary page background, while **Surface-Container** var

Typography

The type system uses Open Sans exclusively, a humanist sans-serif that balances technical precision with approachability—critical for a tool that serves both novices and experts. **Display (61px, 700 weight, -0.04em letter-spacing)** anchors hero headlines like "Engrave like a pro" with commanding presence and tight tracking that conveys confidence. **Headline-lg (40px, 600 weight)** is used for section titles and major feature callouts, maintaining hierarchy without overwhelming the page. **Body-lg (18px, 400 weight, 28px line-height)** is the primary copy size for hero descriptions and feature explanations, set at a generous line-height (1.56) to ensure readability on light backgrounds. **Body-md (16px, 400 weight)** is the default body text for cards, descriptions, and inline content. *

Layout

The page uses a fluid, single-column layout optimized for mobile-first responsiveness, with a maximum container width of 1500px for desktop. The grid system is 12-column on desktop, collapsing to single-column on tablets and phones. **Gutter spacing is 22px** (the primary horizontal padding), applied consistently to header, hero, and content sections. **Section separation uses lg spacing (40px)** between major blocks (hero, features, testimonials, pricing), creating a rhythm that feels spacious without appearing disconnected. **Card padding is md (24px)** for comfortable internal breathing room; inputs and form fields use 18px–22px padding to accommodate touch targets (minimum 44px height on mobile). The hero section spans full-width with 22px horizontal padding, creating a safe margin on

Elevation & Depth

Depth is achieved through subtle shadows and strategic use of surface-container variants rather than dramatic layering. **Level 1 (Base)**: The page background is a warm, flat #F6F4F0 with no shadow. **Level 2 (Cards & Inputs)**: Standard cards use box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) paired with a 1px solid border at rgba(20, 18, 14, 0.08), creating a soft, barely-perceptible lift. Input fields use the same shadow and border, with a background of #F0EDE7 (surface-container-high) to distinguish them from the page background. **Level 3 (Modals & Overlays)**: Elevated surfaces (modals, drop

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are generous enough to feel approachable and modern, but not so extreme as to sacrifice the professional, no-nonsense aesthetic. **Buttons use 18px border-radius (xl)**, creating a pill-like, friendly silhouette that invites interaction while remaining clearly clickable. **Cards and containers use 12px border-radius (lg)**, striking a balance between softness and structure—rounded enough to feel contemporary, sharp enough to maintain visual clarity in dense layouts. **Input fields use 18px border-radius (xl)**, matching buttons to cre

Components

Action Elements **Button-Primary** is the dominant CTA, rendered at 48px height with 22px vertical and 28px horizontal padding, using Open Sans 600 weight at 20px. The background is always {colors.primary} (#FF0000) with white text. On hover, the background shifts to {colors.primary-fixed-dim} (#FE4444, a slightly lighter red) and the element scales to 0.96 via transform: scale(0.96) over 180ms cubic-bezier(0.22, 1, 0.36, 1)—a spring-like, tactile feedback that feels native to mobile. On active (pressed), the scale remains at 0.96 for 100ms before releasing. **Button-Secondary** is a transparent button with a 1px border at {colors.outline-variant} (#D4CFCA), 40px height, and 13px vertical / 16px horizontal padding. Text is {colors.primary} (#FF0000) at 14px, 600 weight. On hover, the b

Do's and Don'ts

**Do**

• Do use {colors.primary} (#FF0000) exclusively for primary CTAs, focus states, and critical interactive elements—never dilute it with secondary uses.
• Do maintain 22px gutter spacing on all sides of the page and 40px section separation to preserve the spacious, uncluttered aesthetic.
• Do apply Open Sans 600 weight at 14px+ for all interactive text (buttons, labels, form fields) to ensure scanability and visual weight.
• Do use the surface-container stack (not pure white or pure black) for cards and containers to maintain the warm, cohesive palette and reduce eye strain.
• Do pair every interactive element with a spring-scale feedback (transform: scale(0.96)) on active state for tactile, native-app-like responsiveness.
• Do use 12–18px border-radius consistently across buttons, cards, and inputs to maintain the soft-technical aesthetic.

**Don't**

• Don't use secondary colors (green, blue) for primary CTAs—they dilute the brand's red signature and confuse interaction hierarchy.
• Don't apply shadows deeper than 0 4px 12px rgba(0, 0, 0, 0.08)—the design relies on subtle depth, not dramatic layering.
• Don't use pure white (#FFFFFF) or pure black (#000000) for backgrounds or text; stick to the warm, off-white surface stack and near-black on-surface tokens.
• Don't set border-radius below 6px or above 18px for standard UI elements—this breaks the soft-technical balance and feels either dated or overly playful.
• Don't mix typefaces; Open Sans is the sole font family. Avoid system fonts or serif fallbacks.
• Don't use opacity or transparency for primary text; maintain {colors.on-surface} (#16161A) at 100% for body copy to preserve readability on light backgrounds.