adhere — Brand Kit v1.0

01 — Logo + Wordmark

Primary — Full Colour · Light bg

Reversed — Primary Blue bg

Reversed — Navy bg

Horizontal variant — tight-height layouts (navbars, footers, compact headers)

Horizontal — Light bg

Horizontal — Primary Blue bg

Horizontal — Navy bg

512px

192px

Favicon

The logo is the split-capsule mark + adhere wordmark — always used together. The capsule consists of two solid blue halves (identical color) separated by a white gap, signaling medication adherence at a glance.

The app icon is a square white-background crop of the full logo (mark + wordmark). Favicon uses the capsule mark only at 32px — the wordmark is not legible below 40px.

02 — Color Palette

Primary Blue

#2563EB

Primary — Brand identity, app icon, CTA buttons

Clinical Navy

#0D3B6E

Support — Deep backgrounds, dark text, nav

Health Teal

#00B894

Accent — Actions, adherence, positive states

Alert Pink

#E84393

Signal only — Reminders, missed doses, alerts

Ink

#1A1A2E

Body text, primary content

Background

#F8FAFB

App background, document paper

Navy 10% — Layer backgrounds

Teal 10% — Success states

Pink 10% — Alert backgrounds

#6B7280 — Supporting text

#E5E7EB — Borders, dividers

Solid Buttons — White label + icon

