Logo

TickLists has one logo — the organic blob mark with "TickLists.app" lettering — output in two colour renditions for contrast: pale-yellow-on-teal for in-app use, teal-deep-on-pale-yellow for the favicon and app icon. It is not used inline in page headers — List View, Bulk Upload, and Account headers show only a back button and the screen/list title text, no mark.

Redesigned Aug 2026: The old circle-track-and-checkmark mark has been fully retired in favour of the organic blob mark below. Assets referenced here are pulled live from ticklists.app — if either file moves, update the src paths.

Primary logo — in-app rendition

Pale-yellow mark, teal wordmark. Source: ticklists.app/img/ticklists logo lime round.svg

Favicon / app icon rendition

Teal-deep + pale-yellow — inverted for contrast at small sizes (browser tab, home-screen icon).

Same favicon asset on light — its own teal-deep background carries the contrast either way.

Where the logo actually appears in-app

My Lists

Standalone, centred above the heading — only on the loading screen and the top of the My Lists page. Also appears small (26px) inside the "Add to Home Screen" prompt badge. Not used on List View, Bulk Upload, or Account — those headers are title-text only.

No inline lockup: unlike the old design, the mark is never placed inline beside a list title inside a header. Where it appears, it's the standalone full logo, centred, above the text.

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.

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, teal deep, 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.

Colour

Teal (in two shades) is the dominant brand colour. Lime and pale yellow are accents — used sparingly, always on a dark background. Light Grey is the app surface.

Primary palette

Teal

#015677

Primary brand. Buttons, links, borders, chip/tag tints.

Teal Deep

#103548

Second brand teal. Headers, active states, full-bleed photo backdrops, most on-app text.

Lime

#E8F26B

Accent only. Counters and active labels on teal. Never on light backgrounds.

Lime Strong

#D8E93C

Lime's darker pair — gradients and active-pill fills alongside Lime.

Pale Yellow

#FAFF92

Logo & favicon accent only. Not a general UI colour.

Charcoal

#1D1D1D

All body text on light backgrounds. Bottom navigation bar.

Ink

#17262A

Near-black text on the newer glass/photo-backdrop screens.

Ink Soft

#4C6066

Secondary/muted text paired with Ink.

Mint

#BFE7DD

Supporting tint on glass/photo-backdrop surfaces.

Teal Tint

#C3E1E6

