Switch between the rendered Visual preview and the Raw DESIGN.md.
Smoovly embodies a clean, minimalist aesthetic centered on modern digital experiences. The design system prioritizes clarity and focus, using a high-contrast palette of deep blacks and pure whites with strategic blue accents to draw attention to interactive elements. The atmosphere is professional yet approachable, reflecting a lightweight interaction model that makes complex tools feel intuitive and effortless. Typography leverages serif warmth for headings paired with geometric sans-serif for body text, creating a sophisticated hierarchy that guides users through conversational flows. The overall mood is contemporary, purposeful, and conversion-focused—designed to inspire confidence in AI-driven tools and creative capabilities.
Key Characteristics
#0000EE): Primary interactive element, link text, primary call-to-action buttons, focus states, and critical user actions. Conveys energy and trust in AI-driven experiences.#FFD700): Secondary visual interest in hero imagery and accent highlights.#0000EE): Underlined or plain text links maintaining strong visual hierarchy.#000000): Solid black buttons for primary actions like "Start building" and "Contact us."#F9F9F9): Light neutral background for secondary actions like "View demo."#000000): Text, borders, dominant UI elements, highest contrast.#171616): Dark text, secondary headings, body emphasis.#696D72): Tertiary text, muted descriptive content.#8E8E8E): Icon fills, placeholder text, low-priority labels.#666666): Subtle borders, dividers, form hints.#F9F9F9): Secondary surfaces, subtle background variations.#E6E6E6): Subtle dividing lines, card borders, form field outlines.#FFFFFF): Primary surface, cards, modal overlays, input backgrounds.Primary Display Font: PT Serif (font-family: 'PT Serif', Georgia, serif;)
Elegant, authoritative serif used for all headings. Conveys sophistication and editorial presence.
Secondary Body Font: Inter (font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;)
Modern geometric sans-serif for body text and functional UI. Ensures readability at small sizes and technical context.
Fallback Tertiary Font: sans-serif (font-family: sans-serif;)
System fallback for navigation and utility text elements.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | PT Serif | 44px | 400 | 48.4px | 0px | Hero headlines, page titles, major statements |
| Heading / H2 | PT Serif | 32px | 400 | 40px | 0px | Section headings, card titles |
| Subheading / H3 | PT Serif | 24px | 400 | 31.2px | 0px | Subsection headers, feature titles |
| Heading / H4 | PT Serif | 20px | 400 | 28px | 0px | Form labels, card subtitles |
| Body Text | Inter | 16px | 400 | 1.5 | 0px | Primary paragraph text, descriptions |
| Body Small | Inter | 14px | 400 | 1.5 | 0px | Secondary copy, metadata, helper text |
| Navigation Link | sans-serif | 12px | 400 | normal | 0px | Top navigation, footer links |
| Button Text | Inter | 14px | 500 | 1.4 | 0px | Call-to-action button labels |
| Caption | Inter | 12px | 400 | 1.4 | 0px | Image captions, timestamps, micro-copy |
| Code / Mono | monospace | 13px | 400 | 1.5 | 0px | Code blocks, technical snippets |
44px display size for primary page titles to anchor visual hierarchy.16px with 1.5 line-height for comfortable reading across all screen sizes.#0000EE with no underline by default; underline on hover or focus.Primary Button
#000000#FFFFFF12px 28px24px (fully rounded)1px solid #000000#1716160px 4px 12px rgba(0, 0, 0, 0.15)2px solid #0000EE2pxSecondary Button
#F9F9F9#00000012px 28px24px1px solid #E6E6E6#FFFFFF#D0D0D00px 2px 8px rgba(0, 0, 0, 0.08)2px solid #0000EE2pxGhost Button / Link Button
#0000EE8px 0px#000000rgba(0, 0, 0, 0.04)Card (Default)
#FFFFFF1px solid #E6E6E612px24px0px 2px 8px rgba(0, 0, 0, 0.06)0px 8px 16px rgba(0, 0, 0, 0.12)Card (Elevated)
#FFFFFF16px32px0px 8px 24px rgba(0, 0, 0, 0.12)Modal / Overlay Card
#FFFFFF16px32px0px 12px 40px rgba(0, 0, 0, 0.16)rgba(0, 0, 0, 0.3) blur 4pxText Input (Default)
#FFFFFF1px solid #E6E6E68px12px 16px#000000#8E8E8E#0000EE0px 0px 0px 2px rgba(0, 0, 238, 0.1)Textarea
#FFFFFF1px solid #E6E6E68px16px120px#0000EE0px 0px 0px 2px rgba(0, 0, 238, 0.1)Form Label
#1716168pxForm Helper Text
#696D724pxTop Navigation Bar
#FFFFFF80px16px 30pxNav Link (Default)
#0000000px 16pxNav Link (Hover)
#0000EENav Link (Active)
#0000EE2px solid #0000EE-2pxBadge (Default)
#F9F9F9#1716164px 12px100px1px solid #E6E6E64pxBadge (Primary)
#0000EE#FFFFFFTab (Inactive)
#696D728px 16px2px solid transparentTab (Active)
#0000002px solid #0000EEBase unit: 4px
Spacing Scale with Contexts:
4px: Micro-spacing between inline elements, icon-text gaps8px: Tight spacing between related components, list gaps12px: Small gaps between adjacent sections, input label spacing16px: Standard padding for cards, form fields, navigation20px: Medium gap between content blocks24px: Default gap between sections, card padding28px: Button padding (vertical), list item spacing32px: Large content padding, section separation40px: Extra-large container padding for dense layouts56px: Major section spacing on desktop80px: Hero section vertical spacing120px: Maximum spacing for page-level separationMax Width Container: 1200px for main content
Gutter Width: 30px (15px left, 15px right per column)
Column System: 12-column grid
Container Padding: 30px on desktop, 20px on tablet, 16px on mobile
Section Layout Patterns:
Generous whitespace is fundamental to Smoovly's minimalist approach. Breathing room around text, images, and interactive elements reduces cognitive load and emphasizes focus. Sections are separated by 56–120px vertical spacing on desktop, allowing each content block to feel independent. Horizontal margins never compress below 30px on desktop, preserving readability and visual hierarchy. The design prioritizes legibility and user focus over content density.
0px: Form fields with subtle borders, data tables, architectural layouts8px: Input fields, small UI components, subtle softness12px: Cards with moderate rounding, content containers, friendly feel16px: Large cards, modal windows, primary elevated surfaces24px: Button elements, fully rounded interactive targets100%: Avatar images, circular badges, icon-only buttons| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, 1px subtle border | Neutral backgrounds, form fields, disabled states |
| Raised (L1) | 0px 2px 8px rgba(0, 0, 0, 0.06) | Default cards, subtle elevation above background |
| Lifted (L2) | 0px 4px 12px rgba(0, 0, 0, 0.12) | Hovered cards, buttons in hover state, interactive surfaces |
| Elevated (L3) | 0px 8px 24px rgba(0, 0, 0, 0.12) | Prominent cards, highlighted sections, secondary focus areas |
| Modal (L4) | 0px 12px 40px rgba(0, 0, 0, 0.16) | Modals, overlays, maximum visual prominence |
Shadow Philosophy:
Shadows in Smoovly are subtle and purposeful, used primarily to create spatial hierarchy rather than visual spectacle. Shadows increase proportionally with elevation level, helping users distinguish interactive surfaces from static backgrounds. All shadows use soft, warm black (rgba(0, 0, 0, ...)) to maintain the clean aesthetic. Hover states introduce subtle shadow increases to provide tactile feedback without overwhelming the interface. Modals use the darkest shadows alongside a semi-transparent backdrop to establish a clear modal context.
#0000EE blue exclusively for interactive primary links and CTAs; it establishes consistent actionability.24px (fully pill-shaped) to signal interactivity.2px solid #0000EE outlines and 2px offset for keyboard accessibility.rgba(0, 0, 0, 0.16) to prevent a heavy, dated aesthetic.24px for input fields or standard cards; reserve rounded corners for CTAs.#0000EE; it trains users to recognize interactive affordance.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 480px | Single-column layouts, 16px padding, 32px section gaps, 28px display font |
| Tablet | 481px – 768px | Two-column layouts where applicable, 20px padding, 56px section gaps, 36px display font |
| Desktop | 769px – 1200px | Full multi-column grids, 30px padding, 80px section gaps, 44px display font |
| Large Desktop | 1201px+ | 1200px max-width container, 30px horizontal margins, full typography scale |
44px × 44px for all interactive elements (buttons, links, form inputs)40px × 40px minimum with 16px internal padding12px font size with 8px vertical padding for touch-safe targets40px height on mobile, 36px on desktop48px height on mobile navigation drawersMobile (320–480px):
30px to 16px480px breakpoint44px to 28pxTablet (481–768px):
30px to 20px36pxDesktop (769px+):
30px padding and standard spacing scale44px#0000EE) – links, accent elements#000000) – main call-to-action buttons#F9F9F9) – secondary actions#000000) – primary reading content#696D72) – tertiary information, descriptions#8E8E8E) – muted labels, placeholder text#FFFFFF) – content containers#E6E6E6) – subtle UI separation#171616) – heading hierarchy below displayTypography Foundation: All headings use PT Serif at 400 weight; body text uses Inter. Display (44px), H2 (32px), H3 (24px), H4 (20px), Body (16px). Scale down 20–30% for mobile/tablet.
Color Discipline: Maintain #0000EE for all interactive elements (links, primary buttons, focus states). Use black (#000000) for primary surfaces and text; reserve gray scale (#696D72, #8E8E8E) for secondary messaging.
Spacing Consistency: Base all gaps on 4px increments (8, 12, 16, 20, 24, 32, 56, 80, 120px). Section separation minimum 56px desktop. Container padding minimum 30px desktop, 20px tablet, 16px mobile.
Button Styling: All buttons use 24px border-radius (pill-shaped). Primary buttons: solid #000000 bg with white text. Secondary: #F9F9F9 bg with black text. On hover: increase shadow to L2 (0px 4px 12px rgba(0, 0, 0, 0.12)).
Shadow Elevation: Use subtotal shadows: L1 (0px 2px 8px rgba(0, 0, 0, 0.06)) for cards, L2 for hover states, L3 (0px 8px 24px rgba(0, 0, 0, 0.12)) for prominent sections, L4 (0px 12px 40px rgba(0, 0, 0, 0.16)) for modals.
Accessibility First: Maintain 4.5:1 contrast minimum (black text on white passes; gray text on white requires careful verification). Set focus states to 2px solid #0000EE with 2px offset. Ensure touch targets minimum 44×44px on mobile.
Border Radius Hierarchy: Inputs/small components 8px, cards 12px, large elevated surfaces 16px, buttons 24px, circular avatars 100%. Never exceed 24px unless explicitly circular.
Responsive Grid: Use 12-column grid at all breakpoints. Desktop max-width 1200px with 30px gutters. Tablet 2 columns, mobile 1 column. Collapse navigation to hamburger menu below 480px.
Form Field Consistency: All inputs use Inter 14px, 12px border-radius, 12px 16px padding, 1px solid #E6E6E6 border. Focus state: 1px solid #0000EE with 0px 0px 0px 2px rgba(0, 0, 238, 0.1) shadow.
Navigation Clarity: Top nav height 80px, white background, black text 12px sans-serif. Nav links 0px 16px padding. Active link: #0000EE color with 2px blue underline. Mobile hamburger at breakpoint 480px.