All solid-color buttons use white (#FFFFFF) label + icon. Background (#F8FAFB) and tint variants (10%) are not approved for solid buttons — use outlined or ghost style instead.

Tint Stacks

Primary Blue

50

100

200

300

400

500

600

700

800

900

Clinical Navy

50

100

200

300

400

500

600

700

800

900

Health Teal

50

100

200

300

400

500

600

700

800

900

Alert Pink

50

100

200

300

400

500

600

700

800

900

Semantic Color System — Canonical · Locked 2026-06-12

Every dose-state, alert, and status indicator in the app uses exactly these 7 tokens. Never use hardcoded hex for semantic state — always reference the CSS custom property.

TAKEN

#22C55E

bg #DCFCE7

Toma realizada · Entregado

DUE

#F59E0B

bg #FEF3C7

Toma pendiente · Pronto vence

MISSED

#EF4444

bg #FEE2E2

Omitido · Vencido · Error

SKIP

#6B7280

bg #E5E7EB

Omitido voluntariamente

PRIMARY

#2563EB

bg #EFF6FF

Programado · Brand · Accion

PURPLE

#A855F7

bg #F3E8FF

Citas · Importante · Futuro

TEAL

#00B894

bg #ECFDF5

Signos vitales · Salud

CSS Custom Property Reference

Token	Solid	Background tint	Dark text	Use case
`--c-taken`	#22C55E	`--c-taken-bg` #DCFCE7	`--c-taken-text` #15803D	Dose confirmed · Delivered · Success state
`--c-due`	#F59E0B	`--c-due-bg` #FEF3C7	`--c-due-text` #B45309	Pending dose · Approaching expiry · Warning
`--c-missed`	#EF4444	`--c-missed-bg` #FEE2E2	`--c-missed-text` #B91C1C	Overdue dose · Error · Delete action · Form error
`--c-skip`	#6B7280	`--c-skip-bg` #E5E7EB	`--c-skip-text` #374151	Skipped dose · Inactive · Neutral / secondary action
`--c-primary`	#2563EB	`--c-primary-bg` #EFF6FF	`--c-primary-r` #1D4ED8	Scheduled dose · Brand identity · All primary CTAs
`--c-purple`	#A855F7	`--c-purple-bg` #F3E8FF	`--c-purple-text` #7C3AED	Citas medicas · Importante · Future roles
`--c-teal`	#00B894	`--c-teal-bg` #ECFDF5	`--c-teal-text` #065F46	Signos vitales section identity · Health metrics

Rule: every state-color usage in TSX or CSS must reference a var(--c-*) token. Never use a hardcoded semantic hex value.

03 — Typography

Sora — Display + Headings

Every dose,
on time.

H1 / 800 Prescription Platform

H2 / 700 Module Dashboard

H3 / 600 Dispensary Collection

Label / 700 Section Label

Inter — Body + UI

Your medication has been sorted, packed, and is on its way. Lucia confirms delivery within 48 hours, with real-time adherence data sent to your physician.

Body / 400 Regular body text 15px

Small / 400 Secondary content 13px

Caption / 400 Metadata, dates, labels 11px

Strong / 600 Emphasis within body

Office fallbacks: Segoe UI (body) · Century Gothic (headings) · Georgia (long-form) — for Word, PowerPoint, Excel, and email. Never Calibri.

04 — Brand Voice

Brand Line

"Every dose, on time. Every outcome, measured."

Write Like This

Clear, clinical, calm — never alarming

Specific — name the drug, the dose, the time

Empowering — the patient is in control

Data-backed — every claim supported

Direct to the investor or the patient — no fluff

Spanish-first for Colombian patients; English for investors

Not Like This

Emojis anywhere on platform or documents

Fear-based language about missed doses

Medical advice or diagnostic language

Startup buzzwords (disruptive, revolutionary, game-changing)

Vague impact claims without data

Any reference to Salma Salud or PillPack by name

05 — Usage Rules

Patient Layer (Layer 1)

Teal dominant. Health Teal for CTAs, confirmation states, active dose. Alert Pink for missed doses only. Navy for nav and headers. Warm, approachable tone.

Operations Layer (Layer 2)

Navy dominant. Clinical, efficient. Teal for positive status (packed, delivered, confirmed). Pink for exception states (QC fail, delivery incomplete). Data-dense layout.

Admin Layer (Layer 3)

Navy + white. Dashboard-style. Teal for KPI positive direction. Pink for alerts and threshold breaches. Maximum data density. Investor-presentable aesthetics.

Investor Documents

Navy headers, white backgrounds, teal for data highlights and key differentiators. Sora for all headings. No gradients. No drop shadows. One chart style throughout.

Legal / Regulatory Docs

Minimal branding. adhere wordmark top-left, document number top-right. Black body text. Navy for section headers only. Compliant with INVIMA document standards.

Prohibited

Do not use Ancalofa, ClanStream, or CepaLabs brand elements on adhere documents. This is an independent product brand. No mixing of parent company visual identity.

06 — Shadow & Elevation System

Four elevation levels. Use the lowest level that creates sufficient separation. Never stack shadows or mix levels on the same element.

Level 0 — Flat

box-shadow: none

Inline elements, disabled states, items already on a surface. No visual lift needed.

Level 1 — Raised

0 1px 4px rgba(0,0,0,0.06)

Cards, list items, input fields. Default surface elevation. Use on .card and .dose-card.

Level 2 — Floating

0 4px 16px rgba(0,0,0,0.10)

Dropdowns, tooltips, FAB. Elements that float above the page content without blocking it.

Level 3 — Overlay

0 8px 32px rgba(0,0,0,0.14)

Modals, bottom sheets, dialogs. Demands full attention. Always paired with a backdrop overlay.

Primary Button Shadow

0 4px 16px rgba(37,99,235,0.30)

Primary CTA buttons only. Tinted blue shadow reinforces brand identity. Never use on secondary or ghost buttons.

FAB Shadow

0 4px 14px rgba(37,99,235,0.45)

Floating Action Button only. Higher opacity than CTA — FAB must read as pressable against any background color.

Rules

Do: Use Level 1 on all .card components by default

Don't: Add shadow to elements already inside a card

Do: Use tinted blue shadow on primary CTA buttons only

Don't: Use black/gray shadow on blue buttons

Do: Transition shadow on hover: Level 1 → Level 2 (150ms ease-out)

Don't: Apply shadow to text elements, icons, or SVGs

Do: Pair Level 3 (modal) with rgba(0,0,0,0.4) backdrop

Don't: Stack shadows or use inset shadows in the app UI

07 — Iconography

All icons from Lucide React. Stroke-width 2–2.5. Never filled. Size: 20px UI · 16px inline · 24px headers.

Navigation (Bottom Nav — 4 tabs)

Hoy

Clock

Medicamentos

Pill

Historial

BarChart3

Perfil

User

Medicamentos — Icon Options

ACTIVE — IN APP

Lucide Pill

Diagonal capsule
with score line

Brand Pill

Horizontal oval
matches brand mark

LayoutGrid

Prescription grid
catalog view

Option A is canonical — consistent with the live app bottom nav. Option B available for brand mark contexts. Option C reserved for catalog/list views if distinction is needed.

Semantic Icons

Tomado

CheckCircle2

Omitido

XCircle

Pendiente

AlertCircle

Medicamento

Pill

Adherencia

BarChart3

Alerta

Bell

Horario

Clock

Entrega

MapPin

Seguridad

Lock

Agregar

Plus

Atras

ChevronLeft

Buscar

Search

16px — Inline text, badges, compact chips

20px — Buttons, form controls, list items

24px — Section headers, nav tabs, FABs

Stroke 2px — Default · Stroke 2.5px — Emphasis

Never filled — Stroke-only always

08 — Component Library

Canvas + Vertex agreed spec · All components use CSS design tokens from globals.css · Lucide React icons · Plus Jakarta Sans

01 — Buttons

Primary

Primary:hover

Disabled

Secondary

Outlined

Ghost

Danger

Success

36px · sm

44px · md

52px · lg

Icon-only

Full width

Loading

02 — Segmented Buttons + Filters

Segmented (adherence report)

Filter pills

03 — Form Controls

Default

Input — default

Focus

Input — focus

Error

Este campo es requerido

Input — error

Select

Select dropdown

Unchecked Checked Disabled

Checkbox

Unselected Selected

Radio

Off

On

Toggle

Search input

04 — Navigation

Bottom navigation (mobile)

Hoy

Medicamentos

Historial

Perfil

Tabs

Activos

Inactivos

Archivados

Contenido del tab activo

Breadcrumbs

Prescripciones Metformina Dosis del día

05 — Badges, Chips + Flags

Tomado

Success

Pendiente

Warning

Omitido

Error

Info

Inactivo

Neutral

3

Count badge

Dot alert

Metformina

Chip default

Seleccionado

Chip selected

Filtro

Chip dismissible

Stock bajo

Flag

Vencido

Flag critical

06 — Cards

08:00

Mañana

Metformina

500mg · 1 tableta

Adherencia 30d

88%

+3% vs. mes anterior

Enalapril

10mg · Oral

Activo

2 dosis/día · 8:00 y 20:00

Inventario

26 tabletas restantes

07 — Alert Banners

Dosis registrada

Metformina 500mg tomada a las 08:03.

Stock bajo

Quedan 5 tabletas de Enalapril. Reabastecer pronto.

Lote vencido

Lot #A-4421 venció el 2026-05-31. Retirar inmediatamente.

Recordatorio

Tu próxima dosis es a las 20:00 — Enalapril 10mg.

08 — Modals + Bottom Sheets

Confirmar dosis

Vas a registrar Metformina 500mg como tomada a las 08:03. Esta acción puede deshacerse en 5 segundos.

Omitir dosis

Motivo (opcional)

09 — Progress + Loading States

Adherencia hoy3/4

Linear — 75%

Complete — success

Skeleton loader

Spinner

10 — Stepper

1

3

4

DatosHorarioInventarioConfirmar

11 — User Avatars

CM

Initials · md

RV

Initials · sm

EF

Initials · lg

Online dot

12 — Tooltips

Registrar como tomado

MIPRES disponible para este medicamento

13 — Expansion Panels

Metformina 500mg

Frecuencia: 2 veces/día · Horario: 08:00, 20:00
Inventario: 26 tabletas · Lote: MET-2026-A

Enalapril 10mg

14 — Grid + Spacing System

Spacing scale (base 4px)

Breakpoints

        xs · <480px · Mobile only
        sm · 480–640px · Large mobile
        md · 640–768px · Tablet
        lg · 768–1024px · Desktop
        xl · >1024px · Wide
      

Max content width: 640px (mobile-first app) · 1100px (web dashboard)
Page padding: 20px mobile · 40px tablet+ · 80px desktop
Touch targets: min 44×44px always · 48px preferred
Bottom nav height: 64px · safe-area-inset-bottom on iOS

15 — UI Shells

Mobile App Shell (PWA)

Hoy

Web App Shell (Admin/Dashboard)

adhere

DashboardPacientesReportes

EF

Dashboard

Pacientes

Reportes

Inventario

88%

Adherencia

142

Dosis hoy

09 — Motion & Animation

Motion is purposeful, not decorative. Every animation must reduce cognitive friction or confirm an action. Always respect prefers-reduced-motion.

Easing Tokens

ease-out (entrance)

cubic-bezier(0.0, 0.0, 0.2, 1)

Content appearing, cards loading, sheets sliding in. Fast start, gentle deceleration.

ease-in (exit)

cubic-bezier(0.4, 0.0, 1, 1)

Content disappearing, sheets dismissing, overlays closing. Slow start, fast exit.

ease-in-out (transition)

cubic-bezier(0.4, 0.0, 0.2, 1)

State changes between two visible states (toggle on/off, tab switch, color transition).

spring (confirmation)

cubic-bezier(0.34, 1.56, 0.64, 1)

Success moments only: dose confirmed, checkbox checked. Slight overshoot creates satisfaction. Never use on navigation.

Duration Scale

Token	Value	Use case
--dur-micro	120ms	Button tap feedback, icon swap, checkbox toggle
--dur-fast	200ms	Hover states, FAB item appearance, simple transitions
--dur-base	250ms	Card state changes (pending → taken), color transitions
--dur-slow	350ms	Bottom sheet entrance/exit, page-level transitions
--dur-stagger	50–80ms	Delay between sibling elements in a list (50ms dose cards, 60–80ms FAB items)

Micro-Interaction Specs

01 — Dose Confirmation (Tomado)

The most important interaction in the app. Three layered steps:
Step 1 — Button tap (120ms spring): scale(1) → scale(1.07) → scale(1.0) on the Tomado button.
Step 2 — Card state (250ms ease-in-out): background transitions #fff → #DCFCE7, border #E2E8F0 → rgba(34,197,94,0.25).
Step 3 — Check icon (200ms spring): CheckCircle2 animates scale(0) → scale(1.1) → scale(1.0) with opacity 0→1.

02 — FAB Action Sheet Stagger

Each FAB action item animates independently: opacity 0→1 + translateY(12px→0), 200ms ease-out.
Delay: animation-delay: calc(var(--i) * 60ms) where --i is 0–3 per item.
Bottom item (index 0) appears first — reads naturally bottom-to-top for thumb reach. Use animation-fill-mode: both to avoid flash-of-visible-content.

03 — Dose Card First-Load Reveal

Triggered once when loading transitions true → false. Gated by useRef(false) — never fires again on re-render.
Each card: opacity 0→1 + translateY(16px→0), 300ms ease-out.
Stagger: 50ms per card index. Max visible stagger: 400ms total (cap at 8 cards staggered regardless of list length).

04 — CTA Button Hover (desktop only)

On :hover: transform: translateY(-2px) + shadow escalates from Level 1 to 0 6px 20px rgba(37,99,235,0.35). Duration: 150ms ease-out.
On :active: transform: translateY(0), shadow returns to base. Duration: 80ms.
Note: :hover does not fire on touch — safe to apply globally; mobile users see no effect.

05 — Bottom Sheet Entrance/Exit

Enter: translateY(100%) → translateY(0), 350ms ease-out. Backdrop: opacity 0→0.4, 250ms ease-out.
Exit: translateY(0) → translateY(100%), 280ms ease-in. Backdrop: opacity 0.4→0, 200ms.
Handle drag-to-dismiss threshold: 40% of sheet height or velocity > 500px/s.

Accessibility — prefers-reduced-motion

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

Add this block to globals.css. iOS "Reduce Motion" accessibility setting triggers this. All animations collapse to instant — layout and function unaffected.

10 — Brand Independence Note

adhere is an independent product brand — not a sub-brand of Ancalofa. It is a standalone platform that will eventually be its own commercial entity (pending Pillar 1). During the build phase, it operates under Enrique Fajardo (natural person). All documents, pitch materials, platform interfaces, and communications use the adhere brand exclusively.

The relationship between adhere and Ancalofa is: Ancalofa is the parent consulting entity that incubated adhere. This relationship is disclosed to investors at Series A level if relevant, not on product-facing materials.