# SaludAware Design System > *Conciencia sobre la salud y el bienestar.* SaludAware is a medical clinic in Puerto Rico — *medicina integral, general, preventiva y servicios estéticos*. The brand promise is **preventive, precise, predictive, personalized, participatory medicine**, with telemedicine as a first-class channel. The visual identity is intentionally **minimalist, modern, calm, and decidedly NOT corporate-medical**. Branding by **Booom.** (Puerto Rico) — Brand Guidelines v1, 2025. --- ## Brand identity | | | |---|---| | **Concept** | A clinical center focused on integral, general, preventive medicine and aesthetic services. The brand exists to *create awareness about health and wellbeing.* | | **Attributes** | Moderna · Cercana · Minimalista · Diferente | | **Archetype** | Innocent 40% · Explorer 30% · Caregiver 30% | | **Personality** | Pureness, simplicity, positivity. Always seeking a good relationship with people — caring for them, generating wellbeing. | | **Tagline #1** | "¡Tu salud es nuestro propósito!" | | **Tagline #2** | "Estamos contigo, para que puedas vivir plena y libremente." | --- ## Sources & provenance This system was built from the following uploaded materials. All originals remain in `uploads/` (read-only); curated copies live in `assets/` and `fonts/`. - `uploads/brand guidelines SALUDAWARE.pdf` — 28-page master brand book (definitive) - `uploads/Saludaware-Master Graphics.pdf` — applied graphics / mockups - `uploads/Logo saludaware V1–V3.png` + `iso V1–V5` — logotype & isotipo (monogram) - `uploads/Recurso 1–48.png` — full custom icon set (48 line icons, Light-Green stroke) - `uploads/Sello 1–3.png` — circular & oval brand seals - `uploads/patron halftone 1–3.png` — halftone wave patterns (background motifs) - `uploads/Megidana.otf` — display typeface *(personal-use only — see Caveats)* - Reference site supplied by client: --- ## Content fundamentals **Language: Spanish (Puerto Rico).** Some bilingual flourishes are intentional — the logo reads `SaludAware / MEDICAL CLINIC`, mixing Spanish and English. Don't translate this; it's part of the mark. **Voice.** Warm, second-person plural (`tú`, never `usted`). Sentences are short, often a single declarative line. Tone is reassuring and human — *cercana* (close, familiar) — without being chirpy or sales-y. Avoid clinical jargon; explain in plain terms. **Casing.** Headlines are written in **sentence case with mixed altas y bajas** ("¡Donde todo comienza!") — never SCREAMING ALL-CAPS, even in display. Eyebrows and micro-labels (e.g. *MEDICAL CLINIC*) use generous letter-spaced uppercase but stay small. **Punctuation.** Spanish inverted opening marks are *always* respected: `¡…!` and `¿…?`. Em-dashes (`—`) for asides. Periods on declarative one-liners are optional — many headlines end without a period for breath. **I/we vs you.** "Estamos contigo" (we are with you). The clinic positions itself as a partner, never above the patient. Use `nosotros` for the practice, `tú` for the reader. Avoid "el paciente" — say "tú" or "tu salud". **Emoji.** ❌ Never. Not in marketing, not in product, not in copy. Use the brand icon set instead. **Numbers & medical terms.** Spell out small numbers ("cinco años de experiencia"). Use real medical terminology when accurate but always pair with a plain-language explanation. Never use fear-based copy ("¡cuidado!", "peligro"). ### Example copy (recovered from brand book) > ¡Tu salud es nuestro propósito! ¡Donde todo comienza! > Estamos contigo, para que puedas vivir plena y libremente. > Medicina preventiva, de precisión, predictiva, personalizada y participativa. > Conciencia sobre la salud y el bienestar. --- ## Visual foundations ### Color A 4-color palette. The discipline of using *only* these four colors is the brand. Resist adding accents. | Token | Hex | RGB | Role | |---|---|---|---| | `--sa-green` | `#29605B` | 41, 96, 91 | Primary. Headlines, CTAs, monogram. | | `--sa-green-light` | `#CDDEBE` | 205, 222, 190 | Soft accent. Icon strokes, wash backgrounds, seal interiors. | | `--sa-ink` | `#162023` | 22, 32, 35 | Body text, dark surfaces, footers. | | `--sa-cream` | `#F4F9F9` | 244, 249, 249 | Page background. Bright & airy. | A gradient (Green → Light Green) is permitted *sparingly* for hero backgrounds and the SA isotipo decoration. **No other hues exist in the brand.** No reds, no yellows, no purples. ### Typography - **Display — Megidana.** An elegant art-deco-flavoured display serif with high stroke contrast and distinctive ligature-like joins. Used for headlines and the wordmark itself. Always in mixed case (altas y bajas). - **Body — Nohemi.** A modern geometric grotesque (commercial — Pangram Pangram). Substituted with **Manrope** (Google Fonts) in this system. Wide weight range; we use 300/400/500/600 most. ### Backgrounds - **Default:** flat cream (`#F4F9F9`). Quiet. Lots of whitespace. - **Soft-tint variant:** wash of `--sa-green` at ~6% opacity behind imagery or testimonial blocks. - **Halftone wave overlays:** the `patron halftone` PNGs (1, 2, 3) are the brand's signature background motif — overlay them at 40–80% opacity behind full-bleed photography or as the *single* graphic on otherwise empty hero panels. **No other patterns are allowed.** - **Photography:** warm-temperature, claroscuros (chiaroscuro), shallow-DOF, interior spaces, real patients & staff. Backgrounds preferably blurred. Skin tones natural, never over-saturated. ### Animation - Calm, expo-out, no bounces. Default `--dur-base: 260ms`, `--ease-out: cubic-bezier(0.16, 1, 0.3, 1)`. - Fades and slow vertical fade-ups (12–16px) for entrances. Never spring/bounce. Never elastic. - Halftone patterns may drift very slowly (8–12s loop) — almost imperceptible. - Hover on links: `opacity: 0.7` over 160ms. Buttons: lift by 1px + shadow darken slightly. No color shifts unless the button has a fill state. ### Borders, shadows & cards - Borders are hairline (`1px solid var(--border)` ≈ very light gray). Strong borders only on focused inputs. - Shadows are *soft and ambient*, never harsh. Use `--shadow-sm` for resting cards, `--shadow-md` on hover. The brand prefers borders + flat surfaces over heavy shadows. - Cards: `--r-lg` (20px) radius, white surface, hairline border, optional `--shadow-sm`. - Hero "panels" use `--r-2xl` (40px) for a softer, more editorial feel. ### Corner radii The system runs **medium-to-large radii** — never sharp 0-px corners, never fully-rounded pills unless it's a tag or badge. - Buttons: `--r-pill` (999px) — fully rounded. - Inputs: `--r-md` (14px). - Cards: `--r-lg` (20px). - Hero/image panels: `--r-2xl` (40px). - The brand seals (`sello-2`) use an **organic blob radius** — non-uniform corners suggesting a hand-cut sticker. ### Transparency & blur - The Light Green isotipo is often shown as a watermark at 30–40% opacity behind the wordmark or as a *gigantic* decorative element bleeding off the page. - Backdrop blur is reserved for image overlays (e.g. legibility scrims on hero photography) — `backdrop-filter: blur(12px)` over a `rgba(22, 32, 35, 0.4)` scrim. ### Layout rules - Generous whitespace; the brand is built around breathing room. Never crowd. - Asymmetric layouts are encouraged — display heading on left, support text right-aligned below. - Sections often anchor a single oversized monogram or seal off-canvas as decoration. - 12-column grid, 1200px max content width, 4vw side gutter. - Stack vertically below 720px; never compress horizontally. ### Hover & press states - Primary button hover: shift to `--sa-green-700` + `transform: translateY(-1px)` + shadow strengthens. - Primary button active: `translateY(0)` + shadow reduces. No scale shrink. - Icon-only buttons: background fades to `--sa-green-light` at 0.4 opacity on hover. - Cards: `--shadow-sm` → `--shadow-md` on hover, optional `translateY(-2px)`. ### Imagery - Mostly photography of people, interiors, hands, plants. Warm-claroscuro grading. - Used full-bleed inside large radius containers (`--r-2xl`). - The halftone wave is the only *graphic* texture. No gradients besides the brand green→light-green linear. --- ## Iconography The brand ships its **own bespoke icon set** — 48 custom outline icons in `assets/icons/icon-01.png` … `icon-48.png` (renamed where the meaning is obvious: `icon-syringe`, `icon-nutrition`, `icon-shield`, `icon-brain`, `icon-search`, `icon-location`, `icon-telemedicine`, `icon-target`). **Use these first.** Do not substitute with Lucide / Heroicons / Phosphor unless the concept truly does not exist in the set — and even then, match the stroke style. Style characteristics: - **Outline only.** No filled shapes. - **Light Green** (`#CDDEBE`) is the default stroke color. - **Rounded line caps & joins.** No sharp angles. - **Consistent ~6% stroke width** (relative to icon size). - **Square aspect**, generous interior whitespace. For UI work, icons can be tinted to `--sa-green` (primary) or `--sa-ink` (small inline) by applying a CSS `filter` to the PNG, or — preferred — re-exporting as a monochrome SVG and using `currentColor`. We've kept them as PNG to preserve fidelity. **Emoji: never.** **Unicode symbols (✓, →, ★): only inline within copy**, never as a standalone icon. --- ## Index — what's in this project ``` / ├── README.md ← you are here ├── SKILL.md ← Agent Skills entry-point (cross-compatible) ├── colors_and_type.css ← CSS variables: colors, type scale, spacing, motion ├── fonts/ │ └── Megidana.otf ← display font (personal-use license only) ├── assets/ │ ├── logo-saludaware-*.png ← full wordmark in 3 colorways │ ├── iso-saludaware-*.png ← SA monogram in 5 colorways │ ├── sello-1.png / 2 / 3 ← brand seals │ ├── halftone-1.png / 2 / 3 ← background wave patterns │ └── icons/ ← 48 brand outline icons ├── preview/ ← Design System tab cards (auto-registered) └── ui_kits/ └── web/ ← Saludaware marketing website kit ├── index.html ← full hi-fi homepage ├── README.md └── *.jsx ← per-section React components ``` ## Caveats — please review 1. **Megidana is licensed for personal use only.** The included `.otf` is intended for internal reference. Purchase a commercial license at before production. The CSS falls back to **Italiana** (Google Fonts) as the nearest free substitute. 2. **Nohemi is a commercial typeface** (Pangram Pangram). We substitute **Manrope** (Google Fonts) — a close geometric-grotesque match. Swap when the license is acquired. 3. Some `Recurso` icons are named generically (`icon-11`, `icon-22`, etc.) where the subject wasn't unambiguous from the artwork alone. The user can rename them anytime. 4. No code/Figma source was attached — the UI kit is built fresh from the brand book + iconography, with the Vital Essence reference informing layout sensibility (calm, image-led, single-column reading lanes).