Skip to content

Commit

Permalink
Merge pull request #1025 from SwedbankPay/feature/SWED-2334-playbook_…
Browse files Browse the repository at this point in the history 
…revisit

SWED-2334 update playbook design vision
  • Loading branch information
@goldenraphti
goldenraphti authored Dec 10, 2024
2 parents 935caf2 + 1526d7f commit 17305ee
Show file tree
Hide file tree
Showing 42 changed files with 63 additions and 898 deletions.
24 changes: 2 additions & 22 deletions RELEASE_NOTES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,9 @@

## \[10.13.0\] - 11.11.2024

## Identity
## Playbook

- Colors

- updated primary color from current value `#FDC129` to actual Brand guideline's `#FDC92A`

- Logotypes
- updated logotype to the new fixed version
- update Documentation to enforce recommended pathname use

## Component changes

- Toggle
- updated colors
- added new theme colors (white and gray)
- Expandable PayEx (contribution from Simon Wahlstrom 💫)
- font family change for PayEx expandables
- Button PayEx (contribution from Johanna Prinz 💫)
- font family change
- colors updated
- Table PayEx (contribution from Johanna Prinz 💫)
- colors updated
- hover color fixed
- Updates to the playbook:

## Technical changes

Expand Down
189 changes: 22 additions & 167 deletions src/App/Playbook/content/DesignVision/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,32 +41,17 @@ const VisionStatement = () => (
</section>
);

const VisionBoard = () => (
const Snapshot = () => (
<section>
<h2 id="vision-board">Vision board</h2>
<h2 id="snapshot">Snapshot</h2>
<p>Scalable Growing the product portfolio of Swedbank Pay.</p>

<div className="d-flex">
<video
playsInline
autoPlay
muted
loop
style={{ aspectRatio: "710 / 437" }}
width={710}
height={437}
poster={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.avif`}
className="w-100 h-auto"
>
<source
src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board-av1.mp4`}
type="video/mp4; codecs=av01.0.05M.08,opus"
/>
<source
src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.mp4`}
type="video/mp4"
/>
</video>
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-vision-board.png`}
alt="illustration swedbankpay playbook principles"
/>
</div>
</section>
);
Expand All @@ -85,7 +70,7 @@ const ChunkyFriendly = () => (
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-none d-sm-flex">
<div className="row d-flex px-3">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-1.png`}
Expand All @@ -108,22 +93,6 @@ const ChunkyFriendly = () => (
/>
</div>
</div>
<div className="row d-sm-none">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-chunky-friendly-mobile-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
</div>
</section>
);
Expand All @@ -140,89 +109,27 @@ const BoldTypography = () => (
and highly contrasting title.
</p>

<div className="container px-sm-0 playbook">
<div
className="row ratio-responsive-row justify-content-between mx-0"
style={{ "--row-height": 163, "--row-width": 702 }}
>
<div className="col-sm px-0">
<div
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-flex px-3">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-1.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm px-0">
<div className="col-sm">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-2.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm px-0">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-3.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
<div className="col-sm px-0">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-bold-typo-4.png`}
className="w-100"
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
</div>
</section>
);

const DelicateLines = () => (
<section>
<h2 id="delicate-lines">Delicate lines</h2>
<p>
Together with the bold typography and solid colors, we use thin lines for
illustrations. When we want the illustration to blend into the background
and not be in focus, we only use the thin lines. When we want it to stand
out, we combine it with larger solid shapes or type.
</p>
<div className="container px-sm-0 playbook">
<div className="grid-row delicate-lines">
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-1.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-2.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-3.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-4.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-5.png`}
alt="Playbook illustration"
loading="lazy"
/>
<img
src={`${basename}img/documentation/playbook/playbook-design-vision-delicate-lines-6.png`}
alt="Playbook illustration"
loading="lazy"
/>
</div>
</div>
</section>
Expand All @@ -236,11 +143,12 @@ const Rounded = () => (
information and serving you what you need. The UI should reflect this
friendliness, and does so with rounded corners and soft shapes.
</p>
<div className="container px-sm-0 playbook d-none d-sm-flex">
<div
className="row ratio-responsive-row d-flex justify-content-between mx-0"
style={{ "--row-height": 174, "--row-width": 710 }}
>

<div
className="container px-sm-0 playbook playbook-mozaic"
style={{ radius: "2px" }}
>
<div className="row d-flex px-3">
<div className="col-sm">
<img
className="w-100"
Expand All @@ -257,58 +165,6 @@ const Rounded = () => (
loading="lazy"
/>
</div>
<div className="col-sm">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-3.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-sm">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-4.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
</div>
</div>
<div className="container px-0 playbook d-sm-none">
<div className="row ratio-responsive-row d-flex justify-content-between mx-0">
<div className="col-12 px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-1.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-5 object-fit-cover px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-2.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-5 object-fit-cover px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-3.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
<div className="col-12 px-0">
<img
className="w-100"
src={`${basename}img/documentation/playbook/playbook-design-vision-rounded-mobile-4.png`}
alt="illustration swedbankpay playbook rounded"
loading="lazy"
/>
</div>
</div>
</div>
</section>
Expand Down Expand Up @@ -431,10 +287,9 @@ const DesignVision = () => (
contribute to a unified and standout product journey.
</p>
<VisionStatement />
<VisionBoard />
<Snapshot />
<ChunkyFriendly />
<BoldTypography />
<DelicateLines />
<Rounded />
<Colors />
</DocContainer>
Expand Down
Loading

0 comments on commit 17305ee

Please sign in to comment.