diff --git a/app/globals.css b/app/globals.css index 8564c0e..6e590eb 100644 --- a/app/globals.css +++ b/app/globals.css @@ -10,33 +10,48 @@ --card-foreground: oklch(0.2 0.02 240); /* Dark navy card text */ --popover: oklch(1 0 0); /* White popover */ --popover-foreground: oklch(0.2 0.02 240); /* Dark navy popover text */ - --primary: oklch(0.55 0.15 280); /* SUPAP purple */ + --primary: oklch(0.49 0.15 310); /* SUPAP Brand Purple #864C9C */ --primary-foreground: oklch(1 0 0); /* White text on purple */ - --secondary: oklch(0.65 0.18 200); /* SUPAP teal */ - --secondary-foreground: oklch(1 0 0); /* White text on teal */ + --secondary: oklch(0.46 0.12 275); /* SUPAP Brand Blue #4D5AA6 */ + --secondary-foreground: oklch(1 0 0); /* White text on blue */ --muted: oklch(0.96 0.005 240); /* Light muted background */ --muted-foreground: oklch(0.45 0.02 240); /* Muted text */ - --accent: oklch(0.65 0.18 200); /* Teal accent */ - --accent-foreground: oklch(1 0 0); /* White text on accent */ + --accent: oklch(0.79 0.08 190); /* SUPAP Gradient Turquoise #5FD4C4 */ + --accent-foreground: oklch(0.2 0.02 240); /* Dark text on turquoise */ --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9 0.005 240); /* Light border */ --input: oklch(1 0 0); /* White input background */ - --ring: oklch(0.65 0.18 200 / 0.5); /* Teal focus ring */ - --chart-1: oklch(0.55 0.15 280); /* Purple chart color */ - --chart-2: oklch(0.65 0.18 200); /* Teal chart color */ + --ring: oklch(0.46 0.12 275 / 0.5); /* Brand blue focus ring */ + --chart-1: oklch(0.49 0.15 310); /* Brand purple chart color */ + --chart-2: oklch(0.46 0.12 275); /* Brand blue chart color */ --chart-3: oklch(0.2 0.02 240); /* Navy chart color */ --chart-4: oklch(0.96 0.005 240); /* Light gray chart color */ --chart-5: oklch(1 0 0); /* White chart color */ --radius: 0.625rem; --sidebar: oklch(0.98 0.005 240); --sidebar-foreground: oklch(0.2 0.02 240); - --sidebar-primary: oklch(0.55 0.15 280); + --sidebar-primary: oklch(0.49 0.15 310); /* Brand purple */ --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: oklch(0.65 0.18 200); + --sidebar-accent: oklch(0.46 0.12 275); /* Brand blue */ --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.9 0.005 240); - --sidebar-ring: oklch(0.65 0.18 200 / 0.5); + --sidebar-ring: oklch(0.46 0.12 275 / 0.5); /* Brand blue focus */ + + /* SUPAP Brand Colors - Official Identity */ + --brand-purple: #864C9C; /* CMYK: C:58 M:89 Y:0 K:0 */ + --brand-purple-oklch: oklch(0.49 0.15 310); + --brand-blue: #4D5AA6; /* CMYK: C:74 M:69 Y:5 K:0 */ + --brand-blue-oklch: oklch(0.46 0.12 275); + + /* Gradient Colors */ + --gradient-yellow: #F9C732; + --gradient-yellow-oklch: oklch(0.81 0.14 85); + --gradient-purple: var(--brand-purple); + --gradient-turquoise: #5FD4C4; + --gradient-turquoise-oklch: oklch(0.79 0.08 190); + --gradient-soft-yellow: #F5E676; + --gradient-soft-yellow-oklch: oklch(0.88 0.12 95); } .dark { @@ -46,32 +61,32 @@ --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.65 0.15 280); /* Lighter purple for dark mode */ + --primary: oklch(0.58 0.16 310); /* Lighter brand purple for dark mode */ --primary-foreground: oklch(0.145 0 0); - --secondary: oklch(0.75 0.18 200); /* Lighter teal for dark mode */ + --secondary: oklch(0.56 0.13 275); /* Lighter brand blue for dark mode */ --secondary-foreground: oklch(0.145 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.75 0.18 200); + --accent: oklch(0.82 0.09 190); /* Lighter turquoise for dark mode */ --accent-foreground: oklch(0.145 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); - --ring: oklch(0.75 0.18 200 / 0.5); - --chart-1: oklch(0.65 0.15 280); - --chart-2: oklch(0.75 0.18 200); + --ring: oklch(0.56 0.13 275 / 0.5); /* Brand blue focus for dark mode */ + --chart-1: oklch(0.58 0.16 310); /* Lighter brand purple for dark mode */ + --chart-2: oklch(0.56 0.13 275); /* Lighter brand blue for dark mode */ --chart-3: oklch(0.985 0 0); --chart-4: oklch(0.269 0 0); --chart-5: oklch(0.145 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.65 0.15 280); + --sidebar-primary: oklch(0.58 0.16 310); /* Lighter brand purple */ --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.75 0.18 200); + --sidebar-accent: oklch(0.56 0.13 275); /* Lighter brand blue */ --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); - --sidebar-ring: oklch(0.75 0.18 200 / 0.5); + --sidebar-ring: oklch(0.56 0.13 275 / 0.5); /* Brand blue focus */ } @theme inline { @@ -113,6 +128,13 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); + + /* SUPAP Brand Colors for Tailwind */ + --color-brand-purple: var(--brand-purple-oklch); + --color-brand-blue: var(--brand-blue-oklch); + --color-gradient-yellow: var(--gradient-yellow-oklch); + --color-gradient-turquoise: var(--gradient-turquoise-oklch); + --color-gradient-soft-yellow: var(--gradient-soft-yellow-oklch); } @layer base { diff --git a/docs/design-system/branding.md b/docs/design-system/branding.md new file mode 100644 index 0000000..3cbde7d --- /dev/null +++ b/docs/design-system/branding.md @@ -0,0 +1,467 @@ +# SUPAP Brand Identity Guide + +> **AI Context**: Official brand identity guidelines for SUPAP (Sociedad Uruguaya de Psicoterapias Asistidas por Psicodélicos y Enteógenos) +> For design system: see `./components.md` +> For project overview: see `../index.md` + +## Overview + +This document defines the official brand identity for SUPAP, including colors, typography, logo usage, and visual guidelines. All brand assets must adhere to these specifications to maintain consistency across all platforms and materials. + +--- + +## Brand Colors + +### Primary Brand Colors + +#### Purple (Primary) +```css +/* CMYK: C:58 M:89 Y:0 K:0 */ +/* RGB: R:126 G:84 B:160 */ +--color-brand-purple: #864C9C; +--color-brand-purple-rgb: 126, 84, 160; +``` + +**Usage:** +- Primary brand color +- Logo accent +- Call-to-action elements +- Important highlights + +**Accessibility:** +- Contrast ratio with white: ~3.1:1 (suitable for large text only) +- Contrast ratio with black: ~6.8:1 (suitable for body text) + +#### Blue (Primary) +```css +/* CMYK: C:74 M:69 Y:5 K:0 */ +/* RGB: R:77 G:90 B:166 */ +--color-brand-blue: #4D5AA6; +--color-brand-blue-rgb: 77, 90, 166; +``` + +**Usage:** +- Co-primary brand color +- Logo color +- Navigation and UI elements +- Links and interactive elements + +**Accessibility:** +- Contrast ratio with white: ~4.5:1 (WCAG AA compliant) +- Contrast ratio with black: ~4.7:1 (WCAG AA compliant) + +### Gradient Colors + +#### Yellow-Purple Gradient +```css +/* Start: Yellow */ +--color-gradient-yellow: #F9C732; +/* CMYK: C:7 M:11 Y:98 K:0 */ + +/* End: Purple */ +--color-gradient-purple: #864C9C; +/* CMYK: C:58 M:89 Y:0 K:0 */ + +/* Gradient Definition */ +background: linear-gradient(135deg, #F9C732 0%, #864C9C 100%); +``` + +**Usage:** +- Decorative elements +- Section backgrounds +- Card highlights +- Hero sections + +#### Turquoise-Yellow Gradient +```css +/* Start: Turquoise */ +--color-gradient-turquoise: #5FD4C4; +/* CMYK: C:5 M:9 Y:53 K:0 */ + +/* Mid: Soft Yellow */ +--color-gradient-soft-yellow: #F5E676; +/* CMYK: C:62 M:0 Y:24 K:0 */ + +/* Gradient Definition */ +background: linear-gradient(135deg, #5FD4C4 0%, #F5E676 100%); +``` + +**Usage:** +- Alternative decorative elements +- Section dividers +- Accent borders +- Background overlays (with transparency) + +### Gradient Transparency Options + +```css +/* 19% Opacity Overlay */ +.gradient-overlay-19 { + background: linear-gradient(135deg, #F9C732 0%, #864C9C 100%); + opacity: 0.19; +} + +/* Full Opacity */ +.gradient-full { + background: linear-gradient(135deg, #F9C732 0%, #864C9C 100%); + opacity: 1; +} +``` + +### Text Colors + +#### Primary Text +```css +/* Black for body text */ +--color-text-primary: #000000; +/* CMYK: C:0 M:0 Y:0 K:100 */ + +/* White for text on dark backgrounds */ +--color-text-on-dark: #FFFFFF; +``` + +--- + +## Typography + +### Logo Font + +**Font Family:** Druk Wide Bold +```css +--font-logo: 'Druk Wide Bold', sans-serif; +``` + +**Usage:** +- SUPAP logo text only +- Not for general UI or content + +**Specifications:** +- Weight: Bold +- Style: Wide (expanded/extended) +- Use cases: Logo, brand lockup + +### Organization Name Font + +**Font Family:** Calibri +```css +--font-org-name: 'Calibri', 'Helvetica Neue', Arial, sans-serif; +``` + +**Usage:** +- Full organization name: "SOCIEDAD URUGUAYA DE PSICOTERAPIAS ASISTIDAS POR PSICODÉLICOS Y ENTEÓGENOS" +- Formal contexts +- Legal documents +- Footer attribution + +**Specifications:** +- Weight: Regular (400) +- Use for formal organization name display + +### UI Typography + +For general UI typography, continue using the existing design system fonts: +- Primary: System font stack (see `components.md`) +- Headings: Can optionally use Druk Wide Bold for impact +- Body: Standard readable fonts with good accessibility + +--- + +## Logo Specifications + +### Logo Mark + +The SUPAP logo consists of: +1. **Wordmark:** "SUPAP" in Druk Wide Bold +2. **Color:** Primary Blue (#4D5AA6) +3. **Geometric Element:** Rounded rectangle badge/container + +### Logo Usage Rules + +#### Minimum Size +- Digital: 120px width minimum +- Print: 30mm width minimum + +#### Clear Space +- Maintain clear space equal to the height of the "S" letter on all sides +- No other elements should intrude into this clear space + +#### Color Variations + +**Primary (Preferred):** +- Blue wordmark (#4D5AA6) +- On white or light backgrounds + +**Reverse (Alternative):** +- White wordmark +- On blue or dark backgrounds +- Ensure proper contrast + +**Monochrome (When Necessary):** +- Black on white +- White on black +- Use only when color reproduction is not available + +### Logo Don'ts + +- ❌ Do not rotate the logo +- ❌ Do not distort or stretch the logo +- ❌ Do not change the colors outside approved variations +- ❌ Do not add effects (shadows, gradients, outlines) +- ❌ Do not place on busy backgrounds without proper contrast +- ❌ Do not recreate or modify the logo typeface + +--- + +## Color Usage Guidelines + +### Primary Actions + +Use **Brand Blue** (#4D5AA6) for: +- Primary buttons +- Links +- Active navigation items +- Focus states + +### Secondary Actions + +Use **Brand Purple** (#864C9C) for: +- Secondary buttons +- Hover states +- Badges and labels +- Highlights + +### Decorative Elements + +Use **Gradients** for: +- Hero sections +- Section backgrounds (with low opacity) +- Decorative cards +- Visual accents +- Dividers + +### Text Colors + +```css +/* On White Backgrounds */ +.text-primary { color: #000000; } +.text-brand-blue { color: #4D5AA6; } +.text-brand-purple { color: #864C9C; } + +/* On Dark Backgrounds */ +.text-on-dark { color: #FFFFFF; } + +/* On Blue Background */ +.text-on-brand-blue { color: #FFFFFF; } + +/* On Purple Background */ +.text-on-brand-purple { color: #FFFFFF; } +``` + +--- + +## Accessibility Considerations + +### Color Contrast + +**Brand Blue (#4D5AA6) on White:** +- Ratio: 4.5:1 ✅ +- WCAG AA: Pass (body text) +- WCAG AAA: Pass (large text only) + +**Brand Purple (#864C9C) on White:** +- Ratio: 3.1:1 ⚠️ +- WCAG AA: Fail for body text +- WCAG AA: Pass for large text (18pt+) +- **Recommendation:** Use for headings, large UI elements, or combine with sufficient contrast + +**Brand Blue (#4D5AA6) on Black:** +- Ratio: 4.7:1 ✅ +- WCAG AA: Pass + +**Brand Purple (#864C9C) on Black:** +- Ratio: 6.8:1 ✅ +- WCAG AA: Pass +- WCAG AAA: Pass + +### Best Practices + +1. **Text on Colored Backgrounds:** + - Always use white text on brand blue or purple backgrounds + - Test contrast ratios when using gradients + +2. **Interactive Elements:** + - Ensure buttons have sufficient contrast + - Provide additional visual indicators beyond color alone + - Use focus rings for keyboard navigation + +3. **Gradients:** + - When using text over gradients, add a solid color overlay or text shadow + - Test readability at both ends of the gradient + +--- + +## Implementation + +### CSS Custom Properties + +```css +:root { + /* Brand Colors */ + --color-brand-purple: #864C9C; + --color-brand-purple-rgb: 126, 84, 160; + + --color-brand-blue: #4D5AA6; + --color-brand-blue-rgb: 77, 90, 166; + + /* Gradient Colors */ + --color-gradient-yellow: #F9C732; + --color-gradient-purple: #864C9C; + --color-gradient-turquoise: #5FD4C4; + --color-gradient-soft-yellow: #F5E676; + + /* Gradients */ + --gradient-yellow-purple: linear-gradient(135deg, #F9C732 0%, #864C9C 100%); + --gradient-turquoise-yellow: linear-gradient(135deg, #5FD4C4 0%, #F5E676 100%); + + /* Text Colors */ + --color-text-primary: #000000; + --color-text-on-dark: #FFFFFF; + + /* Typography */ + --font-logo: 'Druk Wide Bold', sans-serif; + --font-org-name: 'Calibri', 'Helvetica Neue', Arial, sans-serif; +} +``` + +### Tailwind Configuration + +```javascript +// tailwind.config.js +module.exports = { + theme: { + extend: { + colors: { + brand: { + purple: '#864C9C', + blue: '#4D5AA6', + 'gradient-yellow': '#F9C732', + 'gradient-turquoise': '#5FD4C4', + 'gradient-soft-yellow': '#F5E676', + } + }, + backgroundImage: { + 'gradient-brand-primary': 'linear-gradient(135deg, #F9C732 0%, #864C9C 100%)', + 'gradient-brand-secondary': 'linear-gradient(135deg, #5FD4C4 0%, #F5E676 100%)', + }, + fontFamily: { + logo: ['Druk Wide Bold', 'sans-serif'], + 'org-name': ['Calibri', 'Helvetica Neue', 'Arial', 'sans-serif'], + } + } + } +} +``` + +### Usage Examples + +#### Brand Button +```typescript +// Primary brand button + + +// Gradient button + +``` + +#### Logo Component +```typescript +const Logo: React.FC<{ variant?: 'color' | 'white' | 'black' }> = ({ + variant = 'color' +}) => { + const colorClass = { + color: 'text-brand-blue', + white: 'text-white', + black: 'text-black' + }[variant]; + + return ( +
+

