The Basics

The Basics

Learn how to navigate the Sameness dashboard, create and manage pages, design with blocks, set up global styles, configure navigation, upload fonts, and adjust your project settings.

This section covers everything you need to build a polished, consistent brand guidelines system from scratch. For a visual walkthrough, check out our step-by-step video guides on YouTube.

Dashboard Overview

The Dashboard is where your brand system comes together. Everything you’ll use, Pages, Navigation, Fonts, and Settings starts here.

Pages

All your guideline content lives here. Create new pages, duplicate what you already have, delete what you don’t need, and control visibility (public, private, or password-protected). Every part of your brand starts from this tab.

Navigation

This defines how people move through your guidelines. Reorder, regroup, and structure your sidebar so it reads the way your brand thinks.

Fonts

Upload your own fonts (.OTF, .TTF, .WOFF). Once added, they become available in Global Styles and inside any text-based block. You choose where and how they’re used.

Settings

Update your project details: title, metadata, favicon, and social preview. This is also where advanced configuration lives.

Top-Right Controls quick access to:

1. Settings

2. Help & Support

3. Exit to WordPress

Sameness keeps things simple and familiar, so you can focus on building a clear, consistent brand system.

Managing Pages

Pages are the backbone of your brand guidelines. Each one represents a section and together, they form the structure of your entire system.

Creating a Page

Click Add Page, give it a name, and click 'add'. Your new page appears instantly in the list, ready to edit.

Each page comes with a set of simple, purposeful action controls:

1. Edit: open the page editor. This is where you design the actual content.

2. Settings: rename your page or set its visibility, private pages display a small lock icon when viewed live.

3. Duplicate: create an exact copy, ideal when you want consistent layouts across multiple sections.

4. Preview: open the page in a new browser tab so you can see how it looks outside the editor.

5. Delete: remove the page permanently.

You can create as many pages as your brand needs. Build a simple system or a deep, detailed one.

Page Editor

This is where Sameness really shines. From the Pages tab, click Edit to open the Page Editor.

You’ll see a clean, focused layout:

1. On the left: the Block Library and all customization controls

2. In the center: your Canvas, where your page comes to life

3. And on top: your Toolbar, with options for Global Styles, Preview, and Save

Adding blocks

Sameness is built entirely around blocks. Modular sections you can drag and drop to build your guideline visually.

1. To add one, just drag a block from the library and drop it onto the canvas.

2. As soon as you do, the left panel opens with all available inputs for that block: content fields, layout controls, padding, color options, and responsive settings.

3. Make your adjustments there, and you’ll see the updates reflected on the canvas instantly.

Each block also includes a small toolbar when you hover over it. You can move it up or down, duplicate it, delete it, or jump into its detailed settings.

Hit Save to store your progress.The Save button only appears when unsaved changes exist. When you’re done, click Preview to open the page in a new browser tab and see how it looks live.

Global Styles

Global Styles is where your brand’s visual system comes together. Set your typography, colors, and UI elements once and the entire guideline stays consistent.

How to Access Global Styles

You can open Global Styles in two ways:

1. From the Dashboard: Go to the Global Styles tab (the fourth tab), then click Set Up Global Styles.
   
   

2. From the Page Editor: In the top toolbar, click Global Styles to open it instantly while you’re designing.

Both entry points lead to the same workspace.

What You Can Customize

Type

1. Your full typography system lives here: headings, titles, subtitles, body text, captions, and labels.

2. Choose from your uploaded fonts, adjust size, weight, and spacing, and see the changes update instantly on the preview.

Colors

1. Add your brand palette in one place.

2. Every color you save appears inside the editor as Global Colors, so you can apply them quickly without retyping hex codes.

3. This keeps your brand palette consistent across all blocks and pages.

Elements

1. Control the look and feel of your interactive components: buttons, toggles, tabs, and tone sample blocks.

2. Define both default and active states, and watch updates reflect in real time.

Save Your System

Click Save when you’re done. Your brand styles become the foundation for every page you build consistent, flexible, and easy to maintain.

Navigation Setup

Your navigation is how people move through your brand guidelines. A clear, well-structured sidebar makes the whole system easier to explore.

To get started, go to the Navigation tab and click Set Up Navigation. You’ll see three views: Menu, Styling, and Responsive.

Menu

This is where you build the structure of your sidebar.

1. Click Add Link to insert a new item

2. Choose Page to link to an existing guideline page

3. Choose External to add an outside URL

4. Reorder, rename, or remove links at any time

This is the backbone of your brand system’s hierarchy.

Styling

Styling is split into three sub-tabs: Layout, Link, and Logo.

1. Layout: Control your sidebar’s spacing, padding, and background color.

2. Link: Customize link typography, hover and active states, and set the lock-icon color for private pages.

3. Logo: Upload your brand logo and adjust its size so it fits cleanly within your sidebar layout.

Responsive

Fine-tune how your navigation behaves on tablets and mobile. Adjust:

1. Menu background, height and gap

2. Logo scaling

3. Hamburger icon color

4. Open/close behavior previews

Everything updates live so you know exactly what users will see.

Save Your Changes

When your structure and styling are set, click Save. Your sidebar goes live and your brand guideline now feels complete, consistent, and easy to navigate.

Fonts

Upload your brand fonts once, and they’ll be available everywhere you design.

Uploading Fonts

1. Go to the Fonts tab in your dashboard.

2. You’ll see a clean list of all uploaded fonts, including file type and date added.

3. Click Upload Font, choose your .OTF, .TTF, or .WOFF file, give it a display name, and click Save.

4. Your font is added immediately.

Where Fonts Are Used

Your uploaded fonts become available across Sameness:

1. Global Styles — for setting your full typography system

2. Text-based blocks — when you want local, block-level control

Settings

Settings is where you take care of the essentials, the details that make your brand portal feel complete and ready to share.

Project Details

At the top, you’ll find your license information, the version you’re running and your activation status.

Below that, you can update your:

1. Project Name

2. Site Title

3. Meta Description

These control how your portal appears in browser tabs, previews, and search results.

Social Preview

Upload a Social Preview Image. The thumbnail used when your portal is shared on platforms like LinkedIn, Slack, or Facebook.

Recommended size: 1200 × 630 pixels.

This gives your brand system a polished first impression.

Favicon

Add your Favicon, the small icon shown beside your site title in browser tabs. A subtle detail, but it makes your portal feel finished.

Additional Options

You’ll also find a few optional settings to personalize small details like credits or Sameness badges. Turn them on or off, it’s entirely up to you.

Save Your Changes

Click Save when everything looks right. It’s the final step before your brand system is ready to share.