Design reference
The pieces every page is built from. This page is for us while we build; students never see it.
Molecule colours
A colour names a molecule, the same one in every figure, term and card. Each comes in five roles: the solid fill, its lit top face, its shadow face, the ink for text, and a soft wash behind a term.
Hue is a molecule, except where it names something else on purpose: a pathway on a pathway map, and how serious or how ruled out on a drug topic's flags. Progress, mastery, streaks, buttons, and right or wrong answers use ink, ticks and crosses, so a green bar never reads as a protein.
Gross anatomy keeps the atlas colours students already know: arteries red, veins blue, nerves yellow, lymph green. Those figures never show molecules, so the two sets never meet on one picture.
Severity colours
A drug topic flags each adverse reaction and side effect by how serious it is, and each contraindication and pregnancy or breastfeeding note by how firmly the drug is ruled out. The two scales share one ladder, so a colour means the same degree of concern in every section: red stops, orange is serious, yellow is caution, green is safe, grey is mild. Every flag carries its sign and its word, so colour is never the only cue.
- Life-threateningIt can kill or disable: the drug is stopped at once and the patient treated.
- SeriousIt harms if missed or left: the drug is usually stopped or changed, and the patient may need treatment.
- MildUnpleasant, but it passes without lasting harm.
- ContraindicatedNever given in that situation.
- AvoidNot given if another drug will do.
- CautionIt can be given, with the dose change, monitoring or watch the flag names.
- CompatibleIt can be given as usual.
Figure parts
Every figure is drawn from one library of solid parts in three tones, so figures stay consistent and theme with the app. Molecular figures go further: true shapes at one scale, five tones of light, and steps through the mechanism.
Type
One family, Arcmed Sans, with a tailed l and a serifed capital I so IgA, Cl⁻ and IL-1 can’t be misread. Arcmed Display only for headlines of 32px and up.
Reading text is set at 16px on a 28px line, about 70 characters wide, for long sessions. App chrome stays at the kit’s compact 13px.
IgA, IgM, Cl⁻, IL-1, Il-6, 1l, Ill
Topic icons
What students study, drawn once: molecules, cells, organs, bones and muscles, and teeth, with signs from the lab and the clinic for the subjects no molecule or organ stands for. Each comes as a tile, a square in the colour of what it shows with the drawing white and an ink line, from 28px wherever a subject or topic is named. At 16px, in the sidebar and menus, the plain line stands in for it. A molecule’s tile is its own colour; an organ or tissue takes a light natural wash, so blue, green and violet stay with the molecules; a sign takes the colour of what its subject works with.
Molecules
- DNA
- RNA
- Chromosome
- Protein
- Enzyme
- Antibody
- Hormone
- Fat
- Phospholipid
- Cell membrane
- Carbohydrate
- Water
- Ions
- ATP
- Drugs
Cells
- Cell
- Mitochondrion
- Red blood cells
- White blood cell
- Neuron
- Synapse
Organs
- Heart
- Blood
- Lungs
- Brain
- Eye
- Ear
- Kidneys
- Bladder
- Uterus
- Liver
- Stomach
- Intestines
- Pancreas
- Thyroid
- Skin
Bones and muscles
- Bone
- Skull
- Spine
- Ribcage
- Pelvis
- Joint
- Muscle
- Sarcomere
Teeth
- Tooth
- Tooth in section
- Mandible
Lab and clinic
- Flask
- Atom
- Action potential
- Microscope
- Fever
- Stethoscope
- Scalpel
- Teddy bear
- Prescription
Term labels
A term a student has to learn, marked in the text with its topic icon on the colour of that icon’s tile, so the colour always comes with its icon: a lung word on the lungs’ pink, a drug on graphite, a protein on green. In dark mode the wash fades and the line keeps the colour. A label that names a written topic leads to it. Bold is kept for what needs attention.
Emphysema destroys the walls of the alveoli. α1-antitrypsin deficiency brings it on early, Haemophilus influenzae sets off many of its exacerbations, and a LAMA eases the breathlessness. Aim for a saturation of 88 to 92 per cent in anyone at risk of hypercapnia.
- Pneumonia
- Aortic stenosis
- Pulmonary embolism
- Nephrotic syndrome
- Amoxicillin
- Mycobacterium tuberculosis
- Eosinophils
- Troponin
- BNP
- Hyperkalaemia
- D-dimer
- ST elevation
- Pulsus paradoxus
- Fever of unknown origin
- Valve replacement
Icons
The healcraft set: a line on the 24 grid, 1.75 wide, with a tint behind it only when an icon stands alone at 24px or more. It draws the app’s own places and controls; subjects and topics take the topic icons.
- Allergy
- Anesthesia
- Antibody
- Appearance
- Appointments
- Autoimmune
- Bacteria
- Billing
- Bladder
- Blood
- Blood group
- Body metrics
- Bone
- Brain
- Breasts
- Calculator
- Calendar sync
- Capsule
- Cardiac surgery
- Cardiology
- Catalogue
- Clinical profile
- Clotting
- Consents
- Cultures
- Dark
- Dashboard
- Doctor
- Drops
- Ear
- ECG
- E-invoices
- Elderly
- Electrolytes
- Ear, nose and throat
- E-prescription access
- E-prescription visits
- Eye
- Feedback
- Female
- Fever
- Findings
- Folder
- Glucose meter
- Guides
- Gynecology
- Hand
- Health
- Heart
- Heart, the organ
- Hormones
- Hospital
- Hospital stay
- Imaging
- Inbox
- Inflammation
- Inhaler
- Insulin pen
- Internal medicine
- Intestine
- Iron
- My Issues
- Joint
- Kidneys
- Labs
- Language
- Light
- Lipids
- Liver
- Lungs
- Male
- Measurements
- Medication import
- Medications
- Medicine bottle
- Mental health
- More
- Nerve
- Neurosurgery
- Notifications
- Ointment
- Overview
- Overweight
- Owed
- Oxygen saturation
- Pain
- Patch
- Pathology
- Patients
- Pediatrics
- Person
- Practice
- Pregnancy
- Prescriptions
- Prostate
- Psychology
- Reports
- Oncology
- Search
- Settings
- Sign out
- Skin
- Spine
- Spray
- Stomach
- Sugar
- Surgery
- System
- Tablet
- Label
- Team
- Test tubes
- Temperature
- Thyroid
- Tooth
- Underweight
- Urine dipstick
- Urine sample
- Vaccinations
- Vascular surgery
- Virus
- Visits
- Vitamins
- Warning
- Wheelchair
- White cell
- X-ray