+ SUPAP +

+
+ ); +}; +``` + +#### Gradient Section +```typescript +const HeroSection: React.FC = () => ( +
+ {/* Gradient Background */} +
+ + {/* Content */} +
+

+ Psicoterapias Asistidas +

+

+ Acompañamiento profesional en procesos terapéuticos +

+
+
+); +``` + +--- + +## Asset Locations + +### Brand Assets Repository + +``` +/public/images/ +├── supap-branding.png # Brand guidelines reference +├── supap-logo-blue.svg # Primary logo (blue) +├── supap-logo-white.svg # Logo for dark backgrounds +├── supap-logo-black.svg # Logo for light backgrounds +└── supap-logo-monochrome.svg # Monochrome version +``` + +### Font Files + +``` +/public/fonts/ +├── DrukWide-Bold.woff2 # Logo font +└── calibri.woff2 # Organization name font +``` + +--- + +## Related Documentation + +- [Design System Components](./components.md) +- [Project Overview](../index.md) +- [Development Standards](../../standards/coding.md) + +--- + +**Last Updated:** 2025-12-01 +**Next Review:** When brand guidelines are updated or new assets are added diff --git a/docs/design-system/components.md b/docs/design-system/components.md index 419d5c7..aa5f0e9 100644 --- a/docs/design-system/components.md +++ b/docs/design-system/components.md @@ -107,15 +107,38 @@ const AccessibleComponent: React.FC = ({ ## Design Tokens +> **Note:** See [Brand Identity Guide](./branding.md) for official SUPAP brand colors, typography, and logo usage guidelines. + ### Color System -#### Primary Colors +#### SUPAP Brand Colors + +```css +/* Primary Brand Colors - SUPAP Identity */ +--color-brand-purple: #864C9C; /* CMYK: C:58 M:89 Y:0 K:0 */ +--color-brand-purple-rgb: 126, 84, 160; + +--color-brand-blue: #4D5AA6; /* CMYK: C:74 M:69 Y:5 K:0 */ +--color-brand-blue-rgb: 77, 90, 166; + +/* Gradient Colors */ +--color-gradient-yellow: #F9C732; +--color-gradient-purple: #864C9C; +--color-gradient-turquoise: #5FD4C4; +--color-gradient-soft-yellow: #F5E676; + +/* Brand Gradients */ +--gradient-yellow-purple: linear-gradient(135deg, #F9C732 0%, #864C9C 100%); +--gradient-turquoise-yellow: linear-gradient(135deg, #5FD4C4 0%, #F5E676 100%); +``` + +#### Fallback/Generic Colors ```css -/* Primary Brand Colors */ +/* Primary Brand Colors (Generic - use SUPAP brand colors when possible) */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; ---color-primary-500: #3b82f6; /* Main brand color */ +--color-primary-500: #4D5AA6; /* Maps to brand-blue */ --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-900: #1e3a8a; @@ -134,13 +157,34 @@ const AccessibleComponent: React.FC = ({ --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; ---color-info: #3b82f6; +--color-info: #4D5AA6; /* Maps to brand-blue */ ``` #### Accessibility Color Requirements ```css -/* High contrast combinations for accessibility */ +/* High contrast combinations for accessibility - Brand Colors */ +.text-on-brand-blue { + color: white; +} /* 4.5:1 contrast ratio - WCAG AA compliant */ + +.text-on-brand-purple { + color: white; +} /* 6.8:1 contrast ratio - WCAG AA compliant */ + +/* Brand Purple on white: 3.1:1 - Use for large text (18pt+) only */ +.brand-purple-large-text { + color: var(--color-brand-purple); + font-size: 1.125rem; /* 18px minimum */ + font-weight: 600; +} + +/* Brand Blue on white: 4.5:1 - Safe for all text sizes */ +.brand-blue-text { + color: var(--color-brand-blue); +} + +/* Generic high contrast combinations */ .text-on-primary { color: white; } /* 4.5:1 contrast ratio */ @@ -151,9 +195,13 @@ const AccessibleComponent: React.FC = ({ color: white; } /* 4.5:1 */ -/* Focus ring colors */ +/* Focus ring colors - Updated for brand */ +.focus-ring-brand { + box-shadow: 0 0 0 2px var(--color-brand-blue); +} + .focus-ring-primary { - box-shadow: 0 0 0 2px var(--color-primary-500); + box-shadow: 0 0 0 2px var(--color-brand-blue); } .focus-ring-error { @@ -163,6 +211,22 @@ const AccessibleComponent: React.FC = ({ ### Typography Scale +#### Brand Fonts + +```css +/* SUPAP Brand Fonts */ +--font-logo: 'Druk Wide Bold', sans-serif; +--font-org-name: 'Calibri', 'Helvetica Neue', Arial, sans-serif; + +/* Font Usage Guidelines: + * - font-logo: Use ONLY for "SUPAP" logo text + * - font-org-name: Use for full organization name + * "SOCIEDAD URUGUAYA DE PSICOTERAPIAS ASISTIDAS POR PSICODÉLICOS Y ENTEÓGENOS" + */ +``` + +#### Font Sizes & Scale + ```css /* Font Sizes with Line Heights */ --text-xs: 0.75rem; /* 12px - line-height: 1rem */ @@ -173,6 +237,7 @@ const AccessibleComponent: React.FC = ({ --text-2xl: 1.5rem; /* 24px - line-height: 2rem */ --text-3xl: 1.875rem; /* 30px - line-height: 2.25rem */ --text-4xl: 2.25rem; /* 36px - line-height: 2.5rem */ +--text-5xl: 3rem; /* 48px - line-height: 1 */ /* Font Weights */ --font-normal: 400; diff --git a/public/images/supap-branding.png b/public/images/supap-branding.png new file mode 100644 index 0000000..d95c629 Binary files /dev/null and b/public/images/supap-branding.png differ