# 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](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2FBqB236mwBmOdItB2a2zW%2Fbold.png?alt=media\&token=652c5256-301f-4086-9f65-ba7956dc8741)

![Normal Content - SF UI Display Medium](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2FeDdwHxjcrqZqD1HfwDfX%2Fmedium.png?alt=media\&token=5a43561f-ab1e-41b8-a069-1575a5baa3a9)

![Emphasize Content - SF UI Display Heavy](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2FcBtz3kmhDr0s3K0Pog0c%2Fheavy.png?alt=media\&token=dffc629b-f0cc-4ab1-8875-4a5a9fb7dd61)

## Solid Logos

With Background

<img src="https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2FFd6REaRRwq2vfck6JNo4%2FMark%20With%20Background.png?alt=media&#x26;token=488f0f90-2b4a-411b-aa25-f1585f55c336" alt="" data-size="original">

Without Background

![](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2F407dZUd11dx3QyxHz2K8%2FMark%20with%20Transparent%20Background.png?alt=media\&token=c03d69e8-923b-4fcd-a5c4-f313b32eda43)

## Inline Logos

With Background

![](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2Feyg3lbN5A66nkPK6y8cW%2FOptiFi_LOGO_2.png?alt=media\&token=4419ae49-8a69-48b4-8339-4186b3d0ee6d)

![](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2FTp3guxCi1IZtBymmj5rt%2FOptiFi_LOGO_3.png?alt=media\&token=b7818184-5987-4811-b204-6b03100d4106)

Without Background

![](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2FbvGg3EwIfhS3WXoLSsCz%2FBlack%20Text%20Logo%20with%20Transparent%20Background.png?alt=media\&token=889ee8cc-e750-4d5d-89b6-b6f80e07b4f8)

![](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2F8lb4tMQKtmIuJesihigg%2FWhite%20Text%20Logo%20with%20Transparent%20Background.png?alt=media\&token=a93b87ed-42d5-4dc5-95c0-15f60612c211)

## Colors

![](https://1179375515-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHtSx0tled0WtDBZ2uaLl%2Fuploads%2F7nB5y3dxFyv4rdsWwYw3%2F%E6%88%AA%E5%9C%96%202022-04-29%20%E4%B8%8B%E5%8D%884.21.31.png?alt=media\&token=c5625d2a-b19c-4856-a6db-c5ce1198ded2)