--- version: alpha name: Infinite Machine description: Industrial-minimal hardware design — a near-white concrete canvas with pure-black ink, Helvetica Now neo-grotesque body paired with extended technical display type (Eurostile Extended), and a restrained automotive-red accent reserved for moments of action. colors: # Canvas + ink background: "#f8f8f8" # light concrete page canvas surface: "#ffffff" surface-soft: "#fafafa" surface-muted: "#ededed" ink: "#000000" # pure black headings + body ink-soft: "#0a0a0a" # Accent — automotive red, action only primary: "#cc3732" # brand red accent-orange: "#ff4c24" # signal orange-red accent-crimson: "#ea384c" # Neutral scale gray-700: "#6a6a6a" gray-600: "#616161" gray-500: "#8d8d8d" gray-400: "#aaadb0" gray-300: "#c8c8c8" gray-200: "#d9d9d9" gray-150: "#e5e5e5" gray-100: "#f2f2f2" # Cool slate (technical labels / steel) slate: "#5d6c7b" slate-soft: "#758696" # On-color on-primary: "#ffffff" on-ink: "#ffffff" typography: display-hero: fontFamily: "Eurostile Extended, Archivo, Arial, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.02 letterSpacing: -0.5px display-tech: fontFamily: "Eurostile Extended, Archivo, Arial, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0.5px section-heading: fontFamily: "Helvetica Now Display, Helvetica Neue, Arial, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: -0.8px sub-heading: fontFamily: "Helvetica Now Display, Helvetica Neue, Arial, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.4px card-title: fontFamily: "Helvetica Now Display, Helvetica Neue, Arial, sans-serif" fontSize: 22px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.3px body-large: fontFamily: "Helvetica Now Text, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Helvetica Now Text, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0px body-medium: fontFamily: "Helvetica Now Text, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "Helvetica Now Display, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.2px label-tech: fontFamily: "Eurostile Extended, Archivo, Arial, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 1.5px caption: fontFamily: "Helvetica Now Text, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.2px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px 2xl: 64px 3xl: 96px 4xl: 160px rounded: none: 0px micro: 2px xs: 4px sm: 8px md: 13px lg: 16px xl: 26px pill: 999px circle: 9999px components: # Primary action — black pill, the default CTA button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px # Secondary — outline on canvas button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px borderColor: "{colors.gray-200}" button-secondary-hover: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px borderColor: "{colors.ink}" # Accent action — automotive red button-accent: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px # Technical label chip badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label-tech}" rounded: "{rounded.pill}" padding: 6px 14px borderColor: "{colors.gray-200}" # Standard product card card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 24px borderColor: "{colors.gray-150}" # Spec / feature card on soft surface card-spec: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.lg}" padding: 32px borderColor: "{colors.gray-150}" # Input input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px borderColor: "{colors.gray-200}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.ink}" # Top nav bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 20px 32px borderColor: "{colors.gray-150}" --- # Infinite Machine Design System ## Overview Infinite Machine designs electric vehicles, and its website carries the same industrial-product sensibility into the browser. The canvas is a near-white concrete gray (`{colors.background}`) rather than pure white — a subtle warmth that reads like brushed aluminum or poured concrete, the material vocabulary of a hardware company. Against it, headings and body sit in pure black (`{colors.ink}`), giving the page the high-contrast, no-nonsense legibility of a spec sheet or an engineering blueprint. The typographic system is the brand's signature move: a pairing of neo-grotesque humanist type (Helvetica Now Display and Helvetica Now Text) for readable copy, against an extended technical display face (Eurostile Extended) for moments that need to feel engineered. Eurostile's wide, squared letterforms are the typographic equivalent of an instrument cluster — they evoke speedometers, control panels, and mid-century industrial design. Used sparingly for model names and technical labels, they signal precision; Helvetica Now does the everyday reading work. Color is deliberately scarce. The palette is overwhelmingly achromatic — a full neutral ramp from black through a sequence of grays to the concrete canvas — punctuated by a single restrained automotive red (`{colors.primary}`, with a hotter signal variant in `{colors.accent-orange}`). Red appears only at points of action: a primary hover, a key call to action, a status indicator. This is color as function, not decoration — the same discipline you'd find on a dashboard where red means "go" or "warning," never "pretty." **Key Characteristics:** - Concrete-gray canvas (`{colors.background}`) rather than pure white — material warmth - Pure-black ink (`{colors.ink}`) for maximum spec-sheet contrast - Eurostile Extended for technical display + model names (the instrument-cluster voice) - Helvetica Now Display / Text for all readable copy - Restrained automotive-red accent (`{colors.primary}`) reserved for action moments - Pill-shaped buttons (`{rounded.pill}`) against soft-rounded product cards (`{rounded.md}`) - Achromatic neutral ramp doing nearly all the visual work - Wide letter-spacing on technical labels, tight tracking on display headings ## Colors ### Canvas & Ink - **Concrete Canvas** (`{colors.background}`): The signature near-white page background — warmer and softer than pure white. - **Surface White** (`{colors.surface}`): Cards, panels, elevated content. - **Soft Surface** (`{colors.surface-soft}`): Spec cards, subtle insets. - **Black Ink** (`{colors.ink}`): Headings, body text, primary buttons — pure black for contrast. ### Accent — Action Only - **Brand Red** (`{colors.primary}`): The automotive accent. CTA hovers, key actions, status. - **Signal Orange** (`{colors.accent-orange}`): Hotter signal variant for highlights and alerts. - **Crimson** (`{colors.accent-crimson}`): Error / warning emphasis. ### Neutral Scale - **Gray 700** (`{colors.gray-700}`): Secondary text. - **Gray 600** (`{colors.gray-600}`): Muted body copy. - **Gray 500** (`{colors.gray-500}`): Tertiary text, captions. - **Gray 400** (`{colors.gray-400}`): Placeholder, disabled text. - **Gray 300** (`{colors.gray-300}`): Strong dividers. - **Gray 200** (`{colors.gray-200}`): Borders, input outlines. - **Gray 150** (`{colors.gray-150}`): Card borders, hairline dividers. - **Gray 100** (`{colors.gray-100}`): Subtle surface tint. ### Cool Slate - **Slate** (`{colors.slate}`): Technical label tint, steel accents. - **Slate Soft** (`{colors.slate-soft}`): Muted steel. ## Typography ### Font Family - **Display / Technical**: `Eurostile Extended`, fallbacks `Archivo, Arial, sans-serif` — wide squared letterforms for model names and technical labels. - **Headings**: `Helvetica Now Display`, fallbacks `Helvetica Neue, Arial, sans-serif`. - **Body**: `Helvetica Now Text`, fallbacks `Helvetica Neue, Arial, sans-serif`. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`). | Token | Use | |---|---| | `display-hero` | Hero headline — large impact, tight tracking | | `display-tech` | Eurostile technical display, model names | | `section-heading` | Feature section titles | | `sub-heading` | Sub-sections | | `card-title` | Product / feature cards | | `body-large` | Lead paragraphs, intros | | `body` | Standard reading text | | `body-medium` | Emphasized UI text | | `button-ui` | Buttons, nav links | | `label-tech` | Wide-tracked Eurostile technical labels | | `caption` | Metadata, fine print | ### Principles - **Two voices, strict roles**: Eurostile Extended is the "engineered" voice (model names, technical labels), Helvetica Now is the readable voice. Never swap them. - **Tight display, wide labels**: Display headings use slightly negative tracking; technical labels open up to +1.5px for an instrument-panel feel. - **Restrained weights**: 400 (body), 500–600 (UI / headings), 700 (display) — no decorative extremes. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Base unit is 8px, scaling up to generous `{spacing.4xl}` (160px) section breaks for product-photography breathing room. ### Grid & Container - Max content width ~1280px, generously centered - Hero: full-bleed product photography with overlaid Eurostile model names - Feature sections: 2–3 column grids over the concrete canvas - Hairline dividers in `{colors.gray-150}` separate major sections ### Whitespace Philosophy - **Product-first emptiness**: Large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) let photography dominate. - **Material warmth**: The concrete canvas keeps the emptiness from feeling clinical. - **Color restraint**: Separation comes from spacing and hairlines, not background color variation — red is saved for action. ## Components The full component spec lives in the `components:` block above. ### Buttons - **`button-primary`** — Black pill, white text. The default CTA; hovers to brand red. - **`button-secondary`** — Canvas surface, gray-200 outline pill. - **`button-accent`** — Brand red pill for high-priority actions. ### Cards - **`card`** — White surface, gray-150 hairline, `{rounded.md}` corners. - **`card-spec`** — Soft surface, larger radius, generous padding for feature/spec content. ### Inputs - **`input`** — White surface, gray-200 border, `{rounded.sm}`. Focus deepens the border to pure black. ### Navigation - **`nav-bar`** — Concrete canvas header, black text, hairline bottom border. ### Badges - **`badge`** — White chip, gray-200 outline, Eurostile wide-tracked technical label. ## Do's and Don'ts ### Do - Use the concrete canvas (`{colors.background}`), not pure white — the warmth is the brand - Reserve red (`{colors.primary}`) for action moments only - Use Eurostile Extended for model names and technical labels exclusively - Pair tight-tracked display headings with wide-tracked technical labels - Keep the palette achromatic — let photography carry color ### Don't - Don't use red decoratively or as a fill for large areas - Don't set body copy in Eurostile Extended — it's display/label only - Don't use pure white (`#ffffff`) for the page canvas - Don't add a second accent hue — the system is monochrome + one red - Don't crowd the layout — product photography needs generous whitespace --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single column, stacked, reduced section padding | | Tablet | 600–991px | 2-column grids begin | | Desktop | 992–1280px | Full multi-column layout | | Large | >1280px | Centered, generous margins, full-bleed photography | ### Collapsing Strategy - Hero: full-bleed photography scales; Eurostile model name reflows below - Navigation: horizontal links collapse to a menu toggle - Feature cards: 3-column → 2 → single column - Section spacing: 160px → ~64px on mobile --- ## Agent Prompt Guide ### Quick Color Reference - Page background: Concrete `{colors.background}` - Heading + body text: Black `{colors.ink}` - Primary CTA: Black pill `{colors.ink}`, hover red `{colors.primary}` - Accent action: Brand red `{colors.primary}` - Borders: Hairline `{colors.gray-150}` ### Example Component Prompts - "Hero on concrete `{colors.background}`: full-bleed product photo with a Eurostile Extended model name overlaid at 64px weight 700, tight tracking, black `{colors.ink}`. Black pill CTA (`{colors.ink}`, `{rounded.pill}`, 14px 28px padding) that hovers to brand red `{colors.primary}`." - "Spec card: soft surface `{colors.surface-soft}`, gray-150 hairline, `{rounded.lg}` radius, 32px padding. Title in Helvetica Now Display 22px weight 600. A wide-tracked Eurostile label `{typography.label-tech}` above it." - "Technical badge: white chip, gray-200 outline, full pill, Eurostile Extended 12px weight 600, +1.5px tracking." ### Iteration Guide 1. Concrete canvas, never pure white — the warmth defines the brand 2. Red is functional — action only, never decoration or large fills 3. Eurostile Extended = engineered voice (model names, labels); Helvetica Now = everything readable 4. Pills for buttons, soft-rounded `{rounded.md}` for cards 5. Let photography carry color; the UI chrome stays achromatic --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Infinite Machine. Brand names and trademarks belong to their respective owners.