··Free preset - all 24 free

Sprout-inspired - Friendly SaaS - rounded, green & teal

Same AniStyl engine, completely different system. Generated from tokens, typography, components and layout - MIT licensed output. Open in the builder and make it yours.

AniStyl’s own interpretation, built from publicly visible brand cues. Not the Sproutdesign system, and not affiliated with or endorsed by Sprout.

Design preview

Live rendered from generated tokens - not an image. These are real components with your brand applied.

Grow together

Invite your whole team - free for the first ten seats.

Nice one 3 teammates joined this week.

Tokens

Palette
primary #256b43secondary #1f6f6bwhiteblackgray-lightgray
Semantics: success #238b4e · warning #ba7908 · danger #c11f1f · info #1f6feb
Spacing & layout
Space scale 15 → 17px · Container 1600px · Grid 12 cols
Breakpoints: sm 320px · md 768px · lg 1024px · xl 1280px
Radius: rounded · Shadows: normal · Motion: normal

Typography

Heading: DM Sans (700 · none)Body: DM Sans (400)Mono: 'SF Mono', Menlo, Consolas, monospace
Scale 1.125 → 1.2 · Base 15 → 16px · Line heights: tight 1.2, normal 1.4, relaxed 1.6
H1 HeadingDM Sans
H2 HeadingDM Sans
H3 HeadingDM Sans

Components

46 components in 6 groups - ship only what you need. This preset uses the full library.

ButtonsLinksBadgeChip / tag Keyboard keyIcons (Lucide set)Avatar Divider / separatorSpacerInputs & fields (switch, checkbox…)Joined inputs File upload / dropzone Search bar Calendar / date picker CardProse / article + 30 more
Sample
Card
Component rendered with this system’s tokens.
Forms
BadgeTag

Dark mode

Every system ships a dark theme generated from the same palette. Toggle data-theme="dark" on <html>.

Grow together

Invite your whole team - free for the first ten seats.

Nice one 3 teammates joined this week.

Dark variant inverts neutrals and lifts the primary for contrast on dark surfaces.

Code preview

CSS variables
:root {
 --my-colour-primary: #256b43;
 --my-colour-secondary: #1f6f6b;
 --my-font-heading: DM Sans;
 --my-font-body: DM Sans;
 --my-radius: rounded;
}
tokens.json (excerpt)
{
  "colors": {
    "primary": {
      "default": "#256b43"
    },
    "secondary": {
      "default": "#1f6f6b"
    },
    "neutral": {
      "white": "#ffffff",
      "black": "#101010",
      "gray-light": "#f5f5f5",
      "gray": "#999999",
      "gray-dark": "#404040",
      "border": "#d5d5d5"
    }
  },
  "typography": {
    "headingFont": {
      "source": "google",
      "family": "DM Sans",
      "fallback": "sans-serif"
    },
    "bodyFont": {
      "source": "google",
      "family": "DM Sans",
      "fallback": "sans-serif"
    },
    "headingWeight": 700,
    "typeScale": [
      1.125,
      1.2
    ]
  },
  "layout": {
    "screenMin": 320,
    "screenMax": 1280,
    "containerMax": 1600,
    "breakpoints": {
      "sm": 320,
      "md": 768,
      "lg": 1024,
      "xl": 1280
    },
    "radius": "rounded",
    "gridColumns": 12
  },
  "effects": {
    "shadows": "norma…

Create your own

Start from this Sprout-inspired preset or build from scratch - your brand in, a bespoke system out. All 24 presets free, MIT licensed.

Open in builder (free)Create yours - Free
Free preset - download instantly, all 24 free

← Back to all 24 examples · Open this system in builder