Solheim

Overview

Solheim is an infrastructure-grade LLM platform that treats AI compute like a VPS: rent the machine, not the tokens. The brand embodies Architectural Minimalism—a design philosophy that strips away decorative elements, embraces sharp 90-degree angles (0px border-radius), and uses a monochromatic palette of near-black (#2d2d2d) and off-white (#f5f5f5) to convey industrial precision and reliability. Every pixel serves a functional purpose; there are no gradients, no rounded corners, no visual flourishes. The interface evokes the clarity of a Unix terminal or a datacenter spec sheet: direct, unambiguous, and built for engineers who value control over aesthetics.

The tone is matter-of-fact and technical without being cold. Solheim speaks in the language of infrastructure: 'flat monthly fee', 'no reset timer', 'EU jurisdiction'. The vocabulary is concrete and measurable—never 'beautiful' or 'intuitive', always 'two fields', 'one slider', 'one dial'. Brand personality: pragmatic, European, unapologetic about complexity. Example sentence in voice: 'Pick and pin the model. Swap it by changing one string, no migration.'

Colors

The color system is deliberately austere, reflecting the brand's infrastructure-first positioning. Primary (#2d2d2d) is the near-black used for all interactive elements—buttons, links, and text—and serves as the visual anchor for CTAs like 'Get your API key now' and 'Sign in'. On-primary (#ffffff) ensures maximum contrast (WCAG AAA) for readability on dark backgrounds. The surface stack uses a tight range of grays: surface-bright (#ffffff) for input fields and cards, surface-container (#e9ecef) for disabled or secondary states, and surface-variant (#d0d0d0) for borders and dividers. Outline (#505050) is used for form borders and interactive element strokes at 1px width. Tertiary (#f0f9fa) provides a subtle accent for hover states on dropdown options, introducing a whisper of cool tone with

Typography

The type system pairs Archivo (a geometric sans-serif from Google Fonts) for all display and body text with IBM Plex Mono for form labels, buttons, and technical copy. Display (94px, 700 weight, -0.03em letter-spacing) is used exclusively for the hero headline 'RENT THE MACHINE. NOT THE TOKENS.' and commands the page with its weight and scale. Headline-lg (48px, 700 weight) is used for section titles like 'If you've bought a server, you know this product.' Headline-md (32px, 700 weight) breaks down subsections. Body-lg (18px, 400 weight, 28px line-height) is the primary reading text for paragraphs and descriptions, with generous line-height to aid legibility. Body-md (16px, 400 weight) is used for smaller body text and form helper text. Label-md (13px, 400 weight, IBM Plex Mono) is applied

Layout

The page uses a fixed-width container model with a max-width of 1040px, centered on the viewport. The grid is a 12-column system with a 24px gutter, providing a flexible but constrained layout. The hero section spans the full width with a two-column layout: the headline and form occupy the right column (approximately 6 columns), while the left column is reserved for the eyebrow and supporting copy. Section spacing follows a lg (40px) rhythm for major section breaks and md (24px) for subsections. The form layout uses a single-column stack on mobile and a horizontal row on desktop, with the input field and button sitting side-by-side at 1040px+ breakpoints. Cards and content blocks use md (24px) padding internally, with sm (12px) padding for form elements. The overall effect is a clean, grid

Elevation & Depth

Elevation is achieved through borders and subtle shadows rather than depth-based layering. The base layer (Level 1) is the page background at #ffffff with no shadow. Level 2 (standard cards and form inputs) uses a 1px solid border in outline (#505050) or surface-variant (#d0d0d0) to define the edge, with no shadow. Level 3 (dropdown panels and hover states) introduces a single shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), which is applied only on hover or when a panel is open. This restrained approach keeps the interface flat and architectural—no floating cards, no layered depth, only cle

Shapes

The shape philosophy is Architectural Sharpness: all interactive elements and containers use 0px border-radius (sharp 90-degree corners). This choice is deliberate and brand-defining. Buttons, inputs, cards, and dropdown panels are all rectangles with no rounding. The only exception is the dropdown arrow, which uses CSS borders to create a triangle. This uncompromising approach reinforces the infrastructure-grade positioning—there is no softness, no approachability through rounded corners, only precision and clarity. The 0px radius is applied consistently across all components: button-primary,

Components

Action Elements Buttons use a two-state system: button-primary (backgroundColor: #2d2d2d, textColor: #ffffff, padding: 15px 20px, height: 48px, border: none, border-radius: 0px) for primary CTAs like 'Get your API key now', and button-secondary (backgroundColor: transparent, textColor: #2d2d2d, border: 1px solid #505050, padding: 10px 16px, height: 48px, border-radius: 0px) for secondary actions like 'How it works'. On hover, button-primary transitions to button-primary-hover (backgroundColor: #505050) with no animation—the change is instantaneous. Button-secondary-hover applies backgroundColor: #dfe2e6 (surface-container-high). All button text uses IBM Plex Mono at 13px, 400 weight, with 0.02em letter-spacing. Links use body-md typography (16px, Archivo) with textColor: #2d2d2d and no

Do's and Don'ts

**Do**

• Do use 0px border-radius on all components except the dropdown panel (4px only). Sharp corners are the brand signature.
• Do pair Archivo for display/body text with IBM Plex Mono for labels and buttons to create a technical, engineered aesthetic.
• Do apply 1px solid borders in #505050 (outline) or #d0d0d0 (surface-variant) to define interactive element edges; never use shadows alone.
• Do use the primary color (#2d2d2d) exclusively for CTAs, links, and focus states; reserve secondary (#666666) and tertiary (#f0f9fa) for supporting roles.
• Do maintain a max-width of 1040px for all content containers and use 24px gutters to preserve the grid structure.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) only on hover or open states, never on default card or input states.
• Do use IBM Plex Mono at 13px for all button and form label text to reinforce the infrastructure-grade positioning.
• Do ensure all interactive elements have a minimum height of 48px and padding of at least 10px 16px for touch accessibility.

**Don't**

• Don't add rounded corners to buttons, inputs, or cards; the 0px radius is non-negotiable and defines the brand.
• Don't use gradients, shadows, or transparency effects on the background or primary surfaces; keep the palette flat and monochromatic.
• Don't apply animations or transitions to button hover states; changes must be instantaneous to maintain the technical character.
• Don't use colors outside the defined palette (no custom blues, greens, or reds); stick to the gray scale and the single tertiary accent (#f0f9fa).
• Don't exceed the 1040px container max-width or use asymmetrical padding that breaks the 24px gutter grid.
• Don't mix typefaces within a single component; use Archivo for prose and IBM Plex Mono for interactive labels exclusively.
• Don't apply text-shadow, text-stroke, or other decorative text effects; typography should rely on weight and scale alone.
• Don't use icons or illustrations on the landing page; the brand is text-driven and minimalist, with no visual ornamentation.