![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/c2f7eceb-7a48-47f8-9b6b-06c4141f4f3f_rw_1920.png?h=8c668c78c1d11c10fa63b9546bb743f3)
Original Online Banking style guide and component library based in Sketch
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/8dc4e33f-2cbf-477c-9814-333b136a8b8c_rw_1920.png?h=4fd91581e03a0d4a226ddb2cdbd0061e)
Original CU*Publisher style guide and component library based in Sketch
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/78853ea2-3c4a-4862-b8a0-4b39ed5a46c5_rw_1920.png?h=3497bfd19ed8adbdccaa598c8257d51e)
An example of searching for a component in Sketch and naming conventions.
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/f681cc41-e72e-4a10-9f0f-53e43685c0d9_rw_1920.png?h=8b514823b8d7165516549cf4ad0d4288)
An example of a component (variant) name. It followed a general breakdown of: Product / Size / Focus / Clarifier
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/dde18e40-1f51-4cea-bb3c-68b1a31523e0_rw_1200.png?h=16656967d6aa559cebf682aad83ef609)
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/739ab8a5-6ea9-46da-8c0c-0f6f40f6f5ed_rw_1920.png?h=3679ee2d6eddbedf65e7656b0022a080)
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/a1d2e0c6-7d9c-469c-830d-b7758afb73db_rw_1920.png?h=f84f7668394d1343fce6bd1357a74da5)
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/bae7157d-2f82-4afa-9bd1-d9bad1622d02_rw_1920.png?h=86e053a578d8e153fb16f33564aeb9cd)
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/c0a802cd-fb7b-42df-8117-52309c632e3b_rw_1920.png?h=2fd29222efe43eb8ba460d6a31cf55d8)
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/5ebfac33-0a82-409b-843c-741bafc0e71b_rw_1920.png?h=8cc82131f512f7cf9d4e9d69bfcb720e)
Example of a layer breakdown with our new system and the accompanied view.
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/2286d3ba-1671-467e-bccf-2d5db5386f96_rw_3840.png?h=236367127323deef3e6bfe96ca2cee1c)
Different variations to our Accounts tab found in the newest update of our mobile app.
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/c345ae77-bb71-422f-a0e3-47d0fd5848b3_rw_1920.png?h=384f139cdda64ab188d187e11c3bb431)
Here's an example of a sheet put together on how to create a new variant for a feature called "Member Messaging."
![](https://cdn.myportfolio.com/9470ba13-39f0-46ad-9b8e-4c453321ed56/ae7eb4a5-4f7b-4c01-9cc2-225755e98e33_rw_1920.png?h=79f66bee0df3647d647c1fe34ed20b83)
Our "Getting Started" guide to help onboard new members to the design system.