feat(docs): add icons, font, styling (#4423)

Author: chdeskur

fern/assets/BerkeleyMono-Regular.woff2

@@ -17,18 +17,23 @@ title: Fern
 tabs:
   home:
     display-name: Home
+    icon: fa-regular fa-home
     slug: home
   api-definition:
     display-name: API Definition
+    icon: fa-regular fa-book
     slug: api-definition
   docs:
     display-name: Docs
+    icon: fa-regular fa-browser
     slug: docs
   sdks:
     display-name: SDKs
+    icon: fa-brands fa-codepen
     slug: sdks
   cli-api:
     display-name: CLI & API Reference
+    icon: fa-regular fa-code
     slug: cli-api
 
 css: ./assets/styles.css
@@ -240,46 +245,60 @@ navigation:
       - section: Building Your Docs 
         contents: 
           - page: Navigation
+            icon: fa-regular fa-compass
             path: ./pages/docs/building-your-docs/navigation.mdx
           - page: Custom CSS & Global JS
+            icon: fa-regular fa-paintbrush
             path: ./pages/docs/building-your-docs/custom-css-js.mdx
           - page: Pull Request Preview
+            icon: fa-regular fa-file-magnifying-glass
             path: ./pages/docs/building-your-docs/pr-preview.mdx
           - page: Custom Domain
+            icon: fa-regular fa-globe-pointer
             path: ./pages/docs/building-your-docs/custom-domain.mdx
 
       - section: Writing Content
         slug: content
         contents:
           - page: Write Markdown content
+            icon: fa-regular fa-font
             path: ./pages/fern-docs/content/write-markdown.mdx
             slug: write-markdown
           - page: Frontmatter
+            icon: fa-regular fa-sliders
             path: ./pages/fern-docs/content/front-matter.mdx
           - page: Reusable snippets
+            icon: fa-regular fa-recycle
             path: ./pages/fern-docs/content/reusable-snippets.mdx
 
       - section: API References
         contents:
           - page: Generate API reference
+            icon: fa-regular fa-gear-code
             path: ./pages/fern-docs/content/generate-api-ref.mdx
             slug: generate-api-ref
           - page: SDK snippets
+            icon: fa-regular fa-message-code
             path: ./pages/fern-docs/config/sdk-snippets.mdx
           - page: Endpoint errors
+            icon: fa-regular fa-exclamation-triangle
             path: ./pages/fern-docs/config/endpoint-errors.mdx
           - page: Reorder API Reference pages
+            icon: fa-regular fa-arrow-up-arrow-down
             path: ./pages/fern-docs/content/reorder-api-ref.mdx
           - page: Write markdown in API Reference
+            icon: fa-regular fa-pencil
             path: ./pages/fern-docs/content/api-ref-content.mdx
 
       - section: Integrations
         slug: integrations
         contents: 
           - page: Overview
+            icon: fa-regular fa-link
             slug: overview
             path: ./pages/docs/integrations/overview.mdx         
           - section: Analytics
+            icon: fa-regular fa-chart-simple
             slug: analytics
             contents: 
               - page: PostHog
@@ -289,6 +308,7 @@ navigation:
               - page: Segment
                 path: ./pages/docs/integrations/analytics/segment.mdx                
           - section: Support
+            icon: fa-regular fa-headset
             slug: support
             contents: 
               - page: Intercom
@@ -302,14 +322,17 @@ navigation:
         contents: 
           - page: GitLab
             slug: gitlab
+            icon: fa-brands fa-gitlab
             path: ./pages/docs/developer-tools/gitlab.mdx
           - page: Vale
+            icon: fa-regular fa-list-check
             path: ./pages/docs/developer-tools/vale.mdx
 
       - section: Components
         slug: components
         contents:
-          - page: Overview 
+          - page: Overview
+            icon: fa-regular fa-toolbox
             path: ./pages/docs/components/overview.mdx
           - page: Accordions
             path: ./pages/docs/components/accordions.mdx
@@ -341,7 +364,7 @@ navigation:
             icon: "rectangle-code"
           - page: Steps
             path: ./pages/docs/components/steps.mdx
-            icon: "arrow-fa-regular fa-progress"
+            icon: "fa-solid fa-arrow-progress"
             slug: steps
           - page: Frames
             path: ./pages/docs/components/frames.mdx
@@ -390,6 +413,15 @@ navbar-links:
   - type: filled
     text: Book a demo
     url: https://buildwithfern.com/contact
+    
+typography:
+  bodyFont:
+    name: GT-Planar
+    path: ./assets/GT-Planar.woff2
+    weight: 400
+  headingsFont:
+    name: GT-Planar
+    path: ./assets/GT-Planar-Bold.woff2  
 
 logo:
   href: https://www.buildwithfern.com
@@ -405,6 +437,9 @@ colors:
   background:
     dark: "#081008"
     light: "#FBFFFA"
+  header-background: 
+    dark: "#081008"
+    light: "#FBFFFA"
 favicon: ./images/favicon.ico
 
 layout:

fern/assets/GT-Planar-Bold.woff2

@@ -5,12 +5,12 @@ description: The api.yml file contains general API configuration when using the
 
 A `fern/` folder has a special file called `api.yml`, which includes all the API-wide configuration.
 
-```yaml
+```bash {5}
 fern/
 ├─ fern.config.json
 ├─ generators.yml
 └─ definition/
-  ├─ api.yml # <---
+  ├─ api.yml
   ├─ pet.yml
   ├─ store.yml
   └─ user.yml
@@ -31,9 +31,9 @@ name: api
 You can define a top level API description. This description will come through in the OpenAPI spec and Postman collection.
 
 <CodeBlock title="api.yml">
-```yaml
+```yaml {2-4}
 name: api
-docs: |  # <---
+docs: | 
   ## Header
   This API provides access to...
 ```

fern/assets/GT-Planar.woff2

@@ -14,13 +14,13 @@ Availability can be:
 ## Endpoint 
 
 <CodeBlock title="pet.yml">
-```diff
+```yaml {6}
 service:
   base-path: /pet
   auth: true
   endpoints:
     add:
-+     availability: deprecated
+      availability: deprecated
       display-name: Add pet
       docs: Add a new Pet to the store
       method: POST
@@ -31,12 +31,15 @@ service:
 </CodeBlock>
 
 In Fern Docs, this will look like: 
+
+<Frame>
 ![Screenshot showing a deprecated tag next to an endpoint in API Reference docs](https://fern-image-hosting.s3.amazonaws.com/endpoint-deprecated.png)
+</Frame>
 
 ## Type
 
 <CodeBlock title="pet.yml">
-```diff
+```yaml {15}
   Pet:
     properties:
       id: 
@@ -51,7 +54,7 @@ In Fern Docs, this will look like:
         availability: generally-available
       category: 
         type: optional<Category>
-+       availability: pre-release
+        availability: pre-release
 
   Category:
     properties:
@@ -61,12 +64,15 @@ In Fern Docs, this will look like:
 </CodeBlock>
 
 In Fern Docs, this will look like: 
+
+<Frame>
 ![Screenshot showing a beta tag next to a type in API Reference docs](https://fern-image-hosting.s3.amazonaws.com/type-beta.png)
+</Frame>
 
 ## Property 
 
 <CodeBlock title="pet.yml">
-```diff
+```yaml {12}
   Pet:
     properties:
       id: 
@@ -78,10 +84,13 @@ In Fern Docs, this will look like:
       photoUrls: 
         type: list<string>
         docs: A list of publicly available URLs featuring the Pet
-+       availability: deprecated
+        availability: deprecated
       category: optional<Category>
 ```
 </CodeBlock>
 
 In Fern Docs, this will look like: 
+
+<Frame>
 ![Screenshot showing a deprecated tag next to a type's property in API Reference docs](https://fern-image-hosting.s3.amazonaws.com/property-deprecated.png)
+</Frame>

fern/docs.yml

@@ -26,7 +26,7 @@ $ fern register
 To add a dependency on another API, you must add a `dependencies.yml` to declare which 
 APIs you wish to depend on. 
 
-```yaml {4}
+```bash {4}
 fern/
 ├─ fern.config.json
 ├─ generators.yml
@@ -46,7 +46,7 @@ dependencies:
 Next, you need create a folder in your Fern Definition to house the dependency. Inside the folder, create a special file
 `__package__.yml` which specifies the dependency and version you want to add.
 
-```yaml {8-9}
+```bash {8-9}
 fern/
 ├─ fern.config.json
 ├─ generators.yml