Non-Codebase Design System Implement

[bignamehere]

While going thru the process of building out email templates, it became a challenge to utilize the Design System "as an example". The current documentation is lacking specific information about size, color, dimensions, etc that should be utilized in external systems that do not utilize the fsa-style codebase and CSS. The Design System should needs to provide this guidance, and below are multiple options for consideration.

1. Documented Inline: All high-level details about size, spacing, color should be added as part of the documentation next to the item as it currently exists on the page. For example, the recommendation for external usage of a Button should indicate the margin, padding, color, corner radius, and typeface should be listed next to the Button Component Default example.

2. Documented Bottom Section of Page: All high-level details about size, spacing, color should be added as a new External Usage section at the bottom of the page for that item.

3. Documented Separately: A new External Usage page within the Guides section should be added that contains highly specific details related to usage. For example, GovDelivery allows for the use of Paragraphs, H1, H2, H3 for text, but that is all. The documentation should specify what these pixel sizes should be for email usage.

[bignamehere]

@francisrupert my first instinct is to have an External Usage section on each page at the bottom for topics that could potentially be needed.

Examples:

• Paragraph text
• H1 - H6 sizes in PX
• Text color
• Link color
• Margins & Padding - H1 - H6
• Margins & Padding - Container boxes
• Margins & Padding - Buttons
• Margins & Padding - Images