# SantyCSS — LLM System Prompt Reference > Paste this into Claude / ChatGPT / Cursor to make AI generate SantyCSS instead of Tailwind. --- ## What is SantyCSS? SantyCSS is a plain-English utility-first CSS framework. Classes read like English sentences. No build step required (optional build for customization) — just link `santy.css` and use the classes directly. Install: `npm install santycss` CDN: `` --- ## Core Naming Conventions | Pattern | Example | Meaning | |---|---|---| | `add-{prop}-{n}` | `add-padding-24` | Additive: border, padding, margin, shadow | | `make-{val}` | `make-flex`, `make-circle` | Display / behaviour | | `set-{prop}-{val}` | `set-text-24`, `set-width-320` | Dimension / size setter | | `pin-{side}-{n}` | `pin-top-0`, `pin-center` | Absolute / fixed positioning | | `{state}:{class}` | `on-hover:scale-110`, `md:grid-cols-3` | State / responsive prefix | --- ## Layout ``` make-flex flex-row flex-column flex-wrap make-grid make-block make-inline make-hidden align-center align-start align-end align-stretch justify-center justify-between justify-around justify-end grid-cols-1 … grid-cols-12 gap-{n} gap-x-{n} gap-y-{n} (n = 0–200) ``` ## Spacing (n = 0–200px) ``` add-padding-{n} add-padding-x-{n} add-padding-y-{n} add-padding-top-{n} add-padding-bottom-{n} add-padding-left-{n} add-padding-right-{n} add-margin-{n} add-margin-x-{n} add-margin-y-{n} add-margin-top-{n} add-margin-bottom-{n} add-margin-left-{n} add-margin-right-{n} ``` ## Sizing ``` set-width-{n} set-height-{n} set-min-width-{n} set-max-width-{n} set-width-full set-width-screen set-height-screen set-height-full set-text-{n} (8–144px) ``` ## Colors — 20 families × 10 shades (50–950) Families: `blue red green yellow purple pink orange gray indigo cyan teal rose violet emerald amber lime sky slate zinc neutral stone` ``` color-{name}-{shade} /* text color */ background-{name}-{shade} /* bg color */ border-color-{name}-{shade} /* border color */ color-white color-black background-white background-transparent ``` ## Borders ``` add-border-{n} /* all sides, n = 1–8 */ add-border-top-{n} add-border-bottom-{n} add-border-left-{n} add-border-right-{n} border-color-{name}-{shade} round-corners-{n} /* border-radius, n = 0–48 */ make-circle make-pill ``` ## Shadows ``` add-shadow-sm add-shadow-md add-shadow-lg add-shadow-xl add-shadow-none ring-offset-1 ring-offset-2 ring-offset-4 ``` ## Typography ``` text-bold text-semibold text-medium text-light text-thin text-normal text-italic text-underline text-strikethrough text-no-decoration text-center text-left text-right text-justify text-uppercase text-lowercase text-capitalize line-height-tight line-height-normal line-height-relaxed line-height-loose letter-space-tight letter-space-normal letter-space-wide ``` ## Positioning ``` position-relative position-absolute position-fixed position-sticky pin-top-{n} pin-bottom-{n} pin-left-{n} pin-right-{n} pin-center z-0 z-10 z-20 z-30 z-40 z-50 z-100 z-auto ``` ## Object / Aspect Ratio ``` object-fit-cover object-fit-contain object-fit-fill object-fit-none object-position-center object-position-top object-position-bottom aspect-ratio-16-9 aspect-ratio-1-1 aspect-ratio-4-3 aspect-square aspect-video ``` ## Overflow / Display ``` overflow-hidden overflow-auto overflow-x-auto overflow-y-auto overflow-scroll cursor-pointer cursor-default cursor-not-allowed cursor-wait cursor-grab pointer-events-none pointer-events-auto user-select-none user-select-text ``` ## Transitions & Transforms ``` transition-all transition-colors transition-opacity transition-transform scale-90 scale-95 scale-100 scale-105 scale-110 scale-125 scale-150 rotate-45 rotate-90 rotate-180 rotate-270 translate-x-{n} translate-y-{n} opacity-0 opacity-25 opacity-50 opacity-75 opacity-100 ``` ## State Variants ``` on-hover:{class} on-focus:{class} on-active:{class} dark:{class} group-hover:{class} peer-hover:{class} peer-checked:{class} on-visited:{class} has-checked:{class} has-focus:{class} has-invalid:{class} (parent :has() — v2.7.0) has-hover:{class} has-disabled:{class} group-has-checked:{class} ``` ## Responsive Breakpoints ``` sm:{class} (640px+) md:{class} (768px+) lg:{class} (1024px+) xl:{class} (1280px+) on-mobile:{class} (max 767px) on-tablet:{class} (768–1023px) on-desktop:{class} (1024px+) ``` ## Animations ``` animate-fade-in animate-fade-out animate-slide-up animate-slide-down animate-slide-left animate-slide-right animate-zoom-in animate-zoom-out animate-bounce animate-spin animate-pulse animate-flip-in-x animate-flip-in-y animate-bounce-in-down animate-bounce-in-up animate-rotate-in animate-swing animate-heartbeat animate-shake animate-wobble animate-jello ``` ## Gradients & Color Stops ``` gradient-to-right gradient-to-left gradient-to-bottom gradient-to-top gradient-to-br gradient-to-bl gradient-to-tr gradient-to-tl from-{color}-{shade} /* sets --grad-from */ to-{color}-{shade} /* sets --grad-to */ ``` ## CSS Design Tokens (override to brand the whole UI) ```css :root { --santy-primary: #3b82f6; --santy-secondary: #8b5cf6; --santy-accent: #10b981; --santy-radius: 0.5rem; --santy-font: 'Inter', system-ui, sans-serif; } ``` ## Components ``` .btn .btn-primary .btn-secondary .btn-outline .btn-ghost .btn-danger .btn-sm .btn-lg .card .card-header .card-body .card-footer .badge .badge-primary .badge-success .badge-warning .badge-danger .alert .alert-success .alert-warning .alert-danger .alert-info .input .input-error .avatar .avatar-sm .avatar-lg .avatar-xl .spinner .spinner-sm .spinner-lg .skeleton .progress .progress-bar .navbar .navbar-brand .navbar-link .dropdown .dropdown-menu .dropdown-item .modal .modal-header .modal-body .modal-footer .accordion .accordion-item .accordion-header .accordion-body .table .table-striped .table-bordered .tooltip .tooltip-top .tooltip-bottom .tooltip-left .tooltip-right .drawer .drawer-panel .steps .step .step-dot .step-label .pagination .page-link .page-item .notification .notification-success .notification-warning .notification-danger .toast .toast-container .toast-success/error/warning/info .toast-close .switch .switch-slider .switch-sm .switch-lg .checkbox .radio (custom-styled inputs) .range .range-sm .range-lg .carousel .carousel-item .carousel-dots .carousel-dot .dialog .dialog-header .dialog-body .dialog-footer (native