Stylesheet

What it extracts:

• Primary color palette (5–7 dominant colors)
• Color relationships (complementary, analogous, neutral)
• Typography system (primary, secondary, accent fonts)
• Spacing scale (base unit, multiples)
• Visual tone (contrast, saturation, brightness)

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"
  }
}

2. Generate Style Profile

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.

3. Apply to Remotion

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
      }}
    />
  );
};

4. Apply to Web

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>
);

5. Extract from Existing Work

Analyze your past projects to extract consistent patterns:

stylesheet analyze-work
  --projects ./past-work/*.png
  --sample-size 20
  --output patterns.json

Discovers:

• Your most-used colors (weighted by frequency)
• Typography choices across projects
• Spacing patterns
• Visual conventions

Output: Recommendations for your official style foundation.

6. Version and Share

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.

Commands Reference

define-foundation

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 path

generate-profile

Create 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 names

analyze-work

Study 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 file

apply

Apply 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 styles

publish

Package 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

Examples

Example 1: Photographer Building a Brand

# 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.

Example 2: Motion Designer Creating a Toolkit

# 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

Example 3: Sharing Your Style

# 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

Output Formats

CSS Variables

Best for web projects. Produces:

• colors.css — Color palette
• typography.css — Font definitions
• spacing.css — Spacing scale
• index.css — Combined stylesheet

Tailwind Config

For Tailwind CSS projects. Produces:

• tailwind.config.js — Theme configuration
• tailwind.css — Ready to import

Design Tokens (JSON)

For code generation. Produces:

• tokens.json — Structured design tokens
• tokens.ts — TypeScript types
• constants.js — JavaScript constants

Figma

For Figma plugin integration. Produces:

• figma-tokens.json — Figma plugin format
• Setup guide for importing

React

For React projects. Produces:

• useTheme.ts — Theme hook
• styled-components.js — Styled-components theme
• context.jsx — Theme context provider

Workflow Tips

Start Small

Don't try to extract everything at once. Begin with:

1. Color palette (5–7 colors)
2. Typography (2–3 fonts)
3. Spacing (single base unit, scale from it)

Expand from there.

Reference Your Best Work

Use your most distinctive, successful projects as references. Your style is most clear in work you're proud of.

Test Early

Generate outputs and test them on a real project (Remotion, web, etc.) before publishing.

Version Your Styles

As your style evolves, increment versions:

• 1.0.0 — Initial release
• 1.1.0 — Added accent colors
• 2.0.0 — Complete redesign

Document Your Choices

Add a README.md to your style system explaining:

• Inspiration behind color choices
• Typography philosophy
• Spacing rationale
• Usage guidelines

Integration with Other Skills

Works great with:

• portfolio-showcase — Apply stylesheet to your portfolio
• remotion skills — Use tokens in motion graphics
• frontend-design — CSS variables + design patterns
• skill-creator — Package your style as a skill

Troubleshooting

Q: 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.

Next Steps

1. Define your foundation — stylesheet define-foundation
2. Generate outputs — stylesheet generate-profile
3. Test in a project — Apply to Remotion, web, or design work
4. Iterate — Refine colors, typography, spacing
5. Share — Publish as a skill or style system

Your style is unique. Encode it. Reuse it. Share it.