> For the complete documentation index, see [llms.txt](https://optifi.gitbook.io/optifi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://optifi.gitbook.io/optifi/optifi-community/designer-guideline.md).

# Designer Guideline

## Fonts

We use the **SF UI Display** font in all contents with the proper capitalization being “**OptiFi**”. Please remember to capitalize "O" and "F".

![Headline - SF UI Display Bold](/files/iz9EPmcywlzE9NMMKsa5)

![Normal Content - SF UI Display Medium](/files/PhUDqqeB7Ctsm5NONRs1)

![Emphasize Content - SF UI Display Heavy](/files/PiFNBHYU0H1b390ywPZA)

## Solid Logos

With Background

<img src="/files/NgaxAESNLl0KrXyMQ6KB" alt="" data-size="original">

Without Background

![](/files/hZDUBE7ba28S08pY7pal)

## Inline Logos

With Background

![](/files/WEQVwLOc7YeCnHSvNuoH)

![](/files/T2N2awsAW3j45n8FHDAL)

Without Background

![](/files/JkpbK9vPwijSRIT0qFvl)

![](/files/OdLVn5SbZzb453qF22Ch)

## Colors

![](/files/Zeoq88HYDSFaHlcxAkPg)