Modify the PDF Designs to align with Developed PDF

[lbeatonn]

Overview

We need to modify the PDF to align more closely with what was developed and also it needs to adhere to the design system.

Action Items

• [x] Ensure that the blue color used is in the design system
• [x] Remove the grey background and increase the weight of the text on the grey background to bold (grey background is not feasible for dev)

Resources:

FIGMA LINK

[ancyjoy7]

Initial design - gray background

This is the initial design with the gray background for the headers. The developed pdf used a light blue color instead of the gray background, and we needed to update the design to match it.

Details

Iteration based dev version

This is the first iteration with the design matched to the dev version of the summary page pdf.

Details

Newest Iteration

In the meeting before the break, we discussed how the light blue color may read in grayscale (as most people might print them out in B&W) and better ways to increase readability, like using horizontal lines for headers.

Over the break, I worked on the new iterations with the goal of better readability, fixed the alignment, added horizontal lines to headers and created black and white versions of the new iteration.

Color version

Grayscale version

What's different in the latest iteration from the dev version?

Headers

• Addition of horizontal lines under the headers.
• Changed the headers' color from Cyan Blue (#43739D) to Dark Blue (#00122B) for better readability when the pdf is printed in black and white.

Alignment and spacing

• Aligned elements to a 12 column grid with a margin of 96px and a gutter of 24px. The details columns on the right is now aligned to the grid. In the results section, moved the numbers to the right to decrease busyness and improve consistency.
• Introduced consistent spacing between sections and info lines so that the info most related to each other appear as one group (proximity).
• Spacings After header: 24px Between lines: 16px Between sections: 56px Indent: 24px

[Parisajf]

@ancyjoy7 Would you clarify the last changed, what parts are exactly changed:

Updated the alignment and spacing between elements.

[ancyjoy7]

@Parisajf I have updated the comment with clarification on spacing and alignment.