Sneat

Overview

Sneat is a professional-grade admin dashboard template built on Bootstrap 5, designed for developers and product teams who need rapid deployment of data-driven interfaces. The design language follows "Structured Clarity"—a philosophy that prioritizes information hierarchy, scannable layouts, and purposeful color coding over decorative elements. The brand serves SaaS platforms, enterprise dashboards, and analytics applications where users need to extract insights quickly from complex datasets. The aesthetic is clean, contemporary, and deliberately neutral: a light surface palette (rgb(245, 245, 249) background, rgb(255, 255, 255) cards) paired with a vibrant indigo accent (rgb(105, 108, 255)) that draws attention to actionable elements. The UI evokes trust and professionalism—users feel they are working with a mature, reliable tool.

Sneat's voice is direct, instructional, and encouraging without being patronizing. Copy is concise and action-oriented: "Congratulations John! You have done 72% more sales today." The brand avoids marketing speak and jargon; instead, it uses plain language and concrete metrics. Personality traits: competent, approachable, data-literate. Example sentence in brand voice: "Your Q4 revenue is up 28.42%—here's what changed."

Colors

The Sneat color system is built on a neutral-dominant foundation with three strategic accent roles. The surface stack anchors the interface: a very light off-white (rgb(245, 245, 249)) serves as the page background, while pure white (rgb(255, 255, 255)) is reserved for card and container surfaces. Intermediate grays (rgb(237, 238, 240) through rgb(228, 230, 232)) create subtle depth layers for hover states and secondary containers. The on-surface text color is a warm dark gray (rgb(100, 110, 120)), chosen to reduce eye strain on extended viewing sessions typical of dashboard work.

Primary accent: Indigo (rgb(105, 108, 255) / #696cff) is the signature brand color, applied exclusively to primary CTAs (buttons, links, active navigation states), data highlights, and interactive focus rings. I

Typography

The Sneat type system uses Public Sans across all weights (300, 400, 500, 600, 700), a humanist sans-serif that balances geometric clarity with warmth. The hierarchy is built on a 4px baseline grid: display (56px, 700 weight, -0.02em tracking) anchors hero sections; headline-lg (32px, 600 weight) titles major sections; headline-md (24px, 600 weight) introduces card groups; title-lg (20px, 600 weight) labels individual cards; body-lg (18px, 400 weight) and body-md (15px, 400 weight) carry content; label-md (14px, 600 weight) and label-sm (12px, 500 weight) annotate UI controls and badges. Letter-spacing is minimal (0 to -0.02em) to maintain density on data-heavy screens. Line-height is set generously (1.5x to 1.67x font size) to ensure readability of multi-line labels and descriptions. On s

Layout

Sneat uses a 12-column fluid grid with a max-width of 1440px, centered on the viewport. The left sidebar (260px fixed on desktop, collapsible on tablet) contains primary navigation; the main content area flows to the right with a 24px gutter between columns. Page sections are separated by 40px (lg spacing) of vertical whitespace, creating breathing room between distinct data zones. Cards are typically 2–4 columns wide, stacked in rows with 24px gaps. The top header (56px height, white background, 24px horizontal padding) houses search, notifications, and user profile. Spacing is semantic: xs (4px) for micro-interactions like icon-to-label gaps; sm (12px) for form field margins; md (24px) for card padding and section gutters; lg (40px) for major section breaks; xl (64px) reserved for hero s

Elevation & Depth

Depth in Sneat is conveyed through subtle shadows and layering, not through color or blur. The elevation system uses three levels: Level 1 (Base) has no shadow—the page background (rgb(245, 245, 249)) is flat. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of 8px. Level 3 (Modals, Popovers, Dropdowns) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread for maximum prominence. All shadows use a warm black (rgba(0, 0, 0, ...)) rather than pure black to maintain visual warmth. Hover states on cards transition from Level 2 to Level

Shapes

Sneat employs "Soft Geometric" rounding—a philosophy that softens hard corners without introducing organic curves. The rounded scale progresses from minimal to moderate: sm (4px / 0.25rem) for small UI elements like icon buttons; DEFAULT (6px / 0.375rem) for buttons, inputs, and most cards; md (12px / 0.75rem) for larger cards and modals; lg (16px / 1rem) for hero sections and full-width containers; xl (24px / 1.5rem) for special emphasis (e.g., onboarding cards); full (9999px) for badges and pill-shaped elements. The rationale: 6px is the sweet spot for dashboard UI—it feels modern and approa

Components

Action Elements Buttons are the primary interaction surface. Primary buttons (background: rgb(105, 108, 255), text: white, padding: 8px 20px, height: 40px, border-radius: 6px) are used for main CTAs like "View Badges" or "Upgrade to Pro." Hover state shifts background to rgb(90, 93, 219) with a 150ms transition. Active state (pressed) reduces box-shadow to inset 0 2px 4px rgba(0, 0, 0, 0.15). Secondary buttons (transparent background, indigo text, 1px outline in rgb(189, 193, 197)) are used for alternative actions; hover state fills background with rgb(242, 243, 243). Danger buttons (background: rgb(255, 62, 29), text: white) are reserved for destructive actions; the "Upgrade to Pro" button in the screenshot exemplifies this. All buttons use label-md typography (14px, 600 weight) and i

Do's and Don'ts

**Do**

• Do use the indigo primary (rgb(105, 108, 255)) exclusively for primary CTAs, active navigation states, and focus indicators—never for secondary or tertiary actions.
• Do apply 24px padding inside cards and containers to maintain consistent breathing room and visual rhythm across the dashboard.
• Do use the green secondary (rgb(113, 221, 55)) for positive indicators (success badges, upward trends, confirmations) and red tertiary (rgb(255, 62, 29)) for warnings and destructive actions—never swap these roles.
• Do include a 150ms ease-in-out transition on all interactive state changes (hover, focus, active) to signal responsiveness without jarring motion.
• Do use Public Sans 600 weight for all labels, headings, and UI text; reserve 400 weight for body copy and descriptions only.
• Do stack cards in a 2–4 column grid with 24px gaps on desktop, collapsing to 1 column on mobile—never use more than 4 columns for readability.
• Do apply the soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and containers to create subtle depth without visual heaviness.

**Don't**

• Don't use the primary indigo for backgrounds, borders, or secondary UI elements—it is reserved for interactive accents only.
• Don't apply rounded corners larger than 12px (md) to standard cards or buttons; reserve xl (24px) and full (9999px) for special emphasis only.
• Don't mix multiple accent colors in a single card or section—use one accent per interaction zone to maintain visual clarity.
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on standard UI elements; reserve the largest shadow for modals and popovers only.
• Don't apply text-shadow or text-stroke to body copy; use it sparingly on small labels over busy backgrounds only.
• Don't reduce padding below 12px (sm) inside cards or containers; maintain the 24px (md) standard for primary content areas.
• Don't use pure black (rgb(0, 0, 0)) for text or shadows—always use the warm dark gray (rgb(100, 110, 120)) for text and rgba(0, 0, 0, ...) for shadows to maintain visual warmth.