[Architecture] Follow Design System Best Practices

## Feature Request

**Is your feature request related to a problem? Please describe.**

As we have growing support for designers in relation to XD and AEM (such as the core component UI kits) Core Components should align with best practices in the component design creation side. Designers use Design systems or Pattern libraries, which follow atomic design methodology, based around the same idea as core components, that elements can be broken down into small elements in a re-usable way.

The current core components use front-end code that does not follow this same approach. Currently, there are 4 different class naming structures for a button element:

Button component
```

```

Anchor button
```

```

Teaser component button
`Call To Action`

Download component button
```

Download
]
```

**Describe the solution you'd like**

Assess where reusable code can be applied so styling can have a global affect – in turn, creating reusable elements that follow design system best practices.

**Documentation**

- https://helpx.adobe.com/xd/help/design-systems.html
- https://xd.adobe.com/ideas/principles/design-systems/
- https://www.lynda.com/Adobe-XD-tutorials/Creating-Design-System-Adobe-XD/2816013-2.html

The issue names no files, tests, or entry points. Start by inventorying the button, teaser, and download markup shown in the request and compare their class naming and styling usage. Done would require an agreed reusable design-system approach and consistent application across the affected components.

Written by the indexing model from the issue text.