PageSourceSearch

https://www.jasminejones.design/work/unifying-codas-design-system

html jasminejones.design collected 2026-10-08 20:25:43 UTC 142,234 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="__variable_a934b4"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=640&amp;q=90 640w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=750&amp;q=90 750w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yr
1cAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=828&amp;q=90 828w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=1080&amp;q=90 1080w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=1200&amp;q=90 1200w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELG
1C44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=1920&amp;q=90 1920w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=2048&amp;q=90 2048w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=3840&amp;
1q=90 3840w" imageSizes="(min-width: 1280px) calc(100vw - 410px), 100vw"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f2f8ab047557f616d3d71_surveyimage%201.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f391cb350c72d36aed47d_Orr.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f39e960c313eea3f0bc48_elva.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f3be1bf9f9674785238ec_Zach.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f3c132af0468efd863977_dev%203.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/641f8edccc09c938d0bb8f6b_Color%20update%20(1).png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b9bb67dfe406c49b27d_Table%20colors.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b78eae6ea1da0de5f3b_Table%20colors-1.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b8112cafd26db9b557b_Table%20colors-2.png"/><link rel="stylesheet" href="/_next/static/css/a2f896bbee2663f7.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-a63fe0197023a2b9.js"/>
1<script src="/_next/static/chunks/4bd1b696-c023c6e3521b1417.js" async=""></script>
1<script src="/_next/static/chunks/255-ebd51be49873d76c.js" async=""></script>
1<script src="/_next/static/chunks/main-app-f9b5d20365cb8be2.js" async=""></script>
1<script src="/_next/static/chunks/611-7359eb9417d4fe71.js" async=""></script>
1<script src="/_next/static/chunks/app/layout-184dbea9e3ed7549.js" async=""></script>
1<script src="/_next/static/chunks/239-bc3dda4cb9fc15de.js" async=""></script>
1<script src="/_next/static/chunks/433-b74cfd6ccefce25c.js" async=""></script>
1<script src="/_next/static/chunks/app/work/%5Bslug%5D/page-944f216b09a44835.js" async=""></script>
1<link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f447da7939e42514ae89c_Color%20varablies.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d7d17413d254e4a777f23_Css%20maping%20colors.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d7d5a7edc3f2793e1e5a7_dev-mode-color-variables.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f431ae0662d70d4873466_spacers.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f4b13d7d409840bc50a7f_Ready%20to%20use%201.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/65960931a360fb95db4fc750_Drop%20down.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/6596157296fea5504341b2aa_Cells.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659615d8961b5e1ecb67551a_Dot%20Grid%20cells%20in%20menu.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/6596143f35ad360a4ab2b21b_Drop%20down-params.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f64695e79882f91531ff4_CleanShot%202023-12-29%20at%2016.19.36%402x.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d84b7dfa835e1f893aaaf_Button-cover.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d854006bdc16210185315_button-component-bg.png"/><link rel="preload" as="image" href="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d85a550973ed6d29b492d_button-params.png"/><meta name="next-size-adjust" content=""/><title>Unifying Coda&#x27;s design system – Case Study</title><meta name="description" content="A project case study from the portfolio of Jasmine Jones."/><link rel="icon" href="/icon.png?2f76c48c0500ac01" type="image/png" sizes="36x36"/>
1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>
1</head><body class="page-shell"><div hidden=""><!--$--><!--/$--></div>
1<script>(self.__next_s=self.__next_s||[]).push([0,{"children":"(function(){try{var k=\"portfolio-theme\";var s=localStorage.getItem(k);var d=false;if(s===\"dark\")d=true;else if(s===\"light\")d=false;else d=window.matchMedia(\"(prefers-color-scheme: dark)\").matches;var r=document.documentElement;if(d)r.classList.add(\"dark\");else r.classList.remove(\"dark\");}catch(e){}})();","id":"theme-init"}])</script>
1<main class="min-h-screen" style="opacity:0;transform:translateY(16px)"><div class="h-screen overflow-hidden bg-page-bg"><div class="grid h-full grid-cols-1 grid-rows-[44px_1fr] xl:grid-cols-[290px_1fr_120px]"><header class="col-span-full border-b border-stroke px-6 py-2.5 xl:px-12"><div class="flex items-center"><div class="flex min-w-0 flex-1 justify-start"><a class="font-display text-body-subtitle text-grey-1 transition-opacity hover:opacity-60" aria-label="Back to home" href="/">← Back</a></div><div class="flex shrink-0 items-center gap-4 font-display text-body-subtitle tracking-wider text-grey-1"><span>Cover</span><span>0.00<!-- -->%</span></div><div class="min-w-0 flex-1" aria-hidden="true"></div></div></header><aside class="hide-scrollbar hidden flex-col items-center gap-4 overflow-y-auto px-4 py-8 xl:flex"><button aria-label="Go to Cover" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-text-main bg-text-main text-page-bg"><span class="font-sans text-section-header">Cover</span><span class="font-display text-[13px] leading-snug opacity-60 ">Cover</span><div class="absolute bottom-4 right-3 top-10 w-px bg-current/20"><div class="absolute -left-[3px] h-2 w-2 rounded-full bg-current" style="top:0%"></div></div></button><button aria-label="Go to Unifying Coda&#x27;s design system" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-[rgb(60_59_57)] bg-page-bg text-text-main hover:border-text-main"><span class="font-sans text-section-header">01</span><span class="font-display text-[13px] leading-snug opacity-60 line-clamp-1">Unifying Coda&#x27;s design system</span></button><button aria-label="Go to Examine the current system" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-[rgb(60_59_57)] bg-page-bg text-text-main hover:border-text-main"><span class="font-sans text-section-header">02</span><span class="font-display text-[13px] leading-snug opacity-60 line-clamp-1">Examine the current system</span></button><button aria-label="Go to Roadmap" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-[rgb(60_59_57)] bg-page-bg text-text-main hover:border-text-main"><span class="font-sans text-section-header">03</span><span class="font-display text-[13px] leading-snug opacity-60 line-clamp-1">Roadmap</span></button><button aria-label="Go to Rebuild the Figma file and start new documentation" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-[rgb(60_59_57)] bg-page-bg text-text-main hover:border-text-main"><span class="font-sans text-section-header">04</span><span class="font-display text-[13px] leading-snug opacity-60 line-clamp-1">Rebuild the Figma file and start new documentation</span></button><button aria-label="Go to Components" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-[rgb(60_59_57)] bg-page-bg text-text-main hover:border-text-main"><span class="font-sans text-section-header">05</span><span class="font-display text-[13px] leading-snug opacity-60 line-clamp-1">Components</span></button><button aria-label="Go to Learnings" class="relative flex w-[235px] shrink-0 flex-col justify-between overflow-hidden rounded-2xl border p-4 text-left border-[rgb(60_59_57)] bg-page-bg text-text-main hover:border-text-main"><span class="font-sans text-section-header">06</span><span class="font-display text-[13px] leading-snug opacity-60 line-clamp-1">Learnings</span></button></aside><div class="hide-scrollbar overflow-y-auto overflow-x-hidden border-stroke xl:border-x"><section data-chapter-index="0" class="relative h-[300px] max-h-[724px] overflow-hidden lg:h-[600px]"><div class="absolute inset-0 z-10 flex items-center justify-center border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img alt="Unifying Coda&#x27;s design system" decoding="async" data-nimg="fill" class="object-cover max-h-[1600px] transition-opacity duration-300 opacity-0" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" sizes="(min-width: 1280px) calc(100vw - 410px
1), 100vw" srcSet="/_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=640&amp;q=90 640w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=750&amp;q=90 750w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yr
1cAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=828&amp;q=90 828w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=1080&amp;q=90 1080w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=1200&amp;q=90 1200w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELG
1C44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=1920&amp;q=90 1920w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=2048&amp;q=90 2048w, /_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELGC44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=3840&amp;q=90 3840w" src="/_next/image?url=https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc%2F8fd9a272-8681-45e5-b377-b76de3299488%2Fcoda_system.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DASIAZI2LB4665ELG
1C44F%252F20261008%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20261008T202543Z%26X-Amz-Expires%3D3600%26X-Amz-Security-Token%3DIQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%252Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%252FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%252FTvWz%252FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%252BJRCnh5frXx7kHp%252BlstrX2GTjjIEfcYsOtfka%252Bbs9Zmh62w39A9%252FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%252Fa9zPO7PoyGlLSmdPFdcCED9l0sI%252B%252Fn5dNvS4nX%252Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%252FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%252F3tj%252FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%252BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%252BxjgHuY34NBq8G3EBjKNl2OR5M%252FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%252BOPD4dUG5v55y%252B87Up1%252Bv642WYyO%252B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%252BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%252FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%252FL5glUjIY3Wd%252Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN%26X-Amz-Signature%3D7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0%26X-Amz-SignedHeaders%3Dhost%26x-amz-checksum-mode%3DENABLED%26x-id%3DGetObject&amp;w=3840&amp;q=90"/></section><div class="h-px w-full bg-stroke"></div><div class="flex w-full flex-col pb-[200px] pt-9"><section data-chapter-index="1" style="opacity:0;transform:translateY(20px)"><div class="mx-auto flex w-full max-w-[1200px] flex-col gap-[100px] px-6 py-10"><div class="mt-8 flex flex-col gap-6"><p class="font-display text-body-subtitle tracking-wider text-text-subtle">01</p><div class="flex flex-wrap items-center gap-2 font-display text-body-subtitle leading-[1.8] text-text-subtle"><span class="relative inline-flex h-[23px] shrink-0"><img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc/80d2bba8-a8ee-4a06-9434-f94fc8d42c5c/Coda_Logotype-Black_1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=ASIAZI2LB4665ELGC44F%2F20261008%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20261008T202543Z&amp;X-Amz-Expires=3600&amp;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%2Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%2FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%2FTvWz%2FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%2BJRCnh5frXx7kHp%2BlstrX2GTjjIEfcYsOtfka%2Bbs9Zmh62w39A9%2FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%2Fa9zPO7PoyGlLSmdPFdcCED9l0sI%2B%2Fn5dNvS4nX%2Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%2FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%2F3tj%2FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%2BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%2BxjgHuY34NBq8G3EBjKNl2OR5M%2FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%2BOPD4dUG5v55y%2B87Up1%2Bv642WYyO%2B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%2BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%2FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%2FL5glUjIY3Wd%2Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN&amp;X-Amz-Signature=a27364105f030dfbd0ce1f9c3bd4e089c82db45b371f0c000c58dcc5a07d33d9&amp;X-Amz-SignedHeaders=host&amp;x-amz-checksum-mode=ENABLED&amp;x-id=GetObject" alt="Coda" class="h-[23px] w-auto max-w-[98px] object-contain object-left dark:hidden" loading="lazy" decoding="async"/><img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc/413799af-5368-4ada-b108-8571a8198b8f/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=ASIAZI2LB4665ELGC44F%2F20261008%2Fus-west-2%2Fs3%2Faws4_request&amp;X-Amz-Date=20261008T202543Z&amp;X-Amz-Expires=3600&amp;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%2Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%2FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yr
1cAwEpmZYNaDhvltqRXwvWN8RTfEJQm%2FTvWz%2FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%2BJRCnh5frXx7kHp%2BlstrX2GTjjIEfcYsOtfka%2Bbs9Zmh62w39A9%2FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%2Fa9zPO7PoyGlLSmdPFdcCED9l0sI%2B%2Fn5dNvS4nX%2Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%2FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%2F3tj%2FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%2BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%2BxjgHuY34NBq8G3EBjKNl2OR5M%2FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%2BOPD4dUG5v55y%2B87Up1%2Bv642WYyO%2B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%2BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%2FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%2FL5glUjIY3Wd%2Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN&amp;X-Amz-Signature=7503991feaf8e0c21e5b518c55da71ba2b168f20cf8570ffb3405b197196d3a0&amp;X-Amz-SignedHeaders=host&amp;x-amz-checksum-mode=ENABLED&amp;x-id=GetObject" alt="Coda" class="hidden h-[23px] w-auto max-w-[98px] object-contain object-left dark:block" loading="lazy" decoding="async"/></span><span class="shrink-0"> / <!-- -->2024 / Product &amp; Systems Designer</span></div></div><h1 class="font-display text-[32px] font-light leading-[1.4] text-text-main xl:text-[50px]">Unifying Coda&#x27;s design system</h1></div><div class="py-10"><hr class="my-10 border-t border-dashed border-stroke"/><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I helped lead the development of a design system for Coda, a startup without an existing system in place. The work included establishing standards, reusable components, and coding conventions, as well as organizing Figma files and drafting proposals for UI redesigns.</span></p><h4 class="mx-auto mb-3 mt-8 max-w-[1200px] px-6 font-display text-[24px] leading-[1.6] text-text-main"><span><span class="font-light">Goals and responsibilities</span></span></h4><ul class="mx-auto my-4 max-w-[1200px] list-disc space-y-2 pl-10 pr-6 font-display text-content-body text-text-main"><li><span>Research best practices.</span></li><li><span>Create an interface inventory.</span></li><li><span>Rebuild and maintain the Figma file using updated design-system frameworks and best practices.</span></li><li><span>Design and define layouts, styles, and components.</span></li><li><span>Document guidelines.</span></li><li><span>Review documentation.</span></li><li><span>Build and implement components.</span></li><li><span>Iterate and refine.</span></li><li><span>Evangelize the work across the organization.</span></li><li><span>Improve product accessibility.</span></li></ul><hr class="my-10 border-t border-dashed border-stroke"/></div></section><section data-chapter-index="2" style="opacity:0;transform:translateY(20px)"><div class="mx-auto flex w-full max-w-[1200px] flex-col gap-[100px] px-6 py-10"><div class="mt-8 flex flex-col gap-6"><p class="font-display text-body-subtitle tracking-wider text-text-subtle">02</p></div><h1 class="font-display text-[32px] font-light leading-[1.4] text-text-main xl:text-[50px]">Examine the current system</h1></div><div class=""><hr class="my-10 border-t border-dashed border-stroke"/><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>First, I examined the application as a whole. I identified existing conventions that could be reused and addressed inconsistencies. To illustrate my findings, I documented everything in a Figma file. This allowed the design team to see and understand the problems we encountered.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I also collaborated with the brand team to understand the company&#x27;s desired voice, tone, and visual style.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Additionally, I held discussions with the design team to understand the guiding principles that had shaped decision-making up to that point. This helped us determine whether we needed to refine existing principles or create new ones to guide decisions for the new system.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Here was the rough draft of those principles:</span></p><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">The purpose of Coda is to empower makers with flexible building blocks to create the perfect workflows and systems with the power of an app.</span></span></p></blockquote><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>🎨 The product colors should not be too colorful so user content can shine through.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>📄 → </span><span><span class="font-light">Be document-like</span></span><span>. All of our user-facing surfaces adhere to the fundamental traits of electronic documents in order to provide an accessible, learnable, expressive, and powerful work environment for as many people as possible:</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>🏃 → </span><span><span class="font-light">Help users follow the flow</span></span><span>. We can make flow tangible and visible by visualizing its pattern of execution and letting people explore forward and backward. This relates most to “workflow,” or event-driven programming.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>👁   → </span><span><span class="font-light">Have no hidden state</span></span><span>. When a formula computes something, that result should be immediately visible. If it computes many things, all of them should be shown together in context.</span></p><h3 class="mx-auto mb-4 mt-12 max-w-[1200px] px-6 font-display text-content-heading text-text-main"><span>Survey problems</span></h3><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Next, I defined goals and a roadmap by surveying the team and reviewing the product analysis.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Uncover problems:</span></p><ul class="mx-auto my-4 max-w-[1200px] list-disc space-y-2 pl-10 pr-6 font-display text-content-body text-text-main"><li><span>What are the main challenges people face?</span></li><li><span>What are the typical UI elements that each designer needs to recreate?</span></li><li><span>In what areas is the team duplicating effort inefficiently?</span></li><li><span>Where is communication between designers and engineers starting to deteriorate?</span></li><li><span>Where do the biggest inconsistencies occur?</span></li></ul><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f2f8ab047557f616d3d71_surveyimage%2
101.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f391cb350c72d36aed47d_Orr.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Orr/Design</span></p><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">Parity with code! There’s a published Storybook site for the code version of the DS, and it’s 1:1 with our (new and improved) Figma library</span></span></p></blockquote><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">Dark mode is QA’d and baked in so we never need to think about it (maybe this is already true?)</span></span></p></blockquote><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>‍</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f39e960c313eea3f0bc48_elva.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Elva/Design</span></p><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">Everyone on the design team can have a clear understanding of what components to use and what processes and standards to follow to update the design system.</span></span></p></blockquote><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">Get a strict 1:1 mapping from Figma components to dev components and rarely deviate or special-case anything.</span></span></p></blockquote><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f3be1bf9f9674785238ec_Zach.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Zach/ Eng</span></p><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">It would be helpful if colors and text styles were easier to translate to the actual var used. I think text is the bigger offender here. Typically I have to look at the font size, go to the text.less file, find the corresponding font size, and then figure out which class applies that style. Ideally the actual font mixin and the text style in figma would match up. Maybe they do, but I don’t trust them to.</span></span></p></blockquote><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">Too much dev time is spent building nearly similar situations, but they’re just subtly different (or perhaps the dev doesn’t know about the other component)</span></span></p></blockquote><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f3c132af0468efd863977_dev%203.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Phil/Eng</span></p><blockquote class="mx-auto my-10 max-w-[1200px] flex items-start gap-8 px-6"><div class="h-auto self-stretch w-[2px] shrink-0 bg-stroke"></div><p class="font-display text-content-heading text-text-main"><span><span class="font-light">Often I find myself pretty sure that there is a component that already exists that I can use, but I don’t know what it is. We have storybook, but you cant search that with an image (
1or even really with a description of what the end goal is) and it’s not really presented close enough to the Figma, so I often just ask in Slack. Mildly less inconvenient, but I also sometimes am not sure what colors are global colors that I should go look to reuse vs more specific.</span></span></p></blockquote></div></section><section data-chapter-index="3" style="opacity:0;transform:translateY(20px)"><div class="mx-auto flex w-full max-w-[1200px] flex-col gap-[100px] px-6 py-10"><div class="mt-8 flex flex-col gap-6"><p class="font-display text-body-subtitle tracking-wider text-text-subtle">03</p></div><h1 class="font-display text-[32px] font-light leading-[1.4] text-text-main xl:text-[50px]">Roadmap</h1></div><div class=""><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>After analyzing the survey questions and interview notes, I created a roadmap and began addressing the team&#x27;s core needs.</span></p><h4 class="mx-auto mb-3 mt-8 max-w-[1200px] px-6 font-display text-[24px] leading-[1.6] text-text-main"><span><span class="font-light">Outline</span></span></h4><ol class="mx-auto my-4 max-w-[1200px] list-decimal space-y-2 pl-10 pr-6 font-display text-content-body text-text-main"><li><span>Foundational elements, such as color.</span></li><li><span>Core components that are most used and most needed by the team.</span></li><li><span>Rebuild the Figma file.</span></li><li><span>Resolve inconsistencies.</span></li><li><span>Enhance communication.</span></li></ol><h3 class="mx-auto mb-4 mt-12 max-w-[1200px] px-6 font-display text-content-heading text-text-main"><span>Clean up foundations</span></h3><h3 class="mx-auto mb-4 mt-12 max-w-[1200px] px-6 font-display text-content-heading text-text-main"><span>Color</span></h3><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>There were several outdated colors from a previous brand. The original product palette had been in use for three years when the primary color was selected. The primary color was turquoise, which was used for all primary actions and selected states. In addition, an outdated orange was used for both error states and notifications.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I started by discussing the new brand palette with the brand team. We explored options for using the colors in the product. We examined different variations of each color to ensure interactive feedback and the right level of desaturation.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>The main change was the primary color, which needed to be updated to a more modern, versatile shade. After careful consideration, we chose a blue that created pleasing contrast with the rest of the palette and better suited product design. I also explored black as a high-contrast option for important calls to action.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/641f8edccc09c938d0bb8f6b_Color%20update%20(1).png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Updating the primary color was especially challenging because of the many edge cases and scenarios that needed to be considered. This color plays a crucial role in providing interactive cues during editing. For instance, here is how the color appears in tables, which are core building blocks of the product.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b9bb67dfe406c49b27d_Table%20colors.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b78eae6ea1da0de5f3b_Table%20colors-1.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b8112cafd26db9b557b_Table%20colors-2.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><h4 class="mx-auto mb-3 mt-8 max-w-[1200px] px-6 font-display text-[24px] leading-[1.6] text-text-main"><span><span class="font-light">Color variables</span></span></h4><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>To optimize color implementation, I devised a system for specific class colors, such as strokes. By configuring variables to show only relevant options when selecting a stroke color, I made it easier to identify the correct color class for stroke application in both design and code.</sp
1an></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>To do this, I used Figma&#x27;s variable mapping feature to associate color variables with a new variable named for its intended use. I also added the corresponding code syntax in the documentation property field, which is readily accessible during development.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>By implementing these strategies, I aimed to bridge the gap between design and code and support a smoother workflow for the team.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f447da7939e42514ae89c_Color%20varablies.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d7d17413d254e4a777f23_Css%20maping%20colors.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d7d5a7edc3f2793e1e5a7_dev-mode-color-variables.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Finally, I added all of the dark mode variables so the design team could access colors that were only in code at the time. This allowed them to switch designs from light to dark. I also designed the dark mode values, and you </span><a href="https://www.jasminejones.design/coda-dark-mode" target="_blank" rel="noreferrer" class="link-underline text-text-main">can read more about that here.</a></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>‍</span></p><h3 class="mx-auto mb-4 mt-12 max-w-[1200px] px-6 font-display text-content-heading text-text-main"><span>Spacing</span></h3><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Spacing was generally consistent across the design team, but translating designs into code was a challenge. Many engineers did not closely inspect designs to determine the appropriate right padding or margins. In addition, there was no consistent class system for reusing common spacing values. To address this, we created spacers using Figma variables and established a class system engineers could reuse.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f431ae0662d70d4873466_spacers.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><h3 class="mx-auto mb-4 mt-12 max-w-[1200px] px-6 font-display text-content-heading text-text-main"><span>Border radius</span></h3><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>The product had a mix of fully rounded corners and 2, 6, 8, 10, 12, 16, 17, 18, and 19 px corners, which was confusing and lacked cohesion. To address this, we standardized the border radius to 4 px. This struck a balance between rounded and sharp corners and improved the overall look and feel of the product.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span><span class="font-light">Why?</span></span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>While fully rounded corners can read as “friendly,” a semi-rounded style offers more benefits. We believed it would create a consistent, balanced visual language across the system.</span></p><ul class="mx-auto my-4 max-w-[1200px] list-disc space-y-2 pl-10 pr-6 font-display text-content-body text-text-main"><li><span>More adaptable across scenarios.</span></li><li><span>Better aligned with the brand’s “blocky” visual effect.</span></li><li><span>More balanced when stacked (for example, in tables).</span></li><li><span>Better aligned with border radius on input fields and “naked” background hovers on naked buttons.</span></li></ul><hr class="my-10 border-t border-dashed border-stroke"/></div></section><section data-chapter-index="4" style="opacity:0;transform:translateY(20px)"><div class="mx-auto flex w-full max-w-[1200px] flex-col gap-[100px] px-6 py-10"><div class="mt-8 flex flex-col gap-6"><p class="font-display text-body-subtitle tracking-wider text-text-subtle">04</p></div><h1 class="font-display text-[32px] font-light leading-[1.4] text-text-main xl:text-[50px]">Rebuild the Figma file and start new documentation</h1></div><div class=""><hr class="my-10 border-t border-dashed border-stroke"/><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>The primary Figma library was assembled quickly and functioned more like a sticker sheet or wireframe, with minimal styling. It did n
1ot incorporate essential Figma best practices such as auto layout, variants, variables, and properties. As a result, designers used components that did not match the coded version, creating a disconnect between design and engineering. In response, many designers created their own design system files, separate from the main file, to better serve their needs or their team’s needs.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I started by rebuilding foundational styles using the variables mentioned above. I also developed several key components and documented them in a Coda doc. This doc served as both documentation and a task tracker, allowing engineers and designers to easily access information about available components and how to use them.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f4b13d7d409840bc50a7f_Ready%20to%20use%201.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>‍</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>For each component, I attached a video inside the documentation so people could understand the different variations and parameters available in both design and code.</span></p><h3 class="mx-auto mb-4 mt-12 max-w-[1200px] px-6 font-display text-content-heading text-text-main"><span><span class="font-light">Principles</span></span></h3><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I established principles for the file to help onboard everyone from the old file to the new one.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>See slide show below.</span></p><hr class="my-10 border-t border-dashed border-stroke"/></div></section><section data-chapter-index="5" style="opacity:0;transform:translateY(20px)"><div class="mx-auto flex w-full max-w-[1200px] flex-col gap-[100px] px-6 py-10"><div class="mt-8 flex flex-col gap-6"><p class="font-display text-body-subtitle tracking-wider text-text-subtle">05</p></div><h1 class="font-display text-[32px] font-light leading-[1.4] text-text-main xl:text-[50px]">Components</h1></div><div class=""><hr class="my-10 border-t border-dashed border-stroke"/><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>All components were rebuilt with auto layout, variants for different interactive states, properties, and a link to Storybook in dev mode.</span></p><h4 class="mx-auto mb-3 mt-8 max-w-[1200px] px-6 font-display text-[24px] leading-[1.6] text-text-main"><span><span class="font-light">Flyout menu system</span></span></h4><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/65960931a360fb95db4fc750_Drop%20down.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/6596157296fea5504341b2aa_Cells.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Each cell has a top-level parameter that changes the type to be either a:</span></p><ul class="mx-auto my-4 max-w-[1200px] list-disc space-y-2 pl-10 pr-6 font-display text-content-body text-text-main"><li><span>Menu option</span></li><li><span>Divider</span></li><li><span>Title</span></li><li><span>Search field</span></li></ul><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659615d8961b5e1ecb67551a_Dot%20Grid%20cells%20in%20menu.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>The component is presented with different variants so designers can see all available options. There are hidden cells for additional menu options.
1</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/6596143f35ad360a4ab2b21b_Drop%20down-params.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>The full parameters in the design panel.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f64695e79882f91531ff4_CleanShot%202023-12-29%20at%2016.19.36%402x.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>In addition to the base component, there are also three common flyouts designers frequently need, with quick templates to jump-start projects.</span></p><h4 class="mx-auto mb-3 mt-8 max-w-[1200px] px-6 font-display text-[24px] leading-[1.6] text-text-main"><span><span class="font-light">Buttons</span></span></h4><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Coda has six button styles. When I joined, only three were documented, in one size, with no variance. When I refactored the Figma library, I added the other three styles and introduced size and state variants so designers could adjust parameters as needed.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d84b7dfa835e1f893aaaf_Button-cover.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d854006bdc16210185315_button-component-bg.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>While building this component, I learned that usability can matter more than efficiency. I initially created a base button to establish auto layout and padding, which varied depending on whether an icon was present. However, it created usability issues in the design panel because many parameters were duplicated. For example, the icon instance picker appeared twice, and it was not always clear which one to use. If someone changed the icon on the base, it could disrupt the entire component. I simplified the component by removing the base. This made it a bit harder to maintain, but the ease of use was worth the tradeoff.</span></p><figure class="mx-auto my-10 max-w-[1200px] flex flex-col items-center"><div class="relative overflow-hidden rounded-lg "><div class="absolute inset-0 rounded-lg border border-stroke/40 bg-white/25 backdrop-blur-xl transition-opacity duration-300 dark:bg-black/30 opacity-100" aria-hidden="true"></div><img src="https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d85a550973ed6d29b492d_button-params.png" alt="Project image" class="max-w-full cursor-zoom-in object-cover" draggable="true" style="opacity:0;transition:opacity 300ms ease-out"/></div></figure><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I also created interactive prototype interactions so the buttons mirrored interactive states in prototype mode.</span></p><hr class="my-10 border-t border-dashed border-stroke"/></div></section><section data-chapter-index="6" style="opacity:0;transform:translateY(20px)"><div class="mx-auto flex w-full max-w-[1200px] flex-col gap-[100px] px-6 py-10"><div class="mt-8 flex flex-col gap-6"><p class="font-display text-body-subtitle tracking-wider text-text-subtle">06</p></div><h1 class="font-display text-[32px] font-light leading-[1.4] text-text-main xl:text-[50px]">Learnings</h1></div><div class=""><hr class="my-10 border-t border-dashed border-stroke"/><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>I gained several key learnings from rebuilding the design system.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>First, I saw the importance of gathering input and feedback from everyone involved, which helped create a sense of ownership in the system.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Second, I came to understand the value of strong collaboration between design and code. To support that c
1ollaboration, I started learning to code, which helped me better organize and align design and development.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>Finally, I learned that maintaining a design system is ongoing work. With constant product demands, it is crucial to keep everything in sync and cohesive across the product team.</span></p><p class="mx-auto my-4 max-w-[1200px] px-6 font-display text-content-body text-text-main"><span>👀 There are many more details on this effort. Please reach out to request a portfolio presentation and learn more.</span></p></div></section></div></div><aside class="hidden flex-col items-center justify-between py-8 xl:flex"><a class="link-underline flex items-center gap-0.5 font-display text-body-subtitle text-text-main" href="/">Home<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"></path><path d="M7 7h10v10"></path></svg></a><nav class="flex flex-col items-center gap-10"><a href="/resume.pdf" download="Jasmine-Jones-Resume.pdf" class="font-display text-body-subtitle text-text-main" style="writing-mode:vertical-rl">Resume</a><a href="https://www.linkedin.com/in/jasminejonesprofile/" target="_blank" rel="noreferrer" class="font-display text-body-subtitle text-text-main" style="writing-mode:vertical-rl">LinkedIn</a></nav><div class="flex flex-col items-center gap-4"><a href="https://www.linkedin.com/in/jasminejonesprofile/" target="_blank" rel="noreferrer" class="link-underline flex items-center gap-0.5 font-display text-body-subtitle text-text-main">Contact<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"></path><path d="M7 7h10v10"></path></svg></a></div></aside></div><div class="fixed bottom-[max(1.5rem,env(safe-area-inset-bottom,0px))] left-1/2 z-50 -translate-x-1/2 xl:hidden md:bottom-6"><div class="flex gap-2 rounded-full border border-stroke bg-page-bg/90 px-3 py-2 shadow-soft-lg backdrop-blur-md"><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors bg-text-main text-page-bg">00</button><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors text-text-main hover:bg-text-main/10">01</button><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors text-text-main hover:bg-text-main/10">02</button><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors text-text-main hover:bg-text-main/10">03</button><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors text-text-main hover:bg-text-main/10">04</button><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors text-text-main hover:bg-text-main/10">05</button><button class="flex h-8 w-8 items-center justify-center rounded-full font-sans text-[12px] transition-colors text-text-main hover:bg-text-main/10">06</button></div></div></div></main><!--$--><!--/$-->
1<script src="/_next/static/chunks/webpack-a63fe0197023a2b9.js" id="_R_" async=""></script>
1<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[9766,[],\"\"]\n4:I[8924,[],\"\"]\n6:I[4431,[],\"OutletBoundary\"]\n8:I[5278,[],\"AsyncMetadataOutlet\"]\na:I[4431,[],\"ViewportBoundary\"]\nc:I[4431,[],\"MetadataBoundary\"]\nd:\"$Sreact.suspense\"\nf:I[7150,[],\"\"]\n10:I[9021,[\"611\",\"static/chunks/611-7359eb9417d4fe71.js\",\"177\",\"static/chunks/app/layout-184dbea9e3ed7549.js\"],\"\"]\n11:I[3856,[\"611\",\"static/chunks/611-7359eb9417d4fe71.js\",\"177\",\"static/chunks/app/layout-184dbea9e3ed7549.js\"],\"ThemeTogglePlacement\"]\n12:I[5414,[\"611\",\"static/chunks/611-7359eb9417d4fe71.js\",\"177\",\"static/chunks/app/layout-184dbea9e3ed7549.js\"],\"MobileBottomNav\"]\n:HL[\"/_next/static/media/5ee2827e0adf8199-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/cbc48dce548756ea-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/cf2bcdd12f66e5d7-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n:HL[\"/_next/static/media/f59c71b3dd8fe29f-s.p.woff\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff\"}]\n:HL[\"/_next/static/css/a2f896bbee2663f7.css\",\"style\"]\n"])</script>
1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"NhJfnpt20MD8QoaQxl3oL\",\"p\":\"\",\"c\":[\"\",\"work\",\"unifying-codas-design-system\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"work\",{\"children\":[[\"slug\",\"unifying-codas-design-system\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a2f896bbee2663f7.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"work\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"unifying-codas-design-system\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",null,[\"$\",\"$L6\",null,{\"children\":[\"$L7\",[\"$\",\"$L8\",null,{\"promise\":\"$@9\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$d\",null,{\"fallback\":null,\"children\":\"$Le\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"s\":false,\"S\":false}\n"])</script>
1<script>self.__next_f.push([1,"2:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_a934b4\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"page-shell\",\"children\":[[\"$\",\"$L10\",null,{\"id\":\"theme-init\",\"strategy\":\"beforeInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"(function(){try{var k=\\\"portfolio-theme\\\";var s=localStorage.getItem(k);var d=false;if(s===\\\"dark\\\")d=true;else if(s===\\\"light\\\")d=false;else d=window.matchMedia(\\\"(prefers-color-scheme: dark)\\\").matches;var r=document.documentElement;if(d)r.classList.add(\\\"dark\\\");else r.classList.remove(\\\"dark\\\");}catch(e){}})();\"}}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"$L11\",null,{\"initialPathname\":\"/work/unifying-codas-design-system\"}],[\"$\",\"$L12\",null,{\"initialPathname\":\"/work/unifying-codas-design-system\"}]]}]}]\n"])</script>
1<script>self.__next_f.push([1,"b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, viewport-fit=cover\"}]]\n7:null\n"])</script>
1<script>self.__next_f.push([1,"13:I[4630,[\"611\",\"static/chunks/611-7359eb9417d4fe71.js\",\"239\",\"static/chunks/239-bc3dda4cb9fc15de.js\",\"433\",\"static/chunks/433-b74cfd6ccefce25c.js\",\"774\",\"static/chunks/app/work/%5Bslug%5D/page-944f216b09a44835.js\"],\"PageTransition\"]\n14:I[4506,[\"611\",\"static/chunks/611-7359eb9417d4fe71.js\",\"239\",\"static/chunks/239-bc3dda4cb9fc15de.js\",\"433\",\"static/chunks/433-b74cfd6ccefce25c.js\",\"774\",\"static/chunks/app/work/%5Bslug%5D/page-944f216b09a44835.js\"],\"NotionProjectDetail\"]\n19:I[622,[],\"IconMark\"]\n15:T64c,"])</script>
1<script>self.__next_f.push([1,"https://prod-files-secure.s3.us-west-2.amazonaws.com/9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc/8fd9a272-8681-45e5-b377-b76de3299488/coda_system.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\u0026X-Amz-Credential=ASIAZI2LB4665ELGC44F%2F20261008%2Fus-west-2%2Fs3%2Faws4_request\u0026X-Amz-Date=20261008T202543Z\u0026X-Amz-Expires=3600\u0026X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%2Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%2FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%2FTvWz%2FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%2BJRCnh5frXx7kHp%2BlstrX2GTjjIEfcYsOtfka%2Bbs9Zmh62w39A9%2FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%2Fa9zPO7PoyGlLSmdPFdcCED9l0sI%2B%2Fn5dNvS4nX%2Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%2FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%2F3tj%2FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%2BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%2BxjgHuY34NBq8G3EBjKNl2OR5M%2FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%2BOPD4dUG5v55y%2B87Up1%2Bv642WYyO%2B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%2BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%2FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%2FL5glUjIY3Wd%2Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN\u0026X-Amz-Signature=7e5380d1c3a19c4df2c09a43ebf827ae123fd8b6522ee92ae36c50a5e98240f0\u0026X-Amz-SignedHeaders=host\u0026x-amz-checksum-mode=ENABLED\u0026x-id=GetObject"])</script>
1<script>self.__next_f.push([1,"16:T653,"])</script>
1<script>self.__next_f.push([1,"https://prod-files-secure.s3.us-west-2.amazonaws.com/9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc/aea4c5e4-dade-4046-b1c3-f0b48c02d488/coda-design-system.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\u0026X-Amz-Credential=ASIAZI2LB4665ELGC44F%2F20261008%2Fus-west-2%2Fs3%2Faws4_request\u0026X-Amz-Date=20261008T202542Z\u0026X-Amz-Expires=3600\u0026X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%2Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%2FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%2FTvWz%2FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%2BJRCnh5frXx7kHp%2BlstrX2GTjjIEfcYsOtfka%2Bbs9Zmh62w39A9%2FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%2Fa9zPO7PoyGlLSmdPFdcCED9l0sI%2B%2Fn5dNvS4nX%2Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%2FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%2F3tj%2FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%2BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%2BxjgHuY34NBq8G3EBjKNl2OR5M%2FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%2BOPD4dUG5v55y%2B87Up1%2Bv642WYyO%2B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%2BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%2FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%2FL5glUjIY3Wd%2Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN\u0026X-Amz-Signature=8da551668f6574d3d281d12938433f22f95ae8c4347044243feeb00a478e5092\u0026X-Amz-SignedHeaders=host\u0026x-amz-checksum-mode=ENABLED\u0026x-id=GetObject"])</script>
1<script>self.__next_f.push([1,"17:T656,"])</script>
1<script>self.__next_f.push([1,"https://prod-files-secure.s3.us-west-2.amazonaws.com/9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc/80d2bba8-a8ee-4a06-9434-f94fc8d42c5c/Coda_Logotype-Black_1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\u0026X-Amz-Credential=ASIAZI2LB4665ELGC44F%2F20261008%2Fus-west-2%2Fs3%2Faws4_request\u0026X-Amz-Date=20261008T202543Z\u0026X-Amz-Expires=3600\u0026X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%2Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%2FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%2FTvWz%2FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%2BJRCnh5frXx7kHp%2BlstrX2GTjjIEfcYsOtfka%2Bbs9Zmh62w39A9%2FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%2Fa9zPO7PoyGlLSmdPFdcCED9l0sI%2B%2Fn5dNvS4nX%2Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%2FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%2F3tj%2FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%2BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%2BxjgHuY34NBq8G3EBjKNl2OR5M%2FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%2BOPD4dUG5v55y%2B87Up1%2Bv642WYyO%2B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%2BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%2FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%2FL5glUjIY3Wd%2Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN\u0026X-Amz-Signature=a27364105f030dfbd0ce1f9c3bd4e089c82db45b371f0c000c58dcc5a07d33d9\u0026X-Amz-SignedHeaders=host\u0026x-amz-checksum-mode=ENABLED\u0026x-id=GetObject"])</script>
1<script>self.__next_f.push([1,"18:T646,"])</script>
1<script>self.__next_f.push([1,"https://prod-files-secure.s3.us-west-2.amazonaws.com/9d648f4a-9c96-40c3-b2b8-a0d7443aa2fc/413799af-5368-4ada-b108-8571a8198b8f/image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256\u0026X-Amz-Content-Sha256=UNSIGNED-PAYLOAD\u0026X-Amz-Credential=ASIAZI2LB4665ELGC44F%2F20261008%2Fus-west-2%2Fs3%2Faws4_request\u0026X-Amz-Date=20261008T202543Z\u0026X-Amz-Expires=3600\u0026X-Amz-Security-Token=IQoJb3JpZ2luX2VjEGAaCXVzLXdlc3QtMiJHMEUCIQDvC5yw04JUg6SHiBMkS3yMGDm3X183%2Bps6BJsurPSjXwIgMIgv1qCP2QZQFM0iJTO8WgvAbm0Pwp8CfH0iMZ47Gasq%2FwMIKRAAGgw2Mzc0MjMxODM4MDUiDO1MXkMS5DxY2T3a7yrcAwEpmZYNaDhvltqRXwvWN8RTfEJQm%2FTvWz%2FA2Czb6jqOn84wXSvbJ0KLyOZgKd6woLAgJw3pVxKshRDKUaIv%2BJRCnh5frXx7kHp%2BlstrX2GTjjIEfcYsOtfka%2Bbs9Zmh62w39A9%2FOOu9VvsoCnkHjHrBphfcefZacGtnk6DEHiKALLrOVSABo0CCkb6rvjm5OdMGZzh%2Fa9zPO7PoyGlLSmdPFdcCED9l0sI%2B%2Fn5dNvS4nX%2Fgon3NaQRivFc4EestSqW4gNpJ28Dye8mmWUq8AHFSRvwKOMPW0rKkjj3OjHILEp8k6Jk6qnwpXfcXW1g%2FxKq8DiocJg5Cg4JVxYt3xfKlEm7gvZ0fbsurEZIOXyt11kq9XsVyuRwpe%2F3tj%2FxgAZDUGqPdscmbDaykEGlYdMfqYLmm3EtsTvSeUquAR3bl1%2BY3Jsx5bOC8HlxJV4v56XuHwLiByIDDydInmf5GVps%2BxjgHuY34NBq8G3EBjKNl2OR5M%2FJ4xm6sdhetfuT0L3wPUEWKi6RxVW0mntyYNbbtTWJ8GHCjGtI4ChjqCzRb3zF8OXHQ2qS6D4pcIG%2BOPD4dUG5v55y%2B87Up1%2Bv642WYyO%2B8G0mlbnm5i7zh2P13nZqRo1uqlgUCYjksMIz0ntYGOqUBlzgPMNTtCz9qOC3nAqWDZzYi4h%2BIkN74tNjfPBHFXsj6UGgccJzW73KKgYzZpOhLgf5G7Ssl7%2FuYxg14AT4jc37HDqV40m3MQQlfCiCgnWNwz2RZGbvmHEhKF0SFmIJOMHPaHZAiTFv1tszn8nRxPKD8bWoW%2FL5glUjIY3Wd%2Fe0K7Y19lbCuGP4XmiNBs3tCFfGKcOH9unskVFmgGkJEhB9kbRJN\u0026X-Amz-Signature=7503991feaf8e0c21e5b518c55da71ba2b168f20cf8570ffb3405b197196d3a0\u0026X-Amz-SignedHeaders=host\u0026x-amz-checksum-mode=ENABLED\u0026x-id=GetObject"])</script>
1<script>self.__next_f.push([1,"5:[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$L14\",null,{\"project\":{\"id\":\"31838e03-ce3d-80e3-ac1a-f652f4c2052c\",\"title\":\"Unifying Coda's design system\",\"slug\":\"unifying-codas-design-system\",\"summary\":\"$undefined\",\"year\":2024,\"role\":[\"Product \u0026 Systems Designer\"],\"tags\":[],\"coverImage\":\"$15\",\"thumbnailImage\":\"$16\",\"published\":true,\"timeframe\":\"$undefined\",\"company\":\"Coda\",\"companyLogo\":\"$17\",\"companyLogoDark\":\"$18\",\"figma\":\"$undefined\",\"blocks\":[{\"id\":\"31838e03-ce3d-8076-8761-d03c64a94f1d\",\"type\":\"heading_1\",\"richText\":[{\"plainText\":\"Unifying Coda's design system\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-807f-bf8b-ee84f447ba5b\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-80e8-81a0-c6ca78762881\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I helped lead the development of a design system for Coda, a startup without an existing system in place. The work included establishing standards, reusable components, and coding conventions, as well as organizing Figma files and drafting proposals for UI redesigns.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-800c-812f-c157b2bb5c91\",\"type\":\"heading_3\",\"richText\":[{\"plainText\":\"Goals and responsibilities\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80d9-99e0-cdb6635aac46\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Research best practices.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-801a-9079-de7494b4224c\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Create an interface inventory.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-804f-9371-fb6819e53777\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Rebuild and maintain the Figma file using updated design-system frameworks and best practices.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80db-8151-ec1b0cf4bf29\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Design and define layouts, styles, and components.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-803c-bd0d-cc3da5d61650\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Document guidelines.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8029-a5f2-d3417730ee80\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Review documentation.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8008-a998-f132a7567e25\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Build and implement components.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-802b-bfaa-e0f7ec18e0e5\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Iterate and refine.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8030-a7de-ed0b26a3be78\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Evangelize the work across the organization.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8025-9776-f969b3c09c90\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Improve product accessibility.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]}
1,{\"id\":\"32238e03-ce3d-8008-95de-ebacd0f2d8b7\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-8052-9dbd-c619d26c1c14\",\"type\":\"heading_1\",\"richText\":[{\"plainText\":\"Examine the current system\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-80ce-bc3b-cea9458a8258\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-8023-94b4-cc371506c519\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"First, I examined the application as a whole. I identified existing conventions that could be reused and addressed inconsistencies. To illustrate my findings, I documented everything in a Figma file. This allowed the design team to see and understand the problems we encountered.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-804b-964d-df4a2be41abc\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I also collaborated with the brand team to understand the company's desired voice, tone, and visual style.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-805a-a1ac-eecdca5c0ac5\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Additionally, I held discussions with the design team to understand the guiding principles that had shaped decision-making up to that point. This helped us determine whether we needed to refine existing principles or create new ones to guide decisions for the new system.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80b6-a811-eecede36dccb\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Here was the rough draft of those principles:\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80bb-8d16-e793e5599dcb\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"The purpose of Coda is to empower makers with flexible building blocks to create the perfect workflows and systems with the power of an app.\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8010-9539-de18c6c29780\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"🎨 The product colors should not be too colorful so user content can shine through.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80b3-8426-de676e7741a6\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"📄 → \",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\"Be document-like\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\". All of our user-facing surfaces adhere to the fundamental traits of electronic documents in order to provide an accessible, learnable, expressive, and powerful work environment for as many people as possible:\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8056-96e3-c29a18ea8a13\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"🏃 → \",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\"Help users follow the flow\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\". We can make flow tangible and visible by visualizing its pattern of execution and letting people explore forward and backward. This relates most to “workflow,” or event-driven programming.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-803f-aead-e3d311a4400a\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"👁   → \",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\"Have no hidden state\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\". When a formula computes something, that result should be immediately visible. If it computes many things, all of them should be shown together in context.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8015-847e-d2a47daef82e\",\"type\":\"heading_2\",\"richText\":[{\"plainText\":\"Survey problems\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-800c-86ce-d239cbd129ce\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Next, I defined goals and a roadmap by surveying the team and reviewing the product analysis.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8047-b78d-e6f265f0289c\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Uncover problems:\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8067-9d09-d25ec0aaa65a\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"What are the main challenges people face?\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80a0-904c-e4c03f3eb471\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"What are the typical UI elements that each designer needs to recreate?\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80d9-9368-cdc92a6229f9\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"In what areas is the team duplicating effort inefficiently?\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8011-a83e-e7a518db8a89\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Where is communication between designers and engineers starting to deteriorate?\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8082-815e-de06a3fe71e4\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Where do the biggest inconsistencies occur?\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-804c-a2a8-d1baf354aeb6\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f2f8ab047557f616d3d71_surveyimage%2
101.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80dd-ae65-d6b7078a91b1\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f391cb350c72d36aed47d_Orr.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-803e-ad4e-dc96a14966ed\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Orr/Design\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8046-88f5-cab66da6e8ea\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"Parity with code! There’s a published Storybook site for the code version of the DS, and it’s 1:1 with our (new and improved) Figma library\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-802a-8cbe-c95f6e795ab2\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"Dark mode is QA’d and baked in so we never need to think about it (maybe this is already true?)\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8058-8500-d873591bdc9d\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"‍\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-801b-be4a-d4e66151152c\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f39e960c313eea3f0bc48_elva.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-8094-9410-ebd013fa82b3\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Elva/Design\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80f7-ba85-db6d0b0e053c\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"Everyone on the design team can have a clear understanding of what components to use and what processes and standards to follow to update the design system.\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80a1-9180-ce0692e28c48\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"Get a strict 1:1 mapping from Figma components to dev components and rarely deviate or special-case anything.\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8000-b50b-fab55d9c57a0\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f3be1bf9f9674785238ec_Zach.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80e5-b910-cd5ae9bf4c2a\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Zach/ Eng\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-808c-be9c-da30f340509d\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"It would be helpful if colors and text styles were easier to translate to the actual var used. I think text is the bigger offender here. Typically I have to look at the font size, go to the text.less file, find the corresponding font size, and then figure out which class applies that style. Ideally the actual font mixin and the text style in figma would match up. Maybe they do, but I don’t trust them to.\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8003-b354-f3e1ff64d44f\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"Too much dev time is spent building nearly similar situations, but they’re just subtly different (or perhaps the dev doesn’t know about the other component)\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8063-bf60-e4cacb6fd53d\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f3c132af0468efd863977_dev%203.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80dc-93f1-f7b9941f96a9\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Phil/Eng\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8088-838c-c12975b867a5\",\"type\":\"quote\",\"richText\":[{\"plainText\":\"Often I find myself pretty sure that there is a component that already exists that I can use, but I don’t know what it is. We have storybook, but you cant search that with an image (
1or even really with a description of what the end goal is) and it’s not really presented close enough to the Figma, so I often just ask in Slack. Mildly less inconvenient, but I also sometimes am not sure what colors are global colors that I should go look to reuse vs more specific.\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80da-aafd-c19a20746bb6\",\"type\":\"heading_1\",\"richText\":[{\"plainText\":\"Roadmap\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8091-8c4f-c1f48e68ed5c\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"After analyzing the survey questions and interview notes, I created a roadmap and began addressing the team's core needs.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-805b-9e7f-f8375aaf424e\",\"type\":\"heading_3\",\"richText\":[{\"plainText\":\"Outline\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8085-bced-f735fe4ba7d7\",\"type\":\"numbered_list_item\",\"richText\":[{\"plainText\":\"Foundational elements, such as color.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-808e-b05e-ca6b0f1fab6d\",\"type\":\"numbered_list_item\",\"richText\":[{\"plainText\":\"Core components that are most used and most needed by the team.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-807d-b7bd-dbed418278d7\",\"type\":\"numbered_list_item\",\"richText\":[{\"plainText\":\"Rebuild the Figma file.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80c2-8c9b-dc0308e3ec8c\",\"type\":\"numbered_list_item\",\"richText\":[{\"plainText\":\"Resolve inconsistencies.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8020-8694-f49b119614d9\",\"type\":\"numbered_list_item\",\"richText\":[{\"plainText\":\"Enhance communication.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80c0-b7cd-f58b62c45994\",\"type\":\"heading_2\",\"richText\":[{\"plainText\":\"Clean up foundations\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80b9-b4a8-daea9c91d5c0\",\"type\":\"heading_2\",\"richText\":[{\"plainText\":\"Color\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8051-ab3c-d6283b4bf874\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"There were several outdated colors from a previous brand. The original product palette had been in use for three years when the primary color was selected. The primary color was turquoise, which was used for all primary actions and selected states. In addition, an outdated orange was used for both error states and notifications.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8047-9386-c450ed2c346f\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I started by discussing the new brand palette with the brand team. We explored options for using the colors in the product. We examined different variations of each color to ensure interactive feedback and the right level of desaturation.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8028-873b-e8482d82bc3d\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"The main change was the primary color, which needed to be updated to a more modern, versatile shade. After careful consideration, we chose a blue that created pleasing contrast with the rest of the palette and better suited product design. I also explored black as a high-contrast option for important calls to action.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80d9-aa4f-dff3a6fb1955\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/641f8edccc09c938d0bb8f6b_Color%20update%20(1).png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-8053-bf3f-c40ffee33f97\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Updating the primary color was especially challenging because of the many edge c
1ases and scenarios that needed to be considered. This color plays a crucial role in providing interactive cues during editing. For instance, here is how the color appears in tables, which are core building blocks of the product.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8063-abda-c12f94d16f0d\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b9bb67dfe406c49b27d_Table%20colors.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-809f-a66f-d60c9f8e8990\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b78eae6ea1da0de5f3b_Table%20colors-1.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80fc-a0ee-d75361c59694\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/64446b8112cafd26db9b557b_Table%20colors-2.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80d2-9639-c54387eeb98e\",\"type\":\"heading_3\",\"richText\":[{\"plainText\":\"Color variables\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8012-b186-dc933abd26e4\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"To optimize color implementation, I devised a system for specific class colors, such as strokes. By configuring variables to show only relevant options when selecting a stroke color, I made it easier to identify the correct color class for stroke application in both design and code.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80be-b375-e6e8890098d0\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"To do this, I used Figma's variable mapping feature to associate color variables with a new variable named for its intended use. I also added the corresponding code syntax in the documentation property field, which is readily accessible during development.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8064-82a0-df70df56bfd9\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"By implementing these strategies, I aimed to bridge the gap between design and code and support a smoother workflow for the team.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80a3-ade6-ff7e5fde1b39\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f447da7939e42514ae89c_Color%20varablies.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80b3-8216-d9e21b50ec28\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d7d17413d254e4a777f23_Css%20maping%20colors.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-809a-a8ac-f2aaaba87fca\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d7d5a7edc3f2793e1e5a7_dev-mode-color-variables.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-803b-9249-ce2dae834a60\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Finally, I added all of the dark mode variables so the design team could access colors that were only in code at the time. This allowed them to switch designs from light to dark. I also designed the dark mode values, and you \",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}},{\"plainText\":\"can read more about that here.\",\"href\":\"https://www.jasminejones.design/coda-dark-mode\",\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8097-8b66-c62c7cbf95ac\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"‍\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80fc-9ab0-f6704bcb9c83\",\"type\":\"heading_2\",\"richText\":[{\"plainText\":\"Spacing\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80bc-a60b-c52b41efc564\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Spacing was generally consistent across the design team, but translating designs into code was a challenge. Many engineers did not closely inspect designs to determine the appropriate right padding or margins. In addition, there was no consistent class system for reusing common spacing values. To address this, we created spacers using Figma variables and established a class system engineers could reuse.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8028-a749-d6aa443ddce5\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f431ae0662d70d4873466_spacers.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-8030-a0a1-d46d4d4169d6\",\"type\":\"heading_2\",\"richText\":[{\"plainText\":\"Border radius\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80ab-9307-e43601964f62\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"The product had a mix of fully rounded corners and 2, 6, 8, 10, 12, 16, 17, 18, and 19 px corners, which was confusing and lacked cohesion. To address this, we standardized the border radius to 4 px. This struck a balance between rounded and sharp corners and improved the overall look and feel of the product.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80ca-8916-d152b66b28cd\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Why?\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8096-853a-f3e7066260bc\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"While fully rounded corners can read as “friendly,” a semi-rounded style offers more benefits. We believed it would create a consistent, balanced visual language across the system.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-800a-a2ea-d9d664c9c588\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"More adaptable across scenarios.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8097-898a-c6a3e5dbc781\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Better aligned with the brand’s “blocky” visual effect.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-802f-a142-f53deede80a3\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"More balanced when stacked (for example, in tables).\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80d5-a7fb-e14d34a3c92d\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Better aligned with border radius on input fields and “naked” background hovers on naked buttons.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]}
1,{\"id\":\"32238e03-ce3d-8005-b303-ed700559079a\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-805e-a3ad-cbb1c31af4b9\",\"type\":\"heading_1\",\"richText\":[{\"plainText\":\"Rebuild the Figma file and start new documentation\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-805a-9f1d-c79bdba7768c\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-80e7-856d-fb1e3c113a4a\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"The primary Figma library was assembled quickly and functioned more like a sticker sheet or wireframe, with minimal styling. It did not incorporate essential Figma best practices such as auto layout, variants, variables, and properties. As a result, designers used components that did not match the coded version, creating a disconnect between design and engineering. In response, many designers created their own design system files, separate from the main file, to better serve their needs or their team’s needs.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80e0-a461-d57440a52f1c\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I started by rebuilding foundational styles using the variables mentioned above. I also developed several key components and documented them in a Coda doc. This doc served as both documentation and a task tracker, allowing engineers and designers to easily access information about available components and how to use them.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80bb-ac4a-f7ba93260ad9\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f4b13d7d409840bc50a7f_Ready%20to%20use%201.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-800b-82bd-f57202ec8390\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"‍\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80db-bb5b-e6f0c13957e4\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"For each component, I attached a video inside the documentation so people could understand the different variations and parameters available in both design and code.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80da-8bf4-c1d0b48031ec\",\"type\":\"heading_2\",\"richText\":[{\"plainText\":\"Principles\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8064-ba81-d69757d94d37\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I established principles for the file to help onboard everyone from the old file to the new one.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8017-97ae-ddf5b744df0b\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"See slide show below.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-802a-b4a7-f92170871036\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-8095-9fa0-d927bed8fed7\",\"type\":\"heading_1\",\"richText\":[{\"plainText\":\"Components\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-800f-af70-e1a1d97722aa\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-80e5-9dd2-d8dcb28fad18\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"All components were rebuilt with auto layout, variants for different interactive states, properties, and a link to Storybook in dev mode.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8011-babc-d92d03160890\",\"type\":\"heading_3\",\"richText\":[{\"plainText\":\"Flyout menu system\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-802e-a883-ccb6f3cc3ffb\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/65960931a360fb95db4fc750_Drop%20down.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80b8-91b5-f5e921be2c6c\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/6596157296fea5504341b2aa_Cells.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-8059-b80b-ec1d7fe91a8b\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Each cell has a top-level parameter that changes the type to be either a:\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80ed-805c-ff294a2bb91e\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Menu option\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-807c-82de-d24d584b0a13\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Divider\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-801e-8a0d-d8d4ff9f0273\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Title\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8048-80a0-f178708aeb73\",\"type\":\"bulleted_list_item\",\"richText\":[{\"plainText\":\"Search f
1ield\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80c8-9982-cc29781bc80e\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659615d8961b5e1ecb67551a_Dot%20Grid%20cells%20in%20menu.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-804f-8134-e29fa7bb132b\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"The component is presented with different variants so designers can see all available options. There are hidden cells for additional menu options.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8096-a3a1-dbe151b2c25b\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/6596143f35ad360a4ab2b21b_Drop%20down-params.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80d6-a7c0-c323f15e46c4\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"The full parameters in the design panel.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-807c-9a62-e160a955ff19\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/658f64695e79882f91531ff4_CleanShot%202023-12-29%20at%2016.19.36%402x.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-8048-89f6-e6f1f25b9c76\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"In addition to the base component, there are also three common flyouts designers frequently need, with quick templates to jump-start projects.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8076-9303-d87deed582df\",\"type\":\"heading_3\",\"richText\":[{\"plainText\":\"Buttons\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80da-b1eb-ddd0aa20247a\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Coda has six button styles. When I joined, only three were documented, in one size, with no variance. When I refactored the Figma library, I added the other three styles and introduced size and state variants so designers could adjust parameters as needed.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80ac-9893-f8f97c553a2d\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d84b7dfa835e1f893aaaf_Button-cover.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-8033-bd80-c88cc0bc6bb9\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d854006bdc16210185315_button-component-bg.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80b5-adc7-db4b38ff6d45\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"While building this component, I learned that usability can matter more than efficiency. I initially created a base button to establish auto layout and padding, which varied depending on whether an icon was present. However, it created usability issues in the design panel because many parameters were duplicated. For example, the icon instance picker appeared twice, and it was not always clear which one to use. If someone changed the icon on the base, it could disrupt the entire component. I simplified the component by removing the base. This made it a bit harder to maintain, but the ease of use was worth the tradeoff.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-802b-a164-f80205a7aa2e\",\"type\":\"image\",\"url\":\"https://cdn.prod.website-files.com/5e35c595f4dd53767035da2b/659d85a550973ed6d29b492d_button-params.png\",\"caption\":[]},{\"id\":\"31838e03-ce3d-80bf-a336-eb23ef461e5c\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I al
1so created interactive prototype interactions so the buttons mirrored interactive states in prototype mode.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-80ce-83a9-e68f14d840a8\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-80c4-994f-ed8d025e0004\",\"type\":\"heading_1\",\"richText\":[{\"plainText\":\"Learnings\",\"href\":null,\"annotations\":{\"bold\":true,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"32238e03-ce3d-80cf-8712-d64ef95f6230\",\"type\":\"divider\"},{\"id\":\"31838e03-ce3d-802c-91c9-fd85800d8703\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"I gained several key learnings from rebuilding the design system.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80cb-af6f-d3e8228073cc\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"First, I saw the importance of gathering input and feedback from everyone involved, which helped create a sense of ownership in the system.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80ba-86d5-f92c4a9b572f\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Second, I came to understand the value of strong collaboration between design and code. To support that collaboration, I started learning to code, which helped me better organize and align design and development.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-80ca-ace8-d2f48372e4c6\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"Finally, I learned that maintaining a design system is ongoing work. With constant product demands, it is crucial to keep everything in sync and cohesive across the product team.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]},{\"id\":\"31838e03-ce3d-8054-8c9c-dbf1ab0ab9db\",\"type\":\"paragraph\",\"richText\":[{\"plainText\":\"👀 There are many more details on this effort. Please reach out to request a portfolio presentation and learn more.\",\"href\":null,\"annotations\":{\"bold\":false,\"italic\":false,\"strikethrough\":false,\"underline\":false,\"code\":false,\"color\":\"default\"}}]}]}}]}]\n"])</script>
1<script>self.__next_f.push([1,"9:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Unifying Coda's design system – Case Study\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A project case study from the portfolio of Jasmine Jones.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon.png?2f76c48c0500ac01\",\"type\":\"image/png\",\"sizes\":\"36x36\"}],[\"$\",\"$L19\",\"3\",{}]],\"error\":null,\"digest\":\"$undefined\"}\ne:\"$9:metadata\"\n"])</script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.