Dernekweb

Overview

Dernekweb is a professional association management platform serving Turkish civic institutions—associations, foundations, municipalities, and councils—with comprehensive digital infrastructure. The design aesthetic is **Institutional Modernism**: a confident blend of civic authority and digital accessibility. The visual language combines deep navy and burgundy accents with clean, light surfaces to evoke trust, professionalism, and institutional permanence. The UI personality is formal yet approachable, speaking to both administrators and members with clarity and respect. The brand voice is precise, civic-minded, and solution-focused—never casual, always purposeful. Example sentence: "Yönetim Kurulu Yapıldı — 07 Ağustos 2025 tarihinde toplantı gerçekleştirilmiştir." (The Board Meeting was held — the meeting took place on August 7, 2025.)

Colors

The color system reflects institutional authority balanced with modern accessibility. **Primary (#c41e3a)** is a deep burgundy used exclusively for primary call-to-action buttons, critical alerts, and brand-defining interactive elements—it commands attention without aggression. **Secondary (#00364d)** is a navy blue deployed for secondary actions, navigation accents, and supporting UI elements, reinforcing institutional gravitas. **Tertiary (#64b2cd)** is a soft cyan used sparingly for informational badges, success states, and accessibility highlights. The surface stack progresses from #f2f2f2 (base) through #e8e8e8 (container) to #ffffff (bright), creating subtle visual hierarchy without harsh contrast. **On-surface (#333333)** provides legible body text at 14px with 4.5:1 contrast ratio.

Typography

The type system pairs **Montserrat** (headings, labels, navigation) with **Roboto** (body text, descriptions) to balance institutional formality with modern readability. Montserrat's geometric precision conveys professionalism; Roboto's humanist curves ensure legibility at small sizes. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major announcements. Headline-lg (36px, 600 weight) titles key sections. Headline-md (28px, 600 weight) breaks content into digestible chunks. Body-md (14px, 400 weight, 24px line-height) is the primary reading size, set with 1.71 line-height ratio for accessibility. Labels (12–14px, 500–600 weight, 0.02–0.03em tracking) mark buttons and form fields with crisp hierarchy. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) on small labels (lab

Layout

The layout uses a 12-column Bootstrap grid with a fixed max-width of 1330px and 15px gutters (padding-left/right on columns). The design is fluid below 992px, collapsing to single-column on mobile. Container padding is 15px on all sides; section spacing uses the lg token (40px) for major breaks and md token (24px) for subsection separation. The hero carousel occupies full width with 40px vertical padding. Cards are arranged in a 3-column grid on desktop (col-md-4), 2-column on tablet (col-sm-6), and single-column on mobile (col-xs-12). White-space is conservative—never less than 12px (sm token) between interactive elements—to prevent accidental clicks. The fixed sidebar button (Aidat Sorgula) uses position: fixed with right: 0, top: 50%, transform: translateY(45%), and z-index: 100000 to f

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background shifts. **Level 1 (Base)**: no shadow; surface-container (#e8e8e8) provides the foundation. **Level 2 (Cards/Modals)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px solid border at #d0d0d0 (surface-container-highest). **Level 3 (Floating Elements)**: box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) for the fixed sidebar button and dropdown panels. Hover states elevate cards to Level 3 with a smooth 0.2s transition. The sidebar button uses an asymmetric shadow (-3px 3px 10px rgba(0, 0, 0, 0.2)) to emphasize its fixed posi

Shapes

The shape philosophy is **Institutional Precision**: subtle rounding that softens authority without sacrificing formality. Buttons use 7px border-radius (lg token), balancing approachability with professional restraint. Cards and containers use 6px (md token) for a slightly tighter feel. Form inputs use 4px (DEFAULT token) for minimal visual weight. The sidebar button uses asymmetric rounding (8px top-left, 8px bottom-left, 0 right) to emphasize its edge-anchored position. Badges and pills use 50% border-radius (full token) for visual distinction. This graduated scale prevents the interface fr

Components

Action Elements Buttons are the primary interaction mechanism. **Primary buttons** (button-primary) use #c41e3a background with 12px horizontal / 12px vertical padding, 44px height, and 7px border-radius. On hover, the background darkens to #a01829 with a 0.25-opacity shadow (0 3px 8px rgba(196, 30, 58, 0.25)) and all 0.3s ease transition. **Secondary buttons** (button-secondary) use #00364d background for lower-priority actions like "Efe Yiğit" or "Tamam". **Ghost buttons** (button-ghost) have transparent background with a 1px primary-colored border, used for tertiary actions. All buttons apply font-weight: 600 (Montserrat) and letter-spacing: 0.02em for crisp label hierarchy.

Containers & Surfaces Cards (card component) have a white background (#ffffff), 24px padding, 6px border

Do's and Don'ts

**Do**

• Do use primary (#c41e3a) exclusively for primary CTAs and critical alerts—never for decorative elements or secondary navigation.
• Do maintain 24px minimum spacing (md token) between major sections and 12px (sm token) between interactive elements to prevent accidental clicks.
• Do apply Montserrat (600 weight, 0.02em tracking) to all labels and button text for crisp hierarchy and institutional authority.
• Do use the three-tier shadow system (0 3px 8px, 0 8px 30px, or none) consistently—never invent intermediate shadow values.
• Do test all interactive elements with a 0.3s ease transition to ensure smooth, professional motion without feeling sluggish.

**Don't**

• Don't use secondary (#00364d) or tertiary (#64b2cd) as primary button colors—they are supporting accents only.
• Don't apply border-radius greater than 10px (xl token) on any component; excessive rounding undermines the institutional aesthetic.
• Don't mix Roboto and Montserrat weights arbitrarily; use Montserrat 600+ for headings/labels and Roboto 400 for body text exclusively.
• Don't create custom shadow values; use only the three defined elevations (sm, md, lg) to maintain visual consistency.
• Don't reduce line-height below 1.5 on body text or below 1.4 on labels—accessibility and legibility depend on adequate vertical rhythm.