Praxis Notes ABA-Inspired Design System

A calming, professional design system specifically created for ABA practitioners, featuring a pastel color palette, minimalist approach, and visual elements that reflect data collection, progress tracking, and positive reinforcement concepts.

ABA-Inspired

Visual elements that reflect data collection, progress tracking, and positive reinforcement concepts from Applied Behavior Analysis.

Pastel Color Palette

Soft, calming colors that create a soothing workspace for professionals who deal with intensive documentation.

Minimalist Approach

Clean interfaces with reduced visual noise to minimize cognitive load for busy practitioners.

ABA-Inspired Pastel Color Palette

Primary Colors

Soft Blue

#A8D8EA

Primary actions, buttons, links

Lavender

#CDB4DB

Secondary elements, highlights

Mint Green

#BEFFC7

Success states, progress indicators

Peach

#FFD6BA

Warnings, notifications

Light Pink

#FFACC7

Error states, critical information

Neutral Colors (Light Mode)

Ivory

#FFFDF9

Background

Soft Gray

#F3F3F3

Cards, containers

Medium Gray

#CDCDCD

Borders, dividers

Charcoal

#333333

Text, icons

Dark Mode Colors

Deep Navy

#1A2238

Background (dark mode)

Steel Blue

#394867

Cards, containers

Soft Lavender

#9BA4B4

Borders, dividers

Off White

#F1F6F9

Text, icons

Gradients

Primary Gradient

Secondary Gradient

Soft Gradient

Dark Gradient

Typography

Heading 1 (6XL)

Heading 2 (5XL)

Heading 3 (4XL)

Heading 4 (3XL)

Heading 5 (2XL)
Heading 6 (XL)

Base paragraph text (16px). The Praxis Notes platform offers comprehensive tools for ABA professionals to document and analyze client behaviors using a calming pastel design.

Small text (14px). Used for secondary information and form labels.

Extra small text (12px). Typically used for footnotes and small labels.

Shadows & Elevation

SM

MD

LG

XL

2XL

Active Card

Buttons

Primary Button
Secondary Button
Success Button
Warning Button
Error Button
Outline Button
Ghost Button

Button Sizes

Small
Default
Large
Extra Large

Badges

Primary
Secondary
Success
Warning
Error
Outline

Cards

Basic Card

A simple card for displaying content.

Interactive Card

Hover over me to see the shadow effect.

Feature Card

Used for highlighting important features.

Gradient Card

A card with a subtle gradient background.

Pastel-Themed Cards

Soft Blue Card

For primary data or important information.

Lavender Card

For secondary data or supporting information.

Mint Card

For progress tracking or positive reinforcement.

Peach Card

For warnings or important notifications.

Forms

Grid Layouts

Two Columns

Column 1
Column 2

Three Columns

Column 1
Column 2
Column 3

Four Columns

Column 1
Column 2
Column 3
Column 4