Vasto Civil Website Design
Style Guide
Typography Styles
Heading 1
Used for Heading on Hero Section
Heading 2
Used for Section Overline
Heading 3
Used for Image Captions and Text Block Headers.
Heading 4
Used for image captions and Extended Text Block Headers.
Heading 6
Used for Eyebrow Text.
Paragraph 1
Used for Primary Content and Long-Form Text. Descriptive Accents: Helvetia Bold, optimized for small titles and descriptions.
Paragraph 2
Used for Secondary Content and long-form text. Descriptive Accents: Helvetica Bold, optimized for small titles and descriptions.
Paragraph 3
Used for secondary content and long-form text especially to create Visual Depth and Lower Hierarchy to Paragraph 2.
Color Palette
Primary 1 (Red)
Used for CTA buttons, and primary emphasis.
Supportive (Light Gray)
Applied to container backgrounds and secondary UI accents
Supportive (Dark Gray)
Used for sub-text, secondary information, and supportive elements.
Base (White)
Standard default colors for the overall interface and layout.
Base (Black)
Standard default colors for the overall interface and layout.