Section

Labeled group frame with outline but no fill. Creates visual grouping with a title identifying the section’s purpose.

Overview

Property	Value
Type	Layout
Interaction	None (container only)
Styles	3 styles available
Best For	Named control groups

Styles

Flat

Simple outline without 3D effects. Clean, modern look.

Raised

Raised border effect for subtle depth.

Inset

Inset border effect for recessed appearance.

Properties

Property	Type	Default	Description
label	string	-	Section title text
labelPosition	string	top-left	top-left, top-center, top-right
strokeWidth	number	1	Border line thickness
cornerRadius	number	6	Corner roundness

When to Use Sections

✅ Use sections for:

• Grouping controls by function (EQ, Dynamics, etc.)
• Complex plugins with multiple control groups
• When explicit labeling helps usability
• Traditional plugin layouts

❌ Don’t overuse sections:

• Simple plugins don’t need them
• Too many sections feels like a settings panel
• Consider proximity grouping instead

Section vs Panel

Feature	Section	Panel
Fill	None (outline only)	Solid fill
Label	Has title	No label
Style	Traditional	Modern
Best for	Named groups	Visual depth

Use Section when you need a labeled group. Use Panel when you want depth without labels.

Tips

Label Guidelines

Keep section labels short:

• One word is ideal
• ALL CAPS for consistency
• Describes the function

Good labels:

• DYNAMICS
• EQ
• OUTPUT
• FILTER
• MOD

Avoid:

• “Dynamics Section”
• “EQ Controls”
• “Output Settings”

Spacing Inside Sections

Leave room inside sections:

• Top: 1.5 grid units (for label)
• Sides: 1 grid unit minimum
• Bottom: 1 grid unit minimum

Controls should never touch section borders.

Label Position

Position	Best For
top-left	Default, most readable
top-center	Centered layouts
top-right	Right-aligned layouts

Don’t Overdo It

Too many sections makes your plugin look like:

• A settings dialog
• An options panel
• Software, not audio gear

Consider proximity instead - related controls placed close together naturally group without explicit borders.

Alternative: Implicit Grouping

Instead of sections, try:

• Proximity: Place related controls close together
• Color: Use subtle color differences
• Size: Make section “headers” larger knobs
• Spacing: Use gaps to separate groups

This creates a more modern, less “form-like” appearance.

Example Configurations

Dynamics Section

label: "DYNAMICS"
labelPosition: top-left
strokeWidth: 1
cornerRadius: 6

EQ Section

label: "EQ"
labelPosition: top-center
strokeWidth: 1
cornerRadius: 8

Output Section

label: "OUTPUT"
labelPosition: top-left
strokeWidth: 1
cornerRadius: 4

Layout Tips

Minimum Size

Sections need enough space:

• Width: At least 4 grid units
• Height: At least 4 grid units (including label space)

Alignment

Align section borders to the grid:

• Full grid unit positions
• Consistent margins between sections

Nesting

Avoid nesting sections:

• Sections inside sections = confusing
• Use panels inside sections if needed

Common Section Patterns

Channel Strip

[INPUT] → [EQ] → [DYNAMICS] → [OUTPUT]

Each stage in its own section.

Effect Plugin

[MAIN CONTROLS]    [MODULATION]
[VISUALIZER/METER]

Primary controls, secondary controls, display.

Multi-Band

[LOW] [MID] [HIGH]

One section per frequency band.