Add colors and fonts to quickstart guide

quickstart.mdx

@@ -5,11 +5,11 @@
 
 This quickstart guide shows you how to set up and deploy your documentation site in minutes.
 
 After completing this guide, you will have a live documentation site ready to customize and expand.
 
 <Info>
 
 **Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding.
 
 </Info>
 
@@ -30,7 +30,7 @@
 
 Your site's URL is available immediately. Use this URL for testing and sharing with your team while you are setting up your docs site.
 
 ### Install the GitHub App
 
 Mintlify provides a GitHub App that automates deployment when you push changes to your repository.
 
@@ -54,11 +54,11 @@
 ### Authorize your GitHub account
 
 1. Navigate to **Settings** in your Mintlify dashboard.
 2. Select **My Profile** from the sidebar.
 3. Select **Authorize GitHub account**. This opens a new tab to the GitHub authorization page.
 
 <Info>
   An admin for your GitHub organization may need to authorize your account depending on your organization settings.
 </Info>
 
 ## Editing workflows
@@ -77,13 +77,13 @@
 
 The code-based workflow integrates with your existing development environment and Git repositories. This workflow is best for technical teams who want to manage documentation alongside code.
 
 ### Install the CLI
 
 <Info>
   **Prerequisite**: The CLI requires [Node.js](https://nodejs.org/en) v19 or higher.
 </Info>
 
 To work locally with your documentation, install the Command Line Interface (CLI), called [mint](https://www.npmjs.com/package/mint), by running this command in your terminal:
 
 <CodeGroup>
   ```bash npm
@@ -126,7 +126,7 @@
 mint dev
 ```
 
 Your preview will be available at `localhost:3000`.
 
 <Frame>
   <img src="/images/quickstart/mintlify-dev-light.png" alt="Mintlify Dev" className="block dark:hidden" />
@@ -139,7 +139,7 @@
 
 Mintlify automatically detects the changes, builds your documentation, and deploys the updates to your site. Monitor the deployment status in your GitHub repository commit history or the [dashboard](https://dashboard.mintlify.com).
 
 After the deployment completes, your latest update will be available at `<your-project-name>.mintlify.app`.
 
 <Card title="Jump to adding a custom domain" icon="arrow-down" href="#adding-a-custom-domain" horizontal>
   Optionally, skip the web editor workflow and jump to adding a custom domain.
@@ -147,7 +147,7 @@
 
 ## Web editor workflow
 
 The web editor workflow provides a what-you-see-is-what-you-get (WYSIWYG) interface for creating and editing documentation. This workflow is best for people who want to work in their web browser without additional local development tools.
 
 ### Access the web editor
 
@@ -155,7 +155,7 @@
 2. Select **Editor** on the left sidebar.
 
 <Info>
   If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor.
 </Info>
 
 <Frame>
@@ -165,11 +165,11 @@
 
 ### Edit the documentation
 
 In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page:
 
 Find and select `index.mdx` in the file explorer.
 
 Then, in the editor, update the title field to "Hello World".
 
 <Frame>
   <img alt="Editing in Web Editor" src="/images/quickstart/web-editor-editing-light.png" className="block dark:hidden" />
@@ -188,7 +188,7 @@
   Use branches to preview and review changes through pull requests before deploying to your live site.
 </Tip>
 
 For more details about using the web editor, including using branches and pull requests to collaborate and preview changes, see our [web editor documentation](/editor).
 
 ## Adding a custom domain
 
@@ -201,18 +201,73 @@
   <img src="/images/quickstart/custom-domain-dark.png" alt="Custom Domain" className="hidden dark:block" />
 </Frame>
 
 Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider.
 
 <Table>
 | Record Type | Name | Value | TTL |
 |-------------|------|-------|-----|
 | CNAME | docs (or subdomain) | cname.mintlify.app | 3600 |
 </Table>
 
 <Info>
   DNS changes can take up to 48 hours to propagate, though changes often complete much sooner.
 </Info>
 
+## Customizing colors and fonts
+
+After deploying your documentation, you can customize the appearance by setting colors and fonts in your `docs.json` file.
+
+### Setting colors
+
+Customize your documentation's color scheme by configuring the `colors` property in `docs.json`. You can set colors for light and dark modes:
+
+```json docs.json
+{
+  "colors": {
+    "primary": "#0D9373",
+    "light": "#07C983",
+    "dark": "#0D9373",
+    "background": {
+      "light": "#ffffff",
+      "dark": "#0f1117"
+    }
+  }
+}
+```
+
+The `primary` color is used for interactive elements like links and buttons. The `light` and `dark` values control the primary color in each mode, while `background` sets the page background colors.
+
+### Setting fonts
+
+Configure custom fonts using the `fonts` property in `docs.json`. You can use Google Fonts, local font files, or externally hosted fonts:
+
+```json docs.json
+{
+  "fonts": {
+    "family": "Inter"
+  }
+}
+```
+
+For separate heading and body fonts:
+
+```json docs.json
+{
+  "fonts": {
+    "heading": {
+      "family": "Playfair Display"
+    },
+    "body": {
+      "family": "Inter"
+    }
+  }
+}
+```
+
+After updating your `docs.json` file, push your changes to see them reflected on your live site.
+
+For more customization options, see the [themes documentation](/customize/themes) and [fonts documentation](/customize/fonts).
+
 ## Next steps
 
 Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation: