Irie

Themes Planned

Irie’s four planned themes, Rosewater, Terracotta, Lilac and Evergreen, each in light and dark. Four tiles, each split down the middle: the left half shows the theme in light, the right half in dark. Each half has Irie’s sun, the letters Aa in the theme’s ink, and dots of its accent, done and needs-you colours. Under the tiles, their names: Rosewater, the default, then Terracotta, Lilac and Evergreen. Aa Aa Rosewater the default Aa Aa Terracotta Aa Aa Lilac Aa Aa Evergreen
Four themes, each with a light and a dark side. Rosewater will be the default.

None of this is released or on main yet. The themes are in Irie’s newest code, and this page shows how each will look.

A theme is a set of colours for Irie’s sidebar, the list of your agents. Each comes in a light and a dark version.

In Irie for Mac, Irie’s own app, you’ll pick one from View, then Theme.

In your terminal, the window where you type commands, you’ll set theme under [ui] in Irie’s settings file. The sidebar there follows your terminal’s background, light or dark.

The pictures here show the Mac app. The sidebar in your terminal uses the same colours in its own, plainer shape.

Rosewater Default

Blush and cream, rose accents, plum ink, sage for done.

Rosewater, light: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A light sidebar in Rosewater’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Light
Rosewater, dark: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A dark sidebar in Rosewater’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Dark
Rosewater’s colours and contrast
Each colour’s lowest contrast on the theme’s cards, selected card, needs-you card, panel and fields.
RoleLightDark
Ink text, needs 4.5:1#3D2236 11.04:1#F7E9EF 10.88:1
Quiet text text, needs 4.5:1#75566A 4.96:1#C2AAB7 5.92:1
Needs you text, needs 4.5:1#B42A1E 4.97:1#FF8070 5.22:1
Done text, needs 4.5:1#44694B 4.85:1#9BC9A2 6.86:1
Paused text, needs 4.5:1#855700 4.86:1#EFC468 7.77:1
Frozen text, needs 4.5:1#286873 4.93:1#7DC4CE 6.49:1
Accent a mark, needs 3:1#C4577A 3.27:1#EE8FAD 5.58:1

Terracotta

Oat and peach, terracotta accents, cocoa-plum ink, sage for done.

Terracotta, light: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A light sidebar in Terracotta’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Light
Terracotta, dark: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A dark sidebar in Terracotta’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Dark
Terracotta’s colours and contrast
Each colour’s lowest contrast on the theme’s cards, selected card, needs-you card, panel and fields.
RoleLightDark
Ink text, needs 4.5:1#3A2629 11.12:1#F6EBE2 10.40:1
Quiet text text, needs 4.5:1#735E58 4.77:1#BFAA9B 5.48:1
Needs you text, needs 4.5:1#B3203F 5.18:1#FF7F96 5.07:1
Done text, needs 4.5:1#46694A 4.90:1#9CC79C 6.43:1
Paused text, needs 4.5:1#845600 5.00:1#EFC468 7.42:1
Frozen text, needs 4.5:1#286773 5.05:1#7EC3CC 6.14:1
Accent a mark, needs 3:1#C2603A 3.29:1#EE9469 5.27:1

Lilac

Lavender cream, orchid accents, plum ink, sage for done.

Lilac, light: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A light sidebar in Lilac’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Light
Lilac, dark: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A dark sidebar in Lilac’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Dark
Lilac’s colours and contrast
Each colour’s lowest contrast on the theme’s cards, selected card, needs-you card, panel and fields.
RoleLightDark
Ink text, needs 4.5:1#33223F 11.20:1#F2EAF6 10.50:1
Quiet text text, needs 4.5:1#6C5A75 4.81:1#B9A9C4 5.60:1
Needs you text, needs 4.5:1#B02E1C 4.96:1#FF836F 5.13:1
Done text, needs 4.5:1#426A4F 4.74:1#9CC9A6 6.65:1
Paused text, needs 4.5:1#845700 4.83:1#EFC468 7.50:1
Frozen text, needs 4.5:1#276776 4.91:1#80C3D0 6.25:1
Accent a mark, needs 3:1#9A5CB0 3.56:1#C79BE0 5.40:1

Evergreen

Ivory and sage, deep forest-green accents, a brass sun and moss-black ink.

Evergreen, light: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A light sidebar in Evergreen’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Light
Evergreen, dark: Irie’s sidebar as the Mac app will draw it, with a card for each agent and a mark for every state. A dark sidebar in Evergreen’s colours. At the top, Irie’s sun and name and three counts: 1 needs you, 2 working, 1 done. Under the project shop, five cards: redesign-the-pricing-page needs you and asks which colour the button should be, on a tinted card; fix-the-flaky-checkout-test is working and selected, with a helper reading cart_test.go; add-dark-mode-to-settings is working; write-the-release-notes is done; update-the-dependencies is idle, in quieter text. At the bottom, the box for a new task with a send button. Below the sidebar, every state in order with its mark: failed, exited, exited 1, frozen, paused, needs you, stalled, pausing, working, starting, done and idle. Irie 1 2 1 shop 5 redesign-the-pricing-page now Asks: which colour for the button? fix-the-flaky-checkout-test 3m Running the tests ↳ Explore Reading cart_test.go add-dark-mode-to-settings 8m Editing settings.css write-the-release-notes 25m Done. Ready for you to look update-the-dependencies 1h Finished, and seen tidy the checkout page… shop ▾ EVERY STATE, IN ORDER failed exited exited 1 frozen paused needs you stalled pausing working starting done idle
Dark
Evergreen’s colours and contrast
Each colour’s lowest contrast on the theme’s cards, selected card, needs-you card, panel and fields.
RoleLightDark
Ink text, needs 4.5:1#1E2B22 11.39:1#ECF0E6 10.04:1
Quiet text text, needs 4.5:1#56635A 4.87:1#B3BFB5 6.10:1
Needs you text, needs 4.5:1#B42A1E 4.93:1#FF9585 5.46:1
Done text, needs 4.5:1#3F6A5F 4.72:1#8FC3B2 5.86:1
Paused text, needs 4.5:1#855700 4.83:1#EFC468 7.05:1
Frozen text, needs 4.5:1#286873 4.89:1#7DC4CE 5.89:1
Accent a mark, needs 3:1#2F5D46 5.85:1#9CC5A1 6.03:1

The same in every theme

Each state keeps a mark of its own, so colour never carries the meaning alone. Working becomes a half-filled circle, and only what needs you is red.

All text stands out from what’s behind it by at least 4.5 to 1, and every mark by 3 to 1. That is what WCAG AA, the web’s guide to readable colour, asks for.

The pictures on the rest of this site show Irie as main draws it today, in its green and sun colours. They change when the themes reach main.