The building blocks of the Panda Clínica Veterinaria app. They come from the logo, forest green and sage, plus a lime reserved for anything you can tap. Everything on this page runs on the same code as the prototype.
People usually open the app when they're worried. Light backgrounds, plenty of air and one important thing per screen. Nothing moves unless it has to.
Coral is only for the 24-hour ER, allergies and out-of-range values. Never for decoration or promotions, so it keeps its weight.
Every screen has one primary button, and only one. On light backgrounds it's forest; on forest, it's lime.
Short sentences, the pet's name whenever possible, no unnecessary medical jargon. Say what's happening and what to do next.
Primitives sampled from the logo, plus a supporting lime and coral. Code always uses the semantic tokens, never raw hex values.
| Token | Value | Use |
|---|
Lime is never used as text on light backgrounds: it doesn't meet contrast. It works as a button fill on forest, as an active indicator, or as a badge.
Young Serif for titles and large numbers: it carries the weight and rounded terminals of the logo's serif. Albert Sans for everything else, readable from 12 px. Nothing below 12 px and no sustained all caps.
4 px grid. 20 px side margins, 10 px between sibling cards, 28 px between sections. Radius grows with the size of the element instead of one value for everything.
2 px stroke on a 24 px grid, rounded caps. In lists they sit inside a 40 px sage container; in the tab bar they stand alone.
Selected items get a 2 px forest border and a light lime fill. No shadows: the border change is enough and the layout doesn't jump.
Mora's next appointment
Today, 5:30 pm
Check-up with Dr. Ferreyra
Balance due
$8,750
Mora's feline distemper vaccine
Forest card: one per screen, for the most important thing. White card: everything else.
Pets are shown with their initial on a soft color, never with stock illustrations. A real photo replaces it when the owner adds one.
Unavailable days and times are struck through and outlined, never hidden. That way it reads as a full schedule, not as missing information.
Like Panda's best front-desk person: warm, clear and to the point. The app ships in Rioplatense Spanish, so it uses vos, the pet's name and concrete verbs. English translations below.
Mora tiene turno hoy a las 17:30Mora has an appointment today at 5:30 pm
La creatinina está un poco alta. No es urgente.Creatinine is a bit high. It's not urgent.
Cancelaste la ecografía de ThorYou canceled Thor's ultrasound
Falta el dominio. Por ejemplo, @gmail.comThe domain is missing. For example, @gmail.com
Recordatorio: cita programadaReminder: scheduled appointment
Valor fuera de rango de referenciaValue outside reference range
Operación realizada con éxitoOperation completed successfully
Error: email inválidoError: invalid email