Panel
Background/container panel for grouping widgets or creating visual areas. Adds depth and organization to your faceplate layout.
Overview
| Property | Value |
|---|---|
| Type | Layout |
| Interaction | None (container only) |
| Styles | 3 styles available |
| Best For | Grouping, depth, sections |
Styles
Flat
Flat colored background without 3D effects. Clean, modern look.
Raised
3D raised appearance that lifts off the faceplate. Creates visual hierarchy.
Inset
3D sunken appearance that recesses into the faceplate. Good for display areas.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | color | - | Panel fill color |
borderRadius | number | 8 | Corner roundness (pixels) |
borderWidth | number | 0 | Border thickness |
When to Use Panels
✅ Use panels for:
- Grouping related controls visually
- Creating depth in your layout
- Highlighting important sections
- Separating different functional areas
❌ Don’t overuse panels:
- Too many panels = cluttered
- Consider using proximity instead
- Section might be better for labeled groups
Panel vs Section
| Feature | Panel | Section |
|---|---|---|
| Fill | Solid background | No fill (outline only) |
| Label | None | Has title label |
| Best for | Visual depth | Named groups |
| Style | Modern | Traditional |
Use Panel for visual depth without labels. Use Section when you need a title for the group.
Tips
Creating Depth
Use panels to create visual layers:
- Background faceplate (base)
- Panel for control area (mid)
- Controls on top (front)
Subtle is Better
Panel colors should be subtle:
- Slightly lighter or darker than faceplate
- Low contrast for elegance
- High contrast only for emphasis
Rounded Corners
Round corners (borderRadius) for modern feel:
- 0 = Sharp corners (retro/technical)
- 4-8 = Subtle rounding (professional)
- 12-16 = Soft rounding (friendly)
Inset for Displays
Use Inset style for:
- Visualizer backgrounds
- Value display areas
- Input sections
The recessed look suggests “this displays information.”
Raised for Controls
Use Raised style for:
- Control group areas
- Important sections
- Interactive regions
The raised look suggests “this is interactive.”
Example Configurations
Control Group Background
style: raised
backgroundColor: slightly lighter than faceplate
borderRadius: 8
borderWidth: 0
Visualizer Container
style: inset
backgroundColor: dark
borderRadius: 4
borderWidth: 1
Subtle Section
style: flat
backgroundColor: 5% lighter
borderRadius: 6
borderWidth: 0
Layout Tips
Padding
Leave padding inside panels:
- At least 1 grid unit from panel edge to controls
- Controls shouldn’t touch panel borders
Alignment
Align panels to the grid:
- Integer or half-integer positions
- Consistent margins from faceplate edges
Nesting
You can nest panels, but sparingly:
- One level of nesting is usually enough
- More nesting = more visual complexity
Color Guidelines
| Panel Purpose | Color Approach |
|---|---|
| Control group | Slightly lighter than faceplate |
| Display area | Darker than faceplate |
| Emphasis | Noticeably different |
| Subtle depth | Barely different |
Combining with Other Widgets
Panels work well with:
- Labels for section headers
- Visualizers in inset panels
- Groups of Knobs or Sliders