Switch between the rendered Visual preview and the Raw DESIGN.md.
Barovone is a community-driven online bookstore platform that bridges local bookshops with digital convenience. The design system reflects a clean, trust-focused aesthetic that prioritizes clarity and accessibility. The visual language is minimal and functional, with warm neutrals grounding the interface while strategic accent colors guide user actions. The platform balances professional sophistication with approachable warmth, creating an environment where book discovery feels personal and connected to local communities.
Key Characteristics
#1090FD): Main call-to-action buttons, active links, and primary interactive states#0063D3): Hover states and secondary emphasis for primary actions#4BACC6): Supportive brand accent for highlights and secondary actions#0C99D6): Tertiary accent for promotional badges and category tags#0C6EAF): Dark accent for contrast and emphasis on light backgrounds#0063D3): Hover and focus states for primary elements#1090FD): Links and interactive text elements#333333): Main body text and primary content (most prevalent)#5F5F5F): Secondary text, descriptions, and meta information#999999): Disabled text, hints, and lowest-priority information#A7A4A0): Footnotes and very low emphasis text#222222): High-contrast headings and bold text#0E171D): Darkest text for maximum contrast and emphasis#99A7B1): Secondary interface elements and dividers#FFFFFF): Primary background and card surfaces#F7F7F7): Subtle background differentiation and disabled states#E9E9E9): Input borders and subtle dividers (inferred)#E74C3C): Error messages, validation failures, and destructive actionsPrimary: Noto Sans R (Regular weight 400)
Secondary: Noto Sans M (Medium weight 600)
Fallback Stack: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Noto Sans R | 28px | 400 | 30.8px | 0px | Page titles, hero sections |
| Heading H2 | Noto Sans R | 24px | 400 | 26.4px | 0px | Section headers, category titles |
| Heading H3 | Noto Sans M | 18px | 400 | 19.8px | 0px | Subsection headers, product titles |
| Heading H4 | Noto Sans R | 22px | 400 | 31.43px | 0px | Feature headers, card titles |
| Heading H5 | Noto Sans M | 15px | 600 | 16.5px | 0px | Small headers, badge text |
| Body | Noto Sans R | 13px | 400 | 22px | 0px | Primary body text, descriptions |
| Button | Noto Sans R | 20px | 400 | 28.57px | 0px | Button text, CTAs |
| Input | Noto Sans R | 16px | 400 | 50px | 0px | Form input text, search |
| Caption / List | Noto Sans R | 12px | 400 | 17.14px | 0px | Captions, list items, metadata |
| Code | Noto Sans R | 12px | 400 | 17.14px | 0px | Code blocks, monospace fallback |
#333333, #222222, #0E171D) against light backgrounds ensure WCAG AA compliancePrimary Button
#1090FD#33333320px400Noto Sans R7px 16px 8px 16px50px4pxnonenone28.57px#0063D3, text #333333#0063D3, inset shadow inset 0px 2px 4px rgba(0,0,0,0.15)#F7F7F7, text #999999Secondary Button
transparent#33333316px400Noto Sans R8px 16px44px4px1px solid #333333none#F7F7F7, border #333333#E9E9E9, text #222222Ghost Button
transparent#33333316px400Noto Sans R0pxauto0pxnonenone#1090FD, underline 1px solid #1090FDDefault Card
#FFFFFF#33333312px400Noto Sans R0px0pxnonenone17.14pxProduct Card
#FFFFFF#33333312px40012px4px1px solid #E9E9E90px 2px 4px rgba(0,0,0,0.05)1px solid #1090FD, box-shadow 0px 4px 8px rgba(0,0,0,0.1)Modal / Overlay
#FFFFFF#33333332px10pxnonergba(0, 0, 0, 0.1) 0px 5px 5px -5pxrgba(0, 0, 0, 0.5)Text Input Default
#FFFFFF#33333316px400Noto Sans R0px 20px50px4px1px solid #E9E9E9none50px#9999991px solid #1090FD, box-shadow 0px 0px 0px 3px rgba(16,144,253,0.1)Search Input
transparent#33333316px4001px 0px 0px 28px51px28px1px solid #1090FDnone40px#FFFFFF, border 1px solid #0063D3Textarea
#FFFFFF#33333314px40012px 16px4px1px solid #E9E9E9none100px1px solid #1090FD, box-shadow 0px 0px 0px 3px rgba(16,144,253,0.1)Select / Dropdown
#FFFFFF#33333314px12px 16px44px4px1px solid #E9E9E91px solid #99A7B1Primary Navigation
#FFFFFF#33333314px4000px 15pxauto0pxnone0px 1px 0px rgba(0,0,0,0.05)17.14px#1090FD, border-bottom 2px solid #1090FD#1090FDSecondary Navigation / Breadcrumb
transparent#99999912px8px 0px#99A7B1#333333Text Link
transparent#1090FD13px4000px0pxnonenone18.57px#0063D3, text-decoration underline#0C6EAFFooter Link
transparent#FFFFFF13px40018.57px#4BACC6, text-decoration underlineDefault Badge
#E9E9E9#33333312px4004px 8px12pxnonenonePrimary Badge
#1090FD#FFFFFF12px4px 10px12pxStatus Badge (Promo)
#FFD700#33333312px6006px 12px12pxBase Unit: 4px
Spacing Scale:
4px — Micro spacing (internal padding)8px — Extra small (gaps between inline elements)12px — Small (component internal spacing)16px — Medium (section padding, standard gap)20px — Medium-large (vertical margins)24px — Large (section separation)28px — Extra large (container padding)32px — Extra large (major section padding, modal padding)36px — XXL (page section gaps)40px — XXL (large container padding)44px — Spacing between major sections64px — Hero section spacing, page marginsUsage Context:
7px 16px 8px 16px (vertical × horizontal)12px (compact) to 32px (spacious)24px to 44px (vertical separation)28px to 40px (page edges)Max Width: 1440px (desktop)
Content Width: 1280px (comfortable reading/browsing)
Mobile Width: 100% minus 16px safe margins (viewport-based)
Column Strategy:
16px gutters12px gutters16px side marginsSection Patterns:
1440px × variable height1280px centered with 80px side padding16px gapsBarovone employs generous whitespace to create breathing room and reduce cognitive load. The platform prioritizes content (book covers, titles, descriptions) over visual decoration, using whitespace to guide focus. Vertical rhythm through consistent spacing creates visual flow and predictability. Horizontal margins scale with viewport to ensure readability on all devices.
0px — Cards, inputs, navigation (clean, professional)4px — Buttons, badges, product cards (subtle softness)10px — Modals, large containers (noticeable rounding)12px — Badges, tags (prominent rounding)28px — Search input, pill-shaped elements (full rounding)50% — Circular elements (avatars, icons, images)| Level | Treatment | Use |
|---|---|---|
| Ground (L0) | No shadow | Surfaces, backgrounds |
| Raised (L1) | 0px 2px 4px rgba(0,0,0,0.05) | Cards, input focus states |
| Floating (L2) | 0px 4px 8px rgba(0,0,0,0.1) | Hovered cards, dropdowns |
| Elevated (L3) | 0px 8px 16px rgba(0,0,0,0.12) | Popovers, notifications |
| Modal (L4) | 0px 12px 24px rgba(0,0,0,0.15) | Modals, overlays |
| Screen (L5) | rgba(0, 0, 0, 0.1) 0px 5px 5px -5px | Top-level modals, tooltips |
Shadow Philosophy: Shadows are subtle and minimal, used sparingly to indicate clickability and interaction. The design favors clear borders and color contrast over heavy shadows. Shadows increase only on interactive hover states to provide tactile feedback. The negative offset (-5px) creates a bottom-only shadow effect, suggesting lift without visual bulk.
#333333 for all primary body text and ensure 13px minimum size#1090FD for primary CTAs and active interactive states#E9E9E9 borders to inputs and cards for subtle definition4px for consistent rhythmNoto Sans R (400 weight) for all text; limit Noto Sans M (600) to small headings50px for primary actions and 44px for secondary4px) to buttons and cards for a refined, accessible feel3px colored rings (rgba(16,144,253,0.1)) around interactive elements#5F5F5F for body copy (fails accessibility)0px 12px 24px rgba(0,0,0,0.15) on modal-level elements50% except for circular images and avatars44px (touch target accessibility)#1090FD to body text (reserved for interactive elements)44px of screen edges on mobile| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 767px | Single column, full-width cards, 16px gutters, collapsed navigation, 2-column product grid |
| Tablet | 768px – 1023px | 2 columns, 12px gutters, 3-column product grid, navigation adapts to horizontal scroll |
| Desktop | 1024px – 1439px | 12-column grid, 16px gutters, 4-column product grid, full horizontal navigation |
| Large Desktop | 1440px+ | Content constrained to 1280px, 5-column product grid, full sidebar navigation |
44px × 44px12px vertical, 16px horizontal44px height with 8px vertical padding48px × 48px (includes padding)50px minimum8px (non-overlapping)Navigation:
Product Grid:
12px gaps8px gapsSearch Bar:
484px width)Sidebar / Filters:
#1090FD)#0063D3)#FFFFFF)#333333) or Neutral Dark (#222222)#333333)#5F5F5F)#999999)#1090FD)#E9E9E9 inferred)#E74C3C)#4BACC6)Typography is foundational: All text uses Noto Sans family; body text is 13px with 22px line height; headings range 18px–24px; never go below 12px for captions or 13px for body
Color contrast drives hierarchy: Primary text is always #333333 or darker; interactive elements are #1090FD; secondary information is #5F5F5F; maintain WCAG AA compliance (4.5:1 minimum for text)
Spacing follows a 4px grid: All margins and padding align to multiples of 4px (8px, 12px, 16px, 20px, 24px, etc.); buttons are 50px tall with 7px vertical padding; inputs are 50px tall with 20px horizontal padding
Components use minimal shadows: Cards have 0px 2px 4px rgba(0,0,0,0.05) shadows; modals have rgba(0,0,0,0.1) 0px 5px 5px -5px; do not exceed 0px 12px 24px rgba(0,0,0,0.15) for any element
Border radius scales by use: Inputs and search are 28px (pill-shaped); buttons and cards are 4px; modals are 10px; badges are 12px; circular elements are 50%
Interactive states are consistent: All buttons show hover state with darker color and optional shadow; focus states use 3px outline in accent color; active states darken background or show inset shadow
Responsive design prioritizes content: On mobile, use single-column layout with full-width cards; on tablet, use 2–3 columns; on desktop, use 4–5 columns; collapse navigation into hamburger drawer on screens below 1024px
Product cards are the hero: Grid layout with consistent 16px gaps; each card shows cover image (circular 50% radius), title, author, price; add hover state with border highlight and subtle shadow lift
Forms prioritize accessibility: Input height minimum 50px; labels always visible (not placeholder-only); focus state includes colored ring outline; error messages use #E74C3C with descriptive text below field
Spacing guides visual flow: Use 24px–44px between major sections; use 12px–16px within component groups; use 8px between inline elements; this creates predictable rhythm and scannability