PrismML

Overview

PrismML is a technical research organization dedicated to efficient machine learning at scale. The brand serves AI researchers, engineers, and enterprises seeking deployable, open-weight models optimized for local inference. The design aesthetic is 'Architectural Minimalism'—clean, purposeful, and unadorned—where every visual element serves a functional role. The UI evokes precision and clarity through a warm, neutral foundation (beige #e8e4df) punctuated by electric blue accents (#5b5bff), creating visual hierarchy without visual noise. The emotional response is one of trustworthiness and technical sophistication: users feel they are engaging with serious, well-engineered systems.

The brand voice is direct, precise, and unpretentious. Vocabulary favors concrete technical terms over marketing abstractions: 'quantized weights,' 'local inference,' 'parameter efficiency' rather than 'cutting-edge' or 'revolutionary.' Tone is calm and authoritative, never breathless. Example sentence: 'Bonsai Image 4B runs directly on an iPhone—no cloud required, no latency, full privacy.'

Colors

The color system balances warmth with technical clarity. The primary surface is a soft, warm beige (#e8e4df, --negative) that serves as the page background and dominant neutral, evoking paper and approachability. The primary accent is electric blue (#5b5bff, --button-accent), used exclusively for interactive CTAs, links, and focus states—this is the brand's signature color and the most clickable element on any page. Secondary accents include a purple (#814bd1, --purple-accent) for supporting highlights and a deeper blue (#4631e2, --blurple-accent) for tertiary actions and data visualization. The text color is a near-black (#262c35, --positive) for maximum contrast and readability on the warm background. Muted variants (#4c5159 for secondary text, #cebebe for borders and dividers) create vi

Typography

The type system pairs Rethink Sans (a geometric, contemporary sans-serif) for all UI and body text with DM Mono (a monospaced font) reserved for technical labels and code contexts. Display text (66px, 600 weight, -0.02em letter-spacing) anchors hero sections and article titles, commanding attention through scale rather than color. Headline-lg (48px, 600 weight) and headline-md (32px, 600 weight) structure content hierarchy with progressively tighter line-heights (56px and 40px respectively) to maintain visual density. Body text (16px, 400 weight, 24px line-height) is set at a comfortable reading size with generous line-height for accessibility. Labels (14px, 600 weight, 0.01em letter-spacing) are used for button text and form labels, with a monospaced variant (12px, 500 weight, 0.05em lett

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid layout on mobile and tablet with a fixed container on desktop. The page rhythm is established through consistent spacing: lg spacing (40px) separates major sections (hero, content blocks, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) is used for internal padding and component spacing. The gutter width is 24px on desktop, collapsing to 12px on tablet and mobile. White-space is treated as a design element—generous margins around text blocks and cards create visual breathing room and emphasize the minimalist aesthetic. The striped-divider pattern (repeating 45° gradient at 1px / 14px) is used sparingly to separate major content zones without introducing visual clutter. C

Elevation & Depth

Depth in this system is achieved through subtle layering and border definition rather than aggressive shadows. The base layer (Level 1) is the warm beige surface (#e8e4df) with no shadow. Level 2 (cards, input fields) uses a 1px solid border in #cebebe (outline-variant) and a soft shadow of 0 3px 8px rgba(0, 0, 0, 0.15) on hover, creating a gentle lift. Level 3 (modals, elevated panels) applies the same border treatment with a stronger shadow of 0 8px 24px rgba(0, 0, 0, 0.12). Interactive elements (buttons, links) have no shadow in their default state but transition to the Level 2 shadow on ho

Shapes

The shape philosophy is 'Soft-Technical'—combining sharp, geometric precision with subtle organic curves. Buttons and input fields use an asymmetric border-radius of 15px on the top-left and bottom-right corners, with 24px on the opposite corners (border-top-left-radius: 15px 24px; border-bottom-right-radius: 15px 24px), creating a distinctive beveled effect that rotates on hover. This 15px/24px ratio is applied consistently across all interactive elements (buttons, inputs, cards) to create visual cohesion. Standard cards and dividers use a minimal 3px or 4px radius for a nearly-square appeara

Components

Action Elements Buttons are the primary interactive component and use the asymmetric bevel radius (15px 24px) as their signature. Primary buttons have a background of #5b5bff with white text, 48px height, and 12px 24px padding. On hover, the background darkens to #4a4aee and the border-radius rotates to 0px 0px / 15px 24px, with a 0.2s ease transition. Secondary buttons are transparent with a 1px border in #cebebe and primary text color, maintaining the same radius and padding. Links use the primary blue (#5b5bff) with no underline by default but gain a 1px bottom border on hover with a 0.2s transition. All buttons include a 0.2s transition on border-radius and background-color.

Containers & Surfaces Cards use a 1px solid border in #cebebe, 24px padding, and a 4px border-radius. O

Do's and Don'ts

**Do**

• Do use the electric blue (#5b5bff) exclusively for primary CTAs, links, and focus states—it is the brand's signature accent and must remain visually distinct.
• Do apply the asymmetric bevel border-radius (15px 24px) to all interactive elements (buttons, inputs, cards) and rotate it on hover to signal state change.
• Do maintain generous white-space (lg spacing: 40px) between major content sections to reinforce the minimalist, architectural aesthetic.
• Do use Rethink Sans for all UI and body text; reserve DM Mono only for technical labels, timestamps, and code contexts.
• Do apply negative letter-spacing (-0.02em to -0.01em) to all heading text to tighten letterforms and reinforce precision.
• Do use the striped divider (45° gradient, 1px / 14px repeat) sparingly to separate content zones without introducing visual clutter.

**Don't**

• Don't use the secondary accent colors (purple #814bd1, blurple #4631e2) for primary CTAs—reserve them for supporting highlights and data visualization only.
• Don't apply shadows to elements in their default state; shadows are reserved for hover/active states and elevated layers (Level 2+).
• Don't use rounded corners greater than 4px on cards and standard containers—the 15px/24px bevel is exclusive to interactive elements.
• Don't mix typefaces within a single component; Rethink Sans is the primary UI font and should not be paired with system fonts or other serif typefaces.
• Don't reduce the gutter width below 12px on mobile or 24px on desktop—white-space is a core design principle.
• Don't apply the bevel border-radius to non-interactive elements; it is a signal of interactivity and must not be overused.