choreographed animations with salesforce's new lightning design system
TRANSCRIPT
![Page 1: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/1.jpg)
Choreographed Animations with Salesforce’s New Lightning Design System
Amy LeeUX Engineer Lead@amster
Adam DotiPrincipal Product Designer@doti
![Page 2: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/2.jpg)
Safe HarborSafe harbor statement under the Private Securities Litigation Reform Act of 1995:This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
![Page 3: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/3.jpg)
#designsystem
user experience
![Page 4: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/4.jpg)
#designsystem
engineers designers
researchers
UX
![Page 5: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/5.jpg)
#designsystem
UXAmy LeeUX Engineering Lead@amster
PrototypingSupporting EngineeringDesign System
Adam DotiPrincipal Product Designer
@doti
Designing UIs, assetsValidating with Researchers
Design System
![Page 6: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/6.jpg)
#designsystem
![Page 7: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/7.jpg)
#designsystem
engineers designers
Code snippets
CSS framework
Design Tokens
Vocabulary
Icons, font
Open source
Design patterns
Guidelines, principles
Design Tokens
Vocabulary
Icons, font
Color palettesDesign Language
![Page 8: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/8.jpg)
#designsystem
engineers designers
Code snippets
CSS framework
Design Tokens
Vocabulary
Icons, font
Open source
Design patterns
Guidelines, principles
Design Tokens
Vocabulary
Icons, font
Color palettesDesign Language
![Page 9: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/9.jpg)
#designsystem
Why motion & animation?
![Page 10: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/10.jpg)
#designsystem https://en.wikipedia.org/wiki/Fovea_centralis#/media/File:Schematic_diagram_of_the_human_eye_en.svg
![Page 11: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/11.jpg)
#designsystem
![Page 12: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/12.jpg)
#designsystem
![Page 13: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/13.jpg)
#designsystem
Sharp (2°)Fovea centralis
6.4 M
![Page 14: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/14.jpg)
#designsystem
Sharp (2°)Fovea centralis
Contrast Contrast
6.4 M 120 M120 Mhttp://webvision.med.utah.edu/book/part-xiii-facts-and-figures-concerning-the-human-retina/
![Page 15: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/15.jpg)
#designsystem
Sharp (2°)Fovea centralis
Contrast Contrast
MovementMovementDetail
+Color
![Page 16: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/16.jpg)
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
![Page 17: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/17.jpg)
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
![Page 18: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/18.jpg)
#designsystem
lightningdesignsystem.com
> Resources
> Design Tokens
Timing Design TokensNamed Programmatic Values
![Page 19: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/19.jpg)
#designsystem
lightningdesignsystem.com
> Resources
> Design Tokens
Timing Design TokensNamed Programmatic Values
![Page 20: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/20.jpg)
#designsystem
.someDiv { top: 0; transition: top 0.4s linear;}.someDiv.on { top: 100px; }
Sass Design TokensUsing the Sass CSS preprocessor
![Page 21: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/21.jpg)
#designsystem
Sass Design TokensUsing the Sass CSS preprocessor
![Page 22: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/22.jpg)
#designsystem
Sass Design TokensUsing the Sass CSS preprocessor
![Page 23: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/23.jpg)
#designsystem
Sass Design TokensUsing the Sass CSS preprocessor
![Page 24: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/24.jpg)
#designsystem
@import “design-tokens.scss”;
.someDiv { top: 0; transition: top $duration-slowly linear;}.someDiv.on { top: 100px; }
Sass Design TokensUsing the Sass CSS preprocessor
![Page 25: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/25.jpg)
#designsystem
@import “design-tokens.scss”;
.someDiv { top: 0; transition: top $duration-quickly linear;}.someDiv.on { top: 100px; }
Sass Design TokensUsing the Sass CSS preprocessor
![Page 26: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/26.jpg)
#designsystem
$duration-instantly
0s
$duration-slowly
0.4s
$duration-quickly
0.1s
$duration-promptly
0.2s
Sass Design TokensUsing the Sass CSS preprocessor
![Page 27: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/27.jpg)
#designsystem
Creating the Timing Design Tokens
1.0s0s 2.0s
60 frames0 frames 120 frames
6 12 18 24 30 90
0.1s aligns on a frame boundary, 60 fps
![Page 28: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/28.jpg)
#designsystem
Creating the Timing Design Tokens
1.0s0s 2.0s
30 frames0 frames 60 frames
3 6 9 12 15 45
0.1s aligns on a frame boundary, even for 30fps
![Page 29: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/29.jpg)
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
![Page 30: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/30.jpg)
#designsystem
— RACHEL NABORS, WEB ANIMATION ENGINEER
Purposeful animation can be used to guide users through a workflow in the same way that good typography should underscore the hierarchy of information in a document.”
“
![Page 31: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/31.jpg)
#designsystem
Entrance & Exit
![Page 32: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/32.jpg)
#designsystem
Entrance & Exit
PROTOTYPE
![Page 33: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/33.jpg)
#designsystem
Emphasis
![Page 34: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/34.jpg)
#designsystem
Emphasis
PROTOTYPE
![Page 35: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/35.jpg)
#designsystem
Transitional
![Page 36: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/36.jpg)
#designsystem
Transitional
![Page 37: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/37.jpg)
#designsystem
Personality & Branding
![Page 38: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/38.jpg)
#designsystem
Personality & Branding
![Page 39: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/39.jpg)
#designsystem
Personality & Branding
![Page 40: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/40.jpg)
#designsystem
The sequence of steps and movements.
“choreography”
![Page 41: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/41.jpg)
#designsystem
+ Components on the screen
+ Sequence of motion and animation
+ Specific CSS properties
+ Timing values from Design Tokens
= Choreography
![Page 42: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/42.jpg)
#designsystem
Lightning Design System
lightningdesignsystem.com
> Design
> Motion
![Page 43: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/43.jpg)
#designsystem
Motion Effects
fade infade out
color grow
![Page 44: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/44.jpg)
#designsystem
fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist - fade in - fade out - color - grow - shrink - raise - pop - punch - shake - jiggle - slide - flip - roll - spin - tilt - twist
-
![Page 45: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/45.jpg)
#designsystem
Chatter Feed Example
![Page 46: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/46.jpg)
#designsystem
![Page 47: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/47.jpg)
#designsystem
![Page 48: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/48.jpg)
#designsystem
![Page 49: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/49.jpg)
#designsystem
![Page 50: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/50.jpg)
#designsystem
![Page 51: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/51.jpg)
#designsystem
![Page 52: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/52.jpg)
#designsystem
![Page 53: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/53.jpg)
#designsystem
Chatter ChoreographyNew post opening animation
1. User mouses onto the text field
![Page 54: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/54.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
Chatter ChoreographyNew post opening animation
![Page 55: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/55.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
Chatter ChoreographyNew post opening animation
![Page 56: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/56.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
4. Share button’s color fades out
Chatter ChoreographyNew post opening animation
![Page 57: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/57.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down
4. Share button’s color fades out
5. To: and tools fade in
Chatter ChoreographyNew post opening animation
![Page 58: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/58.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button’s color fades out background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
Chatter ChoreographyNew post opening animation
![Page 59: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/59.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button’s color fades out background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
Chatter ChoreographyNew post opening animation
![Page 60: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/60.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button’s color fades out background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
0.4s0.4s + 0.1s0.1s0.4s
Chatter ChoreographyNew post opening animation
![Page 61: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/61.jpg)
#designsystem
1. User mouses onto the text field
2. User clicks
3. Field expands down height 0.4s4. Share button fades to color background color 0.5s, top 0.1s5. To: and tools fade in opacity 0.4s
$duration-slowly$duration-slowly + $duration-quickly$duration-quickly$duration-slowly
Design Tokens
Chatter ChoreographyNew post opening animation
![Page 62: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/62.jpg)
#designsystem
+ Components on the screen
+ Sequence of motion and animation
+ Specific CSS properties
+ Timing values from Design Tokens
= Choreography
Chatter ChoreographyNew post opening animation
![Page 63: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/63.jpg)
#designsystem
Resources
![Page 64: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/64.jpg)
#designsystem
Lightning Design System
Design Guidelines
CSS Framework
Resources
Tutorials & Documentation
lightningdesignsystem.com/resources/downloads
![Page 65: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/65.jpg)
#designsystem
http://sforce.co/1FFAToW
![Page 66: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/66.jpg)
#designsystem
dreamforce-ux.herokuapp.com
![Page 67: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/67.jpg)
#designsystem
Design HQCome to the 2nd floor of Moscone West to chat
with some of the world’s best designers, researchers, and UX engineers.
![Page 68: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/68.jpg)
Share Your Feedback, and Win a GoPro!
3 Earn a GoPro prize entry for each completed survey
Tap the bell to take a survey 2 Enroll in a session 1
![Page 69: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/69.jpg)
#designsystem
Before you leave, get your Quest stamp!
![Page 70: Choreographed Animations with Salesforce's New Lightning Design System](https://reader031.vdocuments.net/reader031/viewer/2022030309/58f29a9a1a28ab490f8b4599/html5/thumbnails/70.jpg)
Thank you
#designsystem