Primal

Overview

Primal is a developer-first trust infrastructure platform that transforms AI-generated code from a black box into a verifiable, auditable asset. The brand embodies "Pragmatic Transparency"—a design philosophy that prioritizes clarity, accountability, and proof over aesthetics. The interface uses a high-contrast, minimal palette (deep charcoal on cream, with a bold red accent) to convey precision and confidence. The emotional response is one of control: developers feel empowered to trust their AI tools because the system makes the invisible visible. Voice: direct, technical, unadorned. The brand speaks in concrete terms—"provenance," "verification," "audit trail"—never in marketing abstractions. Example sentence: "Your AI coding agent writes the app. We make sure it can prove what it tells you."

Colors

The color system centers on a high-contrast, trust-forward palette. Primary (#c9342a, a bold red) is the signature accent used exclusively on CTAs, critical alerts, and brand moments—it signals urgency and accountability. On-primary is pure white (#ffffff) for maximum legibility. Secondary (#368e9e, a teal) provides a supporting accent for secondary actions and informational elements. Tertiary (#ed3237, a deeper red) is reserved for error states and high-stakes warnings. The surface stack uses warm, off-white tones: surface-container-lowest (#f7f4ef, a cream) for hero and featured sections, surface (#ffffff) for standard content areas, and surface-container-high (#eeeeee) for subtle hover states. On-surface is ink-black (#1a1a1a) for body text and primary content. Outline (#e4e4e4) and out

Typography

The type system pairs Inter (geometric, modern, high-legibility sans-serif) for headlines and UI labels with Montserrat (humanist, slightly warm) for eyebrows and small caps, and Arial (neutral system font) for body text. Display (68px, 800 weight, -0.04em tracking) is used exclusively for hero headlines and creates immediate visual impact. Headline-lg (40px, 700 weight) anchors major section titles. Headline-md (32px, 700 weight, Montserrat) is used for subsection headings and comparison cards. Title-lg (20px, 700 weight, Montserrat) labels card titles and dialogue speakers. Body-lg (18px, 400 weight, Arial) is used for hero copy and lede paragraphs. Body-md (16px, 400 weight, Arial) is the standard body text size. Label-md (14px, 600 weight, Inter) is used for button text, form labels, a

Layout

The page uses a fluid 12-column grid with a max-width of 1280px (container-max: 1280px). Sections alternate between full-width colored backgrounds (hero in dark charcoal #1a1a1a, feature sections in cream #f7f4ef or white #ffffff) and contained content blocks with 24px horizontal gutter (spacing.gutter). Vertical rhythm is driven by lg spacing (40px) between major sections and md spacing (24px) between subsections. The hero section uses 64px top/bottom padding (spacing.xl) to create breathing room around the display headline. Cards and comparison blocks use md padding (24px) internally. White-space is generous: the design favors clarity over density. Dialogue blocks and comparison cards are separated by 1px divider lines (surface-container-highest, #e4e4e4). The grid uses a 2–3 column layo

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background color shifts rather than heavy layering. Level 1 (Base): flat surfaces with no shadow (body background #ffffff, section backgrounds #f7f4ef or #1a1a1a). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on cards, dropdowns, and modals. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover and modal overlays. Divider lines (1px solid #e4e4e4) separate adjacent sections without adding visual weight. The hero section uses inverse colors (dark background #1a1a1a,

Shapes

The shape philosophy is "Minimal Geometric"—rounded corners are used sparingly and consistently to signal interactive elements without softening the brand's technical precision. Buttons use rounded.DEFAULT (5px), a subtle radius that feels intentional without being playful. Cards and input fields use rounded.md (10px), slightly more generous to create visual distinction from buttons. Modals and elevated surfaces use rounded.lg (16px) or rounded.xl (20px) for emphasis. Badges and pill-shaped elements use rounded.full (999px) for maximum roundness. The rationale: sharp corners (0px) would feel a

Components

Action Elements Buttons are the primary interactive element. Button-primary uses backgroundColor: {colors.primary} (#c9342a), textColor: {colors.on-primary} (#ffffff), padding: 9px 15px, rounded: {rounded.DEFAULT} (5px), and typography: {typography.label-md} (14px, 600 weight, Inter). On hover, button-primary-hover shifts backgroundColor to {colors.primary-fixed-dim} (#c9342a darkened) with a 200ms ease transition. Button-secondary uses transparent background with a 1px border in {colors.outline} (#e4e4e4) and textColor: {colors.primary} (#c9342a). Secondary buttons are used for navigation links and non-critical actions. Both button variants have height: auto (no fixed height constraint) and cursor: pointer.

Containers & Surfaces Cards use backgroundColor: {colors.surface} (#fffff

Do's and Don'ts

**Do**

• Do use primary red (#c9342a) exclusively on CTAs, eyebrow labels, and accent text—never on backgrounds or body text.
• Do apply 24px gutter spacing (spacing.md) between content blocks and 40px (spacing.lg) between major sections for visual breathing room.
• Do pair Inter (headlines) with Arial (body) for maximum legibility and technical credibility; avoid mixing more than two typefaces.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards and 0 8px 24px rgba(0, 0, 0, 0.12) on hover states for subtle depth.
• Do keep button border-radius at 5px (rounded.DEFAULT) to signal precision without sacrificing approachability.

**Don't**

• Don't use primary red on body text, backgrounds, or non-interactive elements—it must remain a high-contrast accent.
• Don't exceed 20px border-radius on any component; excessive rounding undermines the technical brand personality.
• Don't apply shadows to buttons; use color contrast and 200ms transitions instead.
• Don't mix more than two typefaces in a single section; maintain visual hierarchy through weight and size, not font variety.
• Don't use secondary or tertiary colors on CTAs; primary red is the only button color.