Contra — Design System

1. Visual Theme & Atmosphere

Contra occupies the dark-tech-luxury space: a near-black canvas (#0c0c0c) with a lavender-purple accent that suggests both creativity and premium positioning. This is a product built for independent professionals — the visual tone is confident, modern, and slightly editorial. The hero gradient sweeps from white through layered purples into deep indigo, evoking depth and possibility. Inter’s extreme negative letter-spacing at display sizes gives headlines a compressed, cinematic quality that feels native to the 2020s web.

2. Color Palette & Roles

Dark mode is not a toggle — it is the design. Avoid any light-surface treatment on the main canvas.

3. Typography Rules

Primary typeface: Inter (variable) with system-ui fallback.

• Inter is used at regular (400) weight even for large headings — size and tracking do the hierarchy work.
• Extreme negative letter-spacing at large sizes is the defining typographic gesture: -4.66px at 58px.
• No text transforms, no uppercase convention, no decorative features.
• Typography scales proportionally — font sizes appear calculated (58.28px, 36.43px) suggesting a fluid/viewport-based scale.

4. Component Styling

• Buttons: Transparent background by default — outline/ghost style on dark.
• Dialogs / modals: White background (#ffffff), dark text (#444444) — inverts the page theme for focus.
• Labels: Transparent, inherit text colour.
• Links: Warm off-white (#efeae8) — distinguishable from pure white content.
• Headings (h3): Purple-tinted (#B7ACFC) — accent colour applied directly to heading text.
• No border-radius data captured — surfaces are likely square or subtly rounded.
• No shadow system — depth is handled by colour layering.

5. Layout Principles

• Section padding: ~27px vertical, ~44px horizontal — compact, information-dense.
• Footer padding: ~36px horizontal, ~22px bottom — minimal footer presence.
• Breakpoint tokens are explicitly defined: 375px, 768px, 1024px, 1366px, 1536px, 1921px — a thorough responsive system.
• Touch detection breakpoints (--bp-touch, --bp-nottouch, --bp-ipadpro) signal interaction-aware layout adjustments.

6. Depth & Elevation

• No box-shadow tokens. Depth is achieved through layered dark surfaces (#0c0c0c vs #111111).
• The hero gradient creates the primary sense of spatial depth.
• Overlays/modals flip to white — stark contrast creates modal focus without shadow.

7. Do’s and Don’ts

Do:

• Keep the base near-black (#0c0c0c) as the dominant surface.
• Apply purple (#B7ACFC) selectively to interactive and brand elements.
• Use extreme negative tracking (-4px+) on large display text.
• Let the hero gradient be the only multi-colour moment.

Don’t:

• Introduce warm tones or beige backgrounds in the main layout.
• Use Inter at heavy weights — 400 is intentional even at display sizes.
• Add drop shadows — they fight the flat dark aesthetic.
• Use uppercase text transforms.

8. Responsive Behavior

• Six defined breakpoints from 375px to 1921px+ — designed for every context.
• Touch/pointer awareness built into the design system (hover: none detection).
• iPad Pro treated as a distinct breakpoint (touch + min 1024px).
• Font sizes are viewport-relative (fractional pixel values suggest clamp() or vw-based scaling).

9. Agent Prompt Guide

Build a dark SaaS interface using Contra’s design language. Canvas is near-black #0c0c0c, text white. Accent is lavender #B7ACFC applied to h3 headings, active states, and brand moments. Use Inter at weight 400 with extreme negative letter-spacing (-4px at 60px+). No shadows, no gradients outside the hero. Buttons are ghost/outline style. Dialogs invert to white. Section padding ~27px/44px. Support 6 breakpoints from 375px to 1921px.

Generated by Sparkbites — extracted from live CSS analysis