AI Usage Guidelines · v1.0.0

Using AI with
Schoolasium DS

Prompt templates, usage rules, and workflows for generating design-system-consistent code with any AI coding assistant.

AI Workflow — 4 Steps

01

Ground the model

Paste the tokens.css or design-tokens.json into the context window before any component request. This gives the AI exact values.

Use the Resources page to download tokens.css, then share it as a file attachment.
02

Be specific with tokens

Name exact CSS variable tokens (--color-primary-500), sizes (rounded-xl), and spacing (p-6) in every prompt. Ambiguous prompts produce off-spec output.

Copy-paste token names directly from the Tokens page to avoid typos.
03

Specify accessibility requirements

Include WCAG requirements, keyboard behavior, ARIA roles, and touch target sizes explicitly. AI won't add them unless asked.

Use the Accessibility Checklist from Resources as a prompt appendix.
04

Review against the system

After generation, paste the output back and ask the AI to check it against the design system rules. List which tokens it used vs. hard-coded.

Ask: 'Audit this component for any hard-coded values that should use design tokens.'

Prompt Library

Component Generation
Generate consistent, token-aware components

Do's and Don'ts

Colors

Do
Reference --color-primary-500 or bg-primary-500
bg-[var(--color-primary-500)]
Specify contrast ratio when pairing new colors
/* 11:1 WCAG AAA */
Use semantic token names for meaning
text-[var(--color-error)]
Don't
Hard-code hex values in components
style={{ color: "#EAB308" }}
Use Tailwind color utilities directly
bg-yellow-500 ← wrong
Add drop shadows in dark mode
shadow-lg ← use glow-primary

Spacing

Do
Use 4px-base spacing tokens
p-4 (16px) gap-6 (24px)
Use space-6 (24px) for card padding
p-6 or padding: var(--space-6)
Use space-8 (32px) between sections
gap-8 or mt-8
Don't
Use arbitrary pixel values
style={{ margin: "17px" }}
Mix spacing scales (Tailwind + inline styles)
mt-4 style={{ paddingTop: 12 }}

Typography

Do
Use the named type scale tokens
text-heading-xl or text-body-md
Roboto for UI, Open Sans for docs
font-primary / font-secondary
Include letter-spacing on display text
tracking-tight on display-*
Don't
Use Inter, Space Grotesk, or Arial
font-family: 'Inter' ← wrong
Set line-height without a token
style={{ lineHeight: 1.4 }}

Motion

Do
Use --ease-out for all transitions
transition-[var(--ease-out)]
Use --ease-spring for playful snap moments
cubic-bezier(0.34,1.56,0.64,1)
Respect prefers-reduced-motion
@media (prefers-reduced-motion)
Don't
Use linear easing for UI state changes
transition: all 300ms linear
Animate for more than 900ms without reason
duration-[1200ms] ← too slow

Branding Restrictions

Never recolor the logo outside the brand palette
Never apply drop shadows to the Schoolasium logo
Never stretch or rotate the logo mark
Never place the logo on low-contrast yellow surfaces
Never combine the wordmark with a competing brand's typography
Never generate AI images using the Schoolasium name or logo without approval
When in doubt, ask. Send any AI-generated brand output to the design team for review before publishing.