Content Blocks
Gutenberg content blocks — lists, tables, blockquotes, separators, and accordions — receive naluma design system styling through component-level tokens. These tokens ensure that authored content maintains the warm dusk brand identity without requiring manual styling in the editor. Each element references semantic and primitive tokens, keeping the content layer consistent with the interactive component layer (buttons, inputs, cards).
Unordered lists use thick disc bullets in burnt sienna, giving them visual warmth and on-brand character. Ordered lists use semibold numbers in the primary action color. Both share the same item spacing and indentation rhythm. Nested unordered lists shift to circle markers in a muted tone to create hierarchy without competing with top-level items.
Token file: tokens/component/list.json
Unordered list
- Sound therapy helps many tinnitus patients by masking the perceived ringing
- Cognitive behavioral therapy addresses the emotional response to tinnitus
- Acceptance-based approaches
- Attention redirection techniques
- Progressive relaxation reduces the stress-tinnitus feedback loop
Ordered list
- Find a quiet, comfortable space where you won't be disturbed
- Put on your headphones and select a sound therapy track
- Start with 10 minutes and gradually increase the duration
Key tokens
Section titled “Key tokens”| Token | Value | Purpose |
|---|---|---|
--component-list-unordered-marker-color | accent.sienna → #D17456 | Bullet color |
--component-list-ordered-number-color | action.primary → #A55838 | Number color |
--component-list-item-spacing | 8px | Vertical gap between items |
--component-list-padding-left | 24px | Left indent |
--component-list-nested-indent | 24px | Additional indent for nested lists |
Tables use a warm-gold header border and pale-wheat striped alternating rows for improved scanability. Cell padding balances data density with readability. The stripe background uses the surface-warm color at 25% opacity.
Token file: tokens/component/table.json
Data table with striped rows
| Treatment | Evidence Level | Typical Duration |
|---|---|---|
| Sound therapy | Strong | 3–6 months |
| Cognitive behavioral therapy | Strong | 8–12 weeks |
| Tinnitus retraining therapy | Moderate | 12–18 months |
| Dietary supplements | Weak | Varies |
Key tokens
Section titled “Key tokens”| Token | Value | Purpose |
|---|---|---|
--component-table-header-border-color | border.default → #F2C087 | Header bottom border |
--component-table-header-border-width | 2px | Thicker header border |
--component-table-row-stripe-background | surface.warm → #F9DFAE | Alternating row tint (at 25% opacity) |
--component-table-cell-padding-y | 10px | Vertical cell padding |
--component-table-cell-padding-x | 16px | Horizontal cell padding |
Blockquote
Section titled “Blockquote”Blockquotes use a 4px left border accent in burnt sienna with the existing quote typography style (20px italic). Citations appear in secondary text color at body-sm size. The left border provides a clear visual anchor without overwhelming the quoted text.
Token file: tokens/component/blockquote.json
Blockquote with citation
"Tinnitus is not a disease but a symptom — understanding this distinction changes everything about how we approach treatment."
— Dr. Maria Schwarz, Audiology Research Institute
Blockquote without citation
"The brain's ability to habituate to constant stimuli is one of the most powerful tools we have in managing tinnitus. Most patients see meaningful improvement within months."
Key tokens
Section titled “Key tokens”| Token | Value | Purpose |
|---|---|---|
--component-blockquote-border-color | accent.sienna → #D17456 | Left accent border |
--component-blockquote-border-width | 4px | Border thickness |
--component-blockquote-quote-font-size | 20px | Quote text size |
--component-blockquote-citation-color | text.secondary → #7A6560 | Citation text |
Separator
Section titled “Separator”The separator renders as a centered warm-gold line at 60% width with generous vertical margins (32px) for breathing room between content sections. The understated treatment provides visual rhythm without drawing attention.
Token file: tokens/component/separator.json
Separator / horizontal rule
...end of previous section
Start of next section...
Key tokens
Section titled “Key tokens”| Token | Value | Purpose |
|---|---|---|
--component-separator-color | accent.warm → #F2C087 | Line color |
--component-separator-height | 2px | Line thickness |
--component-separator-width | 60% | Centered width |
--component-separator-margin-y | 32px | Vertical spacing |
Details / Accordion
Section titled “Details / Accordion”The accordion uses bordered containers with warm-gold borders and rounded corners. Summary text appears in the primary action color with a Lucide chevron-down icon that rotates 180° on open. Content areas use a white background separated by a top border. Stacked items maintain consistent spacing.
Token file: tokens/component/details.json
Accordion / FAQ
What is tinnitus habituation?
Habituation is the brain's natural ability to filter out constant, non-threatening stimuli. Over time, many people with tinnitus find that their brain learns to deprioritize the tinnitus signal, making it less noticeable and less distressing in daily life.
How long does habituation take?
For most people, meaningful habituation occurs within 6 to 18 months of consistent sound therapy and behavioral techniques. The timeline varies based on individual factors including stress levels, hearing loss severity, and engagement with treatment.
Can sound therapy speed up habituation?
Yes — sound therapy provides the auditory input that helps the brain reclassify tinnitus as background noise. Combined with cognitive techniques, it can significantly accelerate the habituation process compared to passive waiting.
Key tokens
Section titled “Key tokens”| Token | Value | Purpose |
|---|---|---|
--component-details-border-color | border.default → #F2C087 | Container border |
--component-details-border-radius | 8px | Rounded corners |
--component-details-summary-text-color | action.primary → #A55838 | Summary text |
--component-details-summary-background | surface.primary → #FBFAF1 | Summary background |
--component-details-content-background | surface.card → #FFFFFF | Content area |
--component-details-toggle-transition | 150ms | Chevron rotation speed |
Related
Section titled “Related”See also: Callouts, FAQ Block, Source List — editorial content blocks for callout emphasis, Rank Math FAQ schema, and academic source citations.