Deepshikha NGO

Overview

Deepshikha is a compassionate NGO design system rooted in 'Accessible Warmth'—a philosophy that combines human-centered design with purposeful clarity. The brand serves children with autism, cerebral palsy, and disabilities, and their families, requiring a visual language that conveys both professional competence and genuine care. The aesthetic is clean, approachable, and deliberately non-clinical: warm coral-red accents (#DA453C) signal hope and action, while generous white space and soft typography (Quicksand for headlines, DM Sans for body) create an environment that feels safe and inviting. The UI evokes trust through consistency, clarity through hierarchy, and compassion through color and spacing choices that never feel rushed or overwhelming.

The brand voice is warm, direct, and empowering—never patronizing, never clinical. Deepshikha speaks to parents, educators, and supporters with respect and optimism. Vocabulary patterns emphasize possibility ('thrive,' 'potential,' 'opportunity') over limitation. Example sentence in brand voice: 'Every child deserves to flourish—we're here to unlock that potential through personalized care and education.'

Colors

The color system is built on a foundation of trust and accessibility. Primary (#DA453C, a warm coral-red) is the signature accent used exclusively on call-to-action buttons ('Donate Now,' 'Join Us'), active navigation states, and key interactive elements. This color appears sparingly but decisively, commanding attention without aggression. Secondary (#0D6EFD, a vivid blue) supports informational hierarchies, secondary CTAs, and data visualization. Tertiary (#198754, a balanced green) is reserved for success states, confirmations, and positive feedback. The surface stack is deliberately light and clean: surface (#FFFFFF) is the primary canvas, with container variants (surface-container-lowest #F8F9FA through surface-container-highest #D0D5DD) providing subtle depth for cards, modals, and la

Typography

The type system uses a two-family pairing: Quicksand (a geometric, friendly sans-serif from Google Fonts) for all display and headline levels, and DM Sans (a modern, neutral sans-serif) for body, labels, and UI text. This pairing creates visual warmth at scale while maintaining legibility in dense content. Display (96px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks. Headline-lg (40px, 700 weight) anchors page sections and key messaging. Headline-md (28px, 700 weight) is used for subsection titles and card headers. Title-lg (20px, 600 weight, DM Sans) bridges headlines and body text. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for long-form content, with 0.02em letter-spacing to enhance clarity. Body-md (16px, 400

Layout

The layout system uses a 12-column grid with a maximum container width of 1300px, providing flexibility for both desktop and responsive layouts. The grid is fluid on mobile (single column, 24px gutter) and expands to full 12 columns on desktop with consistent 24px gutters between columns. White-space philosophy is 'generous but purposeful': sections are separated by 40px (lg spacing) on desktop and 24px (md spacing) on mobile, creating clear visual rhythm without excessive emptiness. Cards and content blocks use 24px (md spacing) internal padding, with 12px (sm spacing) between nested elements. The container max-width of 1300px ensures content remains scannable and focused on large displays. Margins follow the spacing scale: 64px (xl) for major section breaks, 40px (lg) for subsection sepa

Elevation & Depth

Depth in the Deepshikha system is achieved through subtle layering and soft shadows, never through darkness or aggressive contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for baseline cards and interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and hover states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and critical overlays. Borders are used sparingly: 1px solid #CED4DA (outline-variant) separates cards from the background without creating visual harshness. On hover, cards transition from sm to md shadow (200ms ease-in-ou

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, creating approachability without sacrificing professionalism. Buttons use 0.75rem (12px) border-radius, striking a balance between modern softness and functional clarity. Cards and containers use 1rem (16px) border-radius for a slightly more generous curve that feels welcoming. Input fields use 0.5rem (8px) border-radius to maintain visual distinction from larger containers. Badges and pills use 9999px (full) border-radius for maximum softness. The rationale: smaller radii (8-12px) on interactive elements sign

Components

Action Elements Buttons are the primary interaction mechanism and must always use token references for colors and spacing. The button-primary component uses {colors.primary} (#DA453C) background with {colors.on-primary} (#FFFFFF) text, 12px 24px padding, 48px height, and {rounded.md} (12px) border-radius. On hover, the background transitions to #C23530 (a darker coral) over 200ms with ease-in-out timing. On active/pressed state, the background darkens further to #A82D26. All buttons include {elevation.sm} (0 1px 2px rgba(0, 0, 0, 0.06)) by default. The button-secondary component uses a transparent background with a 2px solid border in {colors.primary}, maintaining the same text color and padding. On hover, the background fills with {colors.primary-container} (#F8E8E6, a light coral) wh

Do's and Don'ts

**Do**

• Do use {colors.primary} (#DA453C) exclusively on primary CTAs and active states—it is the brand's signature accent and must remain distinctive.
• Do apply generous white-space (lg spacing: 40px) between major sections to create visual breathing room and support accessibility.
• Do use Quicksand for all headlines and display text to create warmth and approachability; reserve DM Sans for body and UI text.
• Do apply soft shadows ({elevation.sm} and {elevation.md}) to create subtle depth; never use shadows darker than rgba(0, 0, 0, 0.12).
• Do use token references ({colors.x}, {typography.x}, {spacing.x}) in all component definitions to ensure consistency and enable future brand evolution.
• Do apply 3px focus rings of rgba(218, 69, 60, 0.1) on interactive elements for inclusive keyboard navigation.
• Do maintain 7:1+ contrast ratios between text and background colors to meet WCAG AAA accessibility standards.
• Do use rounded corners (8px–16px) on all interactive elements to reinforce the warm, accessible brand aesthetic.

**Don't**

• Don't use {colors.primary} on secondary elements, backgrounds, or non-interactive text—it must remain reserved for high-priority actions.
• Don't apply shadows darker than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) or use drop-shadows with blur > 40px, as this conflicts with the light, approachable aesthetic.
• Don't mix Quicksand and DM Sans within the same text block; use Quicksand for headlines only and DM Sans for body/UI.
• Don't use hard corners (0px border-radius) on any component—all elements must use {rounded.sm} (4px) or larger.
• Don't hardcode color values in component definitions; always use token references like {colors.primary} to maintain system integrity.
• Don't apply letter-spacing > 0.1em on body text, as this reduces legibility; reserve tight letter-spacing (-0.02em to -0.04em) for display/headline levels.
• Don't use colors from the WordPress preset palette (e.g., #0693e3, #9b51e0) in place of the defined Material 3 tokens.
• Don't create focus states using hard outlines; always use soft box-shadow rings at 10% opacity of the primary color.