01
Logo
TickLists has two official logo forms: the full wordmark logo (for marketing, splash screens, brand moments) and the mark only (for app headers, favicons, compact contexts). When the mark appears next to text inside the app, that text is always the current list title — never the word "TickLists".
Full logo — primary brand mark
Full wordmark logo — always on teal background. Use for marketing, splash screens, and brand moments.
Mark only — for compact use
On dark — white/50% circle, lime tick. Used in app headers, favicons.
On light — teal/40% circle, teal tick.
Mark in context — app header
The mark is used alone — text next to it is always the list title (Lora 600, white). Never "TickLists".
Vertical alignment: The mark and list title must share the same flex container with
align-items: center. The mark's optical centre aligns with the text cap-height. Do not add manual top offsets.
Clear space
Hardware
½ × mark height
½ × mark height
½ × mark height
½ × mark height
Minimum clear space on all sides = half the height of the mark. Never place text, buttons, or imagery inside this zone.
Minimum size: Full lockup — 120px wide minimum. Mark only — 24px minimum (below this, use a solid teal square/circle with the lime tick simplified).
Don'ts
TickLists
Don't recolour the logo. Only approved colour combinations.
Don't stretch or distort the mark. Scale proportionally only.
TickLists
Don't place the logo on unauthorised background colours. Use only teal, white, or light grey.
Don't add drop shadows or effects to the mark.
TickLists
Don't use text spelling "TickLists" next to the mark — the mark is standalone or paired with a list title only.
Don't use the logo at low opacity.
02
Colour
Five core colours make up the TickLists palette. Teal is the dominant brand colour. Lime is the accent — used sparingly, always on a dark background. Light Grey is the app surface.
Primary palette
Teal
#015677
Primary brand. All headers, primary buttons, active states, links, borders.
Lime
#F2FF00
Accent only. Counters and active labels on teal. Never on light backgrounds.
Charcoal
#1D1D1D
All body text on light backgrounds. Bottom navigation bar.
Light Grey
#F5F0EC
App background, toolbar backgrounds, alternating row tint.
White
#ffffff
Cards, modals, list rows, input fields. Primary surface for content.
Lime rule: Lime (#F2FF00) is only legible on very dark backgrounds. Never use it on white, light grey, or any light surface. It exists solely as a high-energy accent on teal.
Approved contrast pairs
White on Teal
Lime on Teal
White on Charcoal
Charcoal on Light Grey
Charcoal on White
Charcoal on Lime
Minimum contrast: All text must be #1D1D1D or darker on light backgrounds. On reversed (dark) backgrounds, use white or lime — never mid-greys, which fail accessibility. No exceptions.
State colours
✓ Reset email sent
Success
bg #f0fdf4 · border #bbf7d0 · text #15803d
✕ Invalid email address
Error
bg #fff5f5 · border #ef444433 · text #b91c1c
ℹ Shared list
Info / neutral
bg #e8f0f3 · border #01567730 · text #015677
User-assignable row highlights
Green
Yellow
Blue
Orange
Purple
Pink
Mint
These are user-controlled row accent colours — not brand colours. They appear only on list item rows. Text on all of them remains charcoal (#1D1D1D). Never use these for UI chrome, buttons, or headings.
03
Typography
Three typefaces, each with a distinct role. Never mix them freely — use each only in its designated context. All fonts are loaded via Google Fonts.
Google Fonts import:
Open Sans:wght@400;600;700 | Open Sans Condensed:wght@700 | Lora:wght@400;500;600;700
Food Shopping
Your household, in sync
Size scale used in app
26–28px
My Lists heading
My Lists
22px
Auth titles (Create account, Sign in)
Create account
18px
List card names
Weekly Food Shop
13px
Department labels in list view
Fruit & Veg
Use for
List names, section headings, modal titles, the wordmark, department names, marketing headlines.
Not for
Body copy, buttons, labels, inputs, or any text smaller than 12px.
Create free account
Free · 1 list · 300 items · share with up to 10 people in your household.
Weight & size usage
700 / 15–16px
Primary buttons
Create free account
700 / 12px
Field labels, column headers
Your name
600 / 13–14px
Ghost buttons, secondary actions
+ Add item
400 / 13–15px
Body copy, descriptions, list counts
12 items ticked
400 / 11px
Meta text, timestamps, footnotes
Rachael Thu 16 Apr @08:43
Use for
Everything that isn't a heading or counter — buttons, labels, body, inputs, nav tabs, descriptions.
Not for
Counters and compact numeric labels (use Condensed). Headings and list names (use Lora).
2/60
2 kg
Edit: Food
Use cases — always weight 700
700 / 15px
Ticked counter on teal bg
14/60
700 / 14px
Active list name in header (lime on teal)
Food
700 / 16px
Quantity badge on items
500g
700 / 13px
Store pill buttons, compact actions
Aldi Dalston
Use for
Numeric counts, ticked/total ratios, quantity badges, store pill labels, compact action buttons where space is tight.
Not for
Body copy or anything that requires reading ease at length. One weight only: 700.
04
UI Components
Reusable patterns that appear throughout the app. These are the live, rendered versions — copy styles directly from here.
App header
Food Shopping
14/60
ticked
❯
Fruit & Veg
3/12
✓
Apples
6
Bananas
✓
Milk
2L
| Element | Spec |
|---|---|
| Header height | 52px, sticky, z-index 100 |
| Background | #015677 (Teal) |
| Box shadow | 0 2px 14px rgba(1,86,119,0.35) |
| Logo mark | 28×28px — mark only (see Logo section). No wordmark. |
| List title | Lora 600 17px, white — sits directly alongside the mark. Never "TickLists". |
| Department rows | Lora 600 13px, charcoal; height 34px; bg cream |
| Item rows | Open Sans 400 13px; alternating white / #faf8f5; height 34–36px |
Buttons
On white / cream
On teal (header / dark surfaces)
| Variant | Background | Text | Border | Border-radius | Font |
|---|---|---|---|---|---|
| Primary | #015677 | #ffffff, 700 | none | 12px | Open Sans 700 15px |
| Ghost | transparent | #015677, 700 | 1.5px solid #015677 | 20px (pill) | Open Sans 700 13px |
| Pill (on dark) | rgba(255,255,255,0.12) | #ffffff, 700 | 1px solid rgba(255,255,255,0.22) | 20px | Open Sans 700 13px |
| Dashed (on dark) | transparent | rgba(255,255,255,0.85) | 1.5px dashed rgba(255,255,255,0.5) | 20px | Open Sans Condensed 700 13px |
| Lime accent | #F2FF00 | #1D1D1D, 700 | none | 20px | Open Sans Condensed 700 13px |
Tags & chips
Store pills & type badges
Aldi Dalston
Lidl High Street
Shopping
Routine
Day-of-week tags (routines)
Mon
Thu ×
Fri
Sat
Shared & dietary tags
Shared by Dave
keto
vegetarian
carnivore
Counter pill (on dark)
2/60
ticked
List card
My Lists — list card
≡
❯
Weekly Food Shop
| Element | Spec |
|---|---|
| Card bg | White, border 1px #e8e2da, border-radius 14px |
| List name | Lora 600 18px, charcoal |
| Drag handle | ≡ symbol, #ccc, font-size 18px |
| Arrow | ❯ symbol, teal #015677, font-size 16px |
| Item count | Open Sans 400 13px, charcoal |
Input fields
Default & focused states
| State | Border | Outline |
|---|---|---|
| Default | 1.5px solid #ddd | none |
| Focused | 1.5px solid #015677 | 3px solid rgba(1,86,119,0.15), offset 1px |
| All states | border-radius 10px · padding 12px 14px · Open Sans 400 15px · bg white · color charcoal | |