# Antz components (for AI agents and developers)
Generated from the same content as the Antz Design website on 26 Oct 2026. Do not edit by hand; edit site-src/content and run `node site-src/build.mjs`.
How to use: load `tokens.css` and `antz.css`, use the Material Symbols Rounded font for icons (`icon_name`), and copy the HTML examples below. Examples use the Antz classes where they exist and exact Figma values inline where they don't. Anything marked **temporary** is not designed in Figma yet: use it, but report it as a departure.
## Index
- [Text field](#text-field) · Inputs · A single-line input for short free text.
- [Dropdown](#dropdown) · Inputs · A field that opens a list so people choose one option from a known set.
- [Date field](#date-field) · Inputs · A field for entering a date, a time, or both, chosen from a picker.
- [Picker field](#picker-field) · Inputs · A field that opens a chooser for people, sites or other records, and lists what was picked below it.
- [Checkbox](#checkbox) · Inputs · Lets people tick any number of options from a list, or confirm a single yes.
- [Switch](#switch) · Inputs · Turns one thing on or off, such as making a record active or inactive.
- [Search and filter](#search-and-filter) · Inputs · A search field and a filter button that sit above a list to narrow what it shows.
- [Button](#button) · Actions · Starts the one main action on a screen, or records a decision.
- [Add button](#add-button) · Actions · Creates a new record from a list screen.
- [Menu](#menu) · Actions · Holds the second and later actions for a screen, record or card, behind the more icon.
- [Top bar](#top-bar) · Navigation · Names the screen and holds the way back, plus up to two screen-wide actions.
- [Record header](#record-header) · Navigation · Opens a record detail screen: the record name, the way back, its menu and who it belongs to.
- [Primary tabs](#primary-tabs) · Navigation · Splits a screen into its main views, one at a time.
- [Secondary tab](#secondary-tab) · Navigation · Switches between two or three ways of looking at the same content.
- [Chips](#chips) · Navigation · Narrows a list to one group at a time, with the count in each label.
- [Bottom navigation](#bottom-navigation) · Navigation · Moves between the main parts of a module.
- [List card](#list-card) · Display · A white card that stands for one record in a list: who it is about, its status and a meta line.
- [Request card](#request-card) · Display · A lifted card for a request or an approval, with its status in a strip along the bottom.
- [Animal card](#animal-card) · Display · Shows one animal with its photo and the lines people use to tell it apart.
- [Site card](#site-card) · Display · Shows one site with a thumbnail, either as a choice in a list or as a site already picked into a form.
- [Status label](#status-label) · Display · A small tinted label that says the status of a record in one or two words.
- [History](#history) · Display · A timeline of what happened to a record: who did what, and when.
- [Stat tile](#stat-tile) · Display · A count people check at a glance at the top of a screen. It shows a number, not an action.
- [Bottom sheet](#bottom-sheet) · Overlays · A panel that slides up over the screen for a short choice or a small task, without leaving the page.
- [Confirm](#confirm) · Overlays · A small centred popup that asks people to confirm an action before it happens.
- [Filter screen](#filter-screen) · Overlays · A full screen for narrowing a list by several categories at once.
- [Toast](#toast) · Overlays · A short message that tells people an action failed or worked.
---
## Text field
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7770)
A single-line input for short free text.
**When to use**
- The answer is short free text: a name, a number, a reference.
- One answer per field.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose one of a known set | Dropdown |
| Enter a date or time | Date field |
| Choose people, sites or items | Picker field |
| Switch something on or off | Switch |
**Anatomy**
1. Label · required
2. Required mark · when the field must be filled
3. Container · required
4. Value or hint text · required
5. Icon · optional, right side only
6. Helper or error message · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Default | Any short text | yes |
| With icon | An icon on the right that shows the kind of value or opens a picker | yes |
| With prefix | A fixed part before the value, such as a country code | yes |
| Multi-line | Descriptions and longer answers; starts 112 tall | yes |
| Notes | A free note on a record, such as notes on a training session: Notes yellow fill, otherwise the same as multi-line | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing typed yet | Hint text in Hint grey | yes |
| Filled | A value is entered | Value in Ink | yes |
| Focus | The field is being typed in | Border turns Hint grey | temporary |
| Error | The value can't be accepted | Red border and a red message below | temporary |
| Disabled | The field can't be changed now | Disabled fill, text in Hint grey | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Field width | Full width of the section | Two fields side by side when they belong together |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon, two or three words |
| Hint text | An example of the expected value, not an instruction |
| Error message | Says what to fix in one line, starting with a verb |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Required mark | Colour | Coral #FA6140 | Coral #FA6140 |
| Value | Type | 16 Regular | 16 Regular |
| Value | Colour | Ink #44544A | Ink #44544A |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Icon | Size | 24 | 24 |
| Helper text | Type | 12 Regular | 12 Regular |
| Helper text | Colour | Muted #7A8684 | Muted #7A8684 |
| Multi-line | Starting height | 112 | 112 |
| Notes | Fill | Notes #FCF4AE | Notes #FCF4AE |
**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.
**Examples**
Default
```html
Hint text
Helper text
```
Variant: With icon
```html
Hint textbadge
Helper text
```
Variant: With prefix
```html
+91keyboard_arrow_downHint text
Helper text
```
Variant: Multi-line
```html
Hint text
Helper text
```
Variant: Notes
```html
Hint text
Helper text
```
State: Filled
```html
Value
Helper text
```
State: Focus (temporary)
```html
Value
Helper text
```
State: Error (temporary)
```html
Value
Error message
```
State: Disabled (temporary)
```html
Value
Helper text
```
Device: Tablet
```html
Hint text
Helper text
```
---
## Dropdown
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7780)
A field that opens a list so people choose one option from a known set.
**When to use**
- People choose exactly one option from a list the app already knows: a type, a category, a department.
- The list has more than three options. For two or three, show them all as option rows.
**When not to use**
| If people need to | Use |
| --- | --- |
| Type free text | Text field |
| Choose several options | Checkbox, or a picker field for people, sites and animals |
| Pick a date or a time | Date field |
| Choose people, sites or animals | Picker field |
| Filter a list | Search and filter |
| Run an action on a record | Menu |
**Anatomy**
1. Label · required
2. Required mark · when a choice must be made
3. Container · required
4. Chosen option or hint text · required
5. Chevron · required, always on the right
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Field | Inside forms. Same size and border as the text field | yes |
| Compact | 40 tall white box with no border, in tablet list toolbars beside the filter button | yes |
| Inline | No box: the chosen option and a chevron in the screen header, for screen-wide choices such as a month or a site | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing chosen yet | Hint text "Select" in Hint grey | yes |
| Filled | An option is chosen | Chosen option in Teal ink | yes |
| Open | The list is showing | A bottom sheet rises with one option row per choice; the chosen row has a green border, Field fill and a filled radio | temporary |
| Error | A required choice is missing | Red border and a red message 4 below | temporary |
| Disabled | The choice can't be changed now | Disabled fill; text and chevron in Hint grey | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Field width | Full width of the section | Two fields side by side when they belong together, gap 16 |
| Compact variant | Allowed in list toolbars; the field is preferred | In list toolbars, right side, gap 8 to the filter button |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon: what is being chosen |
| Hint text | "Select" on its own. The label already names the thing |
| Options | Sentence case, short, no ending punctuation; ordered as people expect (by size, time or alphabet), never at random |
| Error message | Says what to do in one line, starting with a verb: "Choose an option" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Required mark | Colour | Coral #FA6140 | Coral #FA6140 |
| Chosen option | Type | 16 Regular | 16 Regular |
| Chosen option | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Chevron | Size | 24 | 24 |
| Chevron | Colour | Ink #44544A | Ink #44544A |
| Error message | Type | 12 Regular | 12 Regular |
| Error message | Colour | Red #E93353 | Red #E93353 |
| Error message | Space above | 4 | 4 |
| Compact | Height | — | 40 |
| Compact | Fill | — | White #FFFFFF |
| Compact | Padding left and right | — | 12 |
| Compact | Text | — | 14 Medium, Teal ink #1F515B |
| Compact | Chevron | — | 20, gap 2 |
| Inline | Text | 16 Medium, Teal ink #1F515B | 16 Medium, Teal ink #1F515B |
| Inline | Chevron | 20, gap 4 | 20, gap 4 |
| Option row | Fill | White #FFFFFF | White #FFFFFF |
| Option row | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Option row | Corners | 8 | 8 |
| Option row | Padding | 12 | 12 |
| Option row | Type | 16 Medium | 16 Medium |
| Option row | Gap between rows | 12 | 12 |
| Option row, chosen | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Option row, chosen | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Option row, chosen | Radio | 24, filled, Antz green #37BD69 | 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.
**Examples**
Default
```html
Selectkeyboard_arrow_down
```
Variant: Compact
```html
Allkeyboard_arrow_down
```
Variant: Inline
```html
TitleAllkeyboard_arrow_down
```
State: Filled
```html
Option 2keyboard_arrow_down
```
State: Open (temporary)
```html
Option 2keyboard_arrow_down
Labelclose
Option 1radio_button_unchecked
Option 2radio_button_checked
Option 3radio_button_unchecked
Option 4radio_button_unchecked
```
State: Error (temporary)
```html
Option 2keyboard_arrow_down
Choose an option
```
State: Disabled (temporary)
```html
Option 2keyboard_arrow_down
```
Device: Tablet
```html
Selectkeyboard_arrow_down
Selectkeyboard_arrow_down
```
---
## Date field
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-7790)
A field for entering a date, a time, or both, chosen from a picker.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Type a number of days or hours | Text field |
| Choose a month or a year for a whole screen | Dropdown, inline variant |
| Choose from a fixed set of periods | Dropdown |
**Anatomy**
1. Label · required
2. Required mark · when the field must be filled
3. Container · required
4. Date, time or hint text · required
5. Calendar or clock icon · required, right side
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Date | A single day. Calendar icon | yes |
| Time | A time of day. Clock icon | yes |
| Pair | Two fields side by side with gap 16: start and end, or date and time | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing chosen yet | Hint text shows the format in Hint grey | yes |
| Filled | A date or time is chosen | Value in Ink, in the standard format | yes |
| Open | The picker is showing | 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 | temporary |
| Error | The value is missing or out of range | Red border and a red message 4 below | temporary |
| Disabled | The value can't be changed now | Disabled fill; text and icon in Hint grey | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Pair | Two fields side by side, gap 16 | Two fields side by side, gap 16; a date and its time sit on one line |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon: "Start date", "Time" |
| Date format | D Mon YYYY: 10 Aug 2026 |
| Time format | h:mm AM: 09:14 AM |
| Hint text | The format, not an instruction: "DD Mon YYYY" |
| Error message | Says what to fix in one line: "End date is before start" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Required mark | Colour | Coral #FA6140 | Coral #FA6140 |
| Value | Type | 16 Regular | 16 Regular |
| Value | Colour | Ink #44544A | Ink #44544A |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Icon | Size | 24 | 24 |
| Icon | Colour | Ink #44544A | Ink #44544A |
| Pair | Gap between fields | 16 | 16 |
| Pair | Padding left and right | 12 | 16 |
| Error message | Type | 12 Regular | 12 Regular |
| Error message | Colour | Red #E93353 | Red #E93353 |
| Error message | Space above | 4 | 4 |
| Picker sheet | Top corners | 16 | 16 |
| Picker sheet | Body fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Picker sheet | Month panel | White, corners 8, padding 12 | White, corners 8, padding 12 |
| Day | Size | 36 round | 36 round |
| Day | Type | 14 Regular, Ink #44544A | 14 Regular, Ink #44544A |
| Day, chosen | Fill | Antz green #37BD69, white 14 Semibold | Antz green #37BD69, white 14 Semibold |
| Weekday | Type | 12 Regular, Muted #7A8684 | 12 Regular, Muted #7A8684 |
| Picker footer | Buttons | Cancel outline and Done green, 48 tall, 50/50, gap 16 | 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.
**Examples**
Default
```html
```
---
## Picker field
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=8-6237)
A field that opens a chooser for people, sites or other records, and lists what was picked below it.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose one option from a short fixed list | Dropdown |
| Tick a few plain options | Checkbox |
| Type free text | Text field |
| Filter a list | Search and filter |
**Anatomy**
1. Label · required
2. Container · required
3. Hint text · required; says what will be chosen
4. Add icon · required, Add blue, right side
5. Picked row · one per chosen record, below the field
6. Photo or initials · required in a picked row; thumbnail for sites
7. Name and detail · name required, detail optional
8. Remove icon · required, Coral
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| People | Picked rows with a 36 round photo or initials, name and role | yes |
| Sites | Picked rows use the site card: 56 tall, thumbnail 40, Page light fill | yes |
| Single pick | The field is replaced by its one picked row; tapping the row opens the chooser again | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing picked yet | Hint text in Hint grey, add icon in Add blue | yes |
| Picked | One or more records chosen | Picked rows stack below the field, gap 8; the field stays so more can be added | yes |
| Choosing | The chooser is open | A bottom sheet with search, "Selected n/total", Select all and rows with checkboxes; Cancel and Save in the footer | yes |
| Error | A required pick is missing | Red border and a red message 4 below | temporary |
| Disabled | Picks can't be changed now | Disabled fill, add icon in Hint grey; picked rows lose their remove icon | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to field | 8 | 12 |
| Picked rows | One per line, gap 8 | Two per line, gap 8 |
| Chooser | Bottom sheet | Bottom sheet |
**Content**
| Part | Rule |
| --- | --- |
| Label | A plural noun in sentence case: "Trainers", "Sites" |
| Hint text | "Choose" plus the noun: "Choose sites" |
| Picked row | Name on the first line; one detail on the second (role, area). No IDs unless people search by them |
| Error message | Says what to do in one line: "Choose at least one" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Height | 56 | 56 |
| Container | Corners | 8 | 8 |
| Container | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Container | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Container | Padding left and right | 16 | 16 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space below | 8 | 12 |
| Hint text | Type | 16 Regular | 16 Regular |
| Hint text | Colour | Hint #839D8D | Hint #839D8D |
| Add icon | Size | 24 | 24 |
| Add icon | Colour | Add blue #00AFD6 | Add blue #00AFD6 |
| Picked row | Fill | Page #DDEBE9 | Page #DDEBE9 |
| Picked row | Corners | 8 | 8 |
| Picked row | Padding | 12 | 12 |
| Picked row | Gap inside | 12 | 12 |
| Picked row | Gap between rows | 8 | 8 |
| Photo or initials | Size | 36 round | 36 round |
| Initials | Fill | Turquoise #00D6C9, white 14 Medium | Turquoise #00D6C9, white 14 Medium |
| Name | Type | 16 Medium | 16 Medium |
| Name | Colour | Ink #44544A | Ink #44544A |
| Detail | Type | 14 Regular | 14 Regular |
| Detail | Space above | 4 | 4 |
| Remove icon | Size | 24 | 24 |
| Remove icon | Colour | Coral #FA6140 | Coral #FA6140 |
| Picked site | Height | 56 | 56 |
| Picked site | Fill | Page light #E8F4F2 | Page light #E8F4F2 |
| Picked site | Border | 1px white | 1px white |
| Picked site | Padding | 8 | 8 |
| Picked site | Thumbnail | 40, corners 4 | 40, corners 4 |
| Chooser row | Fill | White, corners 8, padding 12 | White, corners 8, padding 12 |
| Chooser row | Box | 24; ticked in Antz green #37BD69 | 24; ticked in Antz green #37BD69 |
| Chooser row, ticked | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Chooser footer | Buttons | Cancel outline and Save green, 48 tall, 50/50 | 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.
**Examples**
Default
```html
Choose peopleadd_circle
```
Variant: Sites
```html
Choose sitesadd_circle
```
State: Picked
```html
Choose peopleadd_circle
AB
Name 1
Detail
cancel
CD
Name 2
Detail
cancel
```
State: Choosing
```html
Choose peopleadd_circle
Choose peopleclose
searchSearch
Selected 1/3Select allselect_all
AB
Name 1
Detail
check_box
CD
Name 2
Detail
check_box_outline_blank
EF
Name 3
Detail
check_box_outline_blank
```
State: Error (temporary)
```html
Choose peopleadd_circle
Choose at least one
```
State: Disabled (temporary)
```html
Choose peopleadd_circle
```
Device: Tablet
```html
Choose peopleadd_circle
```
---
## Checkbox
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=8-6250)
Lets people tick any number of options from a list, or confirm a single yes.
**When to use**
- People can choose any number of options, including none.
- A single statement needs a yes, such as marking a field as mandatory.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose exactly one option | Dropdown, or option rows with radios |
| Turn a setting on or off with an instant effect | Switch |
| Choose people, sites or animals | Picker field |
| Narrow a list | Filter screen |
**Anatomy**
1. Row · required in the row variant; the whole row is the touch area
2. Box · required, 24
3. Label · required
4. Hint text · optional, one line
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Row | Each option in its own bordered row. The default in forms | yes |
| Row with hint | A second line in Muted grey when the option needs one fact more | yes |
| Plain | Box and label with no row border, for a single yes inside a card or a short list in a filter | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Unticked | Not chosen | Outline box in Ink | yes |
| Ticked | Chosen | Filled box with a white tick, in Antz green | yes |
| Partly ticked | A "Select all" box when only some of its options are ticked | Filled box with a dash, in Antz green | temporary |
| Disabled | The option can't be changed now | Disabled fill, box in Line grey, label in Hint grey; the glyph still shows ticked or unticked | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Label to list | 8 | 12 |
| Rows | One per line, gap 8 | Two per line when labels are short, gap 8 |
**Content**
| Part | Rule |
| --- | --- |
| Label | A noun in sentence case, no colon, naming the group |
| Option | Short, in sentence case, phrased so that ticking means yes. No "Don't…" |
| Hint text | One fact that tells similar options apart; not a sentence |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Row | Corners | 8 | 8 |
| Row | Padding | 9 left, 16 right, 9 top and bottom | 9 left, 16 right, 9 top and bottom |
| Row | Gap between rows | 8 | 8 |
| Row | Gap box to label | 4 | 4 |
| Box | Size | 24, in a 40 touch wrapper | 24, in a 40 touch wrapper |
| Box, unticked | Glyph | Outline box, Ink #44544A | Outline box, Ink #44544A |
| Box, ticked | Glyph | Filled box with tick, Antz green #37BD69 | Filled box with tick, Antz green #37BD69 |
| Box, partly ticked | Glyph | Filled box with dash, Antz green #37BD69 | Filled box with dash, Antz green #37BD69 |
| Label | Type | 16 Regular | 16 Regular |
| Label | Colour | Ink #44544A | Ink #44544A |
| Hint text | Type | 14 Regular | 14 Regular |
| Hint text | Colour | Muted #7A8684 | Muted #7A8684 |
| Hint text | Space above | 4 | 4 |
| Group label | Type | 14 Medium | 14 Medium |
| Group label | Space below | 8 | 12 |
| Plain | Gap box to label | 8 | 8 |
| Plain | Gap between options | 12 | 12 |
| Disabled | Fill | Disabled #DAE7DF | Disabled #DAE7DF |
| Disabled | Box colour | Line #C3CEC7 | Line #C3CEC7 |
| Disabled | Label colour | Hint #839D8D | 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.
**Examples**
Default
```html
Select allindeterminate_check_box
check_box
Option 1
check_box_outline_blank
Option 2
check_box
Option 3
```
Variant: Row with hint
```html
Select allindeterminate_check_box
check_box
Option 1Hint text
check_box_outline_blank
Option 2Hint text
check_box
Option 3Hint text
```
Variant: Plain
```html
Select allindeterminate_check_box
check_boxOption 1
check_box_outline_blankOption 2
check_boxOption 3
```
State: None ticked
```html
Select allcheck_box_outline_blank
check_box_outline_blank
Option 1
check_box_outline_blank
Option 2
check_box_outline_blank
Option 3
```
State: All ticked
```html
Select allcheck_box
check_box
Option 1
check_box
Option 2
check_box
Option 3
```
State: Disabled (temporary)
```html
Select allindeterminate_check_box
check_box
Option 1
check_box_outline_blank
Option 2
check_box
Option 3
```
Device: Tablet
```html
Select allindeterminate_check_box
check_box
Option 1
check_box_outline_blank
Option 2
check_box
Option 3
```
---
## Switch
Inputs · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=309-9693)
Turns one thing on or off, such as making a record active or inactive.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Tick several options in a list | Checkbox |
| Choose between more than two states | Dropdown or Secondary tab |
| Confirm something that needs a Save | Checkbox |
| Switch between views on a screen | Secondary tab |
**Anatomy**
1. State label · recommended; names the current state in words
2. Switch · required
3. Track, on · Antz green; knob on the right
4. Track, off · Line grey; knob on the left
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| With state label | "Active" or "Inactive" before the switch, in a card or section header | yes |
| Setting row | A 56 white row: setting name on the left, switch on the right | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| On | The thing is active | Antz green track, knob on the right, label "Active" | yes |
| Off | The thing is inactive | Line grey track, knob on the left, label "Inactive"; an inactive card fades to 75% | yes |
| Disabled | The setting can't be changed now | Disabled track, label in Hint grey; the knob keeps its side | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Size | 39 × 24 | 39 × 24 |
| Placement | Right end of the row or header | Right end of the row or header |
**Content**
| Part | Rule |
| --- | --- |
| State label | "Active" / "Inactive", or another pair that names the state, not the action |
| Setting row label | A noun phrase in sentence case: what is switched, not "Turn on…" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Track | Size | 39 × 24 | 39 × 24 |
| Track | Corners | Fully round | Fully round |
| Track, on | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Track, off | Fill | Line #C3CEC7 | Line #C3CEC7 |
| Track, disabled | Fill | Disabled #DAE7DF | Disabled #DAE7DF |
| Knob | Size | 18 round | 18 round |
| Knob | Fill | White #FFFFFF | White #FFFFFF |
| Knob | Inset | 3 | 3 |
| State label | Type | 14 Medium | 14 Medium |
| State label | Colour | Ink #44544A | Ink #44544A |
| State label | Gap to switch | 8 | 8 |
| Setting row | Height | 56 | 56 |
| Setting row | Fill | White #FFFFFF | White #FFFFFF |
| Setting row | Corners | 8 | 8 |
| Setting row | Padding | 16 top and bottom, 12 left and right | 16 top and bottom, 12 left and right |
| Setting row | Label | 16 Medium, Ink #44544A | 16 Medium, Ink #44544A |
| Inactive card | Opacity | 75% | 75% |
| Motion | Knob slide | 180ms | 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.
**Examples**
Default
```html
TitleActive
Value
```
Variant: Setting row
```html
Label
```
State: Off
```html
TitleInactive
Value
```
State: Disabled (temporary)
```html
TitleActive
Value
```
---
## Search and filter
Inputs · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=230-7268)
A search field and a filter button that sit above a list to narrow what it shows.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between a few fixed groups of the list | Primary tabs or chips |
| Choose a value inside a form | Dropdown or picker field |
| Set many filters at once | Filter screen (opened by the filter button) |
**Anatomy**
1. Row · required; white, sits in the white top block of a list screen
2. Search field · required
3. Search icon · required, left
4. Hint text · required; "Search"
5. Filter button · optional; only when the list has filters
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Standard | Search 40 tall in Light grey, corners 8, and a 40 × 40 filter button, gap 8. Use by default | yes |
| Outlined | White with a Line border, 44 to 48 tall, 14 Regular text; when the search needs more weight, as on tablet list headers | yes |
| Raised | White with a soft shadow, 56 tall; when search is the main task of the screen, on a tinted page | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Empty | Nothing typed, no filters on | Hint text "Search"; filter button in Light grey | yes |
| Typing | A search term is entered | Term in Ink, a close icon appears on the right to clear it; the count line reads "Results (n)" | temporary |
| Filters on | One or more filters are applied | Filter button turns Teal ink with a white icon and a Coral badge with the number of filters | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Row padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Search width | Fills the row | Fills the list panel; in a list and detail split it sits on top of the list |
| Variant used most | Standard | Standard or Outlined |
**Content**
| Part | Rule |
| --- | --- |
| Hint text | "Search" on its own, or "Search" plus the noun when the screen holds more than one list |
| Count line | Noun (n) above the list: "Results (6)" |
| Badge | The number of filters on, never the number of results |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Fill | White #FFFFFF | White #FFFFFF |
| Row | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Row | Gap | 8 | 8 |
| Search | Height | 40 | 40 |
| Search | Fill | Light grey (5% black) | Light grey (5% black) |
| Search | Corners | 8 | 8 |
| Search | Padding | 6 top and bottom, 12 sides | 6 top and bottom, 12 sides |
| Search | Gap icon to text | 8 | 8 |
| Search icon | Size | 18 | 18 |
| Hint and term | Type | 12 Regular | 12 Regular |
| Hint and term | Colour | Ink #44544A | Ink #44544A |
| Filter button | Size | 40 × 40 | 40 × 40 |
| Filter button | Fill | Light grey (5% black) | Light grey (5% black) |
| Filter button | Corners | 8 | 8 |
| Filter icon | Size | 18 | 18 |
| Filter button, on | Fill | Teal ink #1F515B, white icon | Teal ink #1F515B, white icon |
| Badge | Fill | Coral #FA6140 | Coral #FA6140 |
| Badge | Type | 10 Medium, white | 10 Medium, white |
| Badge | Size | 16 round | 16 round |
| Outlined | Height | 44 to 48 | 44 to 48 |
| Outlined | Fill | White, 1px Line #C3CEC7 | White, 1px Line #C3CEC7 |
| Outlined | Padding | 12 | 12 |
| Outlined | Text | 14 Regular, Muted #7A8684 | 14 Regular, Muted #7A8684 |
| Outlined | Icon | 20 to 24 | 20 to 24 |
| Raised | Height | 56 | 56 |
| Raised | Fill | White | White |
| Raised | Shadow | 0 2 1, black 10% | 0 2 1, black 10% |
| Raised | Padding left and right | 16 | 16 |
| Raised | Text | 14 Regular, Muted #7A8684 | 14 Regular, Muted #7A8684 |
| Raised | Icon | 20 | 20 |
| Count line | Type | 14 Semibold, Ink #44544A | 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.
**Examples**
Default
```html
searchSearch
tune
Items (14)
```
Variant: Outlined
```html
searchSearch
tune
Items (14)
```
Variant: Raised
```html
searchSearch
tune
Items (14)
```
State: Typing (temporary)
```html
searchValueclose
tune
Results (2)
```
State: Filters on (temporary)
```html
searchSearch
tune2
Items (6)
```
Device: Tablet
```html
searchSearch
tune
Items (14)
```
---
## Button
Actions · Ready · [Figma](https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=355-107528)
Starts the one main action on a screen, or records a decision.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Add a new record from a list | Add button |
| Reach second and later actions | Menu |
| Switch between views of the same list | Secondary tab |
| Confirm something that can't be undone | Confirm |
**Anatomy**
1. Container · required
2. Icon · optional, before the label, 24
3. Label · required
4. Outline container · for the quieter of two choices
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Main | The one main action on a screen. Antz green, 56 tall, full width of the action bar | yes |
| Navy | Same job as Main in Teal ink, used to vary a run of screens that would all be green | yes |
| Approve and reject | The decision pair on a request, 48 tall. Stacked on phone, side by side on tablet | yes |
| Outline | The quieter of two choices, such as Cancel or Clear all | yes |
| Compact | Buttons 40 tall in tight footers, such as a filter screen | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Ready to use | As specified | yes |
| Pressed | Finger is down | A 10% black layer over the fill | temporary |
| Focus | Reached with a keyboard on tablet | 2px Teal ink ring, 2 outside the edge | temporary |
| Disabled | The action can't be taken yet | Disabled fill #DAE7DF, label in Hint #839D8D; outline keeps its white fill and grey border | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Main button width | Full width of the action bar | Full width of the action bar or panel |
| Approve and reject | Stacked, Approve on top, gap 12, in a white bar with corners 16 on top | Side by side, equal widths, Reject left, gap 24 |
| Action bar padding | 16 | 20 |
**Content**
| Part | Rule |
| --- | --- |
| Label | A verb, or verb and noun, in sentence case: "Save", "Submit request" |
| Length | One to three words; never wraps to a second line |
| Decision pair | Always "Approve" and "Reject" |
| Avoid | "OK", "Yes", "Click here", all capitals |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Main | Height | 56 | 56 |
| Main | Corners | 8 | 8 |
| Main | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Main | Label | 16 Semibold | 16 Semibold |
| Main | Label colour | White #FFFFFF | White #FFFFFF |
| Main | Icon | 24, white, gap 8 | 24, white, gap 8 |
| Navy | Fill | Teal ink #1F515B | Teal ink #1F515B |
| Navy | Height | 56 | 56 |
| Approve | Height | 48 | 48 |
| Approve | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Approve | Label | 16 Medium | 16 Medium |
| Reject | Height | 48 | 48 |
| Reject | Fill | Red #E93353 | Red #E93353 |
| Reject | Label | 16 Medium | 16 Medium |
| Decision pair | Gap | 12 | 24 |
| Decision pair | Bar | White, corners 16 on top, padding 24 / 16 | White, padding 20 |
| Outline | Fill | White #FFFFFF | White #FFFFFF |
| Outline | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Outline | Label | 16 Medium | 16 Medium |
| Outline | Label colour | Teal ink #1F515B | Teal ink #1F515B |
| Compact | Height | 40 | 40 |
| Compact | Padding left and right | 16 | 16 |
| Compact outline | Label | 14 Medium | 14 Medium |
| Disabled | Fill | Disabled #DAE7DF | Disabled #DAE7DF |
| Disabled | Label colour | Hint #839D8D | Hint #839D8D |
| Confirm buttons | Height | 56 | 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.
**Examples**
Default
```html
```
Variant: Navy
```html
```
Variant: Approve and reject
```html
```
Variant: Outline
```html
```
Variant: Compact
```html
```
State: Pressed (temporary)
```html
```
State: Focus (temporary)
```html
```
State: Disabled (temporary)
```html
```
---
## Add button
Actions · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17772)
Creates a new record from a list screen.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Save or submit what is on the screen | Button |
| Reach more than one kind of action | Menu |
| Choose people, sites or items into a field | Picker field |
**Anatomy**
1. Phone container · square, gradient fill
2. Icon · required
3. Tablet container · pill, Add blue
4. Label · tablet and inline only
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Floating, phone | Square, green-to-turquoise gradient, icon only. Floats above the bottom navigation | yes |
| Floating, tablet | Pill in Add blue with icon and label, when the page has one action | yes |
| Inline | Full-width Add blue button inside a form or panel | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Ready to use | As specified | yes |
| Pressed | Finger is down | A 10% black layer over the fill | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Shape | Square 56, corners 16, icon only | Pill 48 tall, corners 24, icon and label |
| Fill | Gradient Turquoise #00D6C9 to Antz green #37BD69 | Add blue #00AFD6 |
| Position | Right 24, 16 above the bottom navigation | Right 36 inside the gutter, 26 above the bottom navigation |
| When the page has more than one action | Floating button for adding; the rest in the menu | Not designed yet: ask |
**Content**
| Part | Rule |
| --- | --- |
| Label (tablet, inline) | "Add" and the record noun: "Add item" |
| Icon | Add circle on phone and inline, plain add on the tablet pill |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Phone button | Size | 56 × 56 | — |
| Phone button | Corners | 16 | — |
| Phone button | Fill | Turquoise #00D6C9 to Antz green #37BD69, angled 116.5° | — |
| Phone button | Shadow | 0 4 4, black 15% | — |
| Phone button | Icon | Add circle 24, white | — |
| Phone button | Position | Right 24, above the bottom navigation | — |
| Tablet pill | Height | — | 48 |
| Tablet pill | Corners | — | 24 |
| Tablet pill | Fill | — | Add blue #00AFD6 |
| Tablet pill | Border | — | 1px white at 40% |
| Tablet pill | Padding | — | Left 10, right 12 |
| Tablet pill | Icon to label | — | 6 |
| Tablet pill | Icon | — | 20, white |
| Tablet pill | Label | — | 16 Medium white |
| Tablet pill | Shadow | — | 0 4 6, black 15% |
| Inline | Height | 48 | 48 |
| Inline | Corners | 8 | 8 |
| Inline | Fill | Add blue #00AFD6 | Add blue #00AFD6 |
| Inline | Icon | 20, white, gap 8 | 20, white, gap 8 |
| Inline | Label | 16 Medium white | 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.
**Examples**
Default
```html
```
---
## Menu
Actions · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=304-4618)
Holds the second and later actions for a screen, record or card, behind the more icon.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Do the one main thing on a screen | Button |
| Choose a value for a field | Dropdown |
| Pick from a long list with search | Bottom sheet |
| Switch between views | Secondary tab |
**Anatomy**
1. More icon · required, opens the menu
2. Container · required; the pale fill shows as 1px lines between items
3. Item icon · optional; all items have one or none do
4. Item label · required
5. Destructive item · optional, always last
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Actions only | Icon and label per item | yes |
| With a destructive action | Delete, Deactivate or Cancel last, in Red | yes |
| Text only | Labels without icons when no icon reads clearly | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Closed | Default | Only the more icon shows | yes |
| Open | After tapping the more icon | Menu drops below the icon, right edges aligned | yes |
| Item pressed | Finger is down on an item | A 10% black layer over the item | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Size and look | Same on both | Same on both |
| Width | Fits the longest label, at least 180 | Fits the longest label, at least 180 |
**Content**
| Part | Rule |
| --- | --- |
| Item label | A verb or verb and noun in sentence case: "Edit", "Download report" |
| Order | Most used first; destructive last |
| Number of items | Two to six. One item means it should be a button |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Fill between items | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Container | Corners | 8 | 8 |
| Container | Shadow | 0 4 14, black 15% | 0 4 14, black 15% |
| Container | Gap between items | 1 | 1 |
| Container | Minimum width | 180 | 180 |
| Item | Fill | White #FFFFFF | White #FFFFFF |
| Item | Padding | 12 top and bottom, 16 left and right | 12 top and bottom, 16 left and right |
| Item | Icon to label | 8 | 8 |
| Icon | Size | 24 | 24 |
| Label | Type | 14 Medium | 14 Medium |
| Label | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Destructive item | Label and icon colour | Red #E93353 | Red #E93353 |
| More icon | Button | 36, icon 24, Ink #44544A | 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.
**Examples**
Default
```html
```
---
## Top bar
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17741)
Names the screen and holds the way back, plus up to two screen-wide actions.
**When to use**
- Every list, form and settings screen that is not a record detail.
- The screen needs a way back or a way to close.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show one record with its owner | Record header |
| Move between the main parts of a module | Bottom navigation |
| Title a bottom sheet | Bottom sheet |
**Anatomy**
1. Back or close · optional; back for drill-in screens, close for forms
2. Title · required, one line
3. Action icon · optional, up to two
4. More icon · optional, opens the menu
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Back | Drill-in screens | yes |
| Back and actions | Screens with search or a menu of screen-wide actions | yes |
| Close | Forms that open on top of a list | yes |
| Title only | The first screen of a module | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Always | As specified | yes |
| Icon pressed | Finger is down on an icon | A 10% black circle behind the icon | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Height | 72 | 72 |
| Padding | 26 top, 22 bottom, 16 sides | 20 all round |
| Title | 20 Medium, left | 20 Medium, left |
**Content**
| Part | Rule |
| --- | --- |
| Title | The screen name in sentence case, two or three words: "New request", "Settings" |
| Avoid | Repeating the title in the page body; module names already shown on the home screen |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Bar | Height | 72 | 72 |
| Bar | Fill | White #FFFFFF | White #FFFFFF |
| Bar | Bottom line | 1px black at 5% | 1px black at 5% |
| Bar | Padding | 26 top, 22 bottom, 16 sides | 20 all round |
| Bar | Gap | 4 | 4 |
| Back or close | Slot | 30 × 48 | 30 × 48 |
| Back or close | Icon | 24, Ink #44544A | 24, Ink #44544A |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Action icon | Button | 36, round | 36, round |
| Action icon | Icon | 24, Ink #44544A | 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.
**Examples**
Default
```html
arrow_backTitle
```
Variant: Back and actions
```html
arrow_backTitlesearchmore_vert
```
Variant: Close
```html
closeTitle
```
Variant: Title only
```html
Title
```
Device: Tablet
```html
arrow_backTitle
```
---
## Record header
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-23313)
Opens a record detail screen: the record name, the way back, its menu and who it belongs to.
**When to use**
- A screen shows one record: a request, a patient, a training session.
- The record has an owner or requester worth naming at the top.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show a list, a form or settings | Top bar |
| Show the outcome of a check | Result layout |
**Anatomy**
1. Back · required
2. Title · required; centred, or left with a subtitle
3. More icon · optional, opens the menu
4. Initials avatar · with the person row
5. Person row · optional: name and one secondary line
6. Content sheet · required, overlaps the header with round top corners
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Centred title | Short titles such as a record number | yes |
| Left title with subtitle | When the record needs a second line, such as its type | yes |
| With person row | Shows who raised or owns the record | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Always | As specified | yes |
| Icon pressed | Finger is down on back or more | A 20% black circle behind the icon | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Bar padding | 32 top, 12 bottom, 16 sides | 24 top, 12 bottom, 20 sides |
| Gap in the bar | 8 | 12 |
| Title | Centred or left | Usually left with a subtitle |
**Content**
| Part | Rule |
| --- | --- |
| Title | The record ID or name; never the screen type ("Details") |
| Subtitle | One fact that tells records apart, such as the type |
| Person row | Name, then one line such as the organisation; no labels like "Requested by" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Header | Fill | Navy #1F415B | Navy #1F415B |
| Bar | Padding | 32 top, 12 bottom, 16 sides | 24 top, 12 bottom, 20 sides |
| Bar | Gap | 8 | 12 |
| Back and more | Icon | 24, white | 24, white |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | White #FFFFFF | White #FFFFFF |
| Subtitle | Type | 14 Regular, white | 14 Regular, white |
| Person row | Padding | 16 top, 24 bottom, 16 left, 12 right | 16 top, 24 bottom, 16 left, 12 right |
| Person row | Gap | 8 | 8 |
| Avatar | Size | 36, round | 36, round |
| Avatar | Fill | Turquoise #00D6C9 | Turquoise #00D6C9 |
| Avatar | Initials | 14 Medium white | 14 Medium white |
| Name | Type | 16 Medium white | 16 Medium white |
| Secondary line | Type | 14 Regular white | 14 Regular white |
| Content sheet | Fill | White #FFFFFF | White #FFFFFF |
| Content sheet | Top corners | 24 | 24 |
| Content sheet | Overlap | 16 | 16 |
| Content sheet | Padding | 24 top, 16 sides | 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.
**Examples**
Default
```html
arrow_backTitlemore_vert
AB
Name
Secondary line
Section title
```
Title: Left with subtitle
```html
arrow_back
Title
Subtitle
more_vert
AB
Name
Secondary line
Section title
```
Person row: Hidden
```html
arrow_backTitlemore_vert
Section title
```
Device: Tablet
```html
arrow_backTitlemore_vert
AB
Name
Secondary line
Section title
```
---
## Primary tabs
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=370-7146)
Splits a screen into its main views, one at a time.
**When to use**
- 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).
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between two ways of looking at one list | Secondary tab |
| Narrow a list by a quick filter | Chips |
| Move between parts of a module | Bottom navigation |
**Anatomy**
1. Count · count tabs; green when active
2. Label · required
3. Inactive count tab · Ink count, no bar
4. Active underline tab · green text and 2px bar
5. Inactive underline tab · Ink text, 1px grey line
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Count | Count over label. Tabs hug their content and the row scrolls sideways | yes |
| Underline | Equal widths across the screen, label only | yes |
| Underline with icons | A 16 icon before each label | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Active | The view on screen | Antz green count or text, 2px Antz green bar | yes |
| Inactive | Other views | Ink text; underline tabs keep a 1px Line | yes |
| Pressed | Finger is down | A 5% black layer over the tab | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Count tabs | Hug content, scroll sideways | Same as phone (no tablet frame yet) |
| Underline tabs | Equal widths, full screen | Equal widths across the panel they sit in |
| Underline tab height | 48 | 48 |
**Content**
| Part | Rule |
| --- | --- |
| Label | One or two words, sentence case: "Pending", "Approved" |
| Count | The number only; no brackets |
| Number of tabs | Underline two to four; count up to six |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Count row | Fill | White #FFFFFF | White #FFFFFF |
| Count row | Bottom line | 1px Pale green #EFF5F2 | 1px Pale green #EFF5F2 |
| Count tab | Padding | 8 top, 2 sides; content 20 sides | 8 top, 2 sides; content 20 sides |
| Count tab | Count to label | 4 | 4 |
| Count | Type | 16 Semibold | 16 Semibold |
| Count | Colour | Ink #44544A; active Antz green #37BD69 | Ink #44544A; active Antz green #37BD69 |
| Count label | Type | 12 Regular | 12 Regular |
| Count label | Colour | Ink #44544A | Ink #44544A |
| Count bar | Height | 2, round top corners | 2, round top corners |
| Count bar | Colour | Antz green #37BD69 | Antz green #37BD69 |
| Underline tab | Width | Equal shares of the row | Equal shares of the row |
| Underline tab | Padding | 16 | 16 |
| Underline tab | Type | 14 Medium | 14 Medium |
| Underline tab | Icon | 16, gap 4 | 16, gap 4 |
| Underline tab | Active | Antz green #37BD69 text and 2px bar | Antz green #37BD69 text and 2px bar |
| Underline tab | Inactive | Ink #44544A text, 1px Line #C3CEC7 | 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.
**Examples**
Default
```html
6Tab 1
12Tab 2
3Tab 3
0Tab 4
21Tab 5
```
Variant: Underline
```html
Tab 1
Tab 2
Tab 3
```
Variant: Underline with icons
```html
grid_viewTab 1
listTab 2
personTab 3
```
---
## Secondary tab
Navigation · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=177-4850)
Switches between two or three ways of looking at the same content.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Move between the main views of a screen | Primary tabs |
| Filter a list by many values | Chips |
| Turn a setting on or off | Switch |
**Anatomy**
1. Track · required
2. Active segment · required, one at a time
3. Inactive segment · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Antz green | The standard active fill | yes |
| Teal ink | When green would clash with a green main action or status nearby | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Active | The view on screen | Filled segment, white text | yes |
| Inactive | Other views | No fill, Ink text | yes |
| Pressed | Finger is down on an inactive segment | 5% black fill on the segment | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Row padding | 16 sides | 20 sides |
| Size | Same on both | Same on both |
**Content**
| Part | Rule |
| --- | --- |
| Segment label | One or two words, sentence case: "All", "Created by me" |
| Number of segments | Two or three |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Track | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Track | Corners | Round (100) | Round (100) |
| Track | Padding | 4 | 4 |
| Segment | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 16 sides |
| Segment | Corners | Round (100) | Round (100) |
| Segment | Type | 14 Medium | 14 Medium |
| Active segment | Fill | Antz green #37BD69 | Antz green #37BD69 |
| Active segment | Text | White #FFFFFF | White #FFFFFF |
| Active segment, Teal ink | Fill | Teal ink #1F515B | Teal ink #1F515B |
| Inactive segment | Text | Ink #44544A | 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.
**Examples**
Default
```html
```
Variant: Teal ink
```html
```
Segments: Three
```html
```
State: Pressed (temporary)
```html
```
---
## Chips
Navigation · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=190-17765)
Narrows a list to one group at a time, with the count in each label.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between main views of a screen | Primary tabs |
| Combine several filters at once | Filter screen |
| Choose a value in a form | Dropdown |
**Anatomy**
1. Selected chip · one at a time
2. Default chip · required
3. Label with count · required: label, dash, count
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Fits the row | Three or four chips | yes |
| Scrolls sideways | More chips than fit; the row clips at the screen edge | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Selected | The group on screen | Teal ink fill, white 14 Medium | yes |
| Default | Other groups | Page fill, Teal ink 14 Regular | yes |
| Pressed | Finger is down | A 5% black layer over the chip | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Row padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Chip size | 32 tall | 32 tall |
**Content**
| Part | Rule |
| --- | --- |
| Label | Group name, space, dash, space, count: "All - 22" |
| Order | "All" first, then the order of the workflow |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Fill | White #FFFFFF | White #FFFFFF |
| Row | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 20 sides |
| Row | Gap | 12 | 12 |
| Row | Shadow | 0 1 1, black 10% | 0 1 1, black 10% |
| Chip | Height | 32 | 32 |
| Chip | Corners | 8 | 8 |
| Chip | Padding | 6 top and bottom, 8 sides | 6 top and bottom, 8 sides |
| Default chip | Fill | Page #DDEBE9 | Page #DDEBE9 |
| Default chip | Text | 14 Regular, Teal ink #1F515B | 14 Regular, Teal ink #1F515B |
| Selected chip | Fill | Teal ink #1F515B | Teal ink #1F515B |
| Selected chip | Text | 14 Medium, white #FFFFFF | 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.
**Examples**
Default
```html
```
---
## Bottom navigation
Navigation · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=78-4008)
Moves between the main parts of a module.
**When to use**
- A module has three to five top-level parts that people move between all day.
- The parts are peers; none sits inside another.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch views inside one screen | Primary tabs |
| Go back from a detail screen | Top bar |
| A module with a single main screen | No bottom navigation |
**Anatomy**
1. Active indicator · Turquoise light pill behind the icon
2. Active label · Teal ink
3. Icon · required, 24
4. Label · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Phone, five items | Icon over label; the active icon sits in a Turquoise light pill | yes |
| Tablet, three items | Icon over label; the active icon sits in a white box | yes |
| None | The module designer leaves it out when the module has one main screen | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Active | The part on screen | Phone: Turquoise light pill, Teal ink label. Tablet: white box | yes |
| Inactive | Other parts | No pill or box; Ink label on phone, Teal ink on tablet | yes |
| Pressed | Finger is down | A 5% black pill behind the icon | temporary |
**Behaviour**
- Shows on the top-level screens of a module and hides on detail and form screens.
- Tapping the active item again returns that part to its first screen.
- The add button floats above it, never on it.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Items | 5 | 3 |
| Height | 80 | 97 |
| Active mark | Pill 64 × 32, corners 16, Turquoise light | White box, corners 8, padding 8 |
| Labels | 12 Medium | 14 Regular, Teal ink |
| Item width | Equal shares | 150 each, gap 8, centred |
**Content**
| Part | Rule |
| --- | --- |
| Label | One word, sentence case, the name of the part |
| Icon | Outlined Material Symbols Rounded glyph that matches the label |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Bar | Height | 80 | 97 |
| Bar | Fill | Page light #E8F4F2 | Add blue #00AFD6 at 12% over white |
| Bar | Padding | 0 top and bottom, 8 sides | 20 |
| Bar | Gap | 8 | 8 |
| Item | Padding | 12 top, 16 bottom | — |
| Item | Icon to label | 4 | 4 |
| Item | Width | Equal shares | 150 |
| Icon | Size | 24 | 24 |
| Icon | Colour | Ink #44544A | Teal ink #1F515B |
| Active indicator | Shape | 64 × 32, corners 16 | Box with corners 8, padding 8 |
| Active indicator | Fill | Turquoise light #AFEFEB | White #FFFFFF |
| Label | Type | 12 Medium | 14 Regular |
| Label | Colour | Ink #44544A; active Teal ink #1F515B | Teal ink #1F515B |
**Accessibility**
- Announced as navigation; the active item is marked as the current page.
- Each item is at least 64 wide and the full bar height tall.
- Teal ink on Turquoise light scores 6.9; Ink on Page light scores 7.1.
- The active item is marked by shape (pill or box) as well as colour.
**Examples**
Default
```html
```
Active: Item 2
```html
```
Active: Item 3
```html
```
Device: Tablet
```html
homeLabel
list_altLabel
personLabel
```
---
## List card
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=281-7032)
A white card that stands for one record in a list: who it is about, its status and a meta line.
**When to use**
- A list of records where each one is about a person, a request or an item.
- The record has one status that people scan for.
- Tapping the card opens the record.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show a request or approval that is waiting on someone | Request card |
| Show an animal | Animal card |
| Choose or show a site | Site card |
| Show what happened to a record over time | History |
**Anatomy**
1. Head strip · optional
2. Record number · with the head strip, 16 badge icon
3. Status label · required, said once
4. Initials · required when the record is about a person
5. Name · required
6. Detail · optional, one line
7. Meta line · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| With head strip | The record has its own number people look up; the number and status sit in a strip above the body | yes |
| Without head strip | No record number; the status label sits on the right of the name row | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The record is loaded | As drawn | yes |
| Loading | The list is still loading | Same layout; light grey blocks where text will be, no spinner | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Card padding | 12 | 16 |
| Status label type | 12 Semibold | 14 Medium |
| Gap between cards | 12 | 12 |
**Content**
| Part | Rule |
| --- | --- |
| Record number | The ID as people say it, prefix and number |
| Name | The person or thing the record is about |
| Detail | One fact that tells two similar cards apart, such as the organisation |
| Status label | One or two words; the status appears once on the card |
| Meta line | Who and when, joined by " • " |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Card | Fill | White #FFFFFF | White #FFFFFF |
| Card | Corners | 8 | 8 |
| Card | Shadow | None | None |
| Card | Width | Full width of the page less the side padding | Full width of the page less the side padding |
| Head strip | Padding | 8 top and bottom, 12 sides | 8 top and bottom, 16 sides |
| Head strip | Divider below | 1px black at 5% | 1px black at 5% |
| Record number | Type | 12 Semibold | 12 Semibold |
| Record number | Colour | Ink #44544A | Ink #44544A |
| Record number | Icon | 16 | 16 |
| Body | Padding | 12 | 16 |
| Body | Gap | 12 | 12 |
| Initials | Size | 36, round | 36, round |
| Initials | Fill | Turquoise #00D6C9 | Turquoise #00D6C9 |
| Initials | Type | 14 Medium white | 14 Medium white |
| Initials | Gap to name | 8 | 8 |
| Name | Type | 16 Medium | 16 Medium |
| Name | Colour | Ink #44544A | Ink #44544A |
| Detail | Type | 14 Regular | 14 Regular |
| Detail | Colour | Muted #7A8684 | Muted #7A8684 |
| Detail | Space above | 4 | 4 |
| Meta line | Type | 12 Regular; the person in 12 Semibold | 12 Regular; the person in 12 Semibold |
| Meta line | Colour | Muted #7A8684; the person in Navy #1F415B | Muted #7A8684; the person in Navy #1F415B |
| Status label | Type | 12 Semibold | 14 Medium |
| List | Gap between cards | 12 | 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.
**Examples**
Default
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Variant: Without head strip
```html
AB
Name
Detail
Status
Name • Date
```
Status: Pending
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: Negative
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: Cancelled
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
Status: Neutral
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
State: Loading (temporary)
```html
```
Device: Tablet
```html
badgeRecord numberStatus
AB
Name
Detail
Name • Date
```
---
## Request card
Display · Ready · [Figma](https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=89-129699)
A lifted card for a request or an approval, with its status in a strip along the bottom.
**When to use**
- The record is a request or an approval that waits on someone.
- People scan a list to see what still needs a decision.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show any other record in a list | List card |
| Show a status inside a detail screen | Status label |
| Show an animal | Animal card |
**Anatomy**
1. Who row · required: initials and name of the person who asked
2. Meta line · required: record number, person and age
3. Detail · optional: what is asked for, up to two lines
4. Fact row · optional: 20 icon and a value
5. Status strip · required
6. Strip icon and label · required: 20 icon, then the status
7. Time · optional: how long it has been in this status
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Awaiting | Waiting for a decision | yes |
| Approved | The request was approved | yes |
| Rejected | The request was turned down | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The card is in a list | As drawn | yes |
**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 strip is only for request and approval cards. Every other card uses a status label.
- Detail text stops at two lines and ends in an ellipsis.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Card width | Full width less 16 each side | Column width in the list panel |
| Gap between cards | 12 | 12 |
**Content**
| Part | Rule |
| --- | --- |
| Meta line | Record number • person • age, such as "2 d" |
| Detail | What is asked for, in plain words, not the form title |
| Strip label | The status in two or three words |
| Time | "Since n days" for waiting; the date for a decision already made |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Card | Fill | White #FFFFFF | White #FFFFFF |
| Card | Corners | 12 | 12 |
| Card | Shadow | 0 2 2, black at 10% | 0 2 2, black at 10% |
| Body | Padding | 12 | 12 |
| Body | Gap | 12 | 12 |
| Initials | Size | 36, Turquoise #00D6C9 | 36, Turquoise #00D6C9 |
| Name | Type | 16 Medium | 16 Medium |
| Name | Colour | Ink #44544A | Ink #44544A |
| Meta line | Type | 12 Semibold, age in 12 Regular | 12 Semibold, age in 12 Regular |
| Meta line | Colour | Teal ink #1F515B, age in Muted #7A8684 | Teal ink #1F515B, age in Muted #7A8684 |
| Detail | Type | 14 Regular | 14 Regular |
| Detail | Colour | Ink #44544A | Ink #44544A |
| Fact row | Icon | 20 | 20 |
| Strip | Inset from card edge | 2 at the sides and bottom | 2 at the sides and bottom |
| Strip | Padding | 12 top and bottom, 14 sides | 12 top and bottom, 14 sides |
| Strip | Corners | 10 at the bottom only | 10 at the bottom only |
| Strip | Gap | 4 | 4 |
| Strip icon | Size | 20 | 20 |
| Strip label | Type | 14 Medium | 14 Medium |
| Strip time | Type | 12 Regular | 12 Regular |
| Strip time | Colour | Black at 40% | Black at 40% |
| Awaiting | Fill | Amber #E4B819 at 10% | Amber #E4B819 at 10% |
| Awaiting | Text | Deep brown #250E01 | Deep brown #250E01 |
| Approved | Fill | Positive #E1F9ED | Positive #E1F9ED |
| Approved | Text | Dark green #006D35 | Dark green #006D35 |
| Rejected | Fill | Red #E93353 at 10% | Red #E93353 at 10% |
| Rejected | Text | Red #E93353 | Red #E93353 |
**Accessibility**
- The card is read as one item, ending with the strip label, so the status is never carried by colour alone.
- 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.
**Examples**
Default
```html
AB
Name
Record number • Name • 2 d
Detail
date_rangeStart date → End date
paceAwaiting approvalSince 2 days
```
Status: Approved
```html
AB
Name
Record number • Name • 2 d
Detail
date_rangeStart date → End date
check_circleApprovedSince 2 days
```
Status: Rejected
```html
AB
Name
Record number • Name • 2 d
Detail
date_rangeStart date → End date
cancelRejectedSince 2 days
```
---
## Animal card
Display · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=193-9208)
Shows one animal with its photo and the lines people use to tell it apart.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show a person or a record | List card |
| Show a site | Site card |
| Show a section or an enclosure | Not designed yet; ask for the Figma frame |
**Anatomy**
1. Photo · required; a grey block when there is no photo
2. Sex tag · required: M, F or U
3. CITES tag · when the species is CITES listed
4. Expand icon · required; opens the photo full size
5. Identifier · optional: ear tag, name or chip
6. Animal ID · required
7. Common name · required
8. Scientific name · required, italic
9. Enclosure · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Male | Sex tag in Turquoise | yes |
| Female | Sex tag in Coral | yes |
| Unknown | Sex tag in Red | yes |
| With CITES tag | Appendix shown as "C" and its number | yes |
| No identifier | The animal has no ear tag, name or chip | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The animal is shown | As drawn | yes |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width less 16 each side | 303 in a list panel, 786 in a form |
| Photo | 104 × 104 | 104 × 104 |
**Content**
| Part | Rule |
| --- | --- |
| Identifier | "Ear tag", "Name" or "Chip" then the value; whichever the zoo uses first |
| Animal ID | The ID as the system gives it |
| Common name | As in the species list, sentence case |
| Scientific name | Genus and species, italic, never shortened |
| Enclosure | The current enclosure name |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Card | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Card | Corners | 12 | 12 |
| Card | Padding | 8 | 8 |
| Card | Gap | 8 | 8 |
| Photo | Size | 104 × 104 | 104 × 104 |
| Photo | Corners | 8 | 8 |
| Sex tag | Size | 24 × 24, 4 from the top and left | 24 × 24, 4 from the top and left |
| Sex tag | Corners | 6 | 6 |
| Sex tag | Type | 10 Medium white | 10 Medium white |
| Sex tag | Male | Turquoise #00D6C9 | Turquoise #00D6C9 |
| Sex tag | Female | Coral #FA6140 | Coral #FA6140 |
| Sex tag | Unknown | Red #E93353 | Red #E93353 |
| CITES tag | Height | 24, top right | 24, top right |
| CITES tag | Fill | Black at 40% | Black at 40% |
| CITES tag | Corners | 6 | 6 |
| CITES tag | Type | 10 Medium white | 10 Medium white |
| Expand icon | Size | 16, bottom right, white | 16, bottom right, white |
| Lines | Gap | 4 | 4 |
| Identifier | Type | 14 Semibold | 14 Semibold |
| Identifier | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Animal ID, common name, enclosure | Type | 14 Medium | 14 Medium |
| Animal ID, common name, enclosure | Colour | Ink #44544A | Ink #44544A |
| Scientific name | Type | 14 Regular italic | 14 Regular italic |
| Scientific name | Colour | Muted #7A8684 | 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.
**Examples**
Default
```html
```
---
## Site card
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=22-10637)
Shows one site with a thumbnail, either as a choice in a list or as a site already picked into a form.
**When to use**
- People choose one or more sites from a list.
- A form shows the sites already picked, each with a way to remove it.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show an animal | Animal card |
| Show a section or an enclosure | Not designed yet; ask for the Figma frame |
| Choose from short text options with no picture | Bottom sheet option rows |
**Anatomy**
1. Choosing card · in a picker list
2. Thumbnail · required; grey when there is no photo
3. Site name · required
4. Area · optional
5. Check · required when choosing
6. Picked card · in a form, after picking
7. Remove · required on a picked card
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Choosing | A row in a picker list, 48 thumbnail and a check on the right | yes |
| Picked | A site already chosen, shown under its field with a remove icon | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Not selected | The site is not chosen | Empty check box | yes |
| Selected | The site is chosen | 1px Antz green border and a filled check circle in Antz green | yes |
**Behaviour**
- Tapping anywhere on a choosing card selects or clears it.
- Picks are saved only when the picker is saved; closing it drops unsaved picks.
- On a picked card only the remove icon acts; it removes the site from the form at once.
- Choosing cards sit 8 apart.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width less 16 each side | Width of the sheet or form column |
**Content**
| Part | Rule |
| --- | --- |
| Site name | The name people use on site, sentence case |
| Area | The wider area the site belongs to, one line |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Choosing card | Fill | White #FFFFFF | White #FFFFFF |
| Choosing card | Corners | 8 | 8 |
| Choosing card | Padding | 12 | 12 |
| Choosing card | Gap | 12 | 12 |
| Choosing card | Gap between cards | 8 | 8 |
| Thumbnail | Size | 48 | 48 |
| Thumbnail | Corners | 4 | 4 |
| Thumbnail | Fill behind | Black at 5% | Black at 5% |
| Site name | Type | 16 Medium | 16 Medium |
| Site name | Colour | Ink #44544A | Ink #44544A |
| Area | Type | 14 Regular | 14 Regular |
| Area | Colour | Ink #44544A | Ink #44544A |
| Area | Space above | 4 | 4 |
| Check | Size | 24 | 24 |
| Check | Colour off | Ink #44544A | Ink #44544A |
| Selected | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Selected | Icon | check_circle in Antz green #37BD69 | check_circle in Antz green #37BD69 |
| Picked card | Height | 56 | 56 |
| Picked card | Fill | Page light #E8F4F2 | Page light #E8F4F2 |
| Picked card | Border | 1px white | 1px white |
| Picked card | Corners | 8 | 8 |
| Picked card | Padding | 8 | 8 |
| Picked card | Gap | 12 | 12 |
| Picked thumbnail | Size | 40 | 40 |
| Picked thumbnail | Corners | 4 | 4 |
| Remove | Icon | cancel, 24 | cancel, 24 |
| Remove | Colour | Coral #FA6140 | Coral #FA6140 |
**Accessibility**
- Each choosing card is a checkbox with the site name as its label, and it reads "selected" or "not selected".
- Selected changes the icon as well as the colour.
- The remove icon is labelled "Remove" plus the site name, with a touch area of at least 44.
- Site name and area in Ink score 8.0 on white and 7.1 on Page light for readability.
**Examples**
Default
```html
Site name
Area
check_box_outline_blank
Site name
Area
check_box_outline_blank
```
Variant: Picked
```html
Site name
Area
cancel
```
State: Selected
```html
Site name
Area
check_circle
Site name
Area
check_box_outline_blank
```
---
## Status label
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=281-7044)
A small tinted label that says the status of a record in one or two words.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show the status of a request or an approval in a list | Request card (status strip) |
| Filter a list by status | Chips |
| Show what happened over time | History |
**Anatomy**
1. Container · required: tint of the meaning
2. Icon · optional; use it for pending
3. Label · required: the status in one or two words
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Text only | The standard label | yes |
| With icon | Adds a 16 icon before the word; use for pending, where the colour is weak | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Positive | Active, Approved, Entry, Completed | Positive fill, Dark green text | yes |
| Pending | Upcoming, Waiting, Draft | Amber light at 30%, Amber text | yes |
| Negative | Expired, Rejected, Denied, Not authorised | Red tint at 40%, Red text | yes |
| Cancelled | Cancelled | Coral tint at 30%, Coral text | yes |
| Neutral | Exit, Inactive, Auto | Black at 5%, Ink text | yes |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Type | 12 Semibold | 14 Medium |
| Padding | 4 top and bottom, 8 sides | 4 top and bottom, 8 sides |
**Content**
| Part | Rule |
| --- | --- |
| Label | One or two words, sentence case, the same word everywhere for the same status |
| Spelling | "Cancelled", not "Canceled" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Padding | 4 top and bottom, 8 sides | 4 top and bottom, 8 sides |
| Container | Corners | 4 | 4 |
| Label | Type | 12 Semibold | 14 Medium |
| Icon | Size | 16, gap 4 | 16, gap 4 |
| Positive | Fill | Positive #E1F9ED | Positive #E1F9ED |
| Positive | Text | Dark green #006D35 | Dark green #006D35 |
| Pending | Fill | Amber light #FFE86E at 30% | Amber light #FFE86E at 30% |
| Pending | Text | Amber #E4B819 | Amber #E4B819 |
| Negative | Fill | Red tint #FFD3D3 at 40% | Red tint #FFD3D3 at 40% |
| Negative | Text | Red #E93353 | Red #E93353 |
| Cancelled | Fill | Coral tint #FFBDA8 at 30% | Coral tint #FFBDA8 at 30% |
| Cancelled | Text | Coral #FA6140 | Coral #FA6140 |
| Neutral | Fill | Black #000000 at 5% | Black #000000 at 5% |
| Neutral | Text | Ink #44544A | 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.
**Examples**
Default
```html
Status
```
Meaning: Pending
```html
Status
```
Meaning: Negative
```html
Status
```
Meaning: Cancelled
```html
Status
```
Meaning: Neutral
```html
Status
```
Variant: With icon (temporary)
```html
check_circleStatus
```
Device: Tablet
```html
Status
```
---
## History
Display · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-25863)
A timeline of what happened to a record: who did what, and when.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Show the current status only | Status label |
| Show a list of separate records | List card |
| Chat or comments about a record | Not covered here; comments live in the Help Desk activity feed |
**Anatomy**
1. Event dot · required, tinted by the kind of event
2. Event icon · required, 20
3. Title · required: what happened
4. Tag · optional: marks an event the system did
5. Meta line · required: who and when
6. Connector · joins each dot to the one below; none after the last
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Several entries | Newest first, joined by the connector | yes |
| One entry | Only "Created"; no connector | yes |
| With tag | A small neutral tag after the title for automatic events | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | History is loaded | As drawn | yes |
| Loading | History is still loading | Grey dots and grey blocks where text will be | temporary |
**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%.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Where it lives | At the end of the record's detail screen | In the detail panel, under the record |
**Content**
| Part | Rule |
| --- | --- |
| Title | What happened, past tense, a few words: "Approved", "Site changed" |
| Meta line | Person • date and time, as "22 Apr 2024 • 09:14 AM" |
| Tag | One word, such as "Auto" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Row | Gap between dot and text | 12 | 12 |
| Dot | Size | 36, round | 36, round |
| Dot | Icon | 20 | 20 |
| Dot | Created | Amber light #FFE86E at 40% | Amber light #FFE86E at 40% |
| Dot | Positive event | Positive #E1F9ED | Positive #E1F9ED |
| Dot | Cancelled or expired | Coral #FA6140 at 10% | Coral #FA6140 at 10% |
| Connector | Width | 2 | 2 |
| Connector | Colour | Teal ink #1F515B at 5% | Teal ink #1F515B at 5% |
| Text | Padding | 10 top, 16 bottom | 10 top, 16 bottom |
| Text | Gap | 4 | 4 |
| Title | Type | 14 Medium | 14 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Meta line | Type | 12 Regular | 12 Regular |
| Meta line | Colour | Muted #7A8684 | Muted #7A8684 |
| Tag | Padding | 2 top and bottom, 4 sides | 2 top and bottom, 4 sides |
| Tag | Fill | Black at 5% | Black at 5% |
| Tag | Type | 12 Semibold Ink #44544A | 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.
**Examples**
Default
```html
cancel
Event titleName • Date and time
check_circle
Event titleName • Date and time
add_circle
CreatedName • Date and time
```
Entries: One
```html
add_circle
CreatedName • Date and time
```
Tag: With tag
```html
cancel
Event title AutoName • Date and time
check_circle
Event titleName • Date and time
add_circle
CreatedName • Date and time
```
State: Loading (temporary)
```html
```
---
## Stat tile
Display · Ready
A count people check at a glance at the top of a screen. It shows a number, not an action.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Split a list by status | Primary tabs (the count sits in the tab) |
| Show the status of one record | Status label |
| Start an action | Button or Add button |
**Anatomy**
1. Tile · required; white, corners 8
2. Number · required
3. Label · required; what is being counted
4. Icon box · required; tinted by tone
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Turquoise | Totals that came in | yes |
| Green | Things in a good or settled state | yes |
| Coral | Things moving on or needing care | yes |
| Amber | Things waiting or about to be removed | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | Always | Number and label shown | yes |
| Loading | The count is being fetched | Light grey block where the number goes | temporary |
| Zero | Nothing to count | Shows 0; the tile stays | yes |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Tiles per row | 2 | Up to 4 |
| Number | 24 Semibold | 28 Semibold |
**Content**
| Part | Rule |
| --- | --- |
| Number | The count only; no units unless the count is not of items |
| Label | What is counted, in two to four words, sentence case |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Group | Columns | 2 | Up to 4 |
| Group | Gap | 12 | 12 |
| Group | Padding | 16 | 16 |
| Group | Sits on | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Tile | Fill | White #FFFFFF | White #FFFFFF |
| Tile | Corners | 8 | 8 |
| Tile | Padding | 12, left 16 | 12, left 16 |
| Tile | Gap | 8 | 8 |
| Number | Type | 24 Semibold | 28 Semibold |
| Number | Colour | Black #000000 | Black #000000 |
| Label | Type | 12 Regular | 12 Regular |
| Label | Colour | Ink #44544A | Ink #44544A |
| Label | Space above | 2 | 2 |
| Icon box | Size | 44 | 44 |
| Icon box | Corners | 8 | 8 |
| Icon | Size | 24 | 24 |
| Turquoise tone | Box · icon | Turquoise light at 40% · Turquoise #00D6C9 | Turquoise light at 40% · Turquoise #00D6C9 |
| Green tone | Box · icon | Antz green at 10% · Antz green #37BD69 | Antz green at 10% · Antz green #37BD69 |
| Coral tone | Box · icon | Coral light at 20% · Coral #FA6140 | Coral light at 20% · Coral #FA6140 |
| Amber tone | Box · icon | Notes at 40% · Amber #E4B819 | 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.
**Examples**
Default
```html
120Labelegg
10Labelegg_alt
14Labeldevice_thermostat
10Labeldelete
```
Layout: Single
```html
120Labelegg
```
Device: Tablet
```html
120Labelegg
10Labelegg_alt
14Labeldevice_thermostat
10Labeldelete
```
---
## Bottom sheet
Overlays · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-24043)
A panel that slides up over the screen for a short choice or a small task, without leaving the page.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Ask people to confirm something that can't be undone | Confirm |
| Narrow a long list by several categories | Filter screen |
| Fill in a long form | A full form screen |
| Pick actions for a record | Menu |
**Anatomy**
1. Handle · only when the sheet can be dragged
2. Title bar · required
3. Title · required, left
4. Close · required unless the sheet has a handle
5. Body · required, Pale green
6. Option row · when the sheet offers a choice
7. Selected mark · on the chosen row
8. Footer · when the sheet needs a decision
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Two buttons | Cancel and the action side by side, half each: the standard | yes |
| One button | A single decision; one full-width action | yes |
| Draggable | A handle on top; the sheet can be pulled up or down | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Nothing chosen | The sheet just opened | Action button is disabled | temporary |
| Option chosen | An option is picked | 1px Antz green border, Field fill and check circle on the row; action enabled | yes |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full screen width | Full screen width |
| Footer buttons | Side by side, half each | Side by side, half each |
**Content**
| Part | Rule |
| --- | --- |
| Title | Says what is being chosen or done, in two or three words |
| Option | Name in 16 Medium; optional detail in 14 Regular Muted |
| Action button | A verb for the result, such as "Save" or "Apply"; not "OK" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Backdrop | Colour | Navy #1F415B at 50% | Navy #1F415B at 50% |
| Sheet | Fill | White #FFFFFF | White #FFFFFF |
| Sheet | Corners | 16 at the top | 16 at the top |
| Sheet | Height | Fits its content, up to 90% of the screen | Fits its content, up to 90% of the screen |
| Handle | Size | 48 × 4, corners 10 | 48 × 4, corners 10 |
| Handle | Colour | Grey #999999 | Grey #999999 |
| Handle | Space above | 12 | 12 |
| Title bar | Padding | 20 top and bottom, 16 sides | 20 top and bottom, 16 sides |
| Title bar | Shadow | 0 1 1, black at 10% | 0 1 1, black at 10% |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Close | Size | 24 | 24 |
| Body | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Body | Padding | 16 | 16 |
| Body | Gap | 12 | 12 |
| Option row | Fill | White #FFFFFF | White #FFFFFF |
| Option row | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Option row | Corners | 8 | 8 |
| Option row | Padding | 12 | 12 |
| Option row | Type | 16 Medium; detail 14 Regular Muted #7A8684 | 16 Medium; detail 14 Regular Muted #7A8684 |
| Selected row | Border | 1px Antz green #37BD69 | 1px Antz green #37BD69 |
| Selected row | Fill | Field #F2FFF8 | Field #F2FFF8 |
| Selected row | Icon | check_circle 24, Antz green #37BD69 | check_circle 24, Antz green #37BD69 |
| Footer | Fill | White #FFFFFF | White #FFFFFF |
| Footer | Padding | 16 | 16 |
| Footer | Gap | 16 | 16 |
| Footer | Top edge | 1px Page light #E8F4F2 | 1px Page light #E8F4F2 |
| Buttons | Height | 56 | 56 |
| Buttons | Split | Half each; one full-width button for a single decision | 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.
**Examples**
Default
```html
Screen title
Titleclose
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
Variant: One button
```html
Screen title
Titleclose
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
Variant: Draggable
```html
Screen title
Title
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
State: Option chosen
```html
Screen title
Titleclose
OptionDetail
check_circle
OptionDetail
radio_button_unchecked
OptionDetail
radio_button_unchecked
```
---
## Confirm
Overlays · Ready · [Figma](https://www.figma.com/design/74YTD7MToJVweXNuVri6xY?node-id=220-24315)
A small centred popup that asks people to confirm an action before it happens.
**When to use**
- The action can't be undone, such as delete or cancel.
- The action has a cost people may not expect.
**When not to use**
| If people need to | Use |
| --- | --- |
| Choose between several options | Bottom sheet |
| Tell people an action worked or failed | Toast |
| Ask for a reason when rejecting | Bottom sheet with a text field |
**Anatomy**
1. Hero icon · required, 64
2. Title · required: the question
3. Body · optional: what will happen
4. Cancel · required, outline, left
5. Action · required, filled, right
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Destructive | Delete, cancel, remove: Coral icon and Coral action | yes |
| Non-destructive | An action with a cost that is not a loss: Antz green icon and action | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Default | The popup is open | As drawn | yes |
**Behaviour**
- Opens over a Navy backdrop at 50%, centred on the screen.
- Cancel, or tapping the backdrop, closes it and nothing happens.
- The action button does the action and closes the popup; a toast confirms the result.
- Never stack a confirm on another confirm.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | 358 (full width less 16 each side) | 358, centred |
**Content**
| Part | Rule |
| --- | --- |
| Title | A short question naming the action and the thing: "Delete record?" |
| Body | What will happen, in one or two lines |
| Action | The same verb as the title, such as "Delete"; never "Yes" or "OK" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Backdrop | Colour | Navy #1F415B at 50% | Navy #1F415B at 50% |
| Popup | Fill | White #FFFFFF | White #FFFFFF |
| Popup | Corners | 16 | 16 |
| Popup | Width | 358 | 358 |
| Popup | Padding | 16 top, 16 bottom | 16 top, 16 bottom |
| Hero icon | Size | 64 | 64 |
| Hero icon | Colour | Coral #FA6140 for destructive | Coral #FA6140 for destructive |
| Title | Type | 16 Semibold, centred | 16 Semibold, centred |
| Title | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Title | Space | 16 above, 8 below, 24 sides | 16 above, 8 below, 24 sides |
| Body | Type | 14 Regular, line height 20, centred | 14 Regular, line height 20, centred |
| Body | Colour | Ink #44544A | Ink #44544A |
| Body | Sides | 24 | 24 |
| Buttons | Height | 56 | 56 |
| Buttons | Gap | 12 | 12 |
| Buttons | Padding | 24 top, 16 sides | 24 top, 16 sides |
| Buttons | Corners | 8 | 8 |
| Buttons | Type | 16 Medium | 16 Medium |
| Cancel | Style | White, 1px Line #C3CEC7, Ink #44544A text | White, 1px Line #C3CEC7, Ink #44544A text |
| Action | Fill | Coral #FA6140 for destructive | Coral #FA6140 for destructive |
**Accessibility**
- The popup is an alert dialog: focus moves to the title; the screen behind can't be reached until it closes.
- Focus starts on Cancel, so a stray tap or key can't do the destructive action.
- White on Coral scores 3.1 for readability; the label is 16 Medium and one word, and the hero icon repeats the warning.
- Title in Teal ink scores 8.8 on white.
**Examples**
Default
```html
Screen title
gpp_maybe
Title
Body text that says what will happen.
```
Variant: Non-destructive (temporary)
```html
Screen title
check_circle
Title
Body text that says what will happen.
```
---
## Filter screen
Overlays · Ready · [Figma](https://www.figma.com/design/76AVD9M2CKL758DpHVnTi4?node-id=186-8074)
A full screen for narrowing a list by several categories at once.
**When to use**
- A list can be narrowed by more than one category, such as status, site and date.
- Each category has more options than fit in a row of chips.
**When not to use**
| If people need to | Use |
| --- | --- |
| Switch between a few views of a list | Chips or Primary tabs |
| Find one item by name | Search and filter row |
| Choose one option | Bottom sheet |
**Anatomy**
1. Title with count · required: "Filter - n", the number of options chosen
2. Close · required
3. Category rail · required, 162 wide
4. Active category · white
5. Search · when a category has many options
6. Option · checkbox and label
7. Result count · required: how many records match
8. Clear all · required
9. Apply · required
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Full screen | The only form; filters never open as a small sheet | yes |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Nothing selected | No options chosen | Title reads "Filter - 0"; result count shows the whole list | yes |
| Some selected | One or more options chosen | Checked boxes; the title count and result count update at once | yes |
**Behaviour**
- Tapping a category in the rail shows its options on the right.
- The result count updates as options change, before Apply.
- Apply closes the screen and filters the list. Close drops changes made since opening.
- Clear all unticks every option in every category but keeps the screen open.
- The filter button on the list shows the number of options in use.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Form | Full screen | Not designed yet; ask before building |
**Content**
| Part | Rule |
| --- | --- |
| Title | "Filter - " and the number chosen |
| Category | A noun, one or two words |
| Option | The value as it appears on the cards |
| Result count | Number and noun: "12 results" |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Screen | Fill | White #FFFFFF | White #FFFFFF |
| Screen | Size | Full screen | Full screen |
| Header | Padding | 44 top, 16 bottom, 16 sides | 44 top, 16 bottom, 16 sides |
| Header | Shadow | 0 1 1, black at 10% | 0 1 1, black at 10% |
| Title | Type | 20 Medium | 20 Medium |
| Title | Colour | Ink #44544A | Ink #44544A |
| Close | Size | 24 | 24 |
| Rail | Width | 162 | 162 |
| Rail | Fill | Pale green #EFF5F2 | Pale green #EFF5F2 |
| Rail item | Height | 40 | 40 |
| Rail item | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 16 sides |
| Rail item | Type | 14 Semibold | 14 Semibold |
| Rail item | Colour | Teal ink #1F515B | Teal ink #1F515B |
| Rail item | Active | White #FFFFFF fill | White #FFFFFF fill |
| Options panel | Padding | 16 | 16 |
| Options panel | Gap | 12 | 12 |
| Search | Fill | White #FFFFFF | White #FFFFFF |
| Search | Border | 1px Line #C3CEC7 | 1px Line #C3CEC7 |
| Search | Corners | 4 | 4 |
| Search | Padding | 11 top and bottom, 12 sides | 11 top and bottom, 12 sides |
| Search | Icon | 18 | 18 |
| Search | Type | 12 Regular | 12 Regular |
| Option | Checkbox | 18 | 18 |
| Option | Gap | 8 | 8 |
| Option | Type | 12 Regular | 12 Regular |
| Option | Rows | 20 apart | 20 apart |
| Footer | Height | 80 | 80 |
| Footer | Padding | 16 sides | 16 sides |
| Footer | Gap | 8 | 8 |
| Footer | Shadow | 0 -1 0, black at 10% | 0 -1 0, black at 10% |
| Result count | Type | 14 Regular | 14 Regular |
| Clear all | Style | Outline, 40 tall, corners 8, 1px Line #C3CEC7 | Outline, 40 tall, corners 8, 1px Line #C3CEC7 |
| Clear all | Type | 14 Medium Teal ink #1F515B | 14 Medium Teal ink #1F515B |
| Apply | Style | Antz green #37BD69, 40 tall, corners 8 | Antz green #37BD69, 40 tall, corners 8 |
| Apply | Type | 16 Semibold white | 16 Semibold white |
**Accessibility**
- The rail is a list of tabs; the active one is announced as selected.
- Each option is a checkbox with its label; ticked and unticked are different icons.
- The result count is announced when it changes.
- White on Antz green scores 2.4 for readability, below 4.5. "Apply" stays one short word at 16 Semibold; this is a known gap in the palette.
- Option rows are 18 tall in Figma; the touch area extends to the full row width and at least 44 tall.
**Examples**
Default
```html
Filter - 0close
Category
Category
Category
Category
Category
searchSearch
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
12 results
```
State: Some selected
```html
Filter - 2close
Category
Category
Category
Category
Category
searchSearch
check_boxOption
check_boxOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
check_box_outline_blankOption
12 results
```
---
## Toast
Overlays · Partial · [Figma](https://www.figma.com/design/VPKybj9jCMEQKKPynTu7Zo?node-id=272-37375)
A short message that tells people an action failed or worked.
**When to use**
- 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.
**When not to use**
| If people need to | Use |
| --- | --- |
| Ask people to confirm before acting | Confirm |
| Show an error on one field | Text field error message |
| Show the status of a record | Status label |
**Anatomy**
1. Container · required: Red for error, Antz green for success
2. Title · required
3. Close · required
4. Body · optional
**Variants**
| Variant | Purpose | In Figma |
| --- | --- | --- |
| Error | Something failed | yes |
| Success | Something worked; same anatomy on Antz green | temporary |
**States**
| State | When | What changes | In Figma |
| --- | --- | --- | --- |
| Title and body | People need to know what to do next | Body line under the title | yes |
| Title only | The title says it all | No body | temporary |
**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.
**Phone and tablet**
| | Phone | Tablet |
| --- | --- | --- |
| Width | Full width less 16 each side | Content width, centred, up to 480 (temporary rule) |
**Content**
| Part | Rule |
| --- | --- |
| Title | What happened, in a few words: "Couldn't save" |
| Body | What to do next, one line |
| Tone | Plain and calm; no blame, no exclamation marks |
**Specs**
| Part | Property | Phone | Tablet |
| --- | --- | --- | --- |
| Container | Width | 358 (full width less 16 each side) | 358 (full width less 16 each side) |
| Container | Corners | 8 | 8 |
| Container | Padding | 12 top and bottom, 16 sides | 12 top and bottom, 16 sides |
| Container | Gap | 4 | 4 |
| Container | Shadow | 0 4 2, black at 15% | 0 4 2, black at 15% |
| Error | Fill | Red #E93353 | Red #E93353 |
| Success | Fill | Antz green #37BD69 (temporary rule) | Antz green #37BD69 (temporary rule) |
| Title | Type | 16 Semibold | 16 Semibold |
| Title | Colour | White #FFFFFF | White #FFFFFF |
| Close | Size | 24, white | 24, white |
| Body | Type | 14 Regular, line height 20 | 14 Regular, line height 20 |
| Body | Colour | White #FFFFFF | 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 Antz green scores 2.4, too low for body text; the success toast keeps to a title until a darker fill is designed.
- A toast never holds the only way to recover; the failed action can be tried again from the screen.
**Examples**
Default
```html
Screen title
Titleclose
Body text that says what to do next.
```
Variant: Success (temporary)
```html
Screen title
Titleclose
Body text that says what to do next.
```
Content: Title only
```html
Screen title
Titleclose
```
---
# Layouts
## List layout
For any screen whose job is to find one record among many.
### Regions
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Title bar | Back, screen title, up to two icon actions | Yes |
| 2 | Primary tabs or chips | One way of splitting the list | No |
| 3 | Count and filter | Item count, filter button | Yes |
| 4 | Items | List cards or request cards, one kind per list | Yes |
| 5 | Add button | Creates a new item | When people can add |
### Spacing
| Between | Phone | Tablet |
| --- | --- | --- |
| Screen edge and content | 16 | 20 |
| Items | 12 | 12 |
| Count line and first item | 16 | 16 |
| Add button and screen edge | 24, above navigation | Pill, 24 from the right |
### Rules
- One kind of item per list.
- The splitting control holds one idea: status, owner or type, never a mix.
- An empty list shows one line of text in the middle; the add button stays.
- On tablet, choosing an item opens it beside the list. See Tablet split.
Skeleton (neutral placeholder text; replace with real content)
```html
arrow_backTitlesearch
14Tab one
8Tab two
3Tab three
Counttune
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
add_circle
```
## Record layout
For one record: what it is, its details, its history, and any decision on it.
### Two types
| Type | Use for | Header |
| --- | --- | --- |
| Owned record | Something that belongs to a person or animal and stays valid over time | Navy record header |
| Request record | A request or ticket that moves through steps and gets comments | White header with category and priority |
### Owned record
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Record header | Back, title, more menu, who it belongs to | Yes |
| 2 | Details | Detail rows grouped by meaning | Yes |
| 3 | History | Everything that happened, newest first | Yes |
| 4 | Decision bar | Approve and Reject, or the one main action | When the viewer must decide |
### Request record
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Header | Back, record number, more menu; category with priority flag; date; requester with call and chat | Yes |
| 2 | Details | Sections on a Field fill, each with an icon, a small caption and the content, split by thin lines | Yes |
| 3 | Activity | Comments and status changes in one log, with a comment box at the top | Yes |
| 4 | Current status bar | Current status and how long ago it changed; the decision buttons sit here when someone must act | Yes |
### Rules
- The record's status shows once: in the header area of an owned record, in the current status bar of a request record.
- A request record's activity holds both comments and status changes; there is no separate chat or history page.
- History is the last section; on mobile it replaces separate audit pages.
- Approve and Reject are stacked on phone, side by side on tablet. Reject always asks for a reason.
Skeleton 1 (neutral placeholder text; replace with real content)
```html
arrow_backRecord titlemore_vert
AB
Name
Detail
date_range
Label
Value
location_on
Label
Value
devices_other
Label
Value
login
EventDate
```
Skeleton 2 (neutral placeholder text; replace with real content)
```html
arrow_backRecord titlemore_vert
categoryCategory
Date and timeABRequestercallchat
notes
SectionSection content that can run over two lines of text
group
SectionSection content that can run over two lines of text
currency_rupee
SectionSection content that can run over two lines of text
chatActivityAdd a commentABNameComment
Current status • timeStatus
```
## Form layout
For creating or editing one record.
### Regions
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Title bar | Close, form title | Yes |
| 2 | Sections | White section cards, each with an icon and heading, 16 apart | Yes |
| 3 | Action bar | One main action, 56 tall, pinned to the bottom | Yes |
### Rules
- One form with switches inside it, never two forms for the same record.
- A switch never hides fields that are still needed.
- The main action stays disabled until required fields are filled.
- Leaving with unsaved changes asks first, using Confirm.
Skeleton (neutral placeholder text; replace with real content)
```html
closeTitle
personSection
Hint text
Hint text
eventSection
Hintcalendar_month
Hintcalendar_month
```
## Result layout
For the outcome of a check: whether something passed, failed or is not ready yet.
### Regions
| | Region | Holds | Required |
| --- | --- | --- | --- |
| 1 | Context and close | Where or what was checked, close | Yes |
| 2 | Result | 96 icon, 28 title, reference | Yes |
| 3 | Details | White sheet with who or what was checked | Yes |
| 4 | Action | One action, or Close | Yes |
### Result colours
| Result | Backdrop | Icon |
| --- | --- | --- |
| Passed | Positive #E1F9ED | Antz green tick |
| Failed | Red at 10% | Red shield |
| Not ready yet | Amber light | Amber shield |
Skeleton (neutral placeholder text; replace with real content)
```html
Placeclose
check_circle
Result
AB
Name
Detail
devices_other
Label
Value
```
## Tablet split
On tablet, the list and the open record sit side by side.
### Regions
### Grid
| Part | Value |
| --- | --- |
| Columns | 10; list takes 4, record takes 6 |
| Gap | 8 |
| Outer padding | 12 |
| Panels | White, corners 12 |
| Frame | 834 wide, portrait |
### Rules
- The chosen list item gets a 1.5 Antz green border.
- Decisions sit side by side at the bottom of the record panel.
- Landscape is not designed yet.
Skeleton (neutral placeholder text; replace with real content)
```html
arrow_backTitlesearch
Count
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
Record numberStatus
AB
Name
Detail
Created by • Date
arrow_backRecord titlemore_vert
AB
Name
Detail
date_range
Label
Value
location_on
Label
Value
```
---
# Guidance
## Logo
The Antz logo in colour and white. Click a logo to copy its file name; download them all in the kit.
### Versions
### Rules
- Use the colour logo on white or light backgrounds and the white logo on Navy or dark backgrounds.
- Use the files as they are: do not recolour, stretch or redraw the logo.
- Antz Astra is a separate product and is not the Antz logo.
## Colour
Three colours carry the brand. Every other colour has one job. Click a colour to copy its hex.
### House colours
### Text and lines
### Page and surfaces
### Accents and alerts
### Text on colour
How readable each pairing is. 4.5 or more works for body text; 3 or more for large text and icons.
### Using colour
| Rule | Detail |
| --- | --- |
| The page colour changes by screen | Page, Page light, Pale green or Disabled, chosen to break a run of identical screens |
| The main button is Antz green | Teal ink is allowed on the main button to vary a run of screens |
| Selected means Teal ink | Selected chips, pills and choice tiles |
| Colour is never the only signal | States change shape or icon as well |
| No raw colours | Every colour on screen is one of the colours on this page |
| Colour | Hex | Variable | Use |
| --- | --- | --- | --- |
| Antz green | #37BD69 | var(--Primary) | Main buttons, active tabs, success |
| Teal ink | #1F515B | var(--OnPrimaryContainer) | Selected items, values, navy buttons |
| Navy | #1F415B | var(--OnSecondaryContainer) | Record headers, sheet backdrop |
| Ink | #44544A | var(--OnSurfaceVariant) | Titles, labels, body text |
| Muted | #7A8684 | var(--neutralSecondary) | Dates and small notes |
| Hint | #839D8D | var(--Outline) | Hint text, disabled text |
| Line | #C3CEC7 | var(--OutlineVariant) | Field borders, dividers |
| Dark green | #006D35 | var(--OnSurface) | Positive status text, links |
| Page | #DDEBE9 | var(--displaybgSecondary) | Page behind cards |
| Page light | #E8F4F2 | var(--displaybgPrimary) | Page behind cards, bottom navigation |
| Pale green | #EFF5F2 | var(--Background) | Panels inside a page, sheet body |
| Field | #F2FFF8 | var(--Surface) | Inside fields |
| Disabled | #DAE7DF | var(--SurfaceVariant) | Disabled buttons, page option |
| Positive | #E1F9ED | var(--OnBackground) | Positive status fill |
| Turquoise | #00D6C9 | var(--Secondary) | Initials, male tag |
| Turquoise light | #AFEFEB | var(--SecondaryContainer) | Active bottom navigation item |
| Add blue | #00AFD6 | var(--addPrimary) | Add buttons |
| Coral | #FA6140 | var(--Tertiary) | Cancel, required mark, female tag |
| Red | #E93353 | var(--Error) | Reject, expired, errors |
| Amber | #E4B819 | var(--moderateSecondary) | Pending, ratings |
| Notes | #FCF4AE | var(--notes) | Notes fields |
## Type
One typeface, Inter, in twelve sizes. Nothing in between.
### Scale
### Rules
- Inter only. No sizes outside the scale; never 13, 15 or Bold.
- Line height is the size itself; paragraphs use 20, bullet lists 24.
- Sentence case for titles, tabs and buttons. No all-capital labels.
- Numbers stay light: 24 on phone, 28 on tablet, never heavier than Semibold.
## Spacing and corners
Phone screens keep 16 from the edge, tablet 20. Most corners are 8.
### Spacing scale
### Screen spacing
| Between | Phone | Tablet |
| --- | --- | --- |
| Screen edge and content | 16 | 20 |
| List items | 12 | 12 |
| Form sections | 16 | 16 |
| Inside a card | 12 | 16 |
| Label and field | 8 | 12 |
| Title bar height | 72 | 72 |
### Corners
### Depth
Border or shadow, never both. The backdrop behind a sheet is Navy at 50%.
### Touch
Every tappable thing is at least 44 by 44.
## Icons
One rounded icon family. Click an icon to copy its name.
### Sizes
| Size | Use |
| --- | --- |
| 24 | Title bars, navigation, inside fields, checkboxes, menus |
| 20 | Rows, section headings, status bars |
| 18 | Search and filter |
| 16 | Inline with small text, tabs |
| 50 | Module tiles |
| 64 · 96 | Confirm and result screens |
### Set
### States
A control's states use different icons from the same family. Colour alone is never a state.
## Status
Each meaning has one colour pair, used the same way everywhere.
### Meanings
| Meaning | Examples | Phone | Tablet | Fill · text |
| --- | --- | --- | --- | --- |
| Positive | Active, approved, entry, done | Status | Status | Positive #E1F9ED · Dark green #006D35 |
| Pending | Upcoming, waiting, draft | Status | Status | Amber light · Amber #E4B819 |
| Negative | Expired, rejected, denied | Status | Status | Red light · Red #E93353 |
| Cancelled | Cancelled | Status | Status | Coral light · Coral #FA6140 |
| Neutral | Exit, inactive | Status | Status | Light grey · Ink #44544A |
### Where status shows
| Form | Used on | Page |
| --- | --- | --- |
| Status label | Every record | Status label |
| Status bar | Request and approval cards only | Request card |
| History dot | A record's history | History |
| Result screen | The outcome of a check | Result layout |
### Rules
- Status is said once on a card.
- Pending has low contrast: keep the label short or add an icon.
- A wait or a reason is not a status; it goes in the history or a note.
## Writing
Short, plain and once.
### Formats
| Thing | Format | Example |
| --- | --- | --- |
| Date | Day month year | 10 Aug 2026 |
| Date range on a card | Short year, arrow | 10 Aug '26 → 20 Aug '26 |
| Date and time | Date, dot, time | 22 Apr 2026 • 09:14 AM |
| Age of an item | Number and letter | 2 d, 5 h |
| Waiting time | Since | Since 2 days |
| Record number | Prefix and number | ABC-1029 |
| Meta line | Parts joined by a dot | Number • Person • 2 d |
| Count line | Noun and count | Requests (6) |
| Count on a chip | Label, dash, count | All - 22 |
| Phone | Country code first | +91 98765 43210 |
| Money | Rupee sign | ₹ 12,500 |
### Rules
- No sentence that explains what the screen already shows.
- Sentence case everywhere; no colons after field labels. Identifier lines on the animal card keep their Figma form, such as Ear tag: value.
- Buttons start with a verb: Create, Approve, Reject.
- Errors say what to fix in one line.
- Sample people in designs use plain English names.
## Rules
The standing rules behind every screen.
### Figma is the source
- Copy the named source literally; never "in the spirit of" it.
- A shared Figma component is the whole container: no extra wrapping, lines or sections.
- Build nothing the frame lacks; departures are questions.
### Say less
- No explaining sentences.
- One fact, one place.
- No decorative chips, colour stripes, emoji or all-capital labels.
- Let people read the data; no verdict banners.
### Structure
- One container level.
- Each kind of information gets its own form, only when it answers a real question.
- Read and act are separate.
- One main action; the rest in the more menu. Delete never sits red beside Edit.
- No new state when a note, chat or filter can carry it.
### Type, fields and controls
- Inter on the scale only.
- Every field on a screen is 56 tall.
- Each control state is its own icon.
- Touch targets at least 44.
### Forms and records
- One form with switches inside.
- Show similar records while a name is typed.
- Delete only unused records; otherwise deactivate.
- Every record keeps its history.
- Rejecting always needs a reason.
### Before sharing
- Tap every control, role and status.
- Check the empty first screen, not only filled ones.
- Compare with the Figma frame side by side.
## Decisions
Where the Figma files disagreed, this is what was settled on 26 Oct 2026.
### Fixed
| Topic | Standard |
| --- | --- |
| Field | 56 tall, Line border, corners 8, Field fill |
| Screen and card titles | Ink |
| Title bar edge | 1px light grey line |
| Record header | Navy |
| Card corners | 8; 12 only when asked |
| Selected fill | Teal ink |
| Underline tab | Antz green text and bar |
| Secondary tab | Antz green pill on Pale green |
| Filter button | 40, light grey |
| Dark green text | Dark green #006D35 |
| Add button | Add blue |
| Outline button | Line border, Teal ink text |
| Disabled button | Disabled fill, Hint text |
| Confirm buttons | 56 |
| Sheet | Corners 16, title on the left with close |
| Sheet handle | Only when the sheet is dragged |
| Tablet | 834 wide, 20 from the edge |
### Chosen per screen
| Topic | Rule |
| --- | --- |
| Page colour | Any of four, to break a run of identical screens |
| Main action | Antz green; Teal ink to vary |
| Search | Light grey 40 standard; outlined or shadowed for more or less prominence |
| Status | Label always; status bar only on request and approval cards |
| Tabs | Primary tabs, Secondary tab, or chips, by weight |
| Approve and Reject | Stacked on phone, side by side on tablet |
| Add button | Square on phone; labelled pill on tablet when there is one action |
| Status text | 12 on phone, 14 on tablet |
| Big numbers | 24 or 20 on phone, 28 on tablet |
| Sheet footer | Two buttons standard; one for a single decision |
| Record header title | Centred or left, by screen |
| Bottom navigation | As the module designer chose |
## Not designed yet
Where Figma has no design, a temporary rule fills in until it does.
### Coverage
| Part | Default | Focus | Error | Disabled | Loading | Empty |
| --- | --- | --- | --- | --- | --- | --- |
| Text field | In Figma | Temporary | Temporary | Temporary | – | – |
| Dropdown | In Figma | Temporary | Temporary | Temporary | – | – |
| Button | In Figma | Temporary | – | Temporary | Temporary | – |
| List | In Figma | – | – | – | Temporary | In Figma |
| Bottom sheet | In Figma | – | – | – | Temporary | – |
### Temporary rules
| Missing | Use until designed |
| --- | --- |
| Field focus | Border turns Hint grey |
| Field error | Red border and a one-line red message below |
| Field disabled | Disabled fill, Hint text |
| Loading | Keep the layout; light grey blocks where text will be |
| Empty with picture | One line of text in the middle, 20 Medium |
| Offline or failed | An error toast; no lasting banner |
| Open dropdown, date picker | A bottom sheet with option rows |
| Success toast | Same as the error toast in Antz green |
| Section and enclosure cards | Not sourced yet; ask for the Figma frame |
| Tablet landscape, 820-wide iPads | Ask before designing |
| New Antz Home grid | Get its Figma frame before building |
## For developers
Build from these files. They are generated with this site, so they always match it.
### Download
Download the kit (zip)
The kit holds every file below plus the fonts, sample images and Antz logos they use. Keep the folder together: the colour file loads the fonts from its assets folder.
### Files
| File | What it holds | Open |
| --- | --- | --- |
| AGENTS.md | Start here when an AI tool builds Antz screens: what to read and the rules | Open |
| COMPONENTS.md | Every component and layout with ready HTML for each variant and state | Open |
| components.json | The same, for tools | Open |
| tokens.css | Every colour, size, corner and shadow, named as in Figma | Open |
| tokens.json | The same values for other tools | Open |
| antz.css | The component styles the examples use | Open |
| STANDARDS.md | The full written rules | Open |
| decisions.json | The settled design decisions | Open |
### How to use
- Load tokens.css, then antz.css.
- Start a screen from a layout skeleton in COMPONENTS.md and fill it with component examples; change the content, keep the styles.
- Use the named colour variables; never type a colour or size by hand.
- If you have the Figma frame for the screen, match it exactly; this system fills the gaps around it.
- Any Material Symbols Rounded icon may be used when it fits the meaning; the icon page lists the common ones.
- Anything marked temporary is not designed in Figma yet: report it as a departure.
MC 1
