Soft Slate Purple Minimal — Light-First, Violet-Accented Design System & Template

Overview

The visual system is calm, spacious, and editorial. It uses a light-first neutral foundation with off-white and soft slate surfaces, then introduces a vivid violet accent for emphasis and interaction. The overall mood is trustworthy, friendly, and uncluttered, with generous whitespace, soft rounded forms, and restrained depth.

Colors

The palette is built around cool slate neutrals and a single vivid violet accent. Neutrals carry almost all structure and text, while violet appears selectively for links, primary emphasis, interactive states, and small decorative accents.

• background: The base page surface, typically clean white in light mode and near-black slate in dark mode.
• surface: A soft off-white used for cards, dropdowns, footer areas, and subtle highlighted regions.
• surface-2: A slightly cooler neutral used for secondary buttons, hover states, and quiet filled areas.
• border: A light slate border used for separators, dropdown edges, and subtle containment.
• text: The strongest readable text color, used for headings and primary content.
• text-muted: The default body and secondary text color, softer than headings but still high contrast.
• text-subtle: A quieter gray for metadata, disabled-looking text, and low-priority labels.
• primary: A deep slate used for primary buttons, bold tags, and strong neutral actions.
• accent: The core violet used for links, focus states, selected controls, and prominent calls to action.
• accent-strong: A darker violet used for hover and pressed states.
• accent-soft: A translucent violet wash for subtle highlights, focus rings, and decorative fills.
• accent-light: A lighter violet used for dark-mode accents and softer emphasis.
• success: A clear green for positive confirmations and check marks.
• warning: A warm yellow for attention and highlighting.
• error: A pink-red for errors, destructive actions, and invalid states.
• info: A cool blue for informational accents and secondary semantic signals.
• dark-background / dark-surface / dark-border / dark-text / dark-text-muted / dark-accent: Dark-mode counterparts that invert the neutral scale while preserving the same violet accent role.

Typography

Typography is system-sans led, with a strong editorial hierarchy. Headings are heavy and tightly tracked, while body text remains readable and relaxed. A monospace face is reserved for small founder-style or technical notes.

• h1: The largest display heading, very tight line height and heavy weight, used for hero statements.
• h2: A large section heading with nearly display-level weight, used to introduce major content blocks.
• h3: A medium heading for feature groups and sub-sections.
• h4: A compact heading for cards, FAQ summaries, and smaller grouped content.
• body: The default reading size, comfortable for long-form paragraphs and interface copy.
• small: Metadata, captions, footnotes, and helper text.
• button: Button labels are slightly heavier than body text to maintain clarity at interactive sizes.
• mono: A monospace variant for small technical or founder-note treatments.

Layout

The layout uses centered content wrappers and a flexible twelve-column grid. Wider marketing sections use a broader wrapper, while article-style content uses a narrower reading wrapper. Spacing is generous, with section rhythm driven by large vertical gaps and a consistent spacing scale.

• Page width: Narrow reading wrapper around 55rem; wide wrapper around 80rem.
• Grid: Twelve-column grid with configurable gaps, collapsing to single-column blocks on smaller screens.
• Alignment: Centered wrappers, but text remains left-aligned in most content areas.
• Section spacing: Large vertical spacing values such as 3rem, 4rem, 6rem, and 10rem create an airy editorial rhythm.
• Density: Low to medium density; content is not cramped, and cards or feature blocks breathe.
• Responsive behavior: At roughly 980px and below, grids simplify, headings scale down, and wide wrappers become narrower. At 600px and below, multi-column logo and feature grids collapse further.

Elevation & Depth

Depth is subtle and functional. Most surfaces are flat, with borders and background shifts doing the primary separation work. Shadows appear mainly on floating elements such as dropdowns and browser-like frames.

• Dropdowns use a soft, diffused shadow with a light border and a slightly lifted appearance.
• Browser-style windows use a thin outline shadow plus a larger ambient shadow, giving a gentle floating effect.
• Cards and content blocks generally rely on borders, background differences, or rounded containers rather than heavy elevation.
• Dark mode adjusts shadows to remain visible without becoming harsh.
• Blur and backdrop effects are not a core part of the system; depth comes from contrast, borders, and restrained shadows.

Shapes

The shape language is soft, rounded, and friendly without becoming overly bubbly. Small radii appear on compact controls, medium radii on buttons and cards, and pill radii on tags and small labels.

• Small radius: 0.3rem for subtle rounding.
• Medium radius: 6px for buttons, FAQ items, and small containers.
• Large radius: 0.85rem for dropdown panels and softer cards.
• Extra-large radius: 12px for browser-like frames and prominent rounded surfaces.
• Pill radius: 1.5rem for tags and compact callout labels.
• Full radius: 100rem for fully circular elements.
• Borders are thin and light, usually 1px or 2px, and are used more for definition than decoration.

Components

Buttons

Primary buttons use the deep slate primary color with white text. Secondary buttons use the soft surface-2 neutral. Accent buttons use the vivid violet accent with white text. All share the same 6px radius and generous 1rem 1.5rem padding, giving them a substantial but not oversized presence.

Text Tags

Small rounded tags use pill shapes and quiet neutral backgrounds. Bold tags invert to the deep slate primary with white text. They are compact, with 0.85rem text and tight horizontal padding, used for labels, statuses, and small calls to action.

Header Dropdown

Dropdown panels use the soft surface background, a light border, a 0.85rem radius, and a soft lifted shadow. Items are medium-weight and become violet on hover, reinforcing the accent as the main interactive signal.

FAQ Items

FAQ summaries are bold, compact headings. When open, the summary receives a soft surface background and 6px radius, creating a gentle active state. Answers use relaxed line height and sit within a bordered or spaced list structure.

Browser Window

The browser-like frame uses a white or dark surface, 12px radius, thin outline, and soft ambient shadow. It is a key visual device for presenting product imagery with a polished, floating feel.

Footer

The footer uses the soft surface background with muted text, small headings, and violet hover states on links. It is spacious and structured, with generous vertical padding and clear column grouping.

Do's and Don'ts

Do

• Keep the neutral slate and off-white foundation dominant.
• Use the vivid violet accent sparingly for interaction, emphasis, and focus.
• Preserve the generous spacing rhythm and airy section gaps.
• Use soft 6px and 12px radii for controls, cards, and windows.
• Keep shadows subtle and functional, mainly for floating panels.
• Maintain strong heading contrast with heavy, tightly tracked type.
• Support both light and dark modes with the same accent role.

Don't

• Don't introduce multiple competing accent hues.
• Don't use heavy, dark shadows or dramatic elevation.
• Don't replace the restrained neutral palette with saturated backgrounds.
• Don't make buttons or tags fully square unless matching an existing compact control.
• Don't reduce the generous whitespace into a dense dashboard-like layout.
• Don't use the violet accent for large background fills where neutrals should dominate.
• Don't mix unrelated typography families into the core hierarchy.