Accordion: what should always look the same, and what should be adjustable?

[lifeiscontent]

Hi @bhaveshraja, I'm tightening up the accordion in our component kit and want to get the defaults right from you.

For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?

1. The arrow on the right of each row. Today it's a small downward chevron in our muted grey that spins around when a section opens. Should every accordion use that same arrow, at that size and color, opening the same way? Or could some use a different marker (like a plus/minus) or none at all?

2. The text inside an open section. Right now it's 14px in our secondary (muted) text color. Is that always the look for accordion content, or should it change based on what gets placed inside?

3. The padding around that content. Same everywhere, or adjustable per use?

4. The row layout. The title sits on the left and the arrow on the far right. Is that the arrangement you always want?

Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!

[bhaveshraja]

Based on the Figma design system:

Always the same

• Chevron/caret icon position (right-aligned in header) and rotation direction on expand
• Expand/collapse animation duration and easing curve
• Border/separator between accordion items
• Header content padding and minimum height
• Focus ring style and keyboard behavior (Enter/Space to toggle, arrow keys between items)
• Content area padding (consistent with header alignment)

Depends (adjustable)

• Header content (text, icons, badges)
• Body/panel content
• Whether multiple panels can be open simultaneously
• Default open/closed state per item
• Disabled state per item
• Border radius on outer container
• Size variant (if applicable)