Introduction

This site is the Company style guide — a living reference for colors, typography, spacing, components, and usage guidelines used across Company products.

What this project is

The Company Style Guide is built as plain HTML and CSS, not as screenshots or design files. Every swatch, button, and layout example you see here is rendered from the same styles that define the system. That makes this site the visual source of truth for designers and developers.

• Foundations — color, typography, spacing, shape, elevation, and related basics.
• Interactive controls — buttons, forms, inputs, and feedback patterns.
• Layout, navigation & overlays — panels, lists, navbar, dialogs.
• UX principles & standards — laws of UX, responsive design, accessibility.

Documentation standards

Every component page in this guide follows a shared structure so designers and developers can find answers quickly:

1. Lead — one-sentence definition
2. When to use / When not to use — decision guidance
3. Anatomy — labeled parts and token references
4. Variants & states — light and dark previews where relevant
5. Accessibility — keyboard, ARIA, and contrast notes
6. Related components — links to overlapping patterns

Pages still being upgraded may not include every section yet. Button, Forms, Dialog, Dropdown, and Navbar are the current reference examples.

What you need

To preview the site locally on your computer, you need Node.js installed. Node.js includes npm (Node Package Manager), which downloads the small set of tools this project uses to run a local dev server.

You do not need to publish or deploy anything just to browse the guide on your machine.

What is npm?

npm is the standard package manager for JavaScript projects. Think of it as a tool that:

• Downloads project dependencies (libraries and build tools) into a node_modules folder.
• Runs predefined scripts from package.json — for example, starting the local preview server.

When someone shares a project like this one, they usually commit the source files but not node_modules. Running npm install once recreates that folder on your machine.

Install Node.js and npm

1. Download the LTS (Long Term Support) installer from nodejs.org.
2. Run the installer and accept the defaults (npm is included automatically).
3. Open a terminal:
   • Windows — PowerShell or Command Prompt
   • macOS — Terminal
4. Confirm installation:

node -v
npm -v

Each command should print a version number (for example v22.x.x and 10.x.x). If you see “command not found”, close and reopen the terminal after installing Node.

Run the style guide locally

From the project folder (where package.json lives):

1. Install dependencies (first time only)

npm install

This reads package.json and installs Vite, the tool used to serve and build the site.

2. Start the dev server

npm run dev

The terminal prints a local URL, usually http://localhost:5173. Open that address in your browser. The page reloads automatically when you edit HTML or CSS files.

3. Stop the server

In the same terminal window, press Ctrl + C.

Other npm scripts

Command	What it does
npm run dev	Start local preview with hot reload (use this day to day).
npm run build	Generate a static dist/ folder for production hosting.
npm run preview	Serve the built dist/ output locally to test the production build.

Project layout (quick reference)

Folder / file	Purpose
foundations/, components/, guidelines/	Style guide pages
styles/	Shared CSS for the site shell and components
tokens/	Design values (colors, spacing, etc.) used by the CSS
scripts/layout.js	Sidebar navigation and theme toggle
index.html	Home page with links to all sections

Next steps

Use the sidebar or go to the home page to browse foundations and components. Toggle light and dark theme from the header on any page.