PrismML

Overview

PrismML is an AI research company building ultra-dense, quantized models (1-bit and ternary Bonsai architectures) that concentrate advanced reasoning into efficient deployments. The design system embodies 'Architectural Minimalism'—a philosophy that treats visual clarity as a prerequisite for technical understanding. The UI evokes precision, density, and purposeful constraint: warm beige surfaces (#e8e4df) anchor the interface, while a deep charcoal primary (#262c35) provides authoritative contrast. Accent colors (electric blue #5b5bff and purple #814bd1) signal interactive moments and technical depth. The emotional response is one of focused intelligence: calm, legible, never cluttered.

The brand voice is direct and technical without being cold. Vocabulary emphasizes efficiency, density, and deployment: 'concentrate,' 'pack,' 'ultra-dense,' 'bonsai.' Tone is confident but not breathless—statements are precise and grounded in measurable outcomes. Example: 'Bonsai 27B delivers 8× faster inference while consuming 14× less memory than comparable models.' The typography pairing (Rethink Sans for hierarchy, DM Mono for technical detail) reinforces this duality: human-readable warmth paired with computational rigor.

Colors

The color system is built on a warm, neutral foundation that prioritizes legibility and technical clarity. Surface (#e8e4df) is a warm beige that reduces eye strain during data-dense interactions; it appears across all backgrounds and container bases. The surface stack (surface-dim through surface-container-highest) provides subtle depth through 5–10% shifts in luminance, enabling layered card hierarchies without harsh contrast.

Primary (#262c35, deep charcoal) is the brand's signature accent—used on all CTAs, active states, and primary navigation. It is not black; the slight warmth (RGB 38, 44, 53) prevents harshness against the beige background. On-primary (#e8e4df) ensures text legibility at 16px+ sizes. Secondary (#5b5bff, electric blue) and Tertiary (#814bd1, purple) are reserved for

Typography

The type system pairs Rethink Sans (humanist sans-serif, warm and approachable) for all hierarchy and body copy with DM Mono (technical monospace) for labels, inputs, and data-dense contexts. This pairing communicates the brand duality: accessible research paired with computational precision.

Display (66px, 600 weight, -0.02em tracking) is reserved for hero headlines like 'Concentrating intelligence.' Headline-lg (40px, 600 weight) anchors section titles. Headline-md (28px, 600 weight) and title-lg (20px, 600 weight) structure subsections. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry narrative content; the 1.5em line-height ensures comfortable reading at all sizes. Label-md (14px, DM Mono, 400 weight) is applied to buttons, form label

Layout

The layout system uses a 12-column grid with a max-width of 1280px. On desktop (≥992px), content flows across full width with symmetric gutters (24px on each side). On tablet and mobile, the grid collapses to 1–2 columns with reduced gutters (12px), ensuring readability without horizontal scroll.

White-space philosophy prioritizes breathing room around key content. Section separation uses lg spacing (40px) vertically; card-to-card gaps use md spacing (24px). The hero section occupies ~50% of the viewport height, with the headline (display, 66px) positioned at 1/3 height to create visual tension. Container max-width is enforced at 1280px to prevent line-length bloat on ultra-wide displays.

The spacing scale is semantic: xs (4px) for micro-interactions (icon padding), sm (12px) for form fi

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. The elevation system uses three levels:

Level 1 (Base): No shadow. Flat surfaces (body background #e8e4df, surface-container #e8e4df) establish the foundation.

Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Applied to cards, modals, and lifted containers. The 3px blur and 8px spread create a soft, diffused shadow that suggests proximity without harshness. Border: 1px solid #cebebe adds a crisp edge.

Level 3 (Elevated/Hover): box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4). Used on

Shapes

The shape philosophy is 'Geometric Precision with Organic Softness'—a deliberate contrast between sharp, beveled corners and soft, rounded edges. This reflects the brand's technical rigor paired with approachable design.

Buttons and inputs use a signature asymmetric border-radius: border-top-left-radius: 15px 24px; border-bottom-right-radius: 15px 24px; corner-shape: bevel. This creates a subtle skew that feels intentional and modern. On hover, the radius flips: border-top-right-radius: 15px 24px; border-bottom-left-radius: 15px 24px. This 0.2s transition (cubic-bezier(0.22, 1, 0.36, 1)) sign

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses the signature asymmetric radius (15px 0px / 24px 0px), dark charcoal background (#262c35), and warm text (#e8e4df). Padding is 18px 32px with a 48px height, ensuring touch-friendly targets. Font is DM Mono 14px, 400 weight. On hover, the radius flips and letter-spacing compresses to -0.05em, creating a subtle animation that feels responsive. Transition duration is 0.2s with cubic-bezier(0.22, 1, 0.36, 1) easing.

Button-secondary uses the same radius and padding but with a transparent background and 1px border (#262c35). On hover, the background fills with surface-container-high (#e0dcd7) and the radius flips. Button-accent uses the secondary color (#5b5bff) for high-priority CTAs; it follows

Do's and Don'ts

**Do**

• Do use the asymmetric button radius (15px 0px / 24px 0px) on all primary CTAs—it is the brand's signature shape and must never be replaced with symmetric rounding.
• Do apply DM Mono to all labels, inputs, and technical metadata; reserve Rethink Sans for headlines and body copy to maintain the technical-humanist duality.
• Do use the primary color (#262c35) sparingly on CTAs and active states; let the warm beige surface (#e8e4df) dominate to reduce cognitive load.
• Do transition button radius on hover with cubic-bezier(0.22, 1, 0.36, 1) easing over 0.2s—this smooth, bouncy curve signals interactivity without jarring the user.
• Do enforce the 1px outline-variant (#cebebe) border on all cards and inputs; it creates visual cohesion and prevents elements from floating.

**Don't**

• Don't use symmetric border-radius on buttons or inputs; the asymmetric 15px 0px / 24px 0px radius is non-negotiable and defines the brand.
• Don't apply shadows stronger than Level 3 (0 4px 20px rgba(0, 0, 0, 0.4)); excessive depth contradicts the minimalist aesthetic and reduces legibility.
• Don't mix Rethink Sans and DM Mono within a single text element; each font has a specific role (hierarchy vs. technical detail) and blending them creates visual confusion.
• Don't use the secondary (#5b5bff) or tertiary (#814bd1) colors as primary backgrounds; they are accent colors and should appear on <10% of the page to maintain focus.
• Don't replace the warm beige surface (#e8e4df) with pure white (#ffffff) or pure black (#000000); the warmth is essential to the brand's approachable-yet-technical personality.