Typography Formatted - festa-marketing-website

Extended Heading Scale (H4-H6)

Complete the heading hierarchy with H4, H5, and H6 for complex document structures, subsections, and minor headings.

Heading 4 - Section Subheadings

Used for major subsections within H3 sections. Common in documentation, articles with deep hierarchies, and legal documents.

Size & Line Height

24px (1.5rem) / Line height 1.5

Font Weight

Bold (700)

<h4 class="text-h4 font-bold text-pepper-green-700">
    Section Subheading
</h4>

Heading 5 - Subsection Titles

Used for minor subsections, definition lists, and nested content within H4 sections.

Size & Line Height

20px (1.25rem) / Line height 1.5

Font Weight

Semi-bold (600)

<h5 class="text-h5 font-semibold text-pepper-green-600">
    Subsection Title
</h5>

Heading 6 - Minor Section Headers

Used for the smallest headings in complex hierarchies. Often used in technical documentation, legal disclaimers, and deeply nested content.

Size & Line Height

18px (1.125rem) / Line height 1.6

Font Weight

Medium (500)

<h6 class="text-h6 font-medium text-the-end-700">
    Minor Section Header
</h6>

Complete Heading Hierarchy Example

H3: Main Section Title

Introduction to the main section with supporting text.

H4: Primary Subsection

Details about this subsection.

H5: Secondary Subsection

More specific information here.

H6: Tertiary Subsection

Highly specific detail or note.

Blockquotes & Citations

Quote styling for testimonials, citations, and highlighted text. Supports both standard quotes and rich testimonial formats.

Standard Blockquote

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

<blockquote class="border-l-4 border-pepper-green-500 pl-4 italic text-body-lg text-the-end-700">
    "Quote text here."
    <footer class="text-body-sm text-the-end-600 mt-2 not-italic">
        — Author Name
    </footer>
</blockquote>

Testimonial Blockquote

"Festa transformed our project design process with trauma-informed principles that truly centered our community's needs."

JD

Jane Doe

Executive Director, NARA

<blockquote class="bg-white-smoke-100 p-6 rounded-lg border border-the-end-200">
    <p class="text-body text-the-end-700 mb-4">
        "Quote text here."
    </p>
    <footer class="flex items-center gap-3">
        <div class="w-12 h-12 rounded-full bg-pepper-green-200"></div>
        <div>
            <p class="font-semibold text-body text-the-end-900">Name</p>
            <p class="text-body-sm text-the-end-600">Title</p>
        </div>
    </footer>
</blockquote>

Code & Preformatted Text

Technical documentation styling for inline code snippets and code blocks. Uses monospace font with proper semantic markup.

Inline Code

Use the prefers-reduced-motion media query for accessibility. When implementing Tailwind classes, use motion-reduce:bg-white to respect user preferences.

<code class="bg-the-end-100 px-2 py-1 rounded text-body-sm font-mono text-chicken-comb-600">
    code snippet
</code>

Code Blocks

Multi-line code examples for component usage, configuration, and technical specifications:

<x-fds.button 
    variant="primary" 
    size="md"
    class="mt-4"
>
    Click Me
</x-fds.button>


<div x-data="{ open: false }">
    <button @click="open = !open" class="...">
        Toggle
    </button>
</div>

<pre class="bg-the-end-900 text-white-smoke-50 p-6 rounded-lg overflow-x-auto">
<code class="text-body-sm font-mono">
    Your code here
</code>
</pre>

Keyboard Input

Press Cmd + K to open search, or use Tab for keyboard navigation.

<kbd class="px-2 py-1 bg-white-smoke-200 border border-the-end-300 rounded text-body-sm font-mono shadow-sm">
    Cmd
</kbd>

Data Tables

Structured data presentation with proper semantic markup, responsive design, and accessibility features.

Standard Data Table

Color Palette	Hex Code (500)	Usage Context	Accessibility
Pepper Green	#72b043	Success states, positive actions	AA
Chicken Comb	#d92228	Primary brand, alerts, warnings	AA
Pot of Gold	#f8cc1b	Highlights, attention elements	AA

<div class="overflow-x-auto bg-white rounded-xl border border-the-end-200">
    <table class="min-w-full border-collapse">
        <thead class="bg-pepper-green-50">
            <tr>
                <th class="border border-the-end-200 px-4 py-3 text-left...">Header</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-the-end-200">
            <tr>
                <td class="border border-the-end-200 px-4 py-3...">Data</td>
            </tr>
        </tbody>
    </table>
</div>

Nested Lists

Complex hierarchical content with ordered, unordered, and mixed list patterns. Proper semantic nesting for screen readers.

Ordered Nested List

Primary Design Phase
1. Research & Discovery
2. Stakeholder Interviews
3. Competitive Analysis
Development Phase
1. Frontend Implementation
2. Backend Integration
Testing & Launch

