Template

Files

Felipe Cardoso a410586cfb Enable demo mode features, auto-fill demo credentials, and enhance branding integration

- Added `DEMO_MODE` to backend configuration with relaxed security support for specific demo accounts.
- Updated password validators to allow predefined weak passwords in demo mode.
- Auto-fill login forms with demo credentials via query parameters for improved demo accessibility.
- Introduced demo user creation logic during database initialization if `DEMO_MODE` is enabled.
- Replaced `img` tags with `next/image` for consistent and optimized visuals in branding elements.
- Refined footer, header, and layout components to incorporate improved logo handling.

2025-11-21 07:42:40 +01:00

2.1 KiB

Raw Blame History

Visual Identity

Logo & Iconography

Logo

The PragmaStack logo represents the core values of the project: structure, speed, and clarity.

The Stack: Geometric layers representing the full-stack architecture.

Icon

For smaller contexts (favicons, headers), we use the simplified icon:

For now, we use the Lucide React icon set for all iconography. Icons should be used sparingly and meaningfully to enhance understanding, not just for decoration.

Color Palette

Our color palette is derived from the Modern Minimal theme using the OKLCH color space for perceptual uniformity.

Primary Colors

Primary Blue: oklch(0.6231 0.188 259.8145) - Used for main actions, branding elements, and active states.
Background: oklch(1 0 0) (Light) / oklch(0.2046 0 0) (Dark) - Clean, neutral backgrounds.

Usage Guidelines

Dominant: Neutral backgrounds and text (Foreground, Card, Muted).
Accent: Primary Blue for calls to action.
Functional: Destructive Red for errors, Success Green (custom) for success states.

Note

For the full technical specification of color tokens, refer to the Design System Foundations.

Typography

We use Geist Sans for headings and body text, and Geist Mono for code.

Type Hierarchy

Headings: Bold, tight tracking.
Body: Regular weight, comfortable reading line height.
Code: Monospaced, slightly smaller than body text.

Note

For the full typography scale and usage, refer to the Design System Foundations.

Imagery & Graphics

Style: Clean, modern, minimal.
Screenshots: Use consistent padding and shadows (refer to shadow-lg or shadow-xl).
Illustrations: Avoid generic stock photos. Use abstract geometric shapes or high-quality interface representations.

2.1 KiB Raw Blame History