varchive.ai — Design System

1. Visual Theme & Atmosphere

Varchive.ai presents as a refined AI archiving or knowledge tool — clean white primary surfaces with a deep navy/indigo dark layer for section variety. The atmosphere is focused and editorial: generous whitespace, a premium custom typeface, and a restrained color language that signals trust and precision over flashiness. The site avoids the typical “AI product” dark-everything aesthetic in favor of a light, confident foundation.

The standout typographic choice is Aeonik Pro — a precise, neutral geometric sans with Swiss modernist roots that elevates the product above standard system-font SaaS. Combined with micro-sized body copy (13px) and generous line heights, the reading experience feels considered and purposeful.

2. Color Palette & Roles

The color system is almost entirely achromatic — near-black text on white, with a dark navy layer appearing in select sections. The use of oklab() for the footer surface is a modern CSS color space choice, indicating a technically sophisticated implementation.

No accent color detected. Interaction and emphasis are handled through typography weight and size, not color.

3. Typography Rules

Typeface: Aeonik Pro — a premium geometric sans with humanist touches. Used across all roles.

The 13px body size is a deliberate choice — it signals information density and sophistication rather than accessibility-first thinking. The 1.1× line height on H1 creates dense display blocks. Aeonik Pro’s neutral geometry ensures legibility even at small sizes.

Notably absent: No italic, no bold (weight 700), no letter-spacing adjustments, no uppercase styling — the typeface and size scale carry all hierarchy.

4. Component Stylings

• Header — transparent background over white canvas; dark rgb(34,34,34) text navigation
• Footer — subtle dark tint via oklab() color; hairline border at 10% opacity; understated closing
• Labels — form labels at 12px, matching the compact information-dense style
• Sections — implied alternation between white and deep navy surfaces for visual pacing
• Inputs — contextual; system styling inferred with Aeonik Pro applied

The component system appears minimal in CSS custom properties — likely inline Tailwind-style or a framework-driven approach, with Aeonik Pro doing heavy lifting for visual distinction.

5. Layout Principles

• Spacing tokens: 40px and 48px padding for section and header contexts — generous but not extravagant
• Likely centered content with max-width constraint (~1200–1440px range)
• Text-heavy sections with 13px compact body copy suggest multi-column or dense information layouts
• Hero likely features large 48px Aeonik Pro heading with brief subtext — quality over quantity approach
• No explicit grid tokens detected; framework-level layout assumed

6. Depth & Elevation

• White → dark navy — the primary depth model: light sections and dark sections alternate
• Footer tint — oklab() near-black at 7% opacity creates the softest possible surface distinction
• Border at 10% opacity — hairline-weight dividers; barely visible on white, just readable on dark
• No shadows detected — flat surface model throughout
• Aeonik Pro’s inherent visual weight creates perceived elevation through typography alone

7. Do’s and Don’ts

Do:

• Use Aeonik Pro as the sole typeface — its neutrality is the identity
• Keep body copy at 13px; resist bumping to 16px — density is intentional
• Use near-black (#171717) for text — never pure #000000
• Use oklab() for the subtlest surface tints — technically appropriate for modern CSS
• Alternate white and deep navy sections for long-page pacing

Don’t:

• Add accent colors — the system communicates entirely through type and surface contrast
• Use font-weight 700 or bold; Aeonik Pro 400 is the sole weight
• Add shadows or border-radius to containers; the flat, precise aesthetic is deliberate
• Scale body copy above 13px — it would break the information-density character

8. Responsive Behavior

No breakpoints explicitly captured. Based on spacing scale (40–48px) and 13px body:

The compact 13px body copy gives mobile layouts natural information density without needing font-size reduction.

9. Agent Prompt Guide

“Design in the style of varchive.ai: pure white canvas #ffffff, near-black text rgb(23,23,23), Aeonik Pro geometric sans throughout at weight 400, 48px/52.8px display headings, 13px/19.5px compact body copy, deep navy dark sections for contrast, hairline borders at 10% opacity using oklab(), no accent colors, no shadows, no bold weights — refined AI-tool aesthetic, Swiss precision, editorial restraint.”

Generated by Sparkbites — extracted from live CSS analysis