{
"generated": "26 Oct 2026",
"note": "Generated by site-src/build.mjs from site-src/content. Do not edit by hand.",
"stylesheets": [
"tokens.css",
"antz.css"
],
"components": [
{
"slug": "text-field",
"name": "Text field",
"group": "Inputs",
"status": "ready",
"purpose": "A single-line input for short free text.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7770",
"whenToUse": [
"The answer is short free text: a name, a number, a reference.",
"One answer per field."
],
"whenNotToUse": [
{
"need": "Choose one of a known set",
"use": "Dropdown"
},
{
"need": "Enter a date or time",
"use": "Date field"
},
{
"need": "Choose people, sites or items",
"use": "Picker field"
},
{
"need": "Switch something on or off",
"use": "Switch"
}
],
"anatomy": [
{
"part": "Label",
"note": "required"
},
{
"part": "Required mark",
"note": "when the field must be filled"
},
{
"part": "Container",
"note": "required"
},
{
"part": "Value or hint text",
"note": "required"
},
{
"part": "Icon",
"note": "optional, right side only"
},
{
"part": "Helper or error message",
"note": "optional"
}
],
"variants": [
{
"name": "Default",
"purpose": "Any short text",
"inFigma": true
},
{
"name": "With icon",
"purpose": "An icon on the right that shows the kind of value or opens a picker",
"inFigma": true
},
{
"name": "With prefix",
"purpose": "A fixed part before the value, such as a country code",
"inFigma": true
},
{
"name": "Multi-line",
"purpose": "Descriptions and longer answers; starts 112 tall",
"inFigma": true
},
{
"name": "Notes",
"purpose": "A free note on a record, such as notes on a training session: Notes yellow fill, otherwise the same as multi-line",
"inFigma": true
},
{
"name": "With unit",
"purpose": "A number with one fixed unit: the unit sits at the right end of the field",
"inFigma": false
},
{
"name": "With unit choice",
"purpose": "A number that can be entered in more than one unit: the unit at the right end opens a small list of units",
"inFigma": false
}
],
"states": [
{
"name": "Empty",
"when": "Nothing typed yet",
"change": "Hint text in Hint grey",
"inFigma": true
},
{
"name": "Filled",
"when": "A value is entered",
"change": "Value in Ink",
"inFigma": true
},
{
"name": "Focus",
"when": "The field is being typed in",
"change": "Border turns Hint grey",
"inFigma": false
},
{
"name": "Error",
"when": "The value can't be accepted",
"change": "Red border and a red message below",
"inFigma": false
},
{
"name": "Disabled",
"when": "The field can't be changed now",
"change": "Disabled fill, text in Hint grey",
"inFigma": false
}
],
"behaviour": [
"Tapping anywhere on the container focuses the field and opens the keyboard.",
"Errors show after the person leaves the field or presses the main action, never while typing.",
"The field keeps its height when an error appears; the message pushes content below it down.",
"A number with a unit keeps the unit inside the field, never in the label or a separate field. Tapping the unit, when there is a choice, opens the units as a dropdown sheet; the number stays."
],
"phoneVsTablet": [
{
"what": "Label to field",
"phone": "8",
"tablet": "12"
},
{
"what": "Field width",
"phone": "Full width of the section",
"tablet": "Two fields side by side when they belong together"
}
],
"content": [
{
"part": "Label",
"rule": "A noun in sentence case, no colon, two or three words"
},
{
"part": "Hint text",
"rule": "An example of the expected value, not an instruction"
},
{
"part": "Error message",
"rule": "Says what to fix in one line, starting with a verb"
},
{
"part": "Units",
"rule": "Only the units the measure allows, the most used first (kg before g); switching the unit converts the number"
}
],
"specs": [
{
"part": "Container",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Container",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Container",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Container",
"property": "Fill",
"phone": "Field #F2FFF8",
"tablet": "Field #F2FFF8"
},
{
"part": "Container",
"property": "Padding left and right",
"phone": "16",
"tablet": "16"
},
{
"part": "Label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Label",
"property": "Space below",
"phone": "8",
"tablet": "12"
},
{
"part": "Required mark",
"property": "Colour",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Value",
"property": "Type",
"phone": "16 Regular",
"tablet": "16 Regular"
},
{
"part": "Value",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Hint text",
"property": "Colour",
"phone": "Hint #839D8D",
"tablet": "Hint #839D8D"
},
{
"part": "Icon",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Helper text",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Helper text",
"property": "Colour",
"phone": "Muted #7A8684",
"tablet": "Muted #7A8684"
},
{
"part": "Multi-line",
"property": "Starting height",
"phone": "112",
"tablet": "112"
},
{
"part": "Notes",
"property": "Fill",
"phone": "Notes #FCF4AE",
"tablet": "Notes #FCF4AE"
},
{
"part": "Unit",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Unit",
"property": "Colour",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Unit",
"property": "Gap to number",
"phone": "8",
"tablet": "8"
},
{
"part": "Unit choice",
"property": "Chevron",
"phone": "20, gap 2",
"tablet": "20, gap 2"
}
],
"accessibility": [
"Every field has a visible label; hint text never replaces it.",
"The whole container is the touch area, 56 tall.",
"Errors are written out, not shown by the red border alone.",
"Value text on the Field fill scores 9.0 for readability. Hint text scores 3.1, so it never carries required information."
],
"related": [
"dropdown",
"date-field",
"picker-field",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "default",
"s": "empty",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "dropdown",
"name": "Dropdown",
"group": "Inputs",
"status": "ready",
"purpose": "A field that opens a list so people choose one option from a known set.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7780",
"whenToUse": [
"People choose exactly one option from a list the app already knows: a type, a category, a department.",
"Any number of options inside a form, even two or three: the form keeps one shape of field."
],
"whenNotToUse": [
{
"need": "Type free text",
"use": "Text field"
},
{
"need": "Choose several options",
"use": "Checkbox, or a picker field for people, sites and animals"
},
{
"need": "Pick a date or a time",
"use": "Date field"
},
{
"need": "Choose people, sites or animals",
"use": "Picker field"
},
{
"need": "Filter a list",
"use": "Search and filter"
},
{
"need": "Run an action on a record",
"use": "Menu"
}
],
"anatomy": [
{
"part": "Label",
"note": "required"
},
{
"part": "Required mark",
"note": "when a choice must be made"
},
{
"part": "Container",
"note": "required"
},
{
"part": "Chosen option or hint text",
"note": "required"
},
{
"part": "Chevron",
"note": "required, always on the right"
}
],
"variants": [
{
"name": "Field",
"purpose": "Inside forms. Same size and border as the text field",
"inFigma": true
},
{
"name": "Compact",
"purpose": "40 tall white box with no border, in tablet list toolbars beside the filter button",
"inFigma": true
},
{
"name": "Inline",
"purpose": "No box: the chosen option and a chevron in the screen header, for screen-wide choices such as a month or a site",
"inFigma": true
}
],
"states": [
{
"name": "Empty",
"when": "Nothing chosen yet",
"change": "Hint text \"Select\" in Hint grey",
"inFigma": true
},
{
"name": "Filled",
"when": "An option is chosen",
"change": "Chosen option in Teal ink",
"inFigma": true
},
{
"name": "Open",
"when": "The list is showing",
"change": "A bottom sheet rises with one option row per choice; the chosen row has a green border, Field fill and a filled radio",
"inFigma": false
},
{
"name": "Error",
"when": "A required choice is missing",
"change": "Red border and a red message 4 below",
"inFigma": false
},
{
"name": "Disabled",
"when": "The choice can't be changed now",
"change": "Disabled fill; text and chevron in Hint grey",
"inFigma": false
}
],
"behaviour": [
"Tapping anywhere on the container opens the list as a bottom sheet titled with the field label.",
"Tapping an option chooses it and closes the sheet at once. There is no Save button for a single choice.",
"Closing the sheet with × or by tapping the dimmed area keeps the previous choice.",
"With more than seven options, a search sits at the top of the sheet body.",
"A dropdown never holds actions. Edit, delete and other actions go in a menu."
],
"phoneVsTablet": [
{
"what": "Label to field",
"phone": "8",
"tablet": "12"
},
{
"what": "Field width",
"phone": "Full width of the section",
"tablet": "Two fields side by side when they belong together, gap 16"
},
{
"what": "Compact variant",
"phone": "Allowed in list toolbars; the field is preferred",
"tablet": "In list toolbars, right side, gap 8 to the filter button"
}
],
"content": [
{
"part": "Label",
"rule": "A noun in sentence case, no colon: what is being chosen"
},
{
"part": "Hint text",
"rule": "\"Select\" on its own. The label already names the thing"
},
{
"part": "Options",
"rule": "Sentence case, short, no ending punctuation; ordered as people expect (by size, time or alphabet), never at random"
},
{
"part": "Error message",
"rule": "Says what to do in one line, starting with a verb: \"Choose an option\""
}
],
"specs": [
{
"part": "Container",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Container",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Container",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Container",
"property": "Fill",
"phone": "Field #F2FFF8",
"tablet": "Field #F2FFF8"
},
{
"part": "Container",
"property": "Padding left and right",
"phone": "16",
"tablet": "16"
},
{
"part": "Label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Label",
"property": "Space below",
"phone": "8",
"tablet": "12"
},
{
"part": "Required mark",
"property": "Colour",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Chosen option",
"property": "Type",
"phone": "16 Regular",
"tablet": "16 Regular"
},
{
"part": "Chosen option",
"property": "Colour",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Hint text",
"property": "Colour",
"phone": "Hint #839D8D",
"tablet": "Hint #839D8D"
},
{
"part": "Chevron",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Chevron",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Error message",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Error message",
"property": "Colour",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "Error message",
"property": "Space above",
"phone": "4",
"tablet": "4"
},
{
"part": "Compact",
"property": "Height",
"phone": "—",
"tablet": "40"
},
{
"part": "Compact",
"property": "Fill",
"phone": "—",
"tablet": "White #FFFFFF"
},
{
"part": "Compact",
"property": "Padding left and right",
"phone": "—",
"tablet": "12"
},
{
"part": "Compact",
"property": "Text",
"phone": "—",
"tablet": "14 Medium, Teal ink #1F515B"
},
{
"part": "Compact",
"property": "Chevron",
"phone": "—",
"tablet": "20, gap 2"
},
{
"part": "Inline",
"property": "Text",
"phone": "16 Medium, Teal ink #1F515B",
"tablet": "16 Medium, Teal ink #1F515B"
},
{
"part": "Inline",
"property": "Chevron",
"phone": "20, gap 4",
"tablet": "20, gap 4"
},
{
"part": "Option row",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Option row",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Option row",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Option row",
"property": "Padding",
"phone": "12",
"tablet": "12"
},
{
"part": "Option row",
"property": "Type",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Option row",
"property": "Gap between rows",
"phone": "12",
"tablet": "12"
},
{
"part": "Option row, chosen",
"property": "Border",
"phone": "1px Antz green #37BD69",
"tablet": "1px Antz green #37BD69"
},
{
"part": "Option row, chosen",
"property": "Fill",
"phone": "Field #F2FFF8",
"tablet": "Field #F2FFF8"
},
{
"part": "Option row, chosen",
"property": "Radio",
"phone": "24, filled, Antz green #37BD69",
"tablet": "24, filled, Antz green #37BD69"
}
],
"accessibility": [
"The field is announced as a button that opens a list, read with its label and the chosen option.",
"Options in the sheet are a radio group; the chosen one is marked by a filled radio, not by colour alone.",
"The whole container is the touch area, 56 tall; each option row is at least 48 tall.",
"Focus moves into the sheet when it opens and back to the field when it closes.",
"Teal ink on the Field fill scores 8.6 for readability. Hint text scores 3.1, so it never carries required information."
],
"related": [
"text-field",
"picker-field",
"bottom-sheet",
"menu",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "field",
"s": "empty",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "date-field",
"name": "Date field",
"group": "Inputs",
"status": "ready",
"purpose": "A field for entering a date, a time, or both, chosen from a picker.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7790",
"whenToUse": [
"The answer is a calendar date, a time of day, or both.",
"A period needs a start and an end: use a pair of fields side by side."
],
"whenNotToUse": [
{
"need": "Type a number of days or hours",
"use": "Text field"
},
{
"need": "Choose a month or a year for a whole screen",
"use": "Dropdown, inline variant"
},
{
"need": "Choose from a fixed set of periods",
"use": "Dropdown"
}
],
"anatomy": [
{
"part": "Label",
"note": "required"
},
{
"part": "Required mark",
"note": "when the field must be filled"
},
{
"part": "Container",
"note": "required"
},
{
"part": "Date, time or hint text",
"note": "required"
},
{
"part": "Calendar or clock icon",
"note": "required, right side"
}
],
"variants": [
{
"name": "Date",
"purpose": "A single day. Calendar icon",
"inFigma": true
},
{
"name": "Time",
"purpose": "A time of day. Clock icon",
"inFigma": true
},
{
"name": "Pair",
"purpose": "Two fields side by side with gap 16: start and end, or date and time",
"inFigma": true
}
],
"states": [
{
"name": "Empty",
"when": "Nothing chosen yet",
"change": "Hint text shows the format in Hint grey",
"inFigma": true
},
{
"name": "Filled",
"when": "A date or time is chosen",
"change": "Value in Ink, in the standard format",
"inFigma": true
},
{
"name": "Open",
"when": "The picker is showing",
"change": "A bottom sheet with a month grid (date) or hour, minute and AM/PM rows (time), the chosen one filled Antz green; Cancel and Done in the footer",
"inFigma": false
},
{
"name": "Error",
"when": "The value is missing or out of range",
"change": "Red border and a red message 4 below",
"inFigma": false
},
{
"name": "Disabled",
"when": "The value can't be changed now",
"change": "Disabled fill; text and icon in Hint grey",
"inFigma": false
}
],
"behaviour": [
"Tapping anywhere on the container opens the picker as a bottom sheet titled with the field label. The keyboard never opens.",
"The sheet opens on the current value, or on today when the field is empty.",
"Done writes the value and closes the sheet; Cancel or × closes it and keeps the old value.",
"Days outside the allowed range are not shown as choosable, so a wrong date can't be picked.",
"In a pair, the end date can't be before the start date; the end field shows the error, not the start."
],
"phoneVsTablet": [
{
"what": "Label to field",
"phone": "8",
"tablet": "12"
},
{
"what": "Pair",
"phone": "Two fields side by side, gap 16",
"tablet": "Two fields side by side, gap 16; a date and its time sit on one line"
}
],
"content": [
{
"part": "Label",
"rule": "A noun in sentence case, no colon: \"Start date\", \"Time\""
},
{
"part": "Date format",
"rule": "D Mon YYYY: 10 Aug 2026"
},
{
"part": "Time format",
"rule": "h:mm AM: 09:14 AM"
},
{
"part": "Hint text",
"rule": "The format, not an instruction: \"DD Mon YYYY\""
},
{
"part": "Error message",
"rule": "Says what to fix in one line: \"End date is before start\""
}
],
"specs": [
{
"part": "Container",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Container",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Container",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Container",
"property": "Fill",
"phone": "Field #F2FFF8",
"tablet": "Field #F2FFF8"
},
{
"part": "Container",
"property": "Padding left and right",
"phone": "16",
"tablet": "16"
},
{
"part": "Label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Label",
"property": "Space below",
"phone": "8",
"tablet": "12"
},
{
"part": "Required mark",
"property": "Colour",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Value",
"property": "Type",
"phone": "16 Regular",
"tablet": "16 Regular"
},
{
"part": "Value",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Hint text",
"property": "Colour",
"phone": "Hint #839D8D",
"tablet": "Hint #839D8D"
},
{
"part": "Icon",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Icon",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Pair",
"property": "Gap between fields",
"phone": "16",
"tablet": "16"
},
{
"part": "Pair",
"property": "Padding left and right",
"phone": "12",
"tablet": "16"
},
{
"part": "Error message",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Error message",
"property": "Colour",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "Error message",
"property": "Space above",
"phone": "4",
"tablet": "4"
},
{
"part": "Picker sheet",
"property": "Top corners",
"phone": "16",
"tablet": "16"
},
{
"part": "Picker sheet",
"property": "Body fill",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Picker sheet",
"property": "Month panel",
"phone": "White, corners 8, padding 12",
"tablet": "White, corners 8, padding 12"
},
{
"part": "Day",
"property": "Size",
"phone": "36 round",
"tablet": "36 round"
},
{
"part": "Day",
"property": "Type",
"phone": "14 Regular, Ink #44544A",
"tablet": "14 Regular, Ink #44544A"
},
{
"part": "Day, chosen",
"property": "Fill",
"phone": "Antz green #37BD69, white 14 Semibold",
"tablet": "Antz green #37BD69, white 14 Semibold"
},
{
"part": "Weekday",
"property": "Type",
"phone": "12 Regular, Muted #7A8684",
"tablet": "12 Regular, Muted #7A8684"
},
{
"part": "Picker footer",
"property": "Buttons",
"phone": "Cancel outline and Done green, 48 tall, 50/50, gap 16",
"tablet": "Cancel outline and Done green, 48 tall, 50/50, gap 16"
}
],
"accessibility": [
"Every field has a visible label; the format in the hint text never replaces it.",
"The field is announced as a button that opens a date picker, read with its label and value.",
"Each day is read in full (\"Monday 10 August 2026\"); the chosen day is marked by its filled circle and as selected, not by colour alone.",
"Day cells are 36 round inside a row at least 44 tall to keep touch areas usable.",
"Errors are written out, not shown by the red border alone."
],
"related": [
"text-field",
"dropdown",
"bottom-sheet",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "date",
"s": "empty",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "picker-field",
"name": "Picker field",
"group": "Inputs",
"status": "ready",
"purpose": "A field that opens a chooser for people, sites or other records, and lists what was picked below it.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=8-6237",
"whenToUse": [
"People choose one or more records the app already holds: people, sites, sections, animals.",
"Each choice needs more than a name to be told apart: a photo, a role, an area."
],
"whenNotToUse": [
{
"need": "Choose one option from a short fixed list",
"use": "Dropdown"
},
{
"need": "Tick a few plain options",
"use": "Checkbox"
},
{
"need": "Type free text",
"use": "Text field"
},
{
"need": "Filter a list",
"use": "Search and filter"
}
],
"anatomy": [
{
"part": "Label",
"note": "required"
},
{
"part": "Container",
"note": "required"
},
{
"part": "Hint text",
"note": "required; says what will be chosen"
},
{
"part": "Add icon",
"note": "required, Add blue, right side"
},
{
"part": "Picked row",
"note": "one per chosen record, below the field"
},
{
"part": "Photo or initials",
"note": "required in a picked row; thumbnail for sites"
},
{
"part": "Name and detail",
"note": "name required, detail optional"
},
{
"part": "Remove icon",
"note": "required, Coral"
}
],
"variants": [
{
"name": "People",
"purpose": "Picked rows with a 36 round photo or initials, name and role",
"inFigma": true
},
{
"name": "Sites",
"purpose": "Picked rows use the site card: 56 tall, thumbnail 40, Page light fill",
"inFigma": true
},
{
"name": "Single pick",
"purpose": "The field is replaced by its one picked row; tapping the row opens the chooser again",
"inFigma": false
},
{
"name": "Animal",
"purpose": "A bottom sheet with search and full animal cards, a filled radio on the chosen one; the picked animal shows as its animal card with a remove icon",
"inFigma": false
}
],
"states": [
{
"name": "Empty",
"when": "Nothing picked yet",
"change": "Hint text in Hint grey, add icon in Add blue",
"inFigma": true
},
{
"name": "Picked",
"when": "One or more records chosen",
"change": "Picked rows stack below the field, gap 8; the field stays so more can be added",
"inFigma": true
},
{
"name": "Choosing",
"when": "The chooser is open",
"change": "A bottom sheet with search, \"Selected n/total\", Select all and rows with checkboxes; Cancel and Save in the footer",
"inFigma": true
},
{
"name": "Error",
"when": "A required pick is missing",
"change": "Red border and a red message 4 below",
"inFigma": false
},
{
"name": "Disabled",
"when": "Picks can't be changed now",
"change": "Disabled fill, add icon in Hint grey; picked rows lose their remove icon",
"inFigma": false
}
],
"behaviour": [
"Tapping anywhere on the field opens the chooser as a bottom sheet titled with what is being chosen.",
"Rows already picked open ticked. Tapping a row ticks or unticks it; the count updates at once.",
"Picks are kept only on Save. Cancel, × or tapping the dimmed area drops the unsaved changes.",
"The remove icon on a picked row takes it out at once, with no confirm. Removing the last one returns the field to empty.",
"Sites are always picked and shown with the site card, never as plain text.",
"Animals are always picked and shown with the full animal card. One animal: radios and Select; several animals: check boxes and Save.",
"Choosing exactly one shows filled radios; choosing several shows check boxes. A green tick is never the chosen mark."
],
"phoneVsTablet": [
{
"what": "Label to field",
"phone": "8",
"tablet": "12"
},
{
"what": "Picked rows",
"phone": "One per line, gap 8",
"tablet": "Two per line, gap 8"
},
{
"what": "Chooser",
"phone": "Bottom sheet",
"tablet": "Bottom sheet"
}
],
"content": [
{
"part": "Label",
"rule": "A plural noun in sentence case: \"Trainers\", \"Sites\""
},
{
"part": "Hint text",
"rule": "\"Choose\" plus the noun: \"Choose sites\""
},
{
"part": "Picked row",
"rule": "Name on the first line; one detail on the second (role, area). No IDs unless people search by them"
},
{
"part": "Error message",
"rule": "Says what to do in one line: \"Choose at least one\""
}
],
"specs": [
{
"part": "Container",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Container",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Container",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Container",
"property": "Fill",
"phone": "Field #F2FFF8",
"tablet": "Field #F2FFF8"
},
{
"part": "Container",
"property": "Padding left and right",
"phone": "16",
"tablet": "16"
},
{
"part": "Label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Label",
"property": "Space below",
"phone": "8",
"tablet": "12"
},
{
"part": "Hint text",
"property": "Type",
"phone": "16 Regular",
"tablet": "16 Regular"
},
{
"part": "Hint text",
"property": "Colour",
"phone": "Hint #839D8D",
"tablet": "Hint #839D8D"
},
{
"part": "Add icon",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Add icon",
"property": "Colour",
"phone": "Add blue #00AFD6",
"tablet": "Add blue #00AFD6"
},
{
"part": "Picked row",
"property": "Fill",
"phone": "Page #DDEBE9",
"tablet": "Page #DDEBE9"
},
{
"part": "Picked row",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Picked row",
"property": "Padding",
"phone": "12",
"tablet": "12"
},
{
"part": "Picked row",
"property": "Gap inside",
"phone": "12",
"tablet": "12"
},
{
"part": "Picked row",
"property": "Gap between rows",
"phone": "8",
"tablet": "8"
},
{
"part": "Photo or initials",
"property": "Size",
"phone": "36 round",
"tablet": "36 round"
},
{
"part": "Initials",
"property": "Fill",
"phone": "Turquoise #00D6C9, white 14 Medium",
"tablet": "Turquoise #00D6C9, white 14 Medium"
},
{
"part": "Name",
"property": "Type",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Name",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Detail",
"property": "Type",
"phone": "14 Regular",
"tablet": "14 Regular"
},
{
"part": "Detail",
"property": "Space above",
"phone": "4",
"tablet": "4"
},
{
"part": "Remove icon",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Remove icon",
"property": "Colour",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Picked site",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Picked site",
"property": "Fill",
"phone": "Page light #E8F4F2",
"tablet": "Page light #E8F4F2"
},
{
"part": "Picked site",
"property": "Border",
"phone": "1px white",
"tablet": "1px white"
},
{
"part": "Picked site",
"property": "Padding",
"phone": "8",
"tablet": "8"
},
{
"part": "Picked site",
"property": "Thumbnail",
"phone": "40, corners 4",
"tablet": "40, corners 4"
},
{
"part": "Chooser row",
"property": "Fill",
"phone": "White, corners 8, padding 12",
"tablet": "White, corners 8, padding 12"
},
{
"part": "Chooser row",
"property": "Box",
"phone": "24; ticked in Antz green #37BD69",
"tablet": "24; ticked in Antz green #37BD69"
},
{
"part": "Chooser row, ticked",
"property": "Border",
"phone": "1px Antz green #37BD69",
"tablet": "1px Antz green #37BD69"
},
{
"part": "Chooser footer",
"property": "Buttons",
"phone": "Cancel outline and Save green, 48 tall, 50/50",
"tablet": "Cancel outline and Save green, 48 tall, 50/50"
}
],
"accessibility": [
"The field is announced as a button that opens a chooser, read with its label and the number picked.",
"Each remove icon has its own label: \"Remove\" plus the name, and a touch area of at least 44.",
"Ticked rows in the chooser use a different glyph (filled box with a tick), never colour alone.",
"Initials are read as the full name; photos carry the name as their text alternative.",
"Focus returns to the field when the chooser closes."
],
"related": [
"dropdown",
"site-card",
"animal-card",
"bottom-sheet",
"checkbox",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "people",
"s": "empty",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "checkbox",
"name": "Checkbox",
"group": "Inputs",
"status": "ready",
"purpose": "Lets people tick any number of options from a list, or confirm a single yes.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=8-6250",
"whenToUse": [
"People can choose any number of options, including none.",
"A single statement needs a yes, such as marking a field as mandatory."
],
"whenNotToUse": [
{
"need": "Choose exactly one option",
"use": "Dropdown"
},
{
"need": "Turn a setting on or off with an instant effect",
"use": "Switch"
},
{
"need": "Choose people, sites or animals",
"use": "Picker field"
},
{
"need": "Narrow a list",
"use": "Filter screen"
}
],
"anatomy": [
{
"part": "Row",
"note": "required in the row variant; the whole row is the touch area"
},
{
"part": "Box",
"note": "required, 24"
},
{
"part": "Label",
"note": "required"
},
{
"part": "Hint text",
"note": "optional, one line"
}
],
"variants": [
{
"name": "Row",
"purpose": "Each option in its own bordered row. The default in forms",
"inFigma": true
},
{
"name": "Row with hint",
"purpose": "A second line in Muted grey when the option needs one fact more",
"inFigma": true
},
{
"name": "Plain",
"purpose": "Box and label with no row border, for a single yes inside a card or a short list in a filter",
"inFigma": true
}
],
"states": [
{
"name": "Unticked",
"when": "Not chosen",
"change": "Outline box in Ink",
"inFigma": true
},
{
"name": "Ticked",
"when": "Chosen",
"change": "Filled box with a white tick, in Antz green",
"inFigma": true
},
{
"name": "Partly ticked",
"when": "A \"Select all\" box when only some of its options are ticked",
"change": "Filled box with a dash, in Antz green",
"inFigma": false
},
{
"name": "Disabled",
"when": "The option can't be changed now",
"change": "Disabled fill, box in Line grey, label in Hint grey; the glyph still shows ticked or unticked",
"inFigma": false
}
],
"behaviour": [
"Tapping anywhere on the row ticks or unticks it, not only the box.",
"Ticking does nothing on its own; the choice is kept when the form is saved.",
"\"Select all\" ticks every option; when all are ticked it unticks them all. When only some are ticked it shows the partly ticked glyph.",
"Options are never pre-ticked unless most people would tick them anyway."
],
"phoneVsTablet": [
{
"what": "Label to list",
"phone": "8",
"tablet": "12"
},
{
"what": "Rows",
"phone": "One per line, gap 8",
"tablet": "Two per line when labels are short, gap 8"
}
],
"content": [
{
"part": "Label",
"rule": "A noun in sentence case, no colon, naming the group"
},
{
"part": "Option",
"rule": "Short, in sentence case, phrased so that ticking means yes. No \"Don't…\""
},
{
"part": "Hint text",
"rule": "One fact that tells similar options apart; not a sentence"
}
],
"specs": [
{
"part": "Row",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Row",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Row",
"property": "Padding",
"phone": "9 left, 16 right, 9 top and bottom",
"tablet": "9 left, 16 right, 9 top and bottom"
},
{
"part": "Row",
"property": "Gap between rows",
"phone": "8",
"tablet": "8"
},
{
"part": "Row",
"property": "Gap box to label",
"phone": "4",
"tablet": "4"
},
{
"part": "Box",
"property": "Size",
"phone": "24, in a 40 touch wrapper",
"tablet": "24, in a 40 touch wrapper"
},
{
"part": "Box, unticked",
"property": "Glyph",
"phone": "Outline box, Ink #44544A",
"tablet": "Outline box, Ink #44544A"
},
{
"part": "Box, ticked",
"property": "Glyph",
"phone": "Filled box with tick, Antz green #37BD69",
"tablet": "Filled box with tick, Antz green #37BD69"
},
{
"part": "Box, partly ticked",
"property": "Glyph",
"phone": "Filled box with dash, Antz green #37BD69",
"tablet": "Filled box with dash, Antz green #37BD69"
},
{
"part": "Label",
"property": "Type",
"phone": "16 Regular",
"tablet": "16 Regular"
},
{
"part": "Label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Hint text",
"property": "Type",
"phone": "14 Regular",
"tablet": "14 Regular"
},
{
"part": "Hint text",
"property": "Colour",
"phone": "Muted #7A8684",
"tablet": "Muted #7A8684"
},
{
"part": "Hint text",
"property": "Space above",
"phone": "4",
"tablet": "4"
},
{
"part": "Group label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Group label",
"property": "Space below",
"phone": "8",
"tablet": "12"
},
{
"part": "Plain",
"property": "Gap box to label",
"phone": "8",
"tablet": "8"
},
{
"part": "Plain",
"property": "Gap between options",
"phone": "12",
"tablet": "12"
},
{
"part": "Disabled",
"property": "Fill",
"phone": "Disabled #DAE7DF",
"tablet": "Disabled #DAE7DF"
},
{
"part": "Disabled",
"property": "Box colour",
"phone": "Line #C3CEC7",
"tablet": "Line #C3CEC7"
},
{
"part": "Disabled",
"property": "Label colour",
"phone": "Hint #839D8D",
"tablet": "Hint #839D8D"
}
],
"accessibility": [
"Each row is announced as a checkbox with its label and its state: ticked, not ticked or partly ticked.",
"States are different glyphs (outline box, box with tick, box with dash), never colour alone.",
"The whole row is the touch area, at least 42 tall; the box alone is never the only target.",
"The group label is read before the first option so people know what they are choosing.",
"Antz green on white scores 2.4 for readability, so the glyph shape carries the state, not its colour."
],
"related": [
"switch",
"picker-field",
"dropdown",
"filter-screen",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "row",
"s": "mixed",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "switch",
"name": "Switch",
"group": "Inputs",
"status": "ready",
"purpose": "Turns one thing on or off, such as making a record active or inactive.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=309-9693",
"whenToUse": [
"One setting has two states and the change takes effect at once: Active or Inactive, Mandatory or not.",
"The record or setting stays listed in both states."
],
"whenNotToUse": [
{
"need": "Tick several options in a list",
"use": "Checkbox"
},
{
"need": "Choose between more than two states",
"use": "Dropdown or Secondary tab"
},
{
"need": "Confirm something that needs a Save",
"use": "Checkbox"
},
{
"need": "Switch between views on a screen",
"use": "Secondary tab"
}
],
"anatomy": [
{
"part": "State label",
"note": "recommended; names the current state in words"
},
{
"part": "Switch",
"note": "required"
},
{
"part": "Track, on",
"note": "Antz green; knob on the right"
},
{
"part": "Track, off",
"note": "Line grey; knob on the left"
}
],
"variants": [
{
"name": "With state label",
"purpose": "\"Active\" or \"Inactive\" before the switch, in a card or section header",
"inFigma": true
},
{
"name": "Setting row",
"purpose": "A 56 white row: setting name on the left, switch on the right",
"inFigma": true
}
],
"states": [
{
"name": "On",
"when": "The thing is active",
"change": "Antz green track, knob on the right, label \"Active\"",
"inFigma": true
},
{
"name": "Off",
"when": "The thing is inactive",
"change": "Line grey track, knob on the left, label \"Inactive\"; an inactive card fades to 75%",
"inFigma": true
},
{
"name": "Disabled",
"when": "The setting can't be changed now",
"change": "Disabled track, label in Hint grey; the knob keeps its side",
"inFigma": false
}
],
"behaviour": [
"Tapping the switch or its label flips it at once; there is no Save for a switch.",
"The knob slides in 180ms; with reduced motion it jumps.",
"Turning something inactive never hides it. Inactive records stay listed and fade to 75%.",
"A switch never hides fields people still need to fill.",
"If turning off has a cost people can't undo, ask first with a confirm."
],
"phoneVsTablet": [
{
"what": "Size",
"phone": "39 × 24",
"tablet": "39 × 24"
},
{
"what": "Placement",
"phone": "Right end of the row or header",
"tablet": "Right end of the row or header"
}
],
"content": [
{
"part": "State label",
"rule": "\"Active\" / \"Inactive\", or another pair that names the state, not the action"
},
{
"part": "Setting row label",
"rule": "A noun phrase in sentence case: what is switched, not \"Turn on…\""
}
],
"specs": [
{
"part": "Track",
"property": "Size",
"phone": "39 × 24",
"tablet": "39 × 24"
},
{
"part": "Track",
"property": "Corners",
"phone": "Fully round",
"tablet": "Fully round"
},
{
"part": "Track, on",
"property": "Fill",
"phone": "Antz green #37BD69",
"tablet": "Antz green #37BD69"
},
{
"part": "Track, off",
"property": "Fill",
"phone": "Line #C3CEC7",
"tablet": "Line #C3CEC7"
},
{
"part": "Track, disabled",
"property": "Fill",
"phone": "Disabled #DAE7DF",
"tablet": "Disabled #DAE7DF"
},
{
"part": "Knob",
"property": "Size",
"phone": "18 round",
"tablet": "18 round"
},
{
"part": "Knob",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Knob",
"property": "Inset",
"phone": "3",
"tablet": "3"
},
{
"part": "State label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "State label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "State label",
"property": "Gap to switch",
"phone": "8",
"tablet": "8"
},
{
"part": "Setting row",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Setting row",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Setting row",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Setting row",
"property": "Padding",
"phone": "16 top and bottom, 12 left and right",
"tablet": "16 top and bottom, 12 left and right"
},
{
"part": "Setting row",
"property": "Label",
"phone": "16 Medium, Ink #44544A",
"tablet": "16 Medium, Ink #44544A"
},
{
"part": "Inactive card",
"property": "Opacity",
"phone": "75%",
"tablet": "75%"
},
{
"part": "Motion",
"property": "Knob slide",
"phone": "180ms",
"tablet": "180ms"
}
],
"accessibility": [
"Announced as a switch with its name and state: \"Status, Active, on\".",
"The state is shown by the knob position and the state label, not by the track colour alone.",
"The touch area is at least 44 × 44 around the 39 × 24 track; in a setting row the whole row flips it.",
"White knob on the off track scores 1.6 for readability, so the knob side and the label carry the state."
],
"related": [
"checkbox",
"secondary-tab",
"confirm",
"status"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "label",
"s": "on"
},
"html": "
"
}
]
},
{
"slug": "search-filter",
"name": "Search and filter",
"group": "Inputs",
"status": "ready",
"purpose": "A search field and a filter button that sit above a list to narrow what it shows.",
"figma": "https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=230-7268",
"whenToUse": [
"A list is long enough that people look for one item by name or ID.",
"The list can be narrowed by fields such as status, site or date."
],
"whenNotToUse": [
{
"need": "Switch between a few fixed groups of the list",
"use": "Primary tabs or chips"
},
{
"need": "Choose a value inside a form",
"use": "Dropdown or picker field"
},
{
"need": "Set many filters at once",
"use": "Filter screen (opened by the filter button)"
}
],
"anatomy": [
{
"part": "Row",
"note": "required; white, sits in the white top block of a list screen"
},
{
"part": "Search field",
"note": "required"
},
{
"part": "Search icon",
"note": "required, left"
},
{
"part": "Hint text",
"note": "required; \"Search\""
},
{
"part": "Filter button",
"note": "optional; only when the list has filters"
}
],
"variants": [
{
"name": "Standard",
"purpose": "Search 40 tall in Light grey, corners 8, and a 40 × 40 filter button, gap 8. Use by default",
"inFigma": true
},
{
"name": "Outlined",
"purpose": "White with a Line border, 44 to 48 tall, 14 Regular text; when the search needs more weight, as on tablet list headers",
"inFigma": true
},
{
"name": "Raised",
"purpose": "White with a soft shadow, 56 tall; when search is the main task of the screen, on a tinted page",
"inFigma": true
}
],
"states": [
{
"name": "Empty",
"when": "Nothing typed, no filters on",
"change": "Hint text \"Search\"; filter button in Light grey",
"inFigma": true
},
{
"name": "Typing",
"when": "A search term is entered",
"change": "Term in Ink, a close icon appears on the right to clear it; the count line reads \"Results (n)\"",
"inFigma": false
},
{
"name": "Filters on",
"when": "One or more filters are applied",
"change": "Filter button turns Teal ink with a white icon and a Coral badge with the number of filters",
"inFigma": false
}
],
"behaviour": [
"Results update as people type, after a short pause; no Search button.",
"The close icon clears the term and puts the full list back; the keyboard stays open.",
"The filter button opens the filter screen. Applying filters returns to the list with the badge showing how many are on.",
"Search and filters combine: the list shows items that match the term and every filter.",
"The row stays at the top of the list when the list scrolls.",
"When nothing matches, the list area says so in one line; the filters stay visible so people can clear them."
],
"phoneVsTablet": [
{
"what": "Row padding",
"phone": "12 top and bottom, 16 sides",
"tablet": "12 top and bottom, 20 sides"
},
{
"what": "Search width",
"phone": "Fills the row",
"tablet": "Fills the list panel; in a list and detail split it sits on top of the list"
},
{
"what": "Variant used most",
"phone": "Standard",
"tablet": "Standard or Outlined"
}
],
"content": [
{
"part": "Hint text",
"rule": "\"Search\" on its own, or \"Search\" plus the noun when the screen holds more than one list"
},
{
"part": "Count line",
"rule": "Noun (n) above the list: \"Results (6)\""
},
{
"part": "Badge",
"rule": "The number of filters on, never the number of results"
}
],
"specs": [
{
"part": "Row",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Row",
"property": "Padding",
"phone": "12 top and bottom, 16 sides",
"tablet": "12 top and bottom, 20 sides"
},
{
"part": "Row",
"property": "Gap",
"phone": "8",
"tablet": "8"
},
{
"part": "Search",
"property": "Height",
"phone": "40",
"tablet": "40"
},
{
"part": "Search",
"property": "Fill",
"phone": "Light grey (5% black)",
"tablet": "Light grey (5% black)"
},
{
"part": "Search",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Search",
"property": "Padding",
"phone": "6 top and bottom, 12 sides",
"tablet": "6 top and bottom, 12 sides"
},
{
"part": "Search",
"property": "Gap icon to text",
"phone": "8",
"tablet": "8"
},
{
"part": "Search icon",
"property": "Size",
"phone": "18",
"tablet": "18"
},
{
"part": "Hint and term",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Hint and term",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Filter button",
"property": "Size",
"phone": "40 × 40",
"tablet": "40 × 40"
},
{
"part": "Filter button",
"property": "Fill",
"phone": "Light grey (5% black)",
"tablet": "Light grey (5% black)"
},
{
"part": "Filter button",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Filter icon",
"property": "Size",
"phone": "18",
"tablet": "18"
},
{
"part": "Filter button, on",
"property": "Fill",
"phone": "Teal ink #1F515B, white icon",
"tablet": "Teal ink #1F515B, white icon"
},
{
"part": "Badge",
"property": "Fill",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Badge",
"property": "Type",
"phone": "10 Medium, white",
"tablet": "10 Medium, white"
},
{
"part": "Badge",
"property": "Size",
"phone": "16 round",
"tablet": "16 round"
},
{
"part": "Outlined",
"property": "Height",
"phone": "44 to 48",
"tablet": "44 to 48"
},
{
"part": "Outlined",
"property": "Fill",
"phone": "White, 1px Line #C3CEC7",
"tablet": "White, 1px Line #C3CEC7"
},
{
"part": "Outlined",
"property": "Padding",
"phone": "12",
"tablet": "12"
},
{
"part": "Outlined",
"property": "Text",
"phone": "14 Regular, Muted #7A8684",
"tablet": "14 Regular, Muted #7A8684"
},
{
"part": "Outlined",
"property": "Icon",
"phone": "20 to 24",
"tablet": "20 to 24"
},
{
"part": "Raised",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Raised",
"property": "Fill",
"phone": "White",
"tablet": "White"
},
{
"part": "Raised",
"property": "Shadow",
"phone": "0 2 1, black 10%",
"tablet": "0 2 1, black 10%"
},
{
"part": "Raised",
"property": "Padding left and right",
"phone": "16",
"tablet": "16"
},
{
"part": "Raised",
"property": "Text",
"phone": "14 Regular, Muted #7A8684",
"tablet": "14 Regular, Muted #7A8684"
},
{
"part": "Raised",
"property": "Icon",
"phone": "20",
"tablet": "20"
},
{
"part": "Count line",
"property": "Type",
"phone": "14 Semibold, Ink #44544A",
"tablet": "14 Semibold, Ink #44544A"
}
],
"accessibility": [
"The search field has a label \"Search\" for screen readers even though only hint text shows.",
"The filter button is announced as \"Filters\", plus \"2 on\" when the badge shows.",
"The close icon is labelled \"Clear search\".",
"The 40 search and filter button keep a 44 touch area through the row padding.",
"Hint text in Ink on Light grey scores 7.2 for readability; the 12 size is the floor, so keep the term short."
],
"related": [
"filter-screen",
"list-layout",
"primary-tabs",
"chips",
"top-bar",
"text-field"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "standard",
"s": "empty",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "segmented-control",
"name": "Segmented control",
"group": "Inputs",
"status": "partial",
"purpose": "Switches between two to four views of the same content.",
"figma": null,
"whenToUse": [
"The same records shown another way: table or list, by animal or by species.",
"A period for a chart: 7 days, 30 days, 3 months.",
"Two to four options, each one or two words."
],
"whenNotToUse": [
{
"need": "Split records by status with counts",
"use": "Primary tabs"
},
{
"need": "Filter a list by a value",
"use": "Chips"
},
{
"need": "Choose a value in a form",
"use": "Dropdown"
},
{
"need": "Turn something on or off",
"use": "Switch"
}
],
"anatomy": [
{
"part": "Track",
"note": "required, pale green"
},
{
"part": "Chosen segment",
"note": "required, Antz green"
},
{
"part": "Other segments",
"note": "required"
}
],
"variants": [
{
"name": "Two to four options",
"purpose": "Equal widths across the track",
"inFigma": false
}
],
"states": [
{
"name": "Chosen",
"when": "The view on screen",
"change": "Antz green fill, white semibold text",
"inFigma": false
},
{
"name": "Not chosen",
"when": "Other views",
"change": "No fill, Ink text",
"inFigma": false
}
],
"behaviour": [
"Tapping a segment switches the view at once; there is no Apply.",
"The green fill slides to the new segment in 180 ms; a light haptic tick confirms.",
"The choice is kept when people come back to the screen."
],
"phoneVsTablet": [
{
"what": "Width",
"phone": "Full width of the content",
"tablet": "Up to 480, left aligned with the content"
}
],
"content": [
{
"part": "Labels",
"rule": "One or two words, sentence case; the same length where possible"
}
],
"specs": [
{
"part": "Track",
"property": "Height",
"phone": "45",
"tablet": "45"
},
{
"part": "Track",
"property": "Fill",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Track",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Track",
"property": "Padding",
"phone": "4",
"tablet": "4"
},
{
"part": "Track",
"property": "Gap",
"phone": "4",
"tablet": "4"
},
{
"part": "Segment",
"property": "Corners",
"phone": "5",
"tablet": "5"
},
{
"part": "Segment",
"property": "Text",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Segment",
"property": "Text colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Chosen segment",
"property": "Fill",
"phone": "Antz green #37BD69",
"tablet": "Antz green #37BD69"
},
{
"part": "Chosen segment",
"property": "Text",
"phone": "14 Semibold white",
"tablet": "14 Semibold white"
}
],
"accessibility": [
"The control is a group of tabs; the chosen one is announced as selected.",
"Each segment is at least 37 tall inside the 45 track; the tap area extends to 44.",
"White on Antz green scores 2.4 for readability, so labels stay semibold and short."
],
"related": [
"primary-tabs",
"chips",
"secondary-tab"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"n": "2",
"s": "first",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "button",
"name": "Button",
"group": "Actions",
"status": "ready",
"purpose": "Starts the one main action on a screen, or records a decision.",
"figma": "https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=355-107528",
"whenToUse": [
"The screen has one main thing to do: save, submit, continue, confirm.",
"A person must decide on a request: Approve and Reject together.",
"A pair of equal choices at the foot of a filter or sheet: Outline beside Main, both compact."
],
"whenNotToUse": [
{
"need": "Add a new record from a list",
"use": "Add button"
},
{
"need": "Reach second and later actions",
"use": "Menu"
},
{
"need": "Switch between views of the same list",
"use": "Secondary tab"
},
{
"need": "Confirm something that can't be undone",
"use": "Confirm"
}
],
"anatomy": [
{
"part": "Container",
"note": "required"
},
{
"part": "Icon",
"note": "optional, before the label, 24"
},
{
"part": "Label",
"note": "required"
},
{
"part": "Outline container",
"note": "for the quieter of two choices"
}
],
"variants": [
{
"name": "Main",
"purpose": "The one main action on a screen. Antz green, 56 tall, full width of the action bar",
"inFigma": true
},
{
"name": "Navy",
"purpose": "A call to action that is not the main step of the flow, such as Add results beside a status. Teal ink fill",
"inFigma": true
},
{
"name": "Approve and reject",
"purpose": "The decision pair on a request, 48 tall. Stacked on phone, side by side on tablet",
"inFigma": true
},
{
"name": "Outline",
"purpose": "The quieter of two choices, such as Cancel or Clear all",
"inFigma": true
},
{
"name": "Compact",
"purpose": "Buttons 40 tall in tight footers, such as a filter screen",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "Ready to use",
"change": "As specified",
"inFigma": true
},
{
"name": "Pressed",
"when": "Finger is down",
"change": "A 10% black layer over the fill",
"inFigma": false
},
{
"name": "Focus",
"when": "Reached with a keyboard on tablet",
"change": "2px Teal ink ring, 2 outside the edge",
"inFigma": false
},
{
"name": "Disabled",
"when": "The action can't be taken yet",
"change": "Disabled fill #DAE7DF, label in Hint #839D8D; outline keeps its white fill and grey border",
"inFigma": false
}
],
"behaviour": [
"One main action per screen. Every other action goes in the menu behind the more icon.",
"The main action sits in a white bar fixed to the bottom of the screen, 16 padding on phone and 20 on tablet.",
"Reject always asks for a reason before it completes.",
"A button that can't be used yet shows as disabled rather than disappearing, so the layout does not jump.",
"Delete never sits in red beside Edit; it lives in the menu and asks for confirmation."
],
"phoneVsTablet": [
{
"what": "Main button width",
"phone": "Full width of the action bar",
"tablet": "Full width of the action bar or panel"
},
{
"what": "Approve and reject",
"phone": "Stacked, Approve on top, gap 12, in a white bar with corners 16 on top",
"tablet": "Side by side, equal widths, Reject left, gap 24"
},
{
"what": "Action bar padding",
"phone": "16",
"tablet": "20"
}
],
"content": [
{
"part": "Label",
"rule": "A verb, or verb and noun, in sentence case: \"Save\", \"Submit request\""
},
{
"part": "Length",
"rule": "One to three words; never wraps to a second line"
},
{
"part": "Decision pair",
"rule": "Always \"Approve\" and \"Reject\""
},
{
"part": "Avoid",
"rule": "\"OK\", \"Yes\", \"Click here\", all capitals"
}
],
"specs": [
{
"part": "Main",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Main",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Main",
"property": "Fill",
"phone": "Antz green #37BD69",
"tablet": "Antz green #37BD69"
},
{
"part": "Main",
"property": "Label",
"phone": "16 Semibold",
"tablet": "16 Semibold"
},
{
"part": "Main",
"property": "Label colour",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Main",
"property": "Icon",
"phone": "24, white, gap 8",
"tablet": "24, white, gap 8"
},
{
"part": "Navy",
"property": "Fill",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Navy",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Approve",
"property": "Height",
"phone": "48",
"tablet": "48"
},
{
"part": "Approve",
"property": "Fill",
"phone": "Antz green #37BD69",
"tablet": "Antz green #37BD69"
},
{
"part": "Approve",
"property": "Label",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Reject",
"property": "Height",
"phone": "48",
"tablet": "48"
},
{
"part": "Reject",
"property": "Fill",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "Reject",
"property": "Label",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Decision pair",
"property": "Gap",
"phone": "12",
"tablet": "24"
},
{
"part": "Decision pair",
"property": "Bar",
"phone": "White, corners 16 on top, padding 24 / 16",
"tablet": "White, padding 20"
},
{
"part": "Outline",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Outline",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Outline",
"property": "Label",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Outline",
"property": "Label colour",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Compact",
"property": "Height",
"phone": "40",
"tablet": "40"
},
{
"part": "Compact",
"property": "Padding left and right",
"phone": "16",
"tablet": "16"
},
{
"part": "Compact outline",
"property": "Label",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Disabled",
"property": "Fill",
"phone": "Disabled #DAE7DF",
"tablet": "Disabled #DAE7DF"
},
{
"part": "Disabled",
"property": "Label colour",
"phone": "Hint #839D8D",
"tablet": "Hint #839D8D"
},
{
"part": "Confirm buttons",
"property": "Height",
"phone": "56",
"tablet": "56"
}
],
"accessibility": [
"Every button is at least 44 tall; Main and Navy are 56, decisions 48, compact 40 in an 80 footer, with the tap area extended to 44 above and below.",
"The label says what happens; an icon never stands alone in a button.",
"White on Antz green scores 2.4 for readability, so labels are 16 Semibold and never smaller. White on Teal ink scores 8.8.",
"White on Red scores 4.1; Reject is always written out, not shown by colour alone.",
"Disabled buttons are announced as unavailable, and the reason appears near the field that blocks them."
],
"related": [
"add-button",
"menu",
"confirm",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "main",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "Variant: Navy",
"temporary": false,
"state": {
"v": "navy",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "Variant: Approve and reject",
"temporary": false,
"state": {
"v": "pair",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "Variant: Outline",
"temporary": false,
"state": {
"v": "outline",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "Variant: Compact",
"temporary": false,
"state": {
"v": "compact",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "State: Pressed",
"temporary": true,
"state": {
"v": "main",
"s": "pressed",
"d": "phone"
},
"html": ""
},
{
"label": "State: Focus",
"temporary": true,
"state": {
"v": "main",
"s": "focus",
"d": "phone"
},
"html": ""
},
{
"label": "State: Disabled",
"temporary": true,
"state": {
"v": "main",
"s": "disabled",
"d": "phone"
},
"html": ""
}
]
},
{
"slug": "add-button",
"name": "Add button",
"group": "Actions",
"status": "ready",
"purpose": "Creates a new record from a list screen.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17772",
"whenToUse": [
"A list screen whose main job is adding new records.",
"Inline: adding another item inside a form or panel, such as one more row in a list being built."
],
"whenNotToUse": [
{
"need": "Save or submit what is on the screen",
"use": "Button"
},
{
"need": "Reach more than one kind of action",
"use": "Menu"
},
{
"need": "Choose people, sites or items into a field",
"use": "Picker field"
}
],
"anatomy": [
{
"part": "Phone container",
"note": "square, gradient fill"
},
{
"part": "Icon",
"note": "required"
},
{
"part": "Tablet container",
"note": "pill, Add blue"
},
{
"part": "Label",
"note": "tablet and inline only"
}
],
"variants": [
{
"name": "Floating, phone",
"purpose": "Square, green-to-turquoise gradient, icon only. Floats above the bottom navigation",
"inFigma": true
},
{
"name": "Floating, tablet",
"purpose": "Pill in Add blue with icon and label, when the page has one action",
"inFigma": true
},
{
"name": "Inline",
"purpose": "Full-width Add blue button inside a form or panel",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "Ready to use",
"change": "As specified",
"inFigma": true
},
{
"name": "Pressed",
"when": "Finger is down",
"change": "A 10% black layer over the fill",
"inFigma": false
}
],
"behaviour": [
"Tapping opens the new-record form full screen.",
"The floating button stays in place while the list scrolls; the last card keeps enough space below it to be read.",
"One floating button per screen, and only for adding."
],
"phoneVsTablet": [
{
"what": "Shape",
"phone": "Square 56, corners 12, icon only",
"tablet": "Pill 48 tall, corners 24, icon and label"
},
{
"what": "Fill",
"phone": "Gradient Turquoise #00D6C9 to Antz green #37BD69",
"tablet": "Add blue #00AFD6"
},
{
"what": "Position",
"phone": "Right 24, 16 above the bottom navigation",
"tablet": "Right 36 inside the gutter, 26 above the bottom navigation"
},
{
"what": "When the page has more than one action",
"phone": "Floating button for adding; the rest in the menu",
"tablet": "Not designed yet: ask"
}
],
"content": [
{
"part": "Label (tablet, inline)",
"rule": "\"Add\" and the record noun: \"Add item\""
},
{
"part": "Icon",
"rule": "Add circle on phone and inline, plain add on the tablet pill"
}
],
"specs": [
{
"part": "Phone button",
"property": "Size",
"phone": "56 × 56",
"tablet": "—"
},
{
"part": "Phone button",
"property": "Corners",
"phone": "12",
"tablet": "—"
},
{
"part": "Phone button",
"property": "Fill",
"phone": "Turquoise #00D6C9 to Antz green #37BD69, angled 116.5°",
"tablet": "—"
},
{
"part": "Phone button",
"property": "Shadow",
"phone": "0 4 4, black 15%",
"tablet": "—"
},
{
"part": "Phone button",
"property": "Icon",
"phone": "Add circle 24, white",
"tablet": "—"
},
{
"part": "Phone button",
"property": "Position",
"phone": "Right 24, above the bottom navigation",
"tablet": "—"
},
{
"part": "Tablet pill",
"property": "Height",
"phone": "—",
"tablet": "48"
},
{
"part": "Tablet pill",
"property": "Corners",
"phone": "—",
"tablet": "24"
},
{
"part": "Tablet pill",
"property": "Fill",
"phone": "—",
"tablet": "Add blue #00AFD6"
},
{
"part": "Tablet pill",
"property": "Border",
"phone": "—",
"tablet": "1px white at 40%"
},
{
"part": "Tablet pill",
"property": "Padding",
"phone": "—",
"tablet": "Left 10, right 12"
},
{
"part": "Tablet pill",
"property": "Icon to label",
"phone": "—",
"tablet": "6"
},
{
"part": "Tablet pill",
"property": "Icon",
"phone": "—",
"tablet": "20, white"
},
{
"part": "Tablet pill",
"property": "Label",
"phone": "—",
"tablet": "16 Medium white"
},
{
"part": "Tablet pill",
"property": "Shadow",
"phone": "—",
"tablet": "0 4 6, black 15%"
},
{
"part": "Inline",
"property": "Height",
"phone": "48",
"tablet": "48"
},
{
"part": "Inline",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Inline",
"property": "Fill",
"phone": "Add blue #00AFD6",
"tablet": "Add blue #00AFD6"
},
{
"part": "Inline",
"property": "Icon",
"phone": "20, white, gap 8",
"tablet": "20, white, gap 8"
},
{
"part": "Inline",
"property": "Label",
"phone": "16 Medium white",
"tablet": "16 Medium white"
}
],
"accessibility": [
"The phone button is icon only, so it carries a spoken label: \"Add\" and the record noun.",
"Touch area 56 on phone and 48 on tablet.",
"White on Add blue scores 2.6 and white on the gradient as low as 1.8; the icon is large and the tablet label is 16 Medium, but no small text goes on these fills."
],
"related": [
"button",
"bottom-navigation",
"list-layout",
"picker-field"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "float",
"s": "default",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "menu",
"name": "Menu",
"group": "Actions",
"status": "ready",
"purpose": "Holds the second and later actions for a screen, record or card, behind the more icon.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=304-4618",
"whenToUse": [
"A screen or record has more actions than its one main action.",
"A card needs actions that would clutter it if shown as buttons.",
"Destructive actions such as Delete or Deactivate, which should take a deliberate tap to reach."
],
"whenNotToUse": [
{
"need": "Do the one main thing on a screen",
"use": "Button"
},
{
"need": "Choose a value for a field",
"use": "Dropdown"
},
{
"need": "Pick from a long list with search",
"use": "Bottom sheet"
},
{
"need": "Switch between views",
"use": "Secondary tab"
}
],
"anatomy": [
{
"part": "More icon",
"note": "required, opens the menu"
},
{
"part": "Container",
"note": "required; the pale fill shows as 1px lines between items"
},
{
"part": "Item icon",
"note": "optional; all items have one or none do"
},
{
"part": "Item label",
"note": "required"
},
{
"part": "Destructive item",
"note": "optional, always last"
}
],
"variants": [
{
"name": "Actions only",
"purpose": "Icon and label per item",
"inFigma": true
},
{
"name": "With a destructive action",
"purpose": "Delete, Deactivate or Cancel last, in Red",
"inFigma": true
},
{
"name": "Text only",
"purpose": "Labels without icons when no icon reads clearly",
"inFigma": true
}
],
"states": [
{
"name": "Closed",
"when": "Default",
"change": "Only the more icon shows",
"inFigma": true
},
{
"name": "Open",
"when": "After tapping the more icon",
"change": "Menu drops below the icon, right edges aligned",
"inFigma": true
},
{
"name": "Item pressed",
"when": "Finger is down on an item",
"change": "A 10% black layer over the item",
"inFigma": false
}
],
"behaviour": [
"Opens below the more icon, its right edge lined up with the icon. If there is no room below, it opens above.",
"Tapping an item runs it and closes the menu. Tapping outside closes it with nothing done.",
"Destructive items ask for confirmation before they run."
],
"phoneVsTablet": [
{
"what": "Size and look",
"phone": "Same on both",
"tablet": "Same on both"
},
{
"what": "Width",
"phone": "Fits the longest label, at least 180",
"tablet": "Fits the longest label, at least 180"
}
],
"content": [
{
"part": "Item label",
"rule": "A verb or verb and noun in sentence case: \"Edit\", \"Download report\""
},
{
"part": "Order",
"rule": "Most used first; destructive last"
},
{
"part": "Number of items",
"rule": "Two to six. One item means it should be a button"
}
],
"specs": [
{
"part": "Container",
"property": "Fill between items",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Container",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Container",
"property": "Shadow",
"phone": "0 4 14, black 15%",
"tablet": "0 4 14, black 15%"
},
{
"part": "Container",
"property": "Gap between items",
"phone": "1",
"tablet": "1"
},
{
"part": "Container",
"property": "Minimum width",
"phone": "180",
"tablet": "180"
},
{
"part": "Item",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Item",
"property": "Padding",
"phone": "12 top and bottom, 16 left and right",
"tablet": "12 top and bottom, 16 left and right"
},
{
"part": "Item",
"property": "Icon to label",
"phone": "8",
"tablet": "8"
},
{
"part": "Icon",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Label",
"property": "Colour",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Destructive item",
"property": "Label and icon colour",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "More icon",
"property": "Button",
"phone": "36, icon 24, Ink #44544A",
"tablet": "36, icon 24, Ink #44544A"
}
],
"accessibility": [
"Each item is 48 tall, above the 44 minimum.",
"The more icon has a spoken label, \"More actions\".",
"Teal ink on white scores 8.8; Red on white scores 4.1, and the label still says what the action does.",
"Focus moves into the menu when it opens and back to the more icon when it closes."
],
"related": [
"button",
"top-bar",
"record-header",
"confirm"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "plain",
"s": "default"
},
"html": "
"
}
]
},
{
"slug": "top-bar",
"name": "Top bar",
"group": "Navigation",
"status": "ready",
"purpose": "Names the screen and holds the way back, plus up to two screen-wide actions.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17741",
"whenToUse": [
"Every list, form and settings screen that is not a record detail.",
"The screen needs a way back or a way to close."
],
"whenNotToUse": [
{
"need": "Show one record with its owner",
"use": "Record header"
},
{
"need": "Move between the main parts of a module",
"use": "Bottom navigation"
},
{
"need": "Title a bottom sheet",
"use": "Bottom sheet"
}
],
"anatomy": [
{
"part": "Back or close",
"note": "optional; back for drill-in screens, close for forms"
},
{
"part": "Title",
"note": "required, one line"
},
{
"part": "Action icon",
"note": "optional, up to two"
},
{
"part": "More icon",
"note": "optional, opens the menu"
}
],
"variants": [
{
"name": "Back",
"purpose": "Drill-in screens",
"inFigma": true
},
{
"name": "Back and actions",
"purpose": "Screens with search or a menu of screen-wide actions",
"inFigma": true
},
{
"name": "Close",
"purpose": "Forms that open on top of a list",
"inFigma": true
},
{
"name": "Title only",
"purpose": "The first screen of a module",
"inFigma": true
},
{
"name": "With site switch",
"purpose": "Screens whose whole content belongs to one site: the site name and a chevron sit on the right",
"inFigma": false
}
],
"states": [
{
"name": "Default",
"when": "Always",
"change": "As specified",
"inFigma": true
},
{
"name": "Icon pressed",
"when": "Finger is down on an icon",
"change": "A 10% black circle behind the icon",
"inFigma": false
}
],
"behaviour": [
"Stays at the top while the page scrolls.",
"Back returns to the previous screen; Close leaves the form.",
"A long title cuts off with \"…\" on one line; it never wraps.",
"A screen-wide choice, such as the site, sits on the right of the top bar as the site name with a chevron. Tapping it opens the choices as a bottom sheet with filled radios; choosing one reloads the screen for that site."
],
"phoneVsTablet": [
{
"what": "Height",
"phone": "72",
"tablet": "72"
},
{
"what": "Padding",
"phone": "26 top, 22 bottom, 16 sides",
"tablet": "20 all round"
},
{
"what": "Title",
"phone": "20 Medium, left",
"tablet": "20 Medium, left"
}
],
"content": [
{
"part": "Title",
"rule": "The screen name in sentence case, two or three words: \"New request\", \"Settings\""
},
{
"part": "Avoid",
"rule": "Repeating the title in the page body; module names already shown on the home screen"
}
],
"specs": [
{
"part": "Site switch",
"property": "Type",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Site switch",
"property": "Colour",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Site switch",
"property": "Chevron",
"phone": "20, gap 4",
"tablet": "20, gap 4"
},
{
"part": "Bar",
"property": "Height",
"phone": "72",
"tablet": "72"
},
{
"part": "Bar",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Bar",
"property": "Bottom line",
"phone": "1px black at 5%",
"tablet": "1px black at 5%"
},
{
"part": "Bar",
"property": "Padding",
"phone": "26 top, 22 bottom, 16 sides",
"tablet": "20 all round"
},
{
"part": "Bar",
"property": "Gap",
"phone": "4",
"tablet": "4"
},
{
"part": "Back or close",
"property": "Slot",
"phone": "30 × 48",
"tablet": "30 × 48"
},
{
"part": "Back or close",
"property": "Icon",
"phone": "24, Ink #44544A",
"tablet": "24, Ink #44544A"
},
{
"part": "Title",
"property": "Type",
"phone": "20 Medium",
"tablet": "20 Medium"
},
{
"part": "Title",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Action icon",
"property": "Button",
"phone": "36, round",
"tablet": "36, round"
},
{
"part": "Action icon",
"property": "Icon",
"phone": "24, Ink #44544A",
"tablet": "24, Ink #44544A"
}
],
"accessibility": [
"Back, close and every icon button carry a spoken label (\"Back\", \"Close\", \"Search\", \"More actions\").",
"The back slot is drawn 30 × 48; its tap area extends to 44 wide into the gap. The 36 icon buttons extend to 44 inside the 72 bar.",
"The title is the screen's main heading for screen readers.",
"Ink on white scores 8.0."
],
"related": [
"record-header",
"menu",
"primary-tabs",
"list-layout",
"form-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "back",
"d": "phone"
},
"html": "
arrow_backTitle
"
},
{
"label": "Variant: Back and actions",
"temporary": false,
"state": {
"v": "actions",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "record-header",
"name": "Record header",
"group": "Navigation",
"status": "ready",
"purpose": "Opens a record detail screen: the record name, the way back, its menu and who it belongs to.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-23313",
"whenToUse": [
"A record screen where the brief asks for the navy header.",
"The record has an owner worth naming at the top."
],
"whenNotToUse": [
{
"need": "Any other record screen",
"use": "Record layout, default version"
},
{
"need": "Show a list, a form or settings",
"use": "Top bar"
},
{
"need": "Show the outcome of a check",
"use": "Result layout"
}
],
"anatomy": [
{
"part": "Back",
"note": "required"
},
{
"part": "Title",
"note": "required; centred, or left with a subtitle"
},
{
"part": "More icon",
"note": "optional, opens the menu"
},
{
"part": "Initials avatar",
"note": "with the person row"
},
{
"part": "Person row",
"note": "optional: name and one secondary line"
},
{
"part": "Content sheet",
"note": "required, overlaps the header with round top corners"
}
],
"variants": [
{
"name": "Centred title",
"purpose": "Short titles such as a record number",
"inFigma": true
},
{
"name": "Left title with subtitle",
"purpose": "When the record needs a second line, such as its type",
"inFigma": true
},
{
"name": "With person row",
"purpose": "Shows who raised or owns the record",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "Always",
"change": "As specified",
"inFigma": true
},
{
"name": "Icon pressed",
"when": "Finger is down on back or more",
"change": "A 20% black circle behind the icon",
"inFigma": false
}
],
"behaviour": [
"The header scrolls away with the content; the sheet slides up over it.",
"Back returns to the list the record was opened from.",
"Centred or left title is chosen per screen, and the same choice is kept across one module."
],
"phoneVsTablet": [
{
"what": "Bar padding",
"phone": "32 top, 12 bottom, 16 sides",
"tablet": "24 top, 12 bottom, 20 sides"
},
{
"what": "Gap in the bar",
"phone": "8",
"tablet": "12"
},
{
"what": "Title",
"phone": "Centred or left",
"tablet": "Usually left with a subtitle"
}
],
"content": [
{
"part": "Title",
"rule": "The record ID or name; never the screen type (\"Details\")"
},
{
"part": "Subtitle",
"rule": "One fact that tells records apart, such as the type"
},
{
"part": "Person row",
"rule": "Name, then one line such as the organisation; no labels like \"Requested by\""
}
],
"specs": [
{
"part": "Header",
"property": "Fill",
"phone": "Navy #1F415B",
"tablet": "Navy #1F415B"
},
{
"part": "Bar",
"property": "Padding",
"phone": "32 top, 12 bottom, 16 sides",
"tablet": "24 top, 12 bottom, 20 sides"
},
{
"part": "Bar",
"property": "Gap",
"phone": "8",
"tablet": "12"
},
{
"part": "Back and more",
"property": "Icon",
"phone": "24, white",
"tablet": "24, white"
},
{
"part": "Title",
"property": "Type",
"phone": "20 Medium",
"tablet": "20 Medium"
},
{
"part": "Title",
"property": "Colour",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Subtitle",
"property": "Type",
"phone": "14 Regular, white",
"tablet": "14 Regular, white"
},
{
"part": "Person row",
"property": "Padding",
"phone": "16 top, 24 bottom, 16 left, 12 right",
"tablet": "16 top, 24 bottom, 16 left, 12 right"
},
{
"part": "Person row",
"property": "Gap",
"phone": "8",
"tablet": "8"
},
{
"part": "Avatar",
"property": "Size",
"phone": "36, round",
"tablet": "36, round"
},
{
"part": "Avatar",
"property": "Fill",
"phone": "Turquoise #00D6C9",
"tablet": "Turquoise #00D6C9"
},
{
"part": "Avatar",
"property": "Initials",
"phone": "14 Medium white",
"tablet": "14 Medium white"
},
{
"part": "Name",
"property": "Type",
"phone": "16 Medium white",
"tablet": "16 Medium white"
},
{
"part": "Secondary line",
"property": "Type",
"phone": "14 Regular white",
"tablet": "14 Regular white"
},
{
"part": "Content sheet",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Content sheet",
"property": "Top corners",
"phone": "24",
"tablet": "24"
},
{
"part": "Content sheet",
"property": "Overlap",
"phone": "16",
"tablet": "16"
},
{
"part": "Content sheet",
"property": "Padding",
"phone": "24 top, 16 sides",
"tablet": "24 top, 20 sides"
}
],
"accessibility": [
"White on Navy scores 10.7.",
"Back and more carry spoken labels; their tap areas are 44.",
"The title is the screen's main heading for screen readers.",
"Initials on Turquoise score 1.8, so the name beside the avatar always carries the meaning."
],
"related": [
"top-bar",
"record-layout",
"menu",
"status-label"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "centre",
"w": "on",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "primary-tabs",
"name": "Primary tabs",
"group": "Navigation",
"status": "ready",
"purpose": "Splits a screen into its main views, one at a time.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=370-7146",
"whenToUse": [
"A screen has two to five views of the same thing that people switch between often.",
"Count: each view is a status bucket and the number matters (waiting, approved, rejected).",
"Underline: the views are different kinds of content (overview, list, people)."
],
"whenNotToUse": [
{
"need": "Switch between two ways of looking at one list",
"use": "Secondary tab"
},
{
"need": "Narrow a list by a quick filter",
"use": "Chips"
},
{
"need": "Move between parts of a module",
"use": "Bottom navigation"
}
],
"anatomy": [
{
"part": "Count",
"note": "count tabs; green when active"
},
{
"part": "Label",
"note": "required"
},
{
"part": "Inactive count tab",
"note": "Ink count, no bar"
},
{
"part": "Active underline tab",
"note": "green text and 2px bar"
},
{
"part": "Inactive underline tab",
"note": "Ink text, 1px grey line"
}
],
"variants": [
{
"name": "Count",
"purpose": "Count over label. Tabs hug their content and the row scrolls sideways",
"inFigma": true
},
{
"name": "Underline",
"purpose": "Equal widths across the screen, label only",
"inFigma": true
},
{
"name": "Underline with icons",
"purpose": "A 16 icon before each label",
"inFigma": true
}
],
"states": [
{
"name": "Active",
"when": "The view on screen",
"change": "Antz green count or text, 2px Antz green bar",
"inFigma": true
},
{
"name": "Inactive",
"when": "Other views",
"change": "Ink text; underline tabs keep a 1px Line",
"inFigma": true
},
{
"name": "Pressed",
"when": "Finger is down",
"change": "A 5% black layer over the tab",
"inFigma": false
}
],
"behaviour": [
"Tapping a tab swaps the content below; the top bar and tabs stay put.",
"Count tabs scroll sideways when they do not fit; the active tab scrolls into view.",
"Counts update when records change status; a tab with 0 stays visible."
],
"phoneVsTablet": [
{
"what": "Count tabs",
"phone": "Hug content, scroll sideways",
"tablet": "Same as phone (no tablet frame yet)"
},
{
"what": "Underline tabs",
"phone": "Equal widths, full screen",
"tablet": "Equal widths across the panel they sit in"
},
{
"what": "Underline tab height",
"phone": "48",
"tablet": "48"
}
],
"content": [
{
"part": "Label",
"rule": "One or two words, sentence case: \"Pending\", \"Approved\""
},
{
"part": "Count",
"rule": "The number only; no brackets"
},
{
"part": "Number of tabs",
"rule": "Underline two to four; count up to six"
}
],
"specs": [
{
"part": "Count row",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Count row",
"property": "Bottom line",
"phone": "1px Pale green #EFF5F2",
"tablet": "1px Pale green #EFF5F2"
},
{
"part": "Count tab",
"property": "Padding",
"phone": "8 top, 2 sides; content 20 sides",
"tablet": "8 top, 2 sides; content 20 sides"
},
{
"part": "Count tab",
"property": "Count to label",
"phone": "4",
"tablet": "4"
},
{
"part": "Count",
"property": "Type",
"phone": "16 Semibold",
"tablet": "16 Semibold"
},
{
"part": "Count",
"property": "Colour",
"phone": "Ink #44544A; active Antz green #37BD69",
"tablet": "Ink #44544A; active Antz green #37BD69"
},
{
"part": "Count label",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Count label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Count bar",
"property": "Height",
"phone": "2, round top corners",
"tablet": "2, round top corners"
},
{
"part": "Count bar",
"property": "Colour",
"phone": "Antz green #37BD69",
"tablet": "Antz green #37BD69"
},
{
"part": "Underline tab",
"property": "Width",
"phone": "Equal shares of the row",
"tablet": "Equal shares of the row"
},
{
"part": "Underline tab",
"property": "Padding",
"phone": "16",
"tablet": "16"
},
{
"part": "Underline tab",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Underline tab",
"property": "Icon",
"phone": "16, gap 4",
"tablet": "16, gap 4"
},
{
"part": "Underline tab",
"property": "Active",
"phone": "Antz green #37BD69 text and 2px bar",
"tablet": "Antz green #37BD69 text and 2px bar"
},
{
"part": "Underline tab",
"property": "Inactive",
"phone": "Ink #44544A text, 1px Line #C3CEC7",
"tablet": "Ink #44544A text, 1px Line #C3CEC7"
}
],
"accessibility": [
"The tab row is announced as tabs, with the selected one marked and its count read out.",
"Count tabs are about 52 tall and underline tabs 48, above the 44 minimum.",
"Antz green on white scores 2.4, so the active tab is also shown by the bar, not colour alone."
],
"related": [
"secondary-tab",
"chips",
"top-bar",
"list-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "count",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "secondary-tab",
"name": "Secondary tab",
"group": "Navigation",
"status": "ready",
"purpose": "Switches between two or three ways of looking at the same content.",
"figma": "https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=177-4850",
"whenToUse": [
"One list or panel can be seen two or three ways: all and mine, list and calendar.",
"The switch sits under the top bar or Primary tabs and changes only what is below it."
],
"whenNotToUse": [
{
"need": "Move between the main views of a screen",
"use": "Primary tabs"
},
{
"need": "Filter a list by many values",
"use": "Chips"
},
{
"need": "Turn a setting on or off",
"use": "Switch"
}
],
"anatomy": [
{
"part": "Track",
"note": "required"
},
{
"part": "Active segment",
"note": "required, one at a time"
},
{
"part": "Inactive segment",
"note": "required"
}
],
"variants": [
{
"name": "Antz green",
"purpose": "The standard active fill",
"inFigma": true
},
{
"name": "Teal ink",
"purpose": "When green would clash with a green main action or status nearby",
"inFigma": true
}
],
"states": [
{
"name": "Active",
"when": "The view on screen",
"change": "Filled segment, white text",
"inFigma": true
},
{
"name": "Inactive",
"when": "Other views",
"change": "No fill, Ink text",
"inFigma": true
},
{
"name": "Pressed",
"when": "Finger is down on an inactive segment",
"change": "5% black fill on the segment",
"inFigma": false
}
],
"behaviour": [
"Exactly one segment is active. Tapping another swaps the view straight away; nothing is saved.",
"Segments hug their labels; the track hugs the segments and sits at the left of the content.",
"The fill moves to the new segment in 180ms; reduced motion turns this off."
],
"phoneVsTablet": [
{
"what": "Row padding",
"phone": "16 sides",
"tablet": "20 sides"
},
{
"what": "Size",
"phone": "Same on both",
"tablet": "Same on both"
}
],
"content": [
{
"part": "Segment label",
"rule": "One or two words, sentence case: \"All\", \"Created by me\""
},
{
"part": "Number of segments",
"rule": "Two or three"
}
],
"specs": [
{
"part": "Track",
"property": "Fill",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Track",
"property": "Corners",
"phone": "Round (100)",
"tablet": "Round (100)"
},
{
"part": "Track",
"property": "Padding",
"phone": "4",
"tablet": "4"
},
{
"part": "Segment",
"property": "Padding",
"phone": "12 top and bottom, 16 sides",
"tablet": "12 top and bottom, 16 sides"
},
{
"part": "Segment",
"property": "Corners",
"phone": "Round (100)",
"tablet": "Round (100)"
},
{
"part": "Segment",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Active segment",
"property": "Fill",
"phone": "Antz green #37BD69",
"tablet": "Antz green #37BD69"
},
{
"part": "Active segment",
"property": "Text",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Active segment, Teal ink",
"property": "Fill",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Inactive segment",
"property": "Text",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
}
],
"accessibility": [
"Announced as tabs, the active one marked selected.",
"Each segment is 38 tall drawn; with the track padding the tap area is 46.",
"White on Antz green scores 2.4; the filled shape, not colour alone, shows the active segment. White on Teal ink scores 8.8.",
"Ink on Pale green scores 7.3."
],
"related": [
"primary-tabs",
"chips",
"list-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "green",
"n": "2",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "Variant: Teal ink",
"temporary": false,
"state": {
"v": "teal",
"n": "2",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "Segments: Three",
"temporary": false,
"state": {
"v": "green",
"n": "3",
"s": "default",
"d": "phone"
},
"html": ""
},
{
"label": "State: Pressed",
"temporary": true,
"state": {
"v": "green",
"n": "2",
"s": "pressed",
"d": "phone"
},
"html": ""
}
]
},
{
"slug": "chips",
"name": "Chips",
"group": "Navigation",
"status": "ready",
"purpose": "Narrows a list to one group at a time, with the count in each label.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17765",
"whenToUse": [
"A list can be cut into a few groups by one property, such as status or type.",
"People benefit from seeing how many records are in each group before tapping."
],
"whenNotToUse": [
{
"need": "Switch between main views of a screen",
"use": "Primary tabs"
},
{
"need": "Combine several filters at once",
"use": "Filter screen"
},
{
"need": "Choose a value in a form",
"use": "Dropdown"
}
],
"anatomy": [
{
"part": "Selected chip",
"note": "one at a time"
},
{
"part": "Default chip",
"note": "required"
},
{
"part": "Label with count",
"note": "required: label, dash, count"
}
],
"variants": [
{
"name": "Fits the row",
"purpose": "Three or four chips",
"inFigma": true
},
{
"name": "Scrolls sideways",
"purpose": "More chips than fit; the row clips at the screen edge",
"inFigma": true
}
],
"states": [
{
"name": "Selected",
"when": "The group on screen",
"change": "Teal ink fill, white 14 Medium",
"inFigma": true
},
{
"name": "Default",
"when": "Other groups",
"change": "Page fill, Teal ink 14 Regular",
"inFigma": true
},
{
"name": "Pressed",
"when": "Finger is down",
"change": "A 5% black layer over the chip",
"inFigma": false
}
],
"behaviour": [
"Exactly one chip is selected; \"All\" is first and selected when the screen opens.",
"Tapping a chip filters the list below at once; the search keeps its text.",
"Counts follow the records in each group; a chip with 0 stays in the row."
],
"phoneVsTablet": [
{
"what": "Row padding",
"phone": "12 top and bottom, 16 sides",
"tablet": "12 top and bottom, 20 sides"
},
{
"what": "Chip size",
"phone": "32 tall",
"tablet": "32 tall"
}
],
"content": [
{
"part": "Label",
"rule": "Group name, space, dash, space, count: \"All - 22\""
},
{
"part": "Order",
"rule": "\"All\" first, then the order of the workflow"
}
],
"specs": [
{
"part": "Row",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Row",
"property": "Padding",
"phone": "12 top and bottom, 16 sides",
"tablet": "12 top and bottom, 20 sides"
},
{
"part": "Row",
"property": "Gap",
"phone": "12",
"tablet": "12"
},
{
"part": "Row",
"property": "Shadow",
"phone": "0 1 1, black 10%",
"tablet": "0 1 1, black 10%"
},
{
"part": "Chip",
"property": "Height",
"phone": "32",
"tablet": "32"
},
{
"part": "Chip",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Chip",
"property": "Padding",
"phone": "6 top and bottom, 8 sides",
"tablet": "6 top and bottom, 8 sides"
},
{
"part": "Default chip",
"property": "Fill",
"phone": "Page #DDEBE9",
"tablet": "Page #DDEBE9"
},
{
"part": "Default chip",
"property": "Text",
"phone": "14 Regular, Teal ink #1F515B",
"tablet": "14 Regular, Teal ink #1F515B"
},
{
"part": "Selected chip",
"property": "Fill",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Selected chip",
"property": "Text",
"phone": "14 Medium, white #FFFFFF",
"tablet": "14 Medium, white #FFFFFF"
}
],
"accessibility": [
"Chips are drawn 32 tall; the row is 56, so each chip's tap area takes the full row height (44 or more).",
"The selected chip is announced as selected and its count is read out.",
"Teal ink on Page scores 7.2; white on Teal ink scores 8.8."
],
"related": [
"primary-tabs",
"secondary-tab",
"search-filter",
"list-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "fit",
"s": "default",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "list-card",
"name": "List card",
"group": "Display",
"status": "ready",
"purpose": "A white card that stands for one record in a list: who it is about, its status when it has one, and a meta line.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=281-7032",
"whenToUse": [
"A list of records where each one is about a person, a request or an item.",
"The record may have one status that people scan for; with no status, the label is left out.",
"Tapping the card opens the record."
],
"whenNotToUse": [
{
"need": "Show a request or approval that is waiting on someone",
"use": "Request card"
},
{
"need": "Show an animal",
"use": "Animal card"
},
{
"need": "Choose or show a site",
"use": "Site card"
},
{
"need": "Show what happened to a record over time",
"use": "History"
}
],
"anatomy": [
{
"part": "Head strip",
"note": "optional"
},
{
"part": "Record number",
"note": "with the head strip, 16 badge icon"
},
{
"part": "Status label",
"note": "optional: shown once when the record has a status"
},
{
"part": "Initials",
"note": "required when the record is about a person"
},
{
"part": "Name",
"note": "required"
},
{
"part": "Detail",
"note": "optional, one line"
},
{
"part": "Meta line",
"note": "optional"
}
],
"variants": [
{
"name": "With head strip",
"purpose": "The record has its own number people look up; the number and status sit in a strip above the body",
"inFigma": true
},
{
"name": "Without head strip",
"purpose": "No record number; the status label sits on the right of the name row",
"inFigma": false
}
],
"states": [
{
"name": "Default",
"when": "The record is loaded",
"change": "As drawn",
"inFigma": true
},
{
"name": "Loading",
"when": "The list is still loading",
"change": "Same layout; light grey blocks where text will be, no spinner",
"inFigma": false
}
],
"behaviour": [
"The whole card is one tap target and opens the record.",
"Cards sit 12 apart on the page background; there is no divider between them.",
"Text that is too long ends in an ellipsis on one line; the card never grows sideways.",
"Actions on the record live inside it or in a menu, never as buttons on the card."
],
"phoneVsTablet": [
{
"what": "Card padding",
"phone": "12",
"tablet": "16"
},
{
"what": "Status label type",
"phone": "12 Semibold",
"tablet": "14 Medium"
},
{
"what": "Gap between cards",
"phone": "12",
"tablet": "12"
}
],
"content": [
{
"part": "Record number",
"rule": "The ID as people say it, prefix and number"
},
{
"part": "Name",
"rule": "The person or thing the record is about"
},
{
"part": "Detail",
"rule": "One fact that tells two similar cards apart, such as the organisation"
},
{
"part": "Status label",
"rule": "One or two words; the status appears once on the card. Leave it out when the record has no status, never write a placeholder"
},
{
"part": "Meta line",
"rule": "Who and when, joined by \" • \""
}
],
"specs": [
{
"part": "Card",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Card",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Card",
"property": "Shadow",
"phone": "None",
"tablet": "None"
},
{
"part": "Card",
"property": "Width",
"phone": "Full width of the page less the side padding",
"tablet": "Full width of the page less the side padding"
},
{
"part": "Head strip",
"property": "Padding",
"phone": "8 top and bottom, 12 sides",
"tablet": "8 top and bottom, 16 sides"
},
{
"part": "Head strip",
"property": "Divider below",
"phone": "1px black at 5%",
"tablet": "1px black at 5%"
},
{
"part": "Record number",
"property": "Type",
"phone": "12 Semibold",
"tablet": "12 Semibold"
},
{
"part": "Record number",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Record number",
"property": "Icon",
"phone": "16",
"tablet": "16"
},
{
"part": "Body",
"property": "Padding",
"phone": "12",
"tablet": "16"
},
{
"part": "Body",
"property": "Gap",
"phone": "12",
"tablet": "12"
},
{
"part": "Initials",
"property": "Size",
"phone": "36, round",
"tablet": "36, round"
},
{
"part": "Initials",
"property": "Fill",
"phone": "Turquoise #00D6C9",
"tablet": "Turquoise #00D6C9"
},
{
"part": "Initials",
"property": "Type",
"phone": "14 Medium white",
"tablet": "14 Medium white"
},
{
"part": "Initials",
"property": "Gap to name",
"phone": "8",
"tablet": "8"
},
{
"part": "Name",
"property": "Type",
"phone": "16 Medium",
"tablet": "16 Medium"
},
{
"part": "Name",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Detail",
"property": "Type",
"phone": "14 Regular",
"tablet": "14 Regular"
},
{
"part": "Detail",
"property": "Colour",
"phone": "Muted #7A8684",
"tablet": "Muted #7A8684"
},
{
"part": "Detail",
"property": "Space above",
"phone": "4",
"tablet": "4"
},
{
"part": "Meta line",
"property": "Type",
"phone": "12 Regular; the person in 12 Semibold",
"tablet": "12 Regular; the person in 12 Semibold"
},
{
"part": "Meta line",
"property": "Colour",
"phone": "Muted #7A8684; the person in Navy #1F415B",
"tablet": "Muted #7A8684; the person in Navy #1F415B"
},
{
"part": "Status label",
"property": "Type",
"phone": "12 Semibold",
"tablet": "14 Medium"
},
{
"part": "List",
"property": "Gap between cards",
"phone": "12",
"tablet": "12"
}
],
"accessibility": [
"The card is read as one item: name, status, then detail, so the status is heard without a colour.",
"The whole card is the touch area; it is always taller than 44.",
"Name in Ink on white scores 8.0 for readability. Detail in Muted scores 3.8, so it never carries the only copy of something required.",
"Loading blocks are hidden from screen readers; the list announces \"Loading\" once."
],
"related": [
"request-card",
"status-label",
"list-layout",
"search-filter"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "head",
"s": "positive",
"l": "default",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "request-card",
"name": "Request card",
"group": "Display",
"status": "ready",
"purpose": "A lifted card for a request or an approval: category, priority, who asked, what for, and the status in a strip along the bottom.",
"figma": "https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=89-129699",
"whenToUse": [
"The record is a request or an approval that waits on someone.",
"People scan a list to see what still needs a decision.",
"The default item in a list. See List layout."
],
"whenNotToUse": [
{
"need": "Show a record that is not a request",
"use": "List card"
},
{
"need": "Show a status inside a detail screen",
"use": "Status label"
},
{
"need": "Show an animal",
"use": "Animal card"
}
],
"anatomy": [
{
"part": "Category tile",
"note": "required: 32 Navy tile with the category icon"
},
{
"part": "Category",
"note": "required"
},
{
"part": "Priority flag",
"note": "required: Normal, High or Emergency"
},
{
"part": "Meta line",
"note": "required: record number, person who asked and age"
},
{
"part": "Description",
"note": "optional: what is asked for, up to two lines"
},
{
"part": "Attachments",
"note": "optional: a count per kind of file"
},
{
"part": "Amount",
"note": "optional: the cost, in Antz green"
},
{
"part": "Status strip",
"note": "required: icon, status and how long it has been in it"
}
],
"variants": [
{
"name": "Awaiting",
"purpose": "Waiting for a decision",
"inFigma": true
},
{
"name": "Approved",
"purpose": "The request was approved",
"inFigma": true
},
{
"name": "Rejected",
"purpose": "The request was turned down",
"inFigma": true
},
{
"name": "Normal priority",
"purpose": "Turquoise flag with \"!\"",
"inFigma": true
},
{
"name": "High priority",
"purpose": "Coral flag with \"!!!\"",
"inFigma": true
},
{
"name": "Emergency",
"purpose": "Red flag with a fire icon",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "The card is in a list",
"change": "As drawn",
"inFigma": true
}
],
"behaviour": [
"The whole card opens the request.",
"The strip is the only place the status appears on the card; there is no status label as well.",
"The description stops at two lines and ends in an ellipsis.",
"Attachment kinds with no files are left out; with no files at all the row shows the clip and 0."
],
"phoneVsTablet": [
{
"what": "Card width",
"phone": "Full width less 16 each side",
"tablet": "Column width in the list panel"
},
{
"what": "Gap between cards",
"phone": "16",
"tablet": "16"
}
],
"content": [
{
"part": "Category",
"rule": "The department or kind of request, one line"
},
{
"part": "Meta line",
"rule": "Record number • person • age, such as \"REQ 567 • Name • 2 d\""
},
{
"part": "Description",
"rule": "What is asked for, in plain words, not the form title"
},
{
"part": "Strip label",
"rule": "The status in two or three words"
},
{
"part": "Time",
"rule": "\"Since n days\" for waiting; the date for a decision already made"
}
],
"specs": [
{
"part": "Card",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Card",
"property": "Corners",
"phone": "12",
"tablet": "12"
},
{
"part": "Card",
"property": "Shadow",
"phone": "0 2 2, black at 10%",
"tablet": "0 2 2, black at 10%"
},
{
"part": "Card",
"property": "Gap between rows",
"phone": "12",
"tablet": "12"
},
{
"part": "Head",
"property": "Padding",
"phone": "16 top, 16 left, flag flush right",
"tablet": "16 top, 16 left, flag flush right"
},
{
"part": "Head",
"property": "Gap",
"phone": "12",
"tablet": "12"
},
{
"part": "Category tile",
"property": "Size",
"phone": "32, corners 4",
"tablet": "32, corners 4"
},
{
"part": "Category tile",
"property": "Fill",
"phone": "Navy #1F415B, white 24 icon",
"tablet": "Navy #1F415B, white 24 icon"
},
{
"part": "Category",
"property": "Type",
"phone": "20 Medium",
"tablet": "20 Medium"
},
{
"part": "Category",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Priority flag",
"property": "Size",
"phone": "52 × 34",
"tablet": "52 × 34"
},
{
"part": "Priority flag",
"property": "Glyph",
"phone": "24 Semibold white",
"tablet": "24 Semibold white"
},
{
"part": "Normal",
"property": "Fill",
"phone": "Turquoise #00D6C9",
"tablet": "Turquoise #00D6C9"
},
{
"part": "High",
"property": "Fill",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Emergency",
"property": "Fill",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "Body",
"property": "Padding",
"phone": "16 left and right",
"tablet": "16 left and right"
},
{
"part": "Meta line",
"property": "Type",
"phone": "12 Semibold, age in 12 Regular",
"tablet": "12 Semibold, age in 12 Regular"
},
{
"part": "Meta line",
"property": "Colour",
"phone": "Teal ink #1F515B, age in Muted #7A8684",
"tablet": "Teal ink #1F515B, age in Muted #7A8684"
},
{
"part": "Description",
"property": "Type",
"phone": "14 Regular, two lines",
"tablet": "14 Regular, two lines"
},
{
"part": "Description",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Attachments",
"property": "Icons",
"phone": "16, gap 2 to the count, 12 between kinds",
"tablet": "16, gap 2 to the count, 12 between kinds"
},
{
"part": "Amount",
"property": "Type",
"phone": "14 Semibold, Antz green #37BD69",
"tablet": "14 Semibold, Antz green #37BD69"
},
{
"part": "Amount",
"property": "Icon",
"phone": "20",
"tablet": "20"
},
{
"part": "Strip",
"property": "Inset from card edge",
"phone": "2 at the sides and bottom",
"tablet": "2 at the sides and bottom"
},
{
"part": "Strip",
"property": "Padding",
"phone": "12 top and bottom, 14 sides",
"tablet": "12 top and bottom, 14 sides"
},
{
"part": "Strip",
"property": "Corners",
"phone": "10 at the bottom only",
"tablet": "10 at the bottom only"
},
{
"part": "Strip",
"property": "Gap",
"phone": "4",
"tablet": "4"
},
{
"part": "Strip icon",
"property": "Size",
"phone": "20",
"tablet": "20"
},
{
"part": "Strip label",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Strip time",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Strip time",
"property": "Colour",
"phone": "Black at 40%",
"tablet": "Black at 40%"
},
{
"part": "Awaiting",
"property": "Fill",
"phone": "Amber #E4B819 at 10%",
"tablet": "Amber #E4B819 at 10%"
},
{
"part": "Awaiting",
"property": "Text",
"phone": "Deep brown #250E01",
"tablet": "Deep brown #250E01"
},
{
"part": "Approved",
"property": "Fill",
"phone": "Positive #E1F9ED",
"tablet": "Positive #E1F9ED"
},
{
"part": "Approved",
"property": "Text",
"phone": "Dark green #006D35",
"tablet": "Dark green #006D35"
},
{
"part": "Rejected",
"property": "Fill",
"phone": "Red #E93353 at 10%",
"tablet": "Red #E93353 at 10%"
},
{
"part": "Rejected",
"property": "Text",
"phone": "Red #E93353",
"tablet": "Red #E93353"
}
],
"accessibility": [
"The card is read as one item: category, priority, meta, then the strip label, so the status is never carried by colour alone.",
"The priority flag is read as \"Normal\", \"High\" or \"Emergency\" priority, not as its glyph.",
"Each strip has its own icon: pace, check_circle or cancel.",
"Strip labels score 17.3 (Awaiting), 5.9 (Approved) and 3.6 (Rejected) for readability. Rejected is below 4.5, so the icon and the words carry the meaning, never the red alone.",
"The time at 40% black scores 2.8; it is extra, never the only copy of a fact."
],
"related": [
"list-card",
"status-label",
"history",
"list-layout",
"record-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"s": "awaiting",
"p": "normal"
},
"html": "
categoryCategory!
Record number • Name • 2 d
What is asked for, in plain words, up to two lines
"
}
]
},
{
"slug": "animal-card",
"name": "Animal card",
"group": "Display",
"status": "ready",
"purpose": "Shows one animal with its photo and the lines people use to tell it apart.",
"figma": "https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=193-9208",
"whenToUse": [
"Any time an animal appears on a screen: in a list, a form, a picker or a record.",
"People need to be sure which animal it is before they act."
],
"whenNotToUse": [
{
"need": "Show a person or a record",
"use": "List card"
},
{
"need": "Show a site",
"use": "Site card"
},
{
"need": "Show a section or an enclosure",
"use": "Not designed yet; ask for the Figma frame"
}
],
"anatomy": [
{
"part": "Photo",
"note": "required; a grey block when there is no photo"
},
{
"part": "Sex tag",
"note": "required: M, F or U"
},
{
"part": "CITES tag",
"note": "when the species is CITES listed"
},
{
"part": "Expand icon",
"note": "required; opens the photo full size"
},
{
"part": "Identifier",
"note": "optional: ear tag, name or chip"
},
{
"part": "Animal ID",
"note": "required"
},
{
"part": "Common name",
"note": "required"
},
{
"part": "Scientific name",
"note": "required, italic"
},
{
"part": "Enclosure",
"note": "optional"
}
],
"variants": [
{
"name": "Male",
"purpose": "Sex tag in Turquoise",
"inFigma": true
},
{
"name": "Female",
"purpose": "Sex tag in Coral",
"inFigma": true
},
{
"name": "Unknown",
"purpose": "Sex tag in Red",
"inFigma": true
},
{
"name": "With CITES tag",
"purpose": "Appendix shown as \"C\" and its number",
"inFigma": true
},
{
"name": "No identifier",
"purpose": "The animal has no ear tag, name or chip",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "The animal is shown",
"change": "As drawn",
"inFigma": true
}
],
"behaviour": [
"Tapping the expand icon opens the photo full size; tapping elsewhere opens the animal or picks it, depending on the screen.",
"Every line is one line; long text ends in an ellipsis and the card keeps its height.",
"The card stretches to the width it is given: a list column on tablet, the full form width in a form.",
"The same card is used for every animal everywhere, so people learn one shape.",
"Lists of animals use this full card with its 104 photo, one card per animal. There is no smaller animal row."
],
"phoneVsTablet": [
{
"what": "Width",
"phone": "Full width less 16 each side",
"tablet": "303 in a list panel, 786 in a form"
},
{
"what": "Photo",
"phone": "104 × 104",
"tablet": "104 × 104"
}
],
"content": [
{
"part": "Identifier",
"rule": "\"Ear tag\", \"Name\" or \"Chip\" then the value; whichever the zoo uses first"
},
{
"part": "Animal ID",
"rule": "The ID as the system gives it"
},
{
"part": "Common name",
"rule": "As in the species list, sentence case"
},
{
"part": "Scientific name",
"rule": "Genus and species, italic, never shortened"
},
{
"part": "Enclosure",
"rule": "The current enclosure name"
}
],
"specs": [
{
"part": "Card",
"property": "Fill",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Card",
"property": "Corners",
"phone": "12",
"tablet": "12"
},
{
"part": "Card",
"property": "Padding",
"phone": "8",
"tablet": "8"
},
{
"part": "Card",
"property": "Gap",
"phone": "8",
"tablet": "8"
},
{
"part": "Photo",
"property": "Size",
"phone": "104 × 104",
"tablet": "104 × 104"
},
{
"part": "Photo",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Sex tag",
"property": "Size",
"phone": "24 × 24, 4 from the top and left",
"tablet": "24 × 24, 4 from the top and left"
},
{
"part": "Sex tag",
"property": "Corners",
"phone": "6",
"tablet": "6"
},
{
"part": "Sex tag",
"property": "Type",
"phone": "10 Medium white",
"tablet": "10 Medium white"
},
{
"part": "Sex tag",
"property": "Male",
"phone": "Turquoise #00D6C9",
"tablet": "Turquoise #00D6C9"
},
{
"part": "Sex tag",
"property": "Female",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Sex tag",
"property": "Unknown",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "CITES tag",
"property": "Height",
"phone": "24, top right",
"tablet": "24, top right"
},
{
"part": "CITES tag",
"property": "Fill",
"phone": "Black at 40%",
"tablet": "Black at 40%"
},
{
"part": "CITES tag",
"property": "Corners",
"phone": "6",
"tablet": "6"
},
{
"part": "CITES tag",
"property": "Type",
"phone": "10 Medium white",
"tablet": "10 Medium white"
},
{
"part": "Expand icon",
"property": "Size",
"phone": "16, bottom right, white",
"tablet": "16, bottom right, white"
},
{
"part": "Lines",
"property": "Gap",
"phone": "4",
"tablet": "4"
},
{
"part": "Identifier",
"property": "Type",
"phone": "14 Semibold",
"tablet": "14 Semibold"
},
{
"part": "Identifier",
"property": "Colour",
"phone": "Teal ink #1F515B",
"tablet": "Teal ink #1F515B"
},
{
"part": "Animal ID, common name, enclosure",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Animal ID, common name, enclosure",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Scientific name",
"property": "Type",
"phone": "14 Regular italic",
"tablet": "14 Regular italic"
},
{
"part": "Scientific name",
"property": "Colour",
"phone": "Muted #7A8684",
"tablet": "Muted #7A8684"
}
],
"accessibility": [
"The photo has a text alternative: common name and animal ID.",
"Sex is written as a letter on the tag, never shown by colour alone.",
"Lines on Pale green score 8.0 (Identifier), 7.3 (Ink lines) and 3.4 (Scientific name) for readability. The scientific name is never the only way to identify the animal.",
"The expand icon has its own label, \"View photo\", and a touch area of at least 44 around it."
],
"related": [
"site-card",
"picker-field",
"list-card",
"record-layout"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"x": "M",
"c": "cites",
"l": "full",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "status-label",
"name": "Status label",
"group": "Display",
"status": "ready",
"purpose": "A small tinted label that says the status of a record in one or two words.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=281-7044",
"whenToUse": [
"A record has a status people scan for: in a list card, a detail screen or a log row.",
"The status is one of a known set."
],
"whenNotToUse": [
{
"need": "Show the status of a request or an approval in a list",
"use": "Request card (status strip)"
},
{
"need": "Filter a list by status",
"use": "Chips"
},
{
"need": "Show what happened over time",
"use": "History"
}
],
"anatomy": [
{
"part": "Container",
"note": "required: tint of the meaning"
},
{
"part": "Icon",
"note": "optional; use it for pending"
},
{
"part": "Label",
"note": "required: the status in one or two words"
}
],
"variants": [
{
"name": "Text only",
"purpose": "The standard label",
"inFigma": true
},
{
"name": "With icon",
"purpose": "Adds a 16 icon before the word; use for pending, where the colour is weak",
"inFigma": false
}
],
"states": [
{
"name": "Positive",
"when": "Active, Approved, Entry, Completed",
"change": "Positive fill, Dark green text",
"inFigma": true
},
{
"name": "Pending",
"when": "Upcoming, Waiting, Draft",
"change": "Amber light at 30%, Amber text",
"inFigma": true
},
{
"name": "Negative",
"when": "Expired, Rejected, Denied, Not authorised",
"change": "Red tint at 40%, Red text",
"inFigma": true
},
{
"name": "Cancelled",
"when": "Cancelled",
"change": "Coral tint at 30%, Coral text",
"inFigma": true
},
{
"name": "Neutral",
"when": "Exit, Inactive, Auto",
"change": "Black at 5%, Ink text",
"inFigma": true
}
],
"behaviour": [
"A label is read-only; it never opens anything.",
"The status appears once per card or screen. Never repeat it as a colour stripe, a sentence or a second label.",
"Pick the meaning from what the status means for the person, not from how it looks.",
"A label never wraps; keep the word short enough to fit."
],
"phoneVsTablet": [
{
"what": "Type",
"phone": "12 Semibold",
"tablet": "14 Medium"
},
{
"what": "Padding",
"phone": "4 top and bottom, 8 sides",
"tablet": "4 top and bottom, 8 sides"
}
],
"content": [
{
"part": "Label",
"rule": "One or two words, sentence case, the same word everywhere for the same status"
},
{
"part": "Spelling",
"rule": "\"Cancelled\", not \"Canceled\""
}
],
"specs": [
{
"part": "Container",
"property": "Padding",
"phone": "4 top and bottom, 8 sides",
"tablet": "4 top and bottom, 8 sides"
},
{
"part": "Container",
"property": "Corners",
"phone": "4",
"tablet": "4"
},
{
"part": "Label",
"property": "Type",
"phone": "12 Semibold",
"tablet": "14 Medium"
},
{
"part": "Icon",
"property": "Size",
"phone": "16, gap 4",
"tablet": "16, gap 4"
},
{
"part": "Positive",
"property": "Fill",
"phone": "Positive #E1F9ED",
"tablet": "Positive #E1F9ED"
},
{
"part": "Positive",
"property": "Text",
"phone": "Dark green #006D35",
"tablet": "Dark green #006D35"
},
{
"part": "Pending",
"property": "Fill",
"phone": "Amber light #FFE86E at 30%",
"tablet": "Amber light #FFE86E at 30%"
},
{
"part": "Pending",
"property": "Text",
"phone": "Amber #E4B819",
"tablet": "Amber #E4B819"
},
{
"part": "Negative",
"property": "Fill",
"phone": "Red tint #FFD3D3 at 40%",
"tablet": "Red tint #FFD3D3 at 40%"
},
{
"part": "Negative",
"property": "Text",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "Cancelled",
"property": "Fill",
"phone": "Coral tint #FFBDA8 at 30%",
"tablet": "Coral tint #FFBDA8 at 30%"
},
{
"part": "Cancelled",
"property": "Text",
"phone": "Coral #FA6140",
"tablet": "Coral #FA6140"
},
{
"part": "Neutral",
"property": "Fill",
"phone": "Black #000000 at 5%",
"tablet": "Black #000000 at 5%"
},
{
"part": "Neutral",
"property": "Text",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
}
],
"accessibility": [
"The status is written in words; the colour only supports it.",
"Readability scores: Positive 5.9, Neutral 7.2, Negative 3.7, Cancelled 2.7, Pending 1.8. Pending, Cancelled and Negative are below 4.5, so they keep short, known words, and pending adds an icon.",
"Screen readers hear \"Status:\" then the label, after the record name."
],
"related": [
"list-card",
"request-card",
"status",
"colour"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"m": "positive",
"v": "text",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "history",
"name": "History",
"group": "Display",
"status": "ready",
"purpose": "A timeline of what happened to a record: who did what, and when.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-25863",
"whenToUse": [
"A record changes over time and people need to see who changed it and when.",
"On phone, a record's history sits at the end of its detail screen."
],
"whenNotToUse": [
{
"need": "Show the current status only",
"use": "Status label"
},
{
"need": "Show a list of separate records",
"use": "List card"
},
{
"need": "Chat or comments about a record",
"use": "Not covered here; comments live in the Help Desk activity feed"
}
],
"anatomy": [
{
"part": "Event dot",
"note": "required, tinted by the kind of event"
},
{
"part": "Event icon",
"note": "required, 20"
},
{
"part": "Title",
"note": "required: what happened"
},
{
"part": "Tag",
"note": "optional: marks an event the system did"
},
{
"part": "Meta line",
"note": "required: who and when"
},
{
"part": "Connector",
"note": "joins each dot to the one below; none after the last"
}
],
"variants": [
{
"name": "Several entries",
"purpose": "Newest first, joined by the connector",
"inFigma": true
},
{
"name": "One entry",
"purpose": "Only \"Created\"; no connector",
"inFigma": true
},
{
"name": "With tag",
"purpose": "A small neutral tag after the title for automatic events",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "History is loaded",
"change": "As drawn",
"inFigma": true
},
{
"name": "Loading",
"when": "History is still loading",
"change": "Grey dots and grey blocks where text will be",
"inFigma": false
}
],
"behaviour": [
"Newest event at the top.",
"Every change keeps an entry: who, when, and old → new when a value changed.",
"Entries are read-only; they never open anything.",
"Dot tints: created in Amber light, positive events in Positive, cancelled or expired in Coral at 10%."
],
"phoneVsTablet": [
{
"what": "Where it lives",
"phone": "At the end of the record's detail screen",
"tablet": "In the detail panel, under the record"
}
],
"content": [
{
"part": "Title",
"rule": "What happened, past tense, a few words: \"Approved\", \"Site changed\""
},
{
"part": "Meta line",
"rule": "Person • date and time, as \"22 Apr 2024 • 09:14 AM\""
},
{
"part": "Tag",
"rule": "One word, such as \"Auto\""
}
],
"specs": [
{
"part": "Row",
"property": "Gap between dot and text",
"phone": "12",
"tablet": "12"
},
{
"part": "Dot",
"property": "Size",
"phone": "36, round",
"tablet": "36, round"
},
{
"part": "Dot",
"property": "Icon",
"phone": "20",
"tablet": "20"
},
{
"part": "Dot",
"property": "Created",
"phone": "Amber light #FFE86E at 40%",
"tablet": "Amber light #FFE86E at 40%"
},
{
"part": "Dot",
"property": "Positive event",
"phone": "Positive #E1F9ED",
"tablet": "Positive #E1F9ED"
},
{
"part": "Dot",
"property": "Cancelled or expired",
"phone": "Coral #FA6140 at 10%",
"tablet": "Coral #FA6140 at 10%"
},
{
"part": "Connector",
"property": "Width",
"phone": "2",
"tablet": "2"
},
{
"part": "Connector",
"property": "Colour",
"phone": "Teal ink #1F515B at 5%",
"tablet": "Teal ink #1F515B at 5%"
},
{
"part": "Text",
"property": "Padding",
"phone": "10 top, 16 bottom",
"tablet": "10 top, 16 bottom"
},
{
"part": "Text",
"property": "Gap",
"phone": "4",
"tablet": "4"
},
{
"part": "Title",
"property": "Type",
"phone": "14 Medium",
"tablet": "14 Medium"
},
{
"part": "Title",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Meta line",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Meta line",
"property": "Colour",
"phone": "Muted #7A8684",
"tablet": "Muted #7A8684"
},
{
"part": "Tag",
"property": "Padding",
"phone": "2 top and bottom, 4 sides",
"tablet": "2 top and bottom, 4 sides"
},
{
"part": "Tag",
"property": "Fill",
"phone": "Black at 5%",
"tablet": "Black at 5%"
},
{
"part": "Tag",
"property": "Type",
"phone": "12 Semibold Ink #44544A",
"tablet": "12 Semibold Ink #44544A"
}
],
"accessibility": [
"History is a list; each entry is read as title, then who and when.",
"The dot colour is extra; the title says what happened.",
"Title in Ink scores 8.0 on white for readability; meta in Muted scores 3.8."
],
"related": [
"record-layout",
"status-label",
"request-card",
"icons"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"n": "many",
"t": "none",
"s": "default"
},
"html": "
"
}
]
},
{
"slug": "stat-tile",
"name": "Stat tile",
"group": "Display",
"status": "ready",
"purpose": "A count people check at a glance at the top of a screen. It shows a number, not an action.",
"figma": null,
"whenToUse": [
"A screen opens with a few counts people check first, such as how many items are in each step.",
"Two to four counts that belong together."
],
"whenNotToUse": [
{
"need": "Split a list by status",
"use": "Primary tabs (the count sits in the tab)"
},
{
"need": "Show the status of one record",
"use": "Status label"
},
{
"need": "Start an action",
"use": "Button or Add button"
}
],
"anatomy": [
{
"part": "Tile",
"note": "required; white, corners 8"
},
{
"part": "Number",
"note": "required"
},
{
"part": "Label",
"note": "required; what is being counted"
},
{
"part": "Icon box",
"note": "required; tinted by tone"
}
],
"variants": [
{
"name": "Turquoise",
"purpose": "Totals that came in",
"inFigma": true
},
{
"name": "Green",
"purpose": "Things in a good or settled state",
"inFigma": true
},
{
"name": "Coral",
"purpose": "Things moving on or needing care",
"inFigma": true
},
{
"name": "Amber",
"purpose": "Things waiting or about to be removed",
"inFigma": true
}
],
"states": [
{
"name": "Default",
"when": "Always",
"change": "Number and label shown",
"inFigma": true
},
{
"name": "Loading",
"when": "The count is being fetched",
"change": "Light grey block where the number goes",
"inFigma": false
},
{
"name": "Zero",
"when": "Nothing to count",
"change": "Shows 0; the tile stays",
"inFigma": true
}
],
"behaviour": [
"Tiles are not tappable. To act on a count, use the tabs or the list below.",
"Phone shows two tiles per row; tablet shows up to four in one row.",
"The group sits on the page colour, 16 from the edges, 12 between tiles."
],
"phoneVsTablet": [
{
"what": "Tiles per row",
"phone": "2",
"tablet": "Up to 4"
},
{
"what": "Number",
"phone": "24 Semibold",
"tablet": "28 Semibold"
}
],
"content": [
{
"part": "Number",
"rule": "The count only; no units unless the count is not of items"
},
{
"part": "Label",
"rule": "What is counted, in two to four words, sentence case"
}
],
"specs": [
{
"part": "Group",
"property": "Columns",
"phone": "2",
"tablet": "Up to 4"
},
{
"part": "Group",
"property": "Gap",
"phone": "12",
"tablet": "12"
},
{
"part": "Group",
"property": "Padding",
"phone": "16",
"tablet": "16"
},
{
"part": "Group",
"property": "Sits on",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Tile",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Tile",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Tile",
"property": "Padding",
"phone": "12, left 16",
"tablet": "12, left 16"
},
{
"part": "Tile",
"property": "Gap",
"phone": "8",
"tablet": "8"
},
{
"part": "Number",
"property": "Type",
"phone": "24 Semibold",
"tablet": "28 Semibold"
},
{
"part": "Number",
"property": "Colour",
"phone": "Black #000000",
"tablet": "Black #000000"
},
{
"part": "Label",
"property": "Type",
"phone": "12 Regular",
"tablet": "12 Regular"
},
{
"part": "Label",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Label",
"property": "Space above",
"phone": "2",
"tablet": "2"
},
{
"part": "Icon box",
"property": "Size",
"phone": "44",
"tablet": "44"
},
{
"part": "Icon box",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Icon",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Turquoise tone",
"property": "Box · icon",
"phone": "Turquoise light at 40% · Turquoise #00D6C9",
"tablet": "Turquoise light at 40% · Turquoise #00D6C9"
},
{
"part": "Green tone",
"property": "Box · icon",
"phone": "Antz green at 10% · Antz green #37BD69",
"tablet": "Antz green at 10% · Antz green #37BD69"
},
{
"part": "Coral tone",
"property": "Box · icon",
"phone": "Coral light at 20% · Coral #FA6140",
"tablet": "Coral light at 20% · Coral #FA6140"
},
{
"part": "Amber tone",
"property": "Box · icon",
"phone": "Notes at 40% · Amber #E4B819",
"tablet": "Notes at 40% · Amber #E4B819"
}
],
"accessibility": [
"The tile is not a button, so it has no tap target and no pressed state.",
"The number and label read together as one item, for example \"120 Label\".",
"Tone is never the only meaning: the label says what is counted."
],
"related": [
"status-label",
"primary-tabs",
"list-layout",
"colour"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"t": "blue",
"l": "grid",
"d": "phone"
},
"html": "
"
}
]
},
{
"slug": "bottom-sheet",
"name": "Bottom sheet",
"group": "Overlays",
"status": "ready",
"purpose": "A panel that slides up over the screen for a short choice or a small task, without leaving the page.",
"figma": "https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-24043",
"whenToUse": [
"Choose one option from a short list, or fill in one or two fields, without leaving the screen.",
"A dropdown or date field opens its choices.",
"Show a short list of facts about something on the screen."
],
"whenNotToUse": [
{
"need": "Ask people to confirm something that can't be undone",
"use": "Confirm"
},
{
"need": "Narrow a long list by several categories",
"use": "Filter screen"
},
{
"need": "Fill in a long form",
"use": "A full form screen"
},
{
"need": "Pick actions for a record",
"use": "Menu"
}
],
"anatomy": [
{
"part": "Handle",
"note": "only when the sheet can be dragged"
},
{
"part": "Title bar",
"note": "required"
},
{
"part": "Title",
"note": "required, left"
},
{
"part": "Close",
"note": "required unless the sheet has a handle"
},
{
"part": "Body",
"note": "required, Pale green"
},
{
"part": "Option row",
"note": "when the sheet offers a choice"
},
{
"part": "Selected mark",
"note": "on the chosen row"
},
{
"part": "Footer",
"note": "when the sheet needs a decision"
}
],
"variants": [
{
"name": "Two buttons",
"purpose": "Cancel and the action side by side, half each: the standard",
"inFigma": true
},
{
"name": "One button",
"purpose": "A single decision; one full-width action",
"inFigma": true
},
{
"name": "Draggable",
"purpose": "A handle on top; the sheet can be pulled up or down",
"inFigma": true
}
],
"states": [
{
"name": "Nothing chosen",
"when": "The sheet just opened",
"change": "Action button is disabled",
"inFigma": false
},
{
"name": "Option chosen",
"when": "An option is picked",
"change": "1px Antz green border, Field fill and a filled radio on the row; action enabled",
"inFigma": true
}
],
"behaviour": [
"Opens by sliding up, 260 ms. Respects reduced motion.",
"Tapping the backdrop, the close icon or Cancel closes it and drops unsaved changes.",
"Choices are saved only with the action button.",
"The body scrolls inside the sheet; the title bar and footer stay put. The sheet is never taller than 90% of the screen.",
"Only one sheet at a time; a sheet never opens another sheet."
],
"phoneVsTablet": [
{
"what": "Width",
"phone": "Full screen width",
"tablet": "Full screen width"
},
{
"what": "Footer buttons",
"phone": "Side by side, half each",
"tablet": "Side by side, half each"
}
],
"content": [
{
"part": "Title",
"rule": "Says what is being chosen or done, in two or three words"
},
{
"part": "Option",
"rule": "Name in 16 Medium; optional detail in 14 Regular Muted"
},
{
"part": "Action button",
"rule": "A verb for the result, such as \"Save\" or \"Apply\"; not \"OK\""
}
],
"specs": [
{
"part": "Backdrop",
"property": "Colour",
"phone": "Navy #1F415B at 50%",
"tablet": "Navy #1F415B at 50%"
},
{
"part": "Sheet",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Sheet",
"property": "Corners",
"phone": "16 at the top",
"tablet": "16 at the top"
},
{
"part": "Sheet",
"property": "Height",
"phone": "Fits its content, up to 90% of the screen",
"tablet": "Fits its content, up to 90% of the screen"
},
{
"part": "Handle",
"property": "Size",
"phone": "48 × 4, corners 10",
"tablet": "48 × 4, corners 10"
},
{
"part": "Handle",
"property": "Colour",
"phone": "Grey #999999",
"tablet": "Grey #999999"
},
{
"part": "Handle",
"property": "Space above",
"phone": "12",
"tablet": "12"
},
{
"part": "Title bar",
"property": "Padding",
"phone": "20 top and bottom, 16 sides",
"tablet": "20 top and bottom, 16 sides"
},
{
"part": "Title bar",
"property": "Shadow",
"phone": "0 1 1, black at 10%",
"tablet": "0 1 1, black at 10%"
},
{
"part": "Title",
"property": "Type",
"phone": "20 Medium",
"tablet": "20 Medium"
},
{
"part": "Title",
"property": "Colour",
"phone": "Ink #44544A",
"tablet": "Ink #44544A"
},
{
"part": "Close",
"property": "Size",
"phone": "24",
"tablet": "24"
},
{
"part": "Body",
"property": "Fill",
"phone": "Pale green #EFF5F2",
"tablet": "Pale green #EFF5F2"
},
{
"part": "Body",
"property": "Padding",
"phone": "16",
"tablet": "16"
},
{
"part": "Body",
"property": "Gap",
"phone": "12",
"tablet": "12"
},
{
"part": "Option row",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Option row",
"property": "Border",
"phone": "1px Line #C3CEC7",
"tablet": "1px Line #C3CEC7"
},
{
"part": "Option row",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Option row",
"property": "Padding",
"phone": "12",
"tablet": "12"
},
{
"part": "Option row",
"property": "Type",
"phone": "16 Medium; detail 14 Regular Muted #7A8684",
"tablet": "16 Medium; detail 14 Regular Muted #7A8684"
},
{
"part": "Selected row",
"property": "Border",
"phone": "1px Antz green #37BD69",
"tablet": "1px Antz green #37BD69"
},
{
"part": "Selected row",
"property": "Fill",
"phone": "Field #F2FFF8",
"tablet": "Field #F2FFF8"
},
{
"part": "Selected row",
"property": "Icon",
"phone": "radio_button_checked 24, filled, Antz green #37BD69",
"tablet": "radio_button_checked 24, filled, Antz green #37BD69"
},
{
"part": "Footer",
"property": "Fill",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Footer",
"property": "Padding",
"phone": "16",
"tablet": "16"
},
{
"part": "Footer",
"property": "Gap",
"phone": "16",
"tablet": "16"
},
{
"part": "Footer",
"property": "Top edge",
"phone": "1px Page light #E8F4F2",
"tablet": "1px Page light #E8F4F2"
},
{
"part": "Buttons",
"property": "Height",
"phone": "56",
"tablet": "56"
},
{
"part": "Buttons",
"property": "Split",
"phone": "Half each; one full-width button for a single decision",
"tablet": "Half each; one full-width button for a single decision"
}
],
"accessibility": [
"The sheet is a dialog: focus moves to its title when it opens and returns to the control that opened it when it closes.",
"Close has the label \"Close\"; the backdrop is not the only way out.",
"Option rows are radio buttons; the selected one changes icon as well as colour.",
"Title in Ink scores 8.0 on white for readability."
],
"related": [
"confirm",
"filter-screen",
"dropdown",
"menu",
"button"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "pair",
"s": "none"
},
"html": "
"
}
]
},
{
"slug": "toast",
"name": "Toast",
"group": "Overlays",
"status": "partial",
"purpose": "A short message that tells people an action failed or worked.",
"figma": "https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=272-37375",
"whenToUse": [
"An action failed and people need to know, such as a save that did not go through.",
"An action worked but the screen does not show it on its own."
],
"whenNotToUse": [
{
"need": "Ask people to confirm before acting",
"use": "Confirm"
},
{
"need": "Show an error on one field",
"use": "Text field error message"
},
{
"need": "Show the status of a record",
"use": "Status label"
}
],
"anatomy": [
{
"part": "Container",
"note": "required: Red for error, Navy pill for success"
},
{
"part": "Title",
"note": "required"
},
{
"part": "Close",
"note": "required"
},
{
"part": "Body",
"note": "optional"
}
],
"variants": [
{
"name": "Error",
"purpose": "Something failed",
"inFigma": true
},
{
"name": "Success",
"purpose": "Something worked: Navy pill at the bottom with a tick, one line and Undo when the action can be taken back",
"inFigma": true
}
],
"states": [
{
"name": "Title and body",
"when": "People need to know what to do next",
"change": "Body line under the title",
"inFigma": true
},
{
"name": "Title only",
"when": "The title says it all",
"change": "No body",
"inFigma": false
}
],
"behaviour": [
"Appears at the bottom of the screen, 16 from the edges, above any action bar or bottom nav (temporary rule: position not set in Figma).",
"Error toasts stay until closed; success toasts close themselves after 4 seconds (temporary rule).",
"One toast at a time; a new one replaces the old.",
"Failures use a toast, never a banner that stays on the screen."
],
"phoneVsTablet": [
{
"what": "Width",
"phone": "Full width less 16 each side",
"tablet": "Content width, centred, up to 480 (temporary rule)"
}
],
"content": [
{
"part": "Title",
"rule": "What happened, in a few words: \"Couldn't save\""
},
{
"part": "Body",
"rule": "What to do next, one line"
},
{
"part": "Tone",
"rule": "Plain and calm; no blame, no exclamation marks"
}
],
"specs": [
{
"part": "Container",
"property": "Width",
"phone": "358 (full width less 16 each side)",
"tablet": "358 (full width less 16 each side)"
},
{
"part": "Container",
"property": "Corners",
"phone": "8",
"tablet": "8"
},
{
"part": "Container",
"property": "Padding",
"phone": "12 top and bottom, 16 sides",
"tablet": "12 top and bottom, 16 sides"
},
{
"part": "Container",
"property": "Gap",
"phone": "4",
"tablet": "4"
},
{
"part": "Container",
"property": "Shadow",
"phone": "0 4 2, black at 15%",
"tablet": "0 4 2, black at 15%"
},
{
"part": "Error",
"property": "Fill",
"phone": "Red #E93353",
"tablet": "Red #E93353"
},
{
"part": "Success",
"property": "Fill",
"phone": "Navy #1F415B",
"tablet": "Navy #1F415B"
},
{
"part": "Success",
"property": "Shape",
"phone": "Pill, corners 24, 48 tall, padding 12 16",
"tablet": "Pill, corners 24, 48 tall, padding 12 16"
},
{
"part": "Success",
"property": "Tick",
"phone": "check_circle 20, Antz green #37BD69",
"tablet": "check_circle 20, Antz green #37BD69"
},
{
"part": "Success",
"property": "Message",
"phone": "14 Medium white, one line",
"tablet": "14 Medium white, one line"
},
{
"part": "Success",
"property": "Undo",
"phone": "14 Semibold Antz green #37BD69; only when the action can be taken back",
"tablet": "14 Semibold Antz green #37BD69; only when the action can be taken back"
},
{
"part": "Success",
"property": "Stays",
"phone": "2.4 s, or 5 s with Undo",
"tablet": "2.4 s, or 5 s with Undo"
},
{
"part": "Title",
"property": "Type",
"phone": "16 Semibold",
"tablet": "16 Semibold"
},
{
"part": "Title",
"property": "Colour",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
},
{
"part": "Close",
"property": "Size",
"phone": "24, white",
"tablet": "24, white"
},
{
"part": "Body",
"property": "Type",
"phone": "14 Regular, line height 20",
"tablet": "14 Regular, line height 20"
},
{
"part": "Body",
"property": "Colour",
"phone": "White #FFFFFF",
"tablet": "White #FFFFFF"
}
],
"accessibility": [
"The toast is a live region: error toasts are announced at once, success toasts politely.",
"Close has the label \"Close\" and a touch area of at least 44.",
"White on Red scores 4.1 for readability, just under 4.5 for the 14 body; keep the body short. White on Navy scores 11.5 for readability; the success message can be any length that fits one line.",
"A toast never holds the only way to recover; the failed action can be tried again from the screen."
],
"related": [
"confirm",
"bottom-sheet",
"status",
"colour"
],
"examples": [
{
"label": "Default",
"temporary": false,
"state": {
"v": "error",
"c": "both"
},
"html": "
![\"\"](\"assets/leopard-thumb.jpg\")
M![\"\"](\"assets/expand.svg\")
![\"\"](\"assets/location-enc.jpg\")