Back to DesignMD
elena “elena occhioni” occhioni
Generated Jun 30, 2026
D
elena “elena occhioni” occhioni
Generated Jun 30, 2026
Switch between the rendered Visual preview and the Raw DESIGN.md.
This design system embodies a light, approachable, and modern digital aesthetic with a focus on clarity and calm user experience. The palette features soft, sky-inspired tones paired with clean geometric elements—circles, triangles, and flowing cloud shapes—creating a friendly yet professional atmosphere. The system is built around accessibility and open breathing room, with generous whitespace and minimal visual complexity. Illustrated iconography and playful geometric decorations soften the presentation of error states and system feedback, making potentially frustrating moments feel welcoming and human-centered.
Key Characteristics
#B0E0E9): Primary accent color used for interactive elements, highlights, and key visual focal points; creates a calm, trustworthy foundation#000000): Primary text color, headings, and core UI elements; used extensively for typography and borders#FFFFFF): Background surfaces, cards, and content containers#F5F5F5): Secondary background for subtle surface differentiation#9DD4E0): Darker sky blue for hover states and interactive element feedback#87C5D6): Deepest sky blue for active/pressed states#E8E8E8): Subtle borders and dividing lines between content sections#D0D0D0): Standard borders for form elements and containers#4CAF50): Positive actions and confirmatory feedback#F44336): Errors, warnings, and destructive actions#2196F3): Informational messages and neutral notificationsPrimary Font: Roboto
Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifSecondary Font: Open Sans
'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Roboto | 48px | 700 | 56px | -0.5px | Large page headers and prominent messaging |
| Heading 1 | Roboto | 36px | 700 | 46px | -0.3px | Primary section headings |
| Heading 2 | Roboto | 28px | 700 | 36px | -0.2px | Secondary section headings |
| Heading 3 | Roboto | 24px | 700 | 32px | 0px | Tertiary headings and card titles |
| Body Large | Open Sans | 20px | 400 | 28px | 0.3px | Primary body text and descriptions |
| Body Regular | Open Sans | 16px | 400 | 24px | 0.2px | Standard body copy |
| Body Small | Open Sans | 14px | 400 | 20px | 0.1px | Secondary text and metadata |
| Button | Open Sans | 16px | 700 | 20px | 0.5px | Call-to-action labels |
| Caption | Open Sans | 12px | 400 | 18px | 0px | Small labels and captions |
| Code | Roboto Mono | 14px | 400 | 20px | 0px | Technical text and code blocks |
#000000) with sufficient contrast against light backgroundsPrimary Button
#B0E0E9#00000016px 32px4pxnone#9DD4E0, text #000000#87C5D6, text #0000002px solid #B0E0E9, outline-offset 2pxSecondary Button
#FFFFFF#00000016px 32px4px2px solid #D0D0D0#F5F5F5, border #B0E0E9#E8E8E8, border #87C5D62px solid #B0E0E9, outline-offset 2pxGhost Button
transparent#B0E0E916px 32px4px2px solid #B0E0E9#B0E0E9, text #000000#87C5D6, text #0000002px solid #87C5D6, outline-offset 2pxStandard Card
#FFFFFF1px solid #E8E8E88px20px0 2px 4px rgba(0, 0, 0, 0.05)Elevated Card
#FFFFFFnone8px24px0 8px 16px rgba(0, 0, 0, 0.08)Light Background Container
#F5F5F5none8px20pxnoneText Input
#FFFFFF#0000001px solid #D0D0D04px12px 16px#9999992px solid #B0E0E9, background #FFFFFF, box-shadow 0 0 0 3px rgba(176, 224, 233, 0.1)#F5F5F5, border #E8E8E8, text #9999992px solid #F44336Form Label
#0000008pxForm Helper Text
#6666664pxCheckbox & Radio
20px × 20px2px solid #D0D0D04px, Radio 50%#B0E0E92px solid #B0E0E92px solid #B0E0E9, outline-offset 2pxHeader Navigation
#FFFFFF1px solid #E8E8E860px0 20px#000000#B0E0E9, underline none#B0E0E9, border-bottom 3px solid #B0E0E9Footer Navigation
#F5F5F51px solid #E8E8E840px 20px#000000#B0E0E9Default Badge
#B0E0E9#0000004px 12px12pxSuccess Badge
#E8F5E9#2E7D324px 12px12pxError Badge
#FFEBEE#C628284px 12px12pxBase Unit: 4px
Spacing Scale:
4px (1×): Micro spacing between inline elements8px (2×): Tight spacing between related elements12px (3×): Comfortable spacing within components16px (4×): Standard padding within cards and containers20px (5×): Default padding for sections24px (6×): Generous internal spacing for elevated containers32px (8×): Spacing between major content blocks40px (10×): Margin between distinct sections60px (15×): Large vertical spacing for section separation100px (25×): Extra-large margin between major page sectionsUsage Context:
4px–12px): Component internals, inline elements, tight groupings16px–24px): Card padding, button padding, form element spacing32px–60px): Between content blocks, page sections100px): Hero sections, major visual breaksMax Width: 1200px for desktop content containers
Column Strategy: 12-column grid system with 20px gutters between columns
Section Patterns:
0 20px)400px, centered contentGenerous whitespace is fundamental to the design system. Breathing room between elements creates a calm, uncluttered experience. Vertical rhythm is maintained through consistent margin and padding increments. No element feels cramped; every component has clear visual isolation from adjacent content. This approach reduces cognitive load and improves scannability.
0px: No radius; sharp corners for technical elements or code blocks4px: Buttons, inputs, and small interactive elements8px: Cards, containers, and moderate-sized components12px: Larger cards and floating elements; badge-like components16px: Hero cards, large call-to-action sections50%: Fully circular; profile avatars, icon buttons, radio inputs| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow; box-shadow: none | Flat backgrounds, text-only containers |
| Raised (1) | 0 2px 4px rgba(0, 0, 0, 0.05) | Standard cards, buttons on hover |
| Elevated (2) | 0 4px 8px rgba(0, 0, 0, 0.08) | Hovered cards, dropdown menus |
| High (3) | 0 8px 16px rgba(0, 0, 0, 0.08) | Modal backdrops, elevated cards, tooltips |
| Very High (4) | 0 12px 24px rgba(0, 0, 0, 0.12) | Large modals, fullscreen overlays |
Shadow Philosophy:
Shadows are subtle and used sparingly to create gentle depth without visual heaviness. Multiple layers of soft, semi-transparent shadows (rather than a single hard shadow) create natural, realistic elevation. Shadows increase in softness and spread as elevation increases. The shadow color is always black at very low opacity (rgba(0, 0, 0, 0.05–0.12)), ensuring consistency across all surfaces. Shadows enhance interactive feedback—buttons and cards receive subtle elevation on hover to signal responsiveness.
#B0E0E9) as the primary interactive accent to guide user attention60px vertical margins20px padding inside containers20px gutters for responsive layouts2px solid #B0E0E9 outlines for keyboard accessibility24px minimum for body text)4px, 8px, 16px, 20px, and up) for consistency44px × 44px)12px blur) that overpower content12px in any context (accessibility violation)| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column layouts, full-width containers (20px side padding), 16px body font, 28px headings, 60px margins between sections |
| Tablet | 768px–1023px | 2-column grid, 32px side padding on containers, 20px body font, 32px headings, 80px section margins |
| Desktop | 1024px+ | 3–4 column layouts, max-width 1200px with auto margins, full hierarchy enabled, 100px section spacing |
44px × 44px (buttons, links, form controls)12px around clickable regions16px to prevent accidental taps48px × 48px for adequate fingertip contact44px height on mobile, 16px padding44px × 44px icon) at tablet breakpoint (768px); full menu slides in from left20px on mobile, 32px on tablet, adjusts for desktop48px (desktop) to 32px (tablet) to 28px (mobile)300px on mobile with adjusted image sizing#B0E0E9)#9DD4E0)#87C5D6)#FFFFFF)#F5F5F5)#000000)#D0D0D0)#E8E8E8)#4CAF50)#F44336)#2196F3)Color Consistency: All interactive elements default to sky blue (#B0E0E9); hover states darken to #9DD4E0; active states use #87C5D6. Black text (#000000) is the standard for all typography unless on sky blue backgrounds (use white or very dark gray instead).
Typography Hierarchy: Roboto 700 weight for all headings (48px display → 36px h1 → 24px h3); Open Sans 400 weight for body (20px primary → 14px secondary). Maintain line-height ratios: headings 1.2–1.4×, body 1.4–1.5×.
Spacing & Padding: Use increments of 4px base unit. Standard container padding is 20px; elevated containers use 24px. Margins between sections: 60px standard, 100px for major breaks. Mobile overrides: reduce section margins to 40px.
Elevation & Shadows: Flat = no shadow; raised cards = 0 2px 4px rgba(0, 0, 0, 0.05); elevated cards = 0 8px 16px rgba(0, 0, 0, 0.08). Never use harsh shadows; always use soft, semi-transparent black (5–12% opacity).
Border Radius: Buttons & inputs = 4px; standard cards = 8px; large containers = 16px; circular elements = 50%. Do not deviate; consistency is critical.
Interactive States: All buttons and links require focus state (2px sky blue outline, 2px offset). Hover states lighten or darken depending on component; active states show deepest color. Disabled state = #F5F5F5 background + #999999 text.
Responsive Adaptation: Mobile-first approach. Single column (320px) → 2 columns (768px) → 3+ columns (1024px). Reduce font sizes on mobile: h1 from 36px to 28px, body from 20px to 16px. Hamburger menu appears at 768px breakpoint.
Touch Accessibility: All interactive elements minimum 44px × 44px. Form labels stack above inputs on all sizes. Links underline on hover. Keyboard focus always visible. ARIA labels on icon-only buttons.
Component Patterns: Cards always include subtle borders (1px #E8E8E8) or shadows; never both simultaneously. Buttons always 16px height minimum with padding. Forms group related fields with 12px gaps. Use geometric decorative shapes (circles, triangles) only as background elements or iconography, never within text.
Error & Feedback States: Validation errors use #F44336 border + error red badge. Success feedback uses #4CAF50 badge + green text. Info messages use info blue (#2196F3). All status messages include icon + text, minimum font size 14px.