Design System Test Page

This is the opening paragraph that demonstrates the drop cap styling feature. The first letter should appear larger with a gradient effect, creating an elegant editorial feel that draws readers into the content. This paragraph also shows the base typography settings including font size, line height, and letter spacing optimized for long-form reading.

Typography Hierarchy

The heading above is an h2, which serves as the primary section divider. It has a subtle bottom border and generous spacing to create clear visual separation between sections.

Third-Level Heading

H3 headings are slightly smaller and used for subsections within a major topic. They don't have the border treatment to maintain hierarchy.

Fourth-Level Heading

H4 headings are for minor divisions within subsections. They appear in a muted color to indicate their lower importance in the document structure.

Text Styling

Regular paragraph text uses the --text-secondary-dark color variable for comfortable reading on dark backgrounds. The line height is set to 1.8 for optimal readability in long-form content.

Bold text uses --text-primary-dark to create emphasis while maintaining the overall visual harmony. Italic text is used for emphasis or to denote titles of works.

You can also combine bold and italic for maximum emphasis, though this should be used sparingly.

Links

Links are styled with the accent primary color and feature an animated underline effect on hover. External links like GitHub work the same way.

The underline animation slides in from the left on hover, creating a subtle but engaging interaction that matches the site's premium feel.

Blockquotes

This is a blockquote demonstrating the glass morphism background and gradient left border. Blockquotes are perfect for highlighting important quotes, key takeaways, or summarizing complex information.

Multiple paragraphs within a blockquote are properly spaced and maintain the italic styling throughout.

Lists

Unordered Lists

Here's an unordered list with custom bullet styling:

• First item with the glowing accent-colored bullet
• Second item demonstrating consistent spacing
• Third item that spans multiple lines to show how the text wraps properly while maintaining the bullet alignment
• Fourth item for good measure

Ordered Lists

Numbered lists use the accent color for the numbers:

1. First step in a process
2. Second step with more detail
3. Third step that might be longer and wrap to multiple lines while keeping the number properly aligned
4. Fourth step to complete the sequence

Nested Lists

Lists can also be nested:

• Parent item one
  • Child item A
  • Child item B
• Parent item two
  • Child item C
  • Child item D
    • Grandchild item

Code

Inline Code

Use inline code for mentioning variables, functions(), or file-names.tsx within regular text. The inline code has a subtle accent background and border.

Code Blocks

Here's a JavaScript code block demonstrating syntax highlighting:

// This is a comment
function calculateReadTime(content) {
  const wordsPerMinute = 200
  const words = content.trim().split(/\s+/).length
  return Math.ceil(words / wordsPerMinute)
}

const result = calculateReadTime('Hello world')
console.log(`Read time: ${result} min`)

And a TypeScript example:

interface BlogPost {
  title: string
  publishedAt: string
  summary: string
  content: string
}

const formatDate = (date: string): string => {
  return new Date(date).toLocaleDateString('en-US', {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  })
}

Horizontal Rules

Use horizontal rules to create visual breaks between major sections:

The gradient line above provides a subtle but distinctive separator that matches the site's accent colors.

Tables

Tables are styled with the dark theme:

Images

Images receive rounded corners and a subtle shadow. On hover, they scale slightly and gain a glow effect:

Conclusion

This test page demonstrates all the typography and styling elements available in the blog design system. The combination of:

• Gradient accents for visual interest
• Glass morphism for modern depth
• Generous spacing for readability
• Smooth animations for polish
• Consistent theming for brand cohesion

Creates a premium editorial experience that matches the quality of the main LSRX landing page while being optimized for long-form reading.

Note: This is a test file. To disable it from appearing in the blog listing, rename it to _test.mdx or test.mdx.bak.