# Initial Setup and Configuration

## **For the Web App:**

1. **Account Creation:** After creating your account outlined on the previous page, click on the [Open Web App](https://coreframework.com/app) at the top right to access to the web app.
2. **Create a new project:** Next, you will have the option to create a new project. Start by entering a name for your project and then click 'Create'.
3. **Core Framework:** Once you have created your project, you will now be directed to the main interface of Core Framework. All projects will be set up with the standard, baseline setup. You can now navigate the sections of Core Framework and have a look around to familiarize yourself with the different sections such as Colors, Typography, Spacing, etc.
4. **Preferences:** We recommend navigating to the [⚙️ preferences section](/navigating-the-ui/preferences.md) to familiarize yourself with the options available in this tab to help you set up your main configuration. This section contains some important values that will dictate both the way your website will look and how Core Framework will function.
5. **Exporting CSS:** Once you have the desired setup in Core Framework, you can click on the Preview CSS button and then download your generated CSS from here. Alternatively, you can copy the full CSS or the minified version to use on your websites.

## **For the WordPress Plugin:**

1. **Plugin Installation:** After downloading and activating the Core Framework plugin, you can now access Core Framework right from your WordPress dashboard.
2. **Plugin Setup:** Configure the plugin settings to align with your site’s design needs from the preferences section. Please see the [⚙️ preferences section](/navigating-the-ui/preferences.md) below for more information on the preferences fields.
3. **Testing:** Ensure everything is functioning correctly by previewing changes on your site's front end.
4. **Builder:** If you are using a page builder such as Oxygen Builder or Bricks Builder, then you will find our section on [Builder Integrations](/builder-integrations/overview.md) useful.

## Onboarding

When opening Core Framework for the first time, you will be presented with our simple onboarding screen. There are 2 steps for the web app, and 3 steps for the WordPress plugin (this includes an option for enabling addons).

### Step 1

<figure><img src="/files/NSmvlYn15u81I9SuJtcH" alt=""><figcaption><p>Here is the onboarding screen which you will be presented with when first opening Core Framework.</p></figcaption></figure>

#### Core Framework: Full experience

This option will import everything you need regarding colors, typography and spacing, and will generate both utility classes as well as variables.

{% hint style="info" %}
This option is recommended when using Core Framework UI kits!
{% endhint %}

#### Variables Only: Minimalistic

This option will streamline the outputted CSS as it will generate variables only for the default Core Framework setup. This includes colors, typography and spacing and radii.

#### Empty: Create your own

This option will give you an empty setup but will still import a default typography and spacing setup which includes both utility classes and variables.

### Step 2

<figure><img src="/files/99WI4zj0s4rnf2Yzz40s" alt=""><figcaption><p>This second step is available on the plugin version of Core Framework</p></figcaption></figure>

On the second step, you will be presented with the options to add license keys for any builder addons that you have purchased. Simply enter the license key in the relevant field and click the check mark!

### Step 3 (Step 2 on Web App)

<figure><img src="/files/H9xvv8jS9Q4RxcUlvFgV" alt=""><figcaption><p>Choose your basic preferences</p></figcaption></figure>

Regardless of which option you choose in step one, the final step will offer 2 more options for your basic preferences:

#### Root font size

This allows you to choose your root font size (options of 100% and 62.5%).

#### Dark mode

With dark mode toggled on, this will set up Core Framework with the necessary color options so that you can choose both your light and dark mode colors where necessary.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.coreframework.com/getting-started/initial-setup-and-configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.