# Styleguide link

[Zuri Master Guide](https://www.figma.com/file/srHjZ2Ztg7yOS7XDJMMX4m/Zuri-Chat-Master-Board?node-id=19%3A19322) - For typography, color palette, iconography, imagery, buttons, forms and spacing.

[FE Quality Control Docs](https://docs.google.com/document/d/1Sbq-ZC4O5477cx5cRuZKReVsdglABg7c585NAoZTHIU/edit) - For guidelines on how to contributeto the frontend.

# Styling in Zuri Main

To avoid style clashes use css modules when styling in Zuri Main
for example

```ts
// IS NOT VALID UNLESS REFERENCING A STYLE MADE AVAILABLE IN THE GLOBAL STYLESHEET
const TestComponent = () => {
  return <div style={`testComponentDiv`}></div>;
};
export default TestComponent;
```

```ts
// IS VALID
import style from "./styles.module.css";

const TestComponent = () => {
  return <div style={`${style.testComponentDiv}`}></div>;
};
export default TestComponent;
```