<ol class="list-decimal list-outside ml-6 text-body text-the-end-700 space-y-3">
    <li>
        Primary item
        <ol class="list-decimal list-outside ml-6 mt-2 space-y-2">
            <li>Nested item</li>
        </ol>
    </li>
</ol>

Unordered Nested List

Accessibility Standards
- WCAG 2.2 Level AA
- Screen reader support
- Keyboard navigation
Design Principles
- Trauma-informed UX
- Inclusive design

<ul class="list-disc list-outside ml-4 text-body text-the-end-700 space-y-3">
    <li>
        Primary bullet
        <ul class="list-circle list-outside ml-6 mt-2 space-y-2">
            <li>Nested bullet</li>
        </ul>
    </li>
</ul>

Mixed Nested List (Ordered + Unordered)

Project Requirements:
1. WCAG 2.2 Level AA compliance
2. Color contrast ratio 4.5:1 minimum
3. Semantic HTML structure
Design Deliverables:
1. Component library
2. Documentation site
3. Accessibility audit including:
  - Keyboard navigation testing
  - Screen reader testing
  - Color contrast verification

Legal & Contract Document Styles

Specialized typography patterns for terms of service, privacy policies, legal agreements, and formal documentation.

1. Terms and Conditions

By accessing and using this website, you accept and agree to be bound by the terms and provisions of this agreement. In addition, when using particular services, you shall be subject to any posted guidelines or rules applicable to such services.

1.1 Use License

Permission is granted to temporarily download one copy of the materials (information or software) on Festa Design Studio's website for personal, non-commercial transitory viewing only.

1.1.1 Restrictions

Under this license you may not:

Modify or copy the materials
Use the materials for any commercial purpose or public display
Attempt to decompile or reverse engineer any software contained on the website
Remove any copyright or other proprietary notations from the materials

1.1.2 Termination

This license shall automatically terminate if you violate any of these restrictions and may be terminated by Festa Design Studio at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.

2. Definitions

For the purposes of this agreement, the following terms shall have the meanings set forth below:

"Services": Refers to all design services, consultation, and deliverables provided by Festa Design Studio, including but not limited to project design, communication design, and campaign design.
"Client": Refers to the individual, organization, or entity receiving services from Festa Design Studio under this agreement.
"Deliverables": Refers to all work products, documents, designs, and materials created by Festa Design Studio as part of the Services, including design files, documentation, and final assets.

Last updated: October 26, 2025. These terms and conditions are subject to change without notice. For questions regarding these terms, please contact legal@festa.design.


<section>
    <h3 class="text-h3 font-bold text-the-end-900 mb-4">
        1. Section Title
    </h3>
    <h4 class="text-h4 font-bold text-the-end-800 mb-3">
        1.1 Subsection
    </h4>
    <h5 class="text-h5 font-semibold text-the-end-700 mb-2">
        1.1.1 Minor Section
    </h5>
</section>


<dl class="space-y-4">
    <div>
        <dt class="font-semibold text-body text-the-end-900 mb-1">
            "Term"
        </dt>
        <dd class="ml-6 text-body text-the-end-700">
            Definition here.
        </dd>
    </div>
</dl>

Accessibility & Usage Guidelines

Key Accessibility Features

Semantic HTML: Proper use of h4-h6, blockquote, code, table, ol, ul, dl elements
Heading Hierarchy: Never skip heading levels (e.g., don't jump from H2 to H5)
Table Accessibility: Use thead, tbody, and scope attributes
List Semantics: Properly nest lists with correct parent-child relationships
Code Semantics: Use code for inline code and pre + code for code blocks
Keyboard Navigation: All interactive elements accessible via Tab key
Screen Reader Support: Semantic markup ensures proper document structure announcement

Usage Guidelines

When to use H4-H6: Complex documentation, legal documents, technical specifications, deeply nested content
When to use blockquotes: Testimonials, citations, pulled quotes, highlighted text
When to use code blocks: Technical documentation, API examples, configuration files, command-line instructions
When to use tables: Structured data comparison, pricing tables, feature matrices, specifications
When to use nested lists: Multi-level instructions, hierarchical categories, complex requirements
When to use legal styles: Terms of service, privacy policies, contracts, formal agreements

Best Practices

Maintain consistent spacing between elements (use Tailwind spacing utilities)
Use monospace fonts only for code and technical content
Provide sufficient line-height for readability (minimum 1.5 for body text)
Test table responsive behavior with horizontal scroll on mobile devices
Limit nested list depth to 3 levels maximum for cognitive accessibility
Use leading-relaxed class for legal document paragraphs

Trauma-Informed Typography Principles

Clear hierarchy: Predictable heading structure reduces cognitive load
Scannable content: Lists and tables allow users to process information at their own pace
Readable legal text: Avoid all-caps, use relaxed line-height for comprehension
Code clarity: Monospace fonts with good contrast reduce strain