Lightest teal tint — supporting surfaces.

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 (#E8F26B) and Lime Strong (#D8E93C) are only legible on very dark backgrounds. Never use them on white, light grey, or any light surface. Pale Yellow (#FAFF92) is reserved for the logo and favicon — don't use it as a general UI accent.

Approved contrast pairs

White on Teal

#fff on #015677 AA ✓

Lime on Teal

#E8F26B on #015677 AA ✓

White on Teal Deep

#fff on #103548 AAA ✓

White on Charcoal

#fff on #1D1D1D AAA ✓

Charcoal on Light Grey

#1D1D1D on #F5F0EC AAA ✓

Charcoal on White

#1D1D1D on #fff AAA ✓

Charcoal on Lime

#1D1D1D on #E8F26B AA ✓

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

Tag highlight palette (20 colours)

Seafoam
Mint
Jade
Teal
Pine
Sand
Citron
Mustard
Lagoon
Ochre
Sky
Powder
Denim
Spruce
Periwinkle
Blush
Rose
Linen
Stone
Clay

These 20 named colours are the shared source for tag/list-card tints — not brand colours. Text on all of them remains charcoal (#1D1D1D) or teal deep. Never use these for UI chrome, buttons, or headings.

Typography

Three typefaces, each with a distinct role. Never mix them freely — use each only in its designated context. New York is a system font; Open Sans and Open Sans Condensed load via Google Fonts.

Font sources:

New York: system font stack, no import needed | Open Sans:wght@400;600;700 (Google Fonts) | Open Sans Condensed:wght@400;700 (Google Fonts)

New York Serif — headings & names System font

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, and large primary CTA buttons (e.g. "Create free account").

Not for

Body copy, buttons, labels, inputs, or any text smaller than 12px.

Open Sans Sans-serif — all body & UI text Google Fonts

Create free account

Free · 1 list · 300 items · share with up to 10 people in your household.

Weight & size usage

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 New York).

Open Sans Condensed Condensed — counters, status, compact labels Google Fonts

2/60 2 kg Edit: Food

Use cases — weight 700 unless noted

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

400 / 13px Non-active toolbar / segment labels (List View) — weight is the only live/non-live signal, colour stays full-opacity teal Collapse

Use for

Numeric counts, ticked/total ratios, quantity badges, store pill labels, compact action buttons where space is tight. Weight 700 for live/active state, 400 for non-active toolbar and segment labels.

Not for

Body copy or anything that requires reading ease at length. Never use colour-opacity to signal active/inactive — weight is the only distinguishing signal.

UI Components

Reusable patterns that appear throughout the app. These are the live, rendered versions — copy styles directly from here.

App header

No logo mark in headers. List View, Bulk Upload, and Account headers are back button + title text only — see Logo section for where the mark actually appears.

Food Shopping

Last update: Rachael, 5 May 12:44

14/60 ticked

❯ Fruit & Veg 3/12

✓

Apples 6

Bananas

✓

Milk 2L

Element	Spec
Background	Diagonal fade: `linear-gradient(135deg, teal 0%, transparent 100%)` over the page's full-bleed backdrop photo
Back button	34×34px circle, rgba(255,255,255,0.15) bg, 0.6px solid Lime border, blur(3px), white chevron
List/screen title	New York 600 26px, white, text-shadow for legibility over photo. Never "TickLists" — always the screen or list name.
Meta line	Open Sans Condensed 700 14px, white 90%
Ticked counter pill	rgba(255,255,255,0.15) bg, 0.6px solid Lime border, Lime text, Open Sans Condensed 700 15px, radius Pill
Department rows	New York 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	#E8F26B (Lime)	#103548 (Teal Deep), 700	none	999px (pill)	New York 700 16px
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	#E8F26B	#1D1D1D, 700	none	20px	Open Sans Condensed 700 13px

Border-radius scale: Small 14px (chips, inputs) · Medium 18px · Large 24px (cards, department headers, glass panels on redesigned screens) · Pill 999px (buttons, segments). The 12px/14px values above are legacy — cards on List View, Account, and Bulk Upload now render at 24px.

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

User-created tags and list-card tints now draw from the full 20-colour tag highlight palette — see Colour → Tag highlights. The 3 dietary examples above are illustrative, not the full set.

List card

My Lists — list card

≡

Weekly Food Shop

Shopping 14/60 ticked

❯

Element	Spec
Card bg	Frosted glass (backdropFilter: blur(14px)) over the page's rotating backdrop photo, border-radius 24px
List name	New York 600 18px, teal deep
Drag handle	≡ symbol, #ccc, font-size 18px
Arrow	❯ symbol, teal #015677, font-size 16px
Item count	Open Sans 400 13px, teal deep

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

Bottom navigation

Redesigned again, Sep 2026: there is no bar any more. Tabs float directly on the page's backdrop photo; a plain teal scrim at the very bottom keeps labels legible. The active tab gets a glossy floating glass circle; inactive tabs are plain icon+label at reduced opacity. Every icon is white-family (differentiated by opacity, not colour) — never teal.

My Lists

List View

Bulk Upload

Account

Illustrative backdrop — in the app this sits over whichever photo is behind the current tab, not a flat gradient.

Element	Spec
Bar	None — no background, no border. Nav items are fixed-position, floating directly on the page's backdrop photo.
Bottom scrim	Fixed, full-viewport-width, 150px tall: `linear-gradient(to top, teal-F0 0px, teal-B0 55px, teal-00 89px)`, z-index below the nav row
Active tab	52×52px circle, glossy radial-gradient white highlight, `backdropFilter: blur(8px)`, 1px solid rgba(255,255,255,0.55), floated up 20px above the row with layered box-shadow (drop shadow + inset highlight/shade)
Active icon	Solid white fill (or white stroke for List View), drop-shadow for legibility
Active label	Open Sans 700 10.5px, white
Inactive tab	Plain 32×32px box, no background, pushed down 10px relative to the active tab
Inactive icon	rgba(255,255,255,0.78) fill or stroke — never teal. Icon shape unchanged from active state, opacity is the only differentiator
Inactive label	Open Sans 600 10.5px, rgba(255,255,255,0.78)

Photo backdrops & glass panels

New visual language introduced in the Aug 2026 redesign, used on List View, Bulk Upload, Account, and My Lists. Not present in earlier versions of this doc.

Weekly Food Shop

Illustrative approximation — vignette dark at top/bottom, clear in the middle band, frosted-glass card floating on top.

Element	Spec
Full-bleed header (List View, Bulk Upload, Account)	Background photo + duotone overlay: `linear-gradient(175deg, teal-deep 8c 0%, teal-deep b8 45%, teal-deep e0 100%)` — one direction, darkest at the bottom
Page-wide backdrop (all 4 main-nav pages)	Background photo + vignette overlay: dark top and bottom (teal-deep, fading e0→70→transparent by ~42% from each edge), fully clear through the middle band
Backdrop photo rotation	My Lists picks one of the full backdrop set at random once per app load; a "change photo" button lets the user re-roll
Glass cards (My Lists, Account, Bulk Upload panels)	`backdropFilter: blur(14px)` over a translucent white/teal fill, border-radius 24px
List-card tint	Keyed by list type — Spruce for shopping, Citron for routine (from the tag highlight palette), blended into transparent white glass

Both overlays are generated from the single Teal Deep token, not hardcoded rgba shades — a future brand-teal change re-tones every header/backdrop photo automatically. Backdrop photos themselves must stay full-colour, never pre-toned.