G-CORE
Questi contenuti non sono ancora disponibili nella tua lingua.
G-CORE
Section titled “G-CORE”Universal design system. One system. All worlds.
Overview
Section titled “Overview”G-CORE is BlackTrails’ unified design language and component library, providing a consistent visual identity across all brands while maintaining flexibility for brand-specific expressions.
Architecture Flow
Section titled “Architecture Flow”graph TD
DesignTokens[Design Tokens] --> Components[UI Components]
Components --> Landing[Landing Pages]
Components --> Forms[Contact Forms]
Components --> Cards[Product Cards]
Landing --> In1Brand[IN-1 Usage]
Landing --> ForestBrand[Forest Usage]
Landing --> ElementsBrand[Elements Usage]
Forms --> API[Email API Integration]
API --> Resend[Resend Service]
style DesignTokens fill:#f59e0b
style Components fill:#3b82f6
style In1Brand fill:#22c55e
style ForestBrand fill:#22c55e
style ElementsBrand fill:#22c55e
Core Principles
Section titled “Core Principles”1. Universal Tokens
Section titled “1. Universal Tokens”Centralized design tokens for colors, typography, spacing, and effects.
Token Categories:
- Colors (brand-specific palettes)
- Typography (Inter + Geist fonts)
- Spacing (8pt grid system)
- Border radius (Zen-inspired curves)
2. Component Library
Section titled “2. Component Library”Reusable components built with semantic HTML and vanilla CSS.
Component Types:
- Navigation bars
- Hero sections
- Product cards
- Contact forms
- Footer layouts
3. Brand Adaptation
Section titled “3. Brand Adaptation”Each brand can override tokens while maintaining structural consistency.
Example:
- IN-1: Green bioluminescent accent
- Forest: Deep forest dark theme
- Elements: Warm earth tones
Features
Section titled “Features”Landing Page System
Section titled “Landing Page System”Pre-built landing page templates with:
- SEO optimization
- Responsive design (mobile-first)
- Dark mode by default
- Accessibility (WCAG 2.1 AA)
Contact Form Integration
Section titled “Contact Form Integration”Standardized contact forms with:
- Resend email integration
- Field validation
- Rate limiting
- Success/error states
Design System Documentation
Section titled “Design System Documentation”Live component showcase with:
- Interactive examples
- Code snippets
- Usage guidelines
- Accessibility notes
Technology Stack
Section titled “Technology Stack”- CSS Architecture: BEM naming convention
- Email Service: Resend API
- Fonts: Inter (UI/Body), Geist (Headers)
- Icons: Lucide (MIT licensed)
File Structure
Section titled “File Structure”src/brands/gcore/├── routes.js (API endpoints)└── views/ ├── index.ejs (Landing) ├── about.ejs ├── contact.ejs ├── docs.ejs └── ...API Endpoints
Section titled “API Endpoints”POST /api/contact
Section titled “POST /api/contact”Submit contact form with email notification.
Payload:
{ "name": "User Name", "company": "Company Name", "subject": "Inquiry Subject", "message": "Message content"}Future Development
Section titled “Future Development”- React component library
- Storybook integration
- Figma design kit export
- NPM package publication
“Design systems don’t constrain creativity. They multiply it.”