style(site): pro-community refactory

design-demos/pro-community/DESIGN.md

@@ -0,0 +1,141 @@
+---
+name: Tech Leadership Community Design System
+colors:
+  surface: '#fcf8f9'
+  surface-dim: '#dcd9da'
+  surface-bright: '#fcf8f9'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f6f3f4'
+  surface-container: '#f0edee'
+  surface-container-high: '#eae7e8'
+  surface-container-highest: '#e5e2e3'
+  on-surface: '#1c1b1c'
+  on-surface-variant: '#45464c'
+  inverse-surface: '#313031'
+  inverse-on-surface: '#f3f0f1'
+  outline: '#76777c'
+  outline-variant: '#c6c6cc'
+  surface-tint: '#595e6d'
+  primary: '#030612'
+  on-primary: '#ffffff'
+  primary-container: '#1a1f2c'
+  on-primary-container: '#828697'
+  inverse-primary: '#c2c6d8'
+  secondary: '#5d5f5c'
+  on-secondary: '#ffffff'
+  secondary-container: '#dfe0dc'
+  on-secondary-container: '#616360'
+  tertiary: '#0b0500'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#281d0b'
+  on-tertiary-container: '#96846b'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#dee2f4'
+  primary-fixed-dim: '#c2c6d8'
+  on-primary-fixed: '#161b28'
+  on-primary-fixed-variant: '#424655'
+  secondary-fixed: '#e2e3df'
+  secondary-fixed-dim: '#c5c7c3'
+  on-secondary-fixed: '#1a1c1a'
+  on-secondary-fixed-variant: '#454745'
+  tertiary-fixed: '#f5dfc3'
+  tertiary-fixed-dim: '#d8c4a8'
+  on-tertiary-fixed: '#241a08'
+  on-tertiary-fixed-variant: '#534530'
+  background: '#fcf8f9'
+  on-background: '#1c1b1c'
+  surface-variant: '#e5e2e3'
+  text-main: '#4A4A4A'
+  border-subtle: '#E5E7EB'
+  surface-warm: '#F8F9F5'
+  midnight: '#1A1F2C'
+typography:
+  h1:
+    fontFamily: Inter
+    fontSize: 48px
+    fontWeight: '700'
+    lineHeight: '1.2'
+    letterSpacing: -0.02em
+  h2:
+    fontFamily: Inter
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.3'
+    letterSpacing: -0.01em
+  body-base:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  ui-label:
+    fontFamily: Inter
+    fontSize: 15px
+    fontWeight: '600'
+    lineHeight: '1.0'
+  caption:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1.4'
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  unit: 8px
+  xs: 8px
+  sm: 16px
+  md: 24px
+  lg: 32px
+  xl: 48px
+  xxl: 64px
+  xxxl: 80px
+  container-max: 1200px
+---
+
+# Design System: Tech Leadership Community (TLC)
+
+## 1. Brand Identity & Vision
+The Tech Leadership Community (TLC) brand is built on professionalism, innovation, and exclusive collaboration. It serves as a premium platform for CTOs, VPs of Engineering, and R&D leaders. The visual identity should reflect authority and trustworthiness while maintaining a modern, tech-forward aesthetic.
+
+## 2. Color Palette
+The color scheme is sophisticated and high-contrast, utilizing deep tones and ample whitespace to create a premium feel.
+
+- **Primary (Midnight Blue):** `#1A1F2C` - Used for primary actions (buttons), headers, and key branding elements.
+- **Secondary (Off-White/Beige):** `#F8F9F5` - Used as the primary background color to provide a warmer, more sophisticated feel than pure white.
+- **Accent (Text Gray):** `#4A4A4A` - Used for body text and secondary information.
+- **Highlight (Soft Gray):** `#E5E7EB` - Used for card borders and subtle section dividers.
+
+## 3. Typography
+The typography is clean and modern, prioritizing readability and a clear hierarchy for content-heavy pages.
+
+- **Headings:** Inter or a similar high-quality Sans-Serif.
+  - **H1:** Bold, large scale (e.g., 48px), Midnight Blue. Used for hero statements.
+  - **H2:** Semi-bold, medium scale (e.g., 32px), Midnight Blue. Used for section headers.
+- **Body Text:** Inter or system sans-serif.
+  - **Base:** 16px, Regular, Text Gray. Line-height 1.6 for readability.
+- **UI Elements:** Medium/Bold, 14px-16px, used for buttons and navigation items.
+
+## 4. Layout & Spacing
+- **Container:** Standard desktop container (max-width: 1200px) with generous padding.
+- **Grid:** 12-column grid system for flexible content arrangements.
+- **Spacing Scale:** Multiples of 8px (8, 16, 24, 32, 48, 64, 80) to maintain consistency.
+- **Cards:** Light border (`#E5E7EB`), generous internal padding (32px), and subtle hover effects.
+
+## 5. Components
+- **Buttons:** 
+  - **Primary:** Midnight Blue background, white text, rounded corners (8px).
+  - **Secondary:** Transparent background, Midnight Blue border and text.
+- **Cards:** Used for Testimonials, Events, and Articles. Features a clean, bordered container with a focus on internal spacing.
+- **Navigation:** Simple, text-based navigation in the header with a prominent primary CTA button ("Join Us").
+
+## 6. Visual Style
+- **Imagery:** High-quality photography of professional networking events and leadership environments.
+- **Icons:** Minimal, line-based icons in Midnight Blue or Gray.
+- **Borders:** Subtle 1px borders for cards and sections to define structure without adding visual clutter.