DYNSEO

Overview

DYNSEO is a health-tech cognitive training platform that transforms brain exercise into an accessible, joyful experience. The design system embodies 'Playful Professionalism'—a balance between the vibrant, approachable energy of educational software and the trustworthy precision demanded by health professionals and families. The interface serves children, adults, and seniors, so every element must communicate clarity without condescension, and warmth without frivolity. The brand voice is encouraging yet grounded: direct, evidence-based, and genuinely invested in the user's cognitive growth. Example: 'Your memory improved 23% this month—keep going.'

Colors

The color palette is built on a foundation of trust (primary blue #5268c9) paired with energetic accents that signal progress and achievement. Primary (#5268c9, rgb(82, 104, 201)) is the dominant interactive color—used on all primary CTAs, navigation highlights, and focus states. It conveys professionalism and calm focus. Secondary (#ffb600, rgb(255, 182, 0)) is the 'achievement' accent, deployed on badges, progress indicators, and celebratory moments to reinforce positive reinforcement. Tertiary (#e73469, rgb(231, 52, 105)) adds emotional warmth and urgency, reserved for secondary CTAs and attention-grabbing elements. The surface stack uses clean whites (#ffffff) and subtle grays (#f8f9fb, #e5e7eb, #d1d5db) to maintain visual breathing room. On-surface text is a deep navy (#1a1a2e, rgb(26

Typography

The type system pairs Montserrat (bold, geometric, confident) for all headings and interactive labels with Open Sans (warm, readable, human) for body copy and descriptive text. This pairing creates visual hierarchy while maintaining accessibility—Montserrat's weight (600–700) at 28–40px for headlines commands attention without aggression, while Open Sans at 16–18px with 24–28px line-height ensures sustained reading comfort for users of all ages. Label-md (Montserrat, 14px, 700) is applied to all button text and form labels with 0.01em letter-spacing for crisp legibility. Body-md (Open Sans, 16px, 400) is the default paragraph style with 24px line-height (1.5x) to support dyslexic and aging users. Apply text-shadow: 0 1px 2px rgba(0,0,0,0.05) on small labels (label-sm) when placed over colo

Layout

The layout uses a 12-column grid with a max-width of 1200px, maintaining a gutter of 24px between columns. Content sections are separated by 40px (lg spacing) vertically to create clear visual rhythm and reduce cognitive load—critical for users with attention or memory challenges. The hero section spans full-width with a soft gradient background (light cyan to pale yellow tones) and contains the primary CTA ('Ordina') positioned at 24px from the left edge and 24px from the bottom of the hero block. Secondary CTAs ('Scoprire ↓') use 12px spacing from the primary button. Container padding is consistently 24px on desktop, reducing to 16px on tablets and 12px on mobile. White-space is generous—never less than 12px between interactive elements—to prevent accidental mis-taps and support motor ac

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids harsh contrast. Level 1 (Base/Surface): no shadow, clean white background (#ffffff). Level 2 (Cards & Containers): box-shadow: 0 8px 24px rgba(0,0,0,0.05), border: 1px solid rgba(0,0,0,0.08). This creates a subtle lift without visual heaviness. Level 3 (Modals & Overlays): box-shadow: 0 16px 40px rgba(0,0,0,0.12), with a semi-transparent backdrop (rgba(0,0,0,0.3)) behind the modal. Hover states on cards transition to Level 3 shadow over 200ms to signal interactivity. Buttons use no shadow in default state; on hover, they shift to

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are generous enough to feel approachable and modern, but not so extreme as to sacrifice visual clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel friendly and clickable. Cards and containers use 14px (lg) radius, striking a balance between softness and definition. Form inputs use 6–8px (DEFAULT to md) radius for a slightly sharper appearance that signals 'functional' without coldness. The 6px DEFAULT radius is applied to most UI elements (badges, small containers, list items) as the system's neutral cho

Components

Action Elements Primary buttons (button-primary) use backgroundColor: rgb(82, 104, 201), textColor: white, Montserrat 14px 700, padding: 14px 32px, border-radius: 9999px, height: 48px. On hover, shift backgroundColor to #3a5ccc (a 10% darker blue) over 200ms with no shadow. On active/pressed, reduce height by 2px (46px) and apply a 2px inset shadow (0 2px 4px rgba(0,0,0,0.15)) to create a tactile 'press' effect. Secondary buttons (button-secondary) use a white background with a 2px solid border in primary blue, textColor: primary, same typography. On hover, fill the background with primary-container (#e8ecf8) while keeping the border. Accent buttons (button-accent) use backgroundColor: #ffb600, textColor: #1a1a2e, for progress celebrations and secondary CTAs. All buttons must have a mi

Do's and Don'ts

**Do**

• Do use primary blue (#5268c9) on all primary CTAs and focus states to create a consistent, trustworthy interaction language.
• Do apply generous white-space (minimum 12px) between interactive elements to reduce cognitive load and support motor accessibility for all ages.
• Do pair Montserrat headings with Open Sans body copy to create clear visual hierarchy while maintaining warmth and readability.
• Do use the secondary yellow (#ffb600) sparingly on achievement badges and progress indicators to reinforce positive reinforcement without overwhelming.
• Do ensure all buttons have a minimum 44px × 44px touch target and 200ms transition timing on hover states for smooth, predictable interaction.

**Don't**

• Don't use pure black (#000) or pure white (#fff) for text or backgrounds—always use the defined on-surface (#1a1a2e) and surface (#ffffff) tokens to maintain the soft, approachable aesthetic.
• Don't apply shadows heavier than 0 16px 40px rgba(0,0,0,0.12) or use multiple layered shadows, as this contradicts the light, modern design language.
• Don't mix Montserrat and Open Sans within a single heading or paragraph—maintain clear separation: Montserrat for all headings/labels, Open Sans for all body text.
• Don't use the tertiary pink (#e73469) on more than 2–3 elements per page; reserve it for secondary CTAs and attention-critical moments to preserve its impact.
• Don't reduce border-radius below 4px (sm) or apply sharp corners (0px) to interactive elements, as this conflicts with the Soft-Technical philosophy and reduces approachability.