This is the design system reference for Vantage Circle blog posts. Every HTML element and custom component used in our blog content is showcased below.
Typography
Body text is rendered at 18px (1.125rem) with Lato font and a line-height of 1.8. It should feel clean, spacious, and easy to read.
This is a second paragraph to show spacing rhythm between consecutive paragraphs. Good vertical rhythm helps readers scan content effortlessly.
Heading Level 3 — Section Title
H3 is used for sub-sections within an article. Rendered at 1.375rem with font-weight 600 in Space Cadet Blue.
Heading Level 4 — Sub-section Title
H4 is used for deeper content hierarchy within H3 sections.
Inline Elements
Links
Inline links look like this linked text in Pumpkin Orange and on hover they darken slightly.
Bold & Strong
You can use bold text with strong tags. It renders at font-weight 700 in Space Cadet Blue. Use it to draw attention to key phrases.
Italic & Emphasis
Use emphasis for italic text. Often used for quotes, citations, or foreign terms within paragraphs.
Mark / Highlight
The mark element highlights text with a light orange background. Used for calling attention to key phrases.
Inline Code
Use inline code for technical terms, variable names, or short code snippets like #29294C.
Combined Inline Elements
A paragraph with bold text, italic text, a link, highlighted text, and inline code all together to test how they interact.
Lists
Unordered List
- Employee recognition programs boost morale and retention
- Rewards and recognition improve team collaboration
- Peer-to-peer recognition creates a culture of appreciation
- Data-driven engagement surveys reveal actionable insights
Ordered List
- Define your engagement program objectives
- Choose recognition types that match your culture
- Set up tracking and reporting infrastructure
- Launch with clear communication and incentives
- Measure outcomes and iterate quarterly
List with Links & Formatting
- Employee recognition programs — comprehensive guide
- Peer recognition is the most impactful starting point
- Programs with gamification see 40% higher engagement
- Consider mental health alongside physical wellness goals
Images
Standard Image
Images render with 12px border-radius and auto margins.
Image with Figure & Caption
Embeds (iframe)
YouTube Embed
Spotify Embed (Podcast)
Tables
Standard Table
| Feature | Basic Plan | Pro Plan | Enterprise |
|---|---|---|---|
| Recognition | Yes | Yes | Yes |
| Rewards | No | Yes | Yes |
| Surveys | No | Yes | Yes |
| Analytics | Basic | Advanced | Custom |
Blockquotes
Standard Blockquote
A recognized employee is an engaged employee. Recognition programs are not just a benefit — they are a strategic business investment that pays dividends in engagement, retention, and performance.
Special Blocks (Callouts)
These are custom HTML components used inside Ghost posts. They need CSS styling.
Tip
Start with a simple peer-to-peer recognition program. Companies that implement peer recognition see 35% lower voluntary turnover.
Note
According to Gallup, only 1 in 3 workers strongly agree that they received recognition in the last seven days.
Important
Employee engagement data is sensitive. Handle survey responses confidentially and aggregate results before sharing with leadership.
Warning
Implementing recognition programs without proper budget allocation and leadership buy-in often leads to program failure within the first year.
Questions
Want to learn how Vantage Circle can help transform your workplace culture? Reach out to our team for a free consultation.
Did You Know
Companies with active recognition programs report 31% lower voluntary turnover and 21% higher productivity.
Key Takeaways
KEY TAKEAWAYS
- Employee recognition reduces turnover by up to 31%
- Engaged employees are 21% more productive
- Peer-to-peer recognition is 35% more impactful than manager-only recognition
- ROI on engagement programs is typically 3:1 within 18 months
CTA Elements
CTA Banner (Dark)
Buttons
Horizontal Rule
Content above the rule.
Content below the rule. The horizontal rule creates a thematic break using Ghost White (#EEEEF6).
Color Palette
Space Cadet
Primary #29294C
Pumpkin Orange
Accent #FF6D05
Ghost White
Background #EEEEF6
Lavender Web
Padding #CDCDE4
Body Text
#343437
Author Bio
The author bio section renders automatically below every post via the AuthorBio.astro component. It pulls data from content/authors/{slug}.md (name, bio, avatar, LinkedIn). See it rendered below this post.
This article is written by Anjan Pathak. CTO and Co-Founder at Vantage Circle. He is passionate about building technology that improves the workplace experience for millions of employees around the world.
Connect with Anjan on LinkedIn.
