Design System Kitchen Sink

A live demonstration of the available colors, variables, styles, classes, and layouts defined in the Ploos.app stylesheet.

Design Tokens

Color Palette

These variables are declared under the :root selector in scss/_variables.scss. You can copy the variables directly.

Primary

--primary

Core brand color, used for primary elements and body text

#5a6061

Secondary

--secondary

Dark charcoal, used for titles, buttons, and navigation links

#404040

Tertiary

--tertiary

Medium gray, used for secondary text, labels, and metadata

#737373

Neutral

--neutral

Light neutral gray, used for sections and card backgrounds

#f5f5f5

White

--white

Pure white, used for cards and main tool content containers

#ffffff

Black

--black

Pure black

#000000

Light Gray

--light-gray

Off-white gray, used for preview panels and secondary cards

#f2f4f4

Gray

--gray

Border and advertisement background color

#e4e4e7

Dark Gray

--dark-gray

Button background hover / active state color

#5e5e5e

Background

--background

Main page body background color

#f9f9f9

Header Color

--header-color

Main heading typography color

#2d3435

Border Color

--border-color

Divider and input border color

#e4e4e7

Typography System

Standard elements like headings and paragraphs are styled globally in scss/_typography.scss. We also have specialized header classes.

Standard Headings

h1. Main Title (2.5rem / 40px)

h2. Section Title (2rem / 32px)

h3. Subtitle Heading (1.75rem / 28px)

h4. Item Heading (1.5rem / 24px)

h5. Small Heading (1.25rem / 20px)

h6. Subheading / Captions (1rem / 16px)

Special Classes

Class: .hero-title & .hero-description

Hero Title Styles

Hero description text is larger and tracked closely. Ideal for introductory headings on homepages.

Class: .header-title & .header-description

Subpage Header Title

This is the header description class, used for introduction lines on secondary layouts, forms, or directory views.

Class: .logo

LOGO.TEXT

Class: .breadcrumbs

Grid & Layout Columns

Defined in scss/_flexbox.scss, the system consists of a .container (max-width 80rem), .row wraps, and .col-1 to .col-12 classes, as well as automatic responsive flex grids.

Standard Grid (12-column based)

.col-12 (100% Width)

.col-6

.col-4 (33.3%)

.col-8 (66.6%)

.col-3

Auto-Columns Flex Container (e.g. .flex-3, .flex-4)

Adding the class .flex-N to a parent automatically splits all direct children into N equal widths, wrapping responsively.

<div className="flex-3">

Child 1

Child 2

Child 3

<div className="flex-4">

Child 1

Child 2

Child 3

Child 4

Buttons & Badges

Button Style

className="button"

Link buttonLink as Button

Badge Style

className="badge" (nested in latest-tool)New Release

Form & Input Fields

Inputs, textareas, labels, and select fields are styled cleanly inside card input panels.

Section Title: Text Inputs

Standard Text Input

Disabled Input

Section Title: Complex Fields

Textarea Box

Select Option Dropdown

Range Slider

Preview Panel Wrapper

.preview-panel area

Core Card Layouts

1. Tool Grid Card (.tool)

Standard square grid item with subtle transitions and shadow lift on hover.

Tool Card Name

A description detailing what the tool performs. Hover this card to see the motion.

Another Tool

High performance utility designed for digital craftsmen. Safe, secure, client-side execution.

Example Utility

Runs directly inside your browser cache. Zero server logs, maximum privacy, instant response.

2. Use Case & Features (.use-case)

Light gray boxes optimized for listings, bullet items, features, or quick tags.

Developer API Integration

Build custom triggers and connect tools directly to pipelines.

100% Offline Capable

Runs completely in your web browser. No network requests required.

Clean Vector SVG Output

Generate scalable resources optimized for React environments.

3. Dynamic Guide Steps (.steps)

An ordered list showing a vertical track line on the left.

Paste your raw SVG code or upload your local graphic file into the input panel.
Adjust configuration variables such as level of compression and removal of metadata.
Review the optimized file live in the preview pane and download your finalized code.

4. Related List (.related-tools)

5. Featured / Latest Tool Banner (.latest-tool)

Large horizontal banner combining imagery, badges, headings, descriptions, and call-to-actions.

tool placeholder — Featured Release
Ploos Vector Studio
A full-suite editor designed to construct, compile, clean, and export responsive graphics directly inside your client-side workspace.
Open Tool

Modals & Dialogs

Overlay and sliding container styles, using backdrop-filters to blur backgrounds. Includes CSS animations for modal fade-ins and sliding panels.

Click to see the backdrop-filter, modal-body, and entrance animations in action.