Updated styles and tokens (#2322)

Co-authored-by: Supernova Bot <[email protected]>

website/build-app/pages/components/button/content.md

@@ -12,7 +12,7 @@ Try sticking to the standards, especially for CRUD labels (Save, Delete, Create,
 
 **Do**  
 
-![do - short](https://studio-assets.supernova.io/design-systems/81732/62c61107-08ed-4446-8c0b-17437ef781bf.png)  
+![do - short](https://studio-assets.supernova.io/design-systems/81732/616b29d5-7c37-40ea-a8ef-bbe172f4ff36.png)  
 do - short  
 
 > Yay:  
@@ -21,7 +21,7 @@ do - short
 
 **Don't**  
 
-![don't - long](https://studio-assets.supernova.io/design-systems/81732/282c4da5-f45c-4434-9513-ca59caa77c5b.png)  
+![don't - long](https://studio-assets.supernova.io/design-systems/81732/d8a4b0f4-5bf0-47ee-8d90-d982881f7751.png)  
 don't - long  
 
 > Please note:  

website/build-app/pages/components/button/overview.md

@@ -16,7 +16,7 @@ Buttons are clickable items communicating actions that can be performed.
 
 | Column 1 | Column 2 | Column 3 |  
 | --- | --- | --- |  
-| ![Img](https://studio-assets.supernova.io/design-systems/81732/e235efcc-4a89-431b-af1c-15f3797260c2.png) | ![Img](https://studio-assets.supernova.io/design-systems/81732/b8376588-bdca-4f3a-a113-449c0a4ef812.png) | ![Img](https://studio-assets.supernova.io/design-systems/81732/f4e05e56-d215-4e76-9c25-42034ee2baa1.png) |  
+| ![Img](https://studio-assets.supernova.io/design-systems/81732/25b82fb2-c0ad-4c72-982a-a281642f5d4b.png) | ![Img](https://studio-assets.supernova.io/design-systems/81732/47e83644-f18b-40ae-99de-2e4fd050c987.png) | ![Img](https://studio-assets.supernova.io/design-systems/81732/31777c48-5359-4d68-8990-dc8c9834b308.png) |  
 | *Noticeable* | *Identifiable* | *Defined* |  
 | Should be easily spottable among other elements. | Should make it clear that it can trigger an action. | Should clearly state what action it triggers. |  
 

website/build-app/pages/components/button/specifications.md

@@ -28,7 +28,7 @@ Adding an icon is optional but it should always be kept to a single one per butt
 
 **Do**  
 
-![do - 1 icon](https://studio-assets.supernova.io/design-systems/81732/4aec9124-0299-47d6-a170-7937f12b791a.png)  
+![do - 1 icon](https://studio-assets.supernova.io/design-systems/81732/5c48a23a-c7fd-42da-b78c-c0580317b055.png)  
 do - 1 icon  
 
 > Yay:  
@@ -37,7 +37,7 @@ do - 1 icon
 
 **Don't**  
 
-![fsdfsdf](https://studio-assets.supernova.io/design-systems/81732/dafd256e-34dc-42cb-a2e6-306987a6da62.png)  
+![fsdfsdf](https://studio-assets.supernova.io/design-systems/81732/9c39bb7a-672a-47d8-b5f7-d50b94a3601a.png)  
 fsdfsdf, fsdfsdfsd  
 
 
@@ -72,7 +72,7 @@ Never include two of the same level button in the same context. Decide which act
 
 **Do**  
 
-![do - different](https://studio-assets.supernova.io/design-systems/81732/7aef5f5a-6ad1-48fb-87f2-eaecb0877fde.png)  
+![do - different](https://studio-assets.supernova.io/design-systems/81732/4c451db1-3c3e-4ab7-a701-a77e53ee8d92.png)  
 do - different  
 
 > Yay:  
@@ -81,7 +81,7 @@ do - different
 
 **Don't**  
 
-![don't - same](https://studio-assets.supernova.io/design-systems/81732/84916e67-8520-46fe-add5-1444909bcf3f.png)  
+![don't - same](https://studio-assets.supernova.io/design-systems/81732/33948366-2c88-433f-8036-97cc04310e0f.png)  
 don't - same  
 
 > Please note:  
@@ -96,7 +96,7 @@ Modal buttons are always a ghost button.
 
 **Do**  
 
-![do - ghost](https://studio-assets.supernova.io/design-systems/81732/2c156c6e-0d44-42b7-8f80-db345f642380.png)  
+![do - ghost](https://studio-assets.supernova.io/design-systems/81732/a2f4f179-ba2f-46ab-acde-bbcaa73f266b.png)  
 do - ghost  
 
 > Yay:  
@@ -105,7 +105,7 @@ do - ghost
 
 **Don't**  
 
-![don't - others](https://studio-assets.supernova.io/design-systems/81732/65316d4a-d82c-4dde-adf0-86ac781c31b8.png)  
+![don't - others](https://studio-assets.supernova.io/design-systems/81732/eb5753ce-3ba9-46ca-b79c-c0920642b943.png)  
 don't - others  
 
 > Please note:  
@@ -130,7 +130,7 @@ Our buttons come in 4 different sizes. As a rule of thumb:
 The width is always adaptative to its content while the height remains fixed.
 
 
-![sizes](https://studio-assets.supernova.io/design-systems/81732/31a305e2-62a6-4c34-b424-9dabfaf1e301.png)  
+![sizes](https://studio-assets.supernova.io/design-systems/81732/58f1d04c-6f00-4f5c-ade0-bede6797fd06.png)  
 sizes  
 
 
@@ -141,7 +141,7 @@ If you want to highlight an action over another one, levels will do the job, siz
 
 **Do**  
 
-![do - same](https://studio-assets.supernova.io/design-systems/81732/61e57c4b-e8af-4ea0-9ce5-07e7811b3e75.png)  
+![do - same](https://studio-assets.supernova.io/design-systems/81732/1b93d736-ff4f-4ae2-8a50-6489f21a7410.png)  
 do - same  
 
 > Yay:  
@@ -150,7 +150,7 @@ do - same
 
 **Don't**  
 
-![don't - different](https://studio-assets.supernova.io/design-systems/81732/971b7bcb-d9cf-4b82-b978-95e366fb2dca.png)  
+![don't - different](https://studio-assets.supernova.io/design-systems/81732/37670c96-21eb-41b9-ae88-016d054748b7.png)  
 don't - different  
 
 > Please note:  
@@ -169,7 +169,7 @@ Paddings between label and icons is:
 An icon and a label are considered as a group so in case of a full width button, they'll be aligned left while the arrow will always be fixated on the right.
 
 
-![paddings](https://studio-assets.supernova.io/design-systems/81732/bbb2c8a2-9135-4147-800a-86a3e6ad02a8.png)  
+![paddings](https://studio-assets.supernova.io/design-systems/81732/d6a232d8-aba9-4c84-bb35-9448abcf5a75.png)  
 paddings  
 
 
@@ -200,16 +200,16 @@ Margins between 2 buttons are:
 When a user interacts with a button its state changes to communicate information.
 
 
-![Default](https://studio-assets.supernova.io/design-systems/81732/d6a09c16-4b2c-44b6-9423-7b7de2228e9e.png)  
+![Default](https://studio-assets.supernova.io/design-systems/81732/578a880a-deed-4b65-91d7-a2b84f63c67c.png)  
 Default, Initial view of a button that hasn't been interacted with.  
 
-![Hover](https://studio-assets.supernova.io/design-systems/81732/d1f1a593-d447-46f7-a3d9-0fc2e34e7c4c.png)  
+![Hover](https://studio-assets.supernova.io/design-systems/81732/fcc56dc8-7aa6-4acd-99f9-1905409a66c4.png)  
 Hover, Signals availability and the step before triggering an action. Takes a lighter shade.  
 
-![Active](https://studio-assets.supernova.io/design-systems/81732/c6c9520a-eaa4-46a5-86f1-627ce8f430b2.png)  
+![Active](https://studio-assets.supernova.io/design-systems/81732/cd79db1e-2054-4ae8-a1f4-a4c6da6d5f81.png)  
 Active, Indicates which button is in focus and selected by the user.  
 
-![Disabled](https://studio-assets.supernova.io/design-systems/81732/74456fc3-4cc1-4513-a587-be439805c150.png)  
+![Disabled](https://studio-assets.supernova.io/design-systems/81732/c8247e87-0b6e-4c90-9ec8-c9f872e80b6c.png)  
 Disabled, Button with which a user cannot interact with. Greyed out label and container.  
 
 
@@ -259,7 +259,7 @@ Our products are light-themed by default with a few exceptions, like Welcome Ori
 Consistent throughout different themes putting an emphasis on Welcome's primary colour.
 
 
-![primary](https://studio-assets.supernova.io/design-systems/81732/e8d82689-3bdd-458b-98e5-ccb3391b290b.png)  
+![primary](https://studio-assets.supernova.io/design-systems/81732/25aea5e6-d90f-45da-8f0b-4d1cb9391ec2.png)  
 primary  
 
 
@@ -268,7 +268,7 @@ primary
 They all have alternate versions for dark-themed products. Dark-themed versions are referred as negatives.
 
 
-![secondary, tertiary, ghost](https://studio-assets.supernova.io/design-systems/81732/94fcc61e-5746-4e69-9ab2-5d37643877df.png)  
+![secondary, tertiary, ghost](https://studio-assets.supernova.io/design-systems/81732/d9b2b023-513d-4a84-b706-3e78879183f1.png)  
 secondary, tertiary, ghost  
 
 
@@ -293,7 +293,7 @@ Text buttons should always be left with square corners.
 
 **Do**  
 
-![do - no rounding](https://studio-assets.supernova.io/design-systems/81732/54c2db69-fe70-4d40-9cd9-9d863aa408d4.png)  
+![do - no rounding](https://studio-assets.supernova.io/design-systems/81732/cf93df6f-58a9-4aa1-ad6c-af1184f21267.png)  
 do - no rounding  
 
 > Yay:  
@@ -302,7 +302,7 @@ do - no rounding
 
 **Don't**  
 
-![don't - round](https://studio-assets.supernova.io/design-systems/81732/9f54465a-73b2-4c68-a025-e8d31e6df358.png)  
+![don't - round](https://studio-assets.supernova.io/design-systems/81732/76e5b419-f26d-40e8-b9c6-95c1ab447251.png)  
 don't - round  
 
 > Please note:  
@@ -317,7 +317,7 @@ Icon buttons are exceptions and can either be square or fully rounded (circle).
 
 **Do**  
 
-![do - square or circle](https://studio-assets.supernova.io/design-systems/81732/2a2f3eea-3035-42e5-8e8f-a1a0426fbd02.png)  
+![do - square or circle](https://studio-assets.supernova.io/design-systems/81732/b889a4ef-fcff-4260-8433-5367928d30ed.png)  
 do - square or circle  
 
 > Yay:  
@@ -326,7 +326,7 @@ do - square or circle
 
 **Don't**  
 
-![don't - rounded](https://studio-assets.supernova.io/design-systems/81732/ce909882-327a-4353-a137-4457da38be6a.png)  
+![don't - rounded](https://studio-assets.supernova.io/design-systems/81732/15bcaed8-a3ad-4b1d-95f7-06bd6fb7482e.png)  
 don't - rounded  
 
 > Please note:  
@@ -341,7 +341,7 @@ Modal buttons are always a circle icon button.
 
 **Do**  
 
-![do - circle icon](https://studio-assets.supernova.io/design-systems/81732/5132d028-284b-4a2c-b8b3-e01b2eb97f47.png)  
+![do - circle icon](https://studio-assets.supernova.io/design-systems/81732/44da51e5-597b-40a9-b055-9c0e20027984.png)  
 do - circle icon  
 
 > Yay:  
@@ -350,7 +350,7 @@ do - circle icon
 
 **Don't**  
 
-![don't - square icon](https://studio-assets.supernova.io/design-systems/81732/0f6900d9-1202-4370-b60b-610498a1e836.png)  
+![don't - square icon](https://studio-assets.supernova.io/design-systems/81732/86ec9210-57ce-4d86-a4bd-5b99085d8632.png)  
 don't - square icon  
 
 > Please note:  

website/build-app/pages/components/button/usage-and-behaviour.md

@@ -10,7 +10,7 @@
 
 **Do**  
 
-![do - horizontal](https://studio-assets.supernova.io/design-systems/81732/dcca2d92-2865-4e79-91ab-cfffa37a8c07.png)  
+![do - horizontal](https://studio-assets.supernova.io/design-systems/81732/5f8864b6-ee40-4fb1-b21a-9d0c999dc4a3.png)  
 do - horizontal  
 
 > Yay:  
@@ -19,7 +19,7 @@ do - horizontal
 
 **Don't**  
 
-![don't - vertical](https://studio-assets.supernova.io/design-systems/81732/359246a6-e521-4083-bacc-57f57517af14.png)  
+![don't - vertical](https://studio-assets.supernova.io/design-systems/81732/6be2a42f-fcc4-4692-8c12-f30475d6275a.png)  
 don't - vertical  
 
 > Please note:  
@@ -34,7 +34,7 @@ Both full width and left-aligned options are available without conditions but ae
 
 **Do**  
 
-![do](https://studio-assets.supernova.io/design-systems/81732/881368ab-ffa5-4815-9d8c-713d5f4c0f14.png)  
+![do](https://studio-assets.supernova.io/design-systems/81732/946d0713-f46f-4a7e-b204-ae92a584a470.png)  
 do  
 
 > Yay:  
@@ -43,7 +43,7 @@ do
 
 **Variation**  
 
-![not recommended](https://studio-assets.supernova.io/design-systems/81732/a4991bae-6525-41fc-9bf2-ba4b94a25f10.png)  
+![not recommended](https://studio-assets.supernova.io/design-systems/81732/79941f26-a132-4103-b644-f1e3c3ff694c.png)  
 not recommended  
 
 > Be warned:  
@@ -56,7 +56,7 @@ not recommended
 
 **Do**  
 
-![do - align left](https://studio-assets.supernova.io/design-systems/81732/6aa67341-72ec-463e-b176-b8f3cce4c984.png)  
+![do - align left](https://studio-assets.supernova.io/design-systems/81732/a5a460cc-e951-4fa7-bbae-59f67f3254e1.png)  
 do - align left  
 
 > Yay:  
@@ -65,7 +65,7 @@ do - align left
 
 **Variation**  
 
-![variation - full width](https://studio-assets.supernova.io/design-systems/81732/51d6dc5e-c652-492e-9e71-4c162fd474b2.png)  
+![variation - full width](https://studio-assets.supernova.io/design-systems/81732/d0df1a67-e20f-432b-a7c7-723284bb7424.png)  
 variation - full width  
 
 > Be warned:  
@@ -82,7 +82,7 @@ Layouts may differ in terms of screen resolution and buttons can adapt their vis
 
 **Do**  
 
-![do](https://studio-assets.supernova.io/design-systems/81732/8dbe850a-7a42-437c-af53-2324a619de6f.png)  
+![do](https://studio-assets.supernova.io/design-systems/81732/693321ec-6d64-4d26-8ac7-5bbb6893b15b.png)  
 do  
 
 > Yay:  
@@ -91,7 +91,7 @@ do
 
 **Variation**  
 
-![avoid](https://studio-assets.supernova.io/design-systems/81732/c626e716-7bea-4fa8-97aa-bdfa0b44db11.png)  
+![avoid](https://studio-assets.supernova.io/design-systems/81732/eb7590cd-7992-439c-9039-b6d0d40be233.png)  
 avoid  
 
 > Be warned:  

website/build-app/pages/foundations/design-tokens.md

@@ -11,10 +11,6 @@
 > Some extra info:  
 > Use a token list block, or token group block, to display the base set of tokens for this style. This is where you pick all your base colors, like ‘Red 500’ or ‘Blue 300’, for example.
 
-### Token list:
-
-### Token group:
-
 
 **Token Group Primary**:    
 100: rgb(255, 248, 217)  

website/build-app/pages/foundations/typography/usage-and-behaviour.md

@@ -8,7 +8,7 @@ We have core rules regarding font usage (which to use, when, how to colour them,
 
 **Do**  
 
-![Baseline in uppercase](https://studio-assets.supernova.io/design-systems/81732/db2424b0-3c7b-4f4b-94c9-ac8b5ef66b41.png)  
+![Baseline in uppercase](https://studio-assets.supernova.io/design-systems/81732/dd03e289-a9c5-4572-a71c-d068e594f65b.png)  
 Baseline in uppercase  
 
 > Yay:  
@@ -17,7 +17,7 @@ Baseline in uppercase
 
 **Do**  
 
-![Welcome for heading, Work Sans for body](https://studio-assets.supernova.io/design-systems/81732/aceeea98-741f-486b-a30d-1fd602798245.png)  
+![Welcome for heading, Work Sans for body](https://studio-assets.supernova.io/design-systems/81732/99d7338e-d887-42c6-8de7-de7161d2df09.png)  
 Welcome for heading, Work Sans for body  
 
 > Yay:  
@@ -29,7 +29,7 @@ Welcome for heading, Work Sans for body
 
 **Don't**  
 
-![Different colour mixed together](https://studio-assets.supernova.io/design-systems/81732/30cb6095-56c3-47c0-85d3-61bfe98e9502.png)  
+![Different colour mixed together](https://studio-assets.supernova.io/design-systems/81732/519b7e39-21ce-4972-a6ee-d781fbe35b1a.png)  
 Different colour mixed together  
 
 > Please note:  
@@ -38,7 +38,7 @@ Different colour mixed together
 
 **Don't**  
 
-![Colour on colour](https://studio-assets.supernova.io/design-systems/81732/b97acf08-1ea4-46e8-880f-515f1aa218b9.png)  
+![Colour on colour](https://studio-assets.supernova.io/design-systems/81732/19ddb3d8-ecda-43c8-b21d-c1d475783725.png)  
 Colour on colour  
 
 > Please note:  
@@ -49,7 +49,7 @@ Colour on colour
 
 **Don't**  
 
-![Body text font](https://studio-assets.supernova.io/design-systems/81732/cf85d81c-cfa9-40fc-aa35-07a65a172136.png)  
+![Body text font](https://studio-assets.supernova.io/design-systems/81732/3366c3c7-888a-4a5a-9556-38794f3b93cb.png)  
 Body text font  
 
 > Please note:  
@@ -59,7 +59,7 @@ Body text font
 
 **Don't**  
 
-![Yellow on white](https://studio-assets.supernova.io/design-systems/81732/d8c9ea54-2402-4477-a565-a539191fdfed.png)  
+![Yellow on white](https://studio-assets.supernova.io/design-systems/81732/6359794d-dccc-4a03-b5c1-b4a50d368b62.png)  
 Yellow on white  
 
 > Please note: