Bevol Platform

Overview

Bevol is a purpose-driven social platform that democratizes volunteering and civic engagement through a mission-focused interface. It serves volunteers, nonprofits, corporations, and communities seeking to align their actions with the UN Sustainable Development Goals. The design aesthetic is 'Purposeful Clarity'—a modern, accessible approach that prioritizes information hierarchy and actionability over decoration. The UI evokes trust and momentum: clean typography, decisive primary blue (#005baa) for CTAs, warm secondary accents (#ffb136, #f26522) for category differentiation, and generous white space that invites participation. The emotional response is one of empowerment: users feel their actions matter because the interface makes impact visible and measurable.

Bevol's voice is inclusive, optimistic, and action-oriented. The brand speaks to both Arabic and English audiences with equal clarity, avoiding jargon while celebrating concrete outcomes. Vocabulary emphasizes agency ('volunteer to achieve,' 'join the movement,' 'create impact') and community ('together,' 'our mission,' 'collective action'). The tone is warm but professional—never patronizing, always respectful of the user's time and intention. Example sentence in brand voice: 'Every hour you volunteer moves us closer to clean water for 500 families.'

Colors

The Bevol color system is built on a foundation of trust and action. Primary (#005baa) is the signature accent—used exclusively for call-to-action buttons, active states, focus rings, and primary navigation. It conveys authority and reliability, essential for a platform handling civic commitments. Secondary (#ffb136, a warm golden-orange) and Tertiary (#f26522, a deeper burnt-orange) are used for category tagging, status indicators, and secondary CTAs, creating visual rhythm across mission types (volunteer, institute, company, contest, job, service). The surface stack uses a light, neutral palette: surface (#ffffff) for cards and containers, surface-container (#efefef) for page backgrounds, and surface-container-high (#e9ecef) for hover states. On-surface text is dark charcoal (#212529) fo

Typography

The type system uses Inter, Roboto, and Tajawal (for Arabic support) in a carefully weighted hierarchy. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) leads feature sections and modal titles. Headline-md (28px, 600 weight) structures subsections. Title-lg (20px, 600 weight) labels cards and form groups. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and call-outs. Body-md (16px, 400 weight, 24px line-height, 0.03125em tracking) is the default paragraph text, matching the platform's 16px base font size. Label-md (14px, 600 weight) is applied to button text, form labels, and navigation items. Label-sm (12px, 500 weight, 0.0333333333em tracking) is reserved for metadata, timestamps, a

Layout

Bevol uses a 12-column fluid grid with a max-width of 1400px, centered on the viewport. The page rhythm is built on a 24px gutter (md spacing) between columns and 40px (lg spacing) between major sections. Container max-width is 1400px to accommodate wide hero carousels and multi-column content grids without excessive line lengths. The background is a soft neutral (#efefef), creating subtle visual separation from white card surfaces. White space is generous: section padding is 40px–64px vertically, and card padding is 24px. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently for margins, padding, and gaps. Breakpoints follow Bootstrap conventions (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) to ensure responsive reflow. The layout philosophy prior

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color or brightness shifts. The elevation system uses three levels: sm (0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) for small interactive elements like badges and buttons, md (0 0.5rem 1rem rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 1rem 3rem rgba(0, 0, 0, 0.175)) for modals and elevated overlays. Shadows are soft and spread (no hard blur), creating a 'floating paper' effect that feels modern and accessible. Cards use md elevation by default and transition to lg on hover (200ms ease-in-out), accompanied by a

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners that feel modern and friendly without sacrificing clarity. Buttons and pills use full (50%) border-radius for a distinctive, action-oriented appearance that signals interactivity. Cards and containers use lg (1rem / 16px) for a balanced, professional look. Form inputs use DEFAULT (0.375rem / 6px) for subtle rounding that distinguishes them from buttons. Badges and small UI elements use full (50%) to create visual consistency with buttons. The rationale: full-radius buttons stand out as primary CTAs and are instantly recognizable

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#005baa) background with white text, 48px height, 12px–32px padding, and full (50%) border-radius. On hover, the background darkens to #0a3d91 (a 15% darker shade) with a 200ms ease-in-out transition. On active/pressed, it darkens further to #052c65. Button-secondary uses a transparent background with a 2px solid primary border and primary text color. On hover, it fills with {colors.primary-container} (#cfe2ff) while maintaining the border. Both button variants use {typography.label-md} (14px, 600 weight) for text. Buttons should never exceed 200px width; longer labels should wrap or truncate with ellipsis.

Containers & Surfaces Cards are the primary content container. They use {co

Do's and Don'ts

**Do**

• Do use primary (#005baa) exclusively for primary CTAs, active states, and focus indicators—never for decorative elements or backgrounds.
• Do apply 24px (md) gutter spacing between grid columns and 40px (lg) spacing between major sections to maintain visual rhythm and readability.
• Do use full (50%) border-radius on buttons to make them instantly recognizable as interactive, and lg (16px) on cards to maintain a modern, professional appearance.
• Do apply {elevation.md} (0 0.5rem 1rem rgba(0, 0, 0, 0.15)) to cards and transition to {elevation.lg} on hover with a 200ms ease-in-out timing to signal interactivity.
• Do use secondary (#ffb136) and tertiary (#f26522) for category tagging and status indicators to create visual differentiation across mission types.
• Do ensure all interactive elements have a visible focus state with a 3px primary border and 10% opacity background halo for keyboard accessibility.
• Do constrain form fields to 400px width and cards to 600px width on desktop to reduce cognitive load and improve task completion.
• Do use {typography.label-md} (14px, 600 weight) for button text and {typography.body-md} (16px, 400 weight) for paragraph text to maintain consistent hierarchy.

**Don't**

• Don't use primary (#005baa) for page backgrounds, body text, or decorative frames—reserve it exclusively for interactive elements and focus states.
• Don't apply border-radius values smaller than DEFAULT (6px) to buttons or larger than lg (16px) to cards, as this breaks the visual consistency of the shape system.
• Don't use shadows darker than {elevation.lg} (0 1rem 3rem rgba(0, 0, 0, 0.175)) or blur radii exceeding 32px, as this creates a heavy, dated appearance.
• Don't mix secondary (#ffb136) and tertiary (#f26522) on the same component—use one accent per element to maintain visual clarity.
• Don't apply transitions longer than 300ms to interactive elements, as this feels sluggish and reduces perceived responsiveness.
• Don't use opacity: 0.5 for disabled text; instead, use {colors.on-surface-variant} (#6c757d) at full opacity to maintain contrast and readability.
• Don't exceed 200px width for buttons or allow button text to wrap to more than two lines—truncate or restructure the label instead.
• Don't apply negative letter-spacing tighter than -0.04em on display text, as this can reduce legibility, especially in Arabic script.