Skip to main content

Typography Scale

Font: DM Sans (Google Fonts). Headings H2–H4, lead paragraph (class: lead text-xl), body paragraph with bold/italic/link marks, unordered list, ordered list, and blockquote. All rendered inside a bard_text block on color_scheme: light.

Heading Level 2

Heading Level 3

Heading Level 4

Lead paragraph — This is the lead style, used for introductory text beneath a heading. It renders at a larger size to create visual hierarchy.

Body paragraph — Greenview Consulting is a multi-discipline engineering practice delivering coordinated structural, civil, mechanical, electrical, hydraulics, fire protection, ESD and BIM. This sentence shows bold text, italic text, and a hyperlink.

  • Unordered list item one — structural engineering

  • Unordered list item two — civil engineering

  • Unordered list item three — mechanical engineering

  1. Ordered list item one

  2. Ordered list item two

  3. Ordered list item three

Blockquote — "Coordinated engineering across disciplines, delivered as one team in one model." This is what makes Greenview different.


Colour Schemes

All blocks support a color_scheme field. Available values: light · mid · dark · brand · secondary. The five blocks below demonstrate each scheme applied to the same bard_text content. Primary brand: #d41c24. Secondary: #62101e. Verify that text, headings, and links remain legible in each scheme.


color_scheme: light

The default light scheme. Used for most content sections. Body text, headings, and links should render with appropriate contrast against the white/near-white background. This is the baseline — all other schemes are variations from here.


color_scheme: mid

A subtle tinted background for visual separation between sections. Text remains dark. Ideal for supporting content blocks that need visual distinction without the weight of a dark scheme.


color_scheme: dark

White text on a dark background. Buttons and links should invert appropriately. Good for impact sections and feature callouts. Use sparingly to avoid overwhelming the reader.


color_scheme: brand

Full brand red (#d41c24) background. Use sparingly for high-impact moments such as stats sections or major CTAs. All text, buttons and icons must remain legible — white text only.


color_scheme: secondary

Deep wine/dark red (#62101e) background. Used for hero sections and high-contrast feature areas. Heavier than brand, suitable for full-width hero backgrounds.


Button Styles

All button variants rendered via the inline button set (type: button). Styles: primary · secondary · outline · accent_outline · ghost. Sizes: sm · md · lg. Alignment: left · center · right. Width: normal · wide · full. Check hover states, focus rings, and that the wide/full options expand correctly.