Encode your artistic style into reusable design tokens. Extract colors, typography, spacing, and visual patterns from reference images, mood boards, or existing work. Generate consistent style profiles for Remotion, web, video, and social media projects.
Turn your creative vision into a reusable design system. Stylesheet helps you document, extract, and operationalize your unique aesthetic so every project stays on-brand.
Start by identifying your visual identity:
stylesheet define-foundation
--name "My Brand"
--colors reference-colors.png
--typography reference-typography.png
--mood-board mood-board/*.png
--palette-count 5-7
--output foundation.json
What it extracts:
Output: foundation.json
{
"name": "My Brand",
"colors": {
"primary": "#FF6B6B",
"secondary": "#4ECDC4",
"neutral": "#F7F7F7",
"accent": "#FFE66D",
"dark": "#2C3E50"
},
"typography": {
"primary": "Inter Bold",
"secondary": "Helvetica Neue",
"accent": "Georgia"
},
"spacing": {
"base": 8,
"scale": [8, 16, 24, 32, 48, 64]
},
"tone": {
"contrast": "high",
"saturation": "vibrant",
"brightness": "mid-high"
}
}
Convert your foundation into a multi-format style system:
stylesheet generate-profile
--foundation foundation.json
--formats css,tailwind,json,figma
--output-dir ./style-system
Generates:
CSS Variables (style-system/colors.css)
:root {
--color-primary: #FF6B6B;
--color-secondary: #4ECDC4;
--color-neutral: #F7F7F7;
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--font-primary: 'Inter Bold', sans-serif;
}
Tailwind Config (style-system/tailwind.config.js)
module.exports = {
theme: {
colors: {
primary: '#FF6B6B',
secondary: '#4ECDC4',
neutral: '#F7F7F7'
},
spacing: {
xs: '8px',
sm: '16px',
md: '24px'
}
}
}
Design Tokens (style-system/tokens.json)
Machine-readable format for code generation.
Use your stylesheet in motion graphics:
import { colors, typography, spacing } from './style-system/tokens.json';
const MyVideo = () => {
return (
<Composition
id="hero"
component={HeroScene}
width={1920}
height={1080}
fps={30}
duration={300}
defaultProps={{
backgroundColor: colors.primary,
fontFamily: typography.primary,
padding: spacing.md
}}
/>
);
};
Use your stylesheet in React/web projects:
import './style-system/colors.css';
export const Button = ({ children }) => (
<button style={{
backgroundColor: 'var(--color-primary)',
fontFamily: 'var(--font-primary)',
padding: 'var(--spacing-sm)'
}}>
{children}
</button>
);
Or with Tailwind:
export const Card = () => (
<div className="bg-primary text-neutral p-md">
Your content
</div>
);
Analyze your past projects to extract consistent patterns:
stylesheet analyze-work
--projects ./past-work/*.png
--sample-size 20
--output patterns.json
Discovers:
Output: Recommendations for your official style foundation.
Keep your style system versioned:
stylesheet publish
--style-system ./style-system
--version 1.0.0
--format agent-skill
--output coltonbatts/stylesheet-v1
Generates a skill that others can install:
npx skills add coltonbatts/stylesheet-v1
Now anyone working with you can load your exact colors, typography, and spacing.
Extract foundational design from references.
stylesheet define-foundation \
--name "Brand Name" \
--colors colors.png \
--typography fonts.png \
--mood-board mood/ \
--palette-count 7 \
--output foundation.json
Options:
--name — Brand or project name--colors — Reference image with color palette--typography — Reference image with font samples--mood-board — Directory of mood board images--palette-count — Number of colors to extract (3–12, default: 7)--output — Output file pathCreate multi-format style system from foundation.
stylesheet generate-profile \
--foundation foundation.json \
--formats css,tailwind,json,figma \
--output-dir ./styles \
--semantic-names
Options:
--foundation — foundation.json file--formats — Output formats: css, tailwind, json, figma, react--output-dir — Directory to save outputs--semantic-names — Use semantic names (primary, secondary) vs. literal namesStudy your past work to extract patterns.
stylesheet analyze-work \
--projects ./portfolio/*.{jpg,png} \
--sample-size 50 \
--output patterns.json
Options:
--projects — Glob pattern for project files--sample-size — Number of samples to analyze--output — Output analysis fileApply a style profile to a project.
stylesheet apply \
--profile foundation.json \
--to remotion|web|figma \
--output ./applied-styles
Options:
--profile — foundation.json or tokens.json--to — Target platform (remotion, web, figma, css)--output — Where to save applied stylesPackage your style system as a reusable skill.
stylesheet publish \
--style-system ./styles \
--version 1.0.0 \
--format agent-skill \
--repo your-github-username/stylesheet-v1
Options:
--style-system — Style system directory--version — Version number (semver)--format — Output format (agent-skill, npm, figma-plugin)--repo — GitHub repo for publishing# Extract from your photography style
stylesheet define-foundation \
--name "Colton Batts" \
--colors warm-tones.jpg \
--mood-board portfolio/best-work/*.jpg \
--palette-count 5 \
--output colton-brand.json
# Generate outputs
stylesheet generate-profile \
--foundation colton-brand.json \
--formats css,json \
--output-dir ./brand-system
Now your brand colors, spacing, and typography are codified and reusable.
# Build from reference work
stylesheet define-foundation \
--name "Motion Toolkit" \
--colors motion-reference.png \
--typography type-samples.png \
--palette-count 7
# Generate for Remotion
stylesheet generate-profile \
--foundation motion-toolkit.json \
--formats json \
--output-dir ./remotion-tokens
# Use in your Remotion project
# → Import from remotion-tokens/tokens.json
# Publish your style as a skill
stylesheet publish \
--style-system ./my-brand-system \
--version 1.0.0 \
--format agent-skill
# Team members can now install it
npx skills add coltonbatts/stylesheet-brand
Best for web projects. Produces:
colors.css — Color palettetypography.css — Font definitionsspacing.css — Spacing scaleindex.css — Combined stylesheetFor Tailwind CSS projects. Produces:
tailwind.config.js — Theme configurationtailwind.css — Ready to importFor code generation. Produces:
tokens.json — Structured design tokenstokens.ts — TypeScript typesconstants.js — JavaScript constantsFor Figma plugin integration. Produces:
figma-tokens.json — Figma plugin formatFor React projects. Produces:
useTheme.ts — Theme hookstyled-components.js — Styled-components themecontext.jsx — Theme context providerDon't try to extract everything at once. Begin with:
Expand from there.
Use your most distinctive, successful projects as references. Your style is most clear in work you're proud of.
Generate outputs and test them on a real project (Remotion, web, etc.) before publishing.
As your style evolves, increment versions:
1.0.0 — Initial release1.1.0 — Added accent colors2.0.0 — Complete redesignAdd a README.md to your style system explaining:
Works great with:
portfolio-showcase — Apply stylesheet to your portfolioremotion skills — Use tokens in motion graphicsfrontend-design — CSS variables + design patternsskill-creator — Package your style as a skillQ: Colors don't look right when extracted
A: Try adjusting --palette-count or providing clearer color references. Solid color swatches work better than photos.
Q: Typography isn't being detected
A: Provide a reference image with clear, large text samples. Use --typography fonts.png where fonts are clearly visible.
Q: Tailwind config not working
A: Ensure you're using the output at style-system/tailwind.config.js in your Tailwind setup.
stylesheet define-foundationstylesheet generate-profileYour style is unique. Encode it. Reuse it. Share it.