design-system

/hero --bg gradient {
  /vcenter --height 60vh {
    /text "Design Tokens" --bold
    --size 3rem --color white

    /text "that compose" --size 1.5rem
    --color white --italic
  }
}

Design Tokens that compose

Mix style, spacing, and syntax modules independently. Every combination works.

Back to Home

## Three Modules

/columns 3 --gap 1rem {
  /card --icon paintbrush {
    ### Style
    Colors, fonts, borders, shadows
  }
  /card --icon ruler {
    ### Spacing
    Margins, gaps, padding
  }
  /card --icon code {
    ### Syntax
    Code block highlighting
  }
}

Three Composable Modules

Polyester's design system splits theming into three independent modules. Each can be set separately via /page flags or CLI flags.

⭐

Style

Colors, fonts, borders, and shadows. Controls the visual identity of your document.

/page A4 --style corporate

⚡

Spacing

Margins, gaps, and padding density. Controls how tight or airy the layout feels.

/page A4 --spacing compact

🛡️

Syntax

Code block highlighting colors. Imported from terminal themes or set manually.

poly theme import ~/.Xresources

corporate style

{
  "colors": {
    "primary": "#1e40af",
    "background": "#ffffff",
    "text": "#1e293b"
  },
  "fonts": {
    "body": "Inter, sans-serif",
    "heading": "Inter, sans-serif",
    "mono": "JetBrains Mono, monospace"
  },
  "borders": {
    "radius": "0.25rem"
  }
}

Style Presets

Five built-in style presets. Each defines colors, fonts, borders, shadows, and hero gradient.

Preset	Primary	Background	Font	Character
`default`	`#3b82f6`	white	system-ui	Clean and neutral
`corporate`	`#1e40af`	white	Inter	Professional, tight borders
`minimal`	`#18181b`	white	system-ui	Near-black, no ornament
`playful`	`#8b5cf6`	`#fffbeb`	Nunito	Warm, rounded, vibrant
`dark`	`#60a5fa`	`#0f172a`	system-ui	Dark surfaces, blue accents

Visual preview:

default

corporate

minimal

playful

dark

## Spacing Presets

/table --header {
  Token | Compact | Default | Spacious
  base | 0.75rem | 1rem | 1.25rem
  page-margin | 1.5cm | 2cm | 3cm
  section-gap | 1rem | 2rem | 3rem
  column-gap | 1rem | 1.5rem | 2rem
  card-padding | 1rem | 1.5rem | 2rem
  block-padding | 0.75rem | 1rem | 1.5rem
}

Spacing Presets

Three built-in density levels. Each controls six spacing tokens.

Token	Compact	Default	Spacious
`base`	0.75rem	1rem	1.25rem
`page-margin`	1.5cm	2cm	3cm
`section-gap`	1rem	2rem	3rem
`column-gap`	1rem	1.5rem	2rem
`card-padding`	1rem	1.5rem	2rem
`block-padding`	0.75rem	1rem	1.5rem

Use compact for dense data documents, spacious for presentations and reports.

/page A4 --style playful --spacing compact

## Composing Themes

Mix any style with any spacing:

/code bash {
  poly build doc.poly
    --style corporate
    --spacing spacious
}

Composing Themes

Any style preset works with any spacing preset. Set them on /page or via CLI flags.

/page A4 --style playful --spacing compact

poly build doc.poly --style corporate --spacing spacious

Priority

CLI flags override /page flags, which override config defaults:

CLI --style / --spacing
  > /page --style / --spacing
  > ~/.config/polyester/config.toml
  > built-in defaults

Custom Modules

Save a JSON file to ~/.config/polyester/styles/ or ~/.config/polyester/spacing/ and reference it by name:

~/.config/polyester/styles/acme.json

{
  "colors": {
    "primary": "#e11d48",
    "background": "#fafafa",
    "text": "#1c1917"
  },
  "fonts": {
    "body": "Lora, serif"
  }
}

poly build report.poly --style acme

:root {
  --poly-color-primary: #3b82f6;
  --poly-color-bg: #ffffff;
  --poly-color-text: #1e293b;
  --poly-font-body: system-ui;
  --poly-radius: 0.5rem;
  --poly-spacing-base: 1rem;
  --poly-spacing-column-gap: 1.5rem;
}

CSS Variable Architecture

Every token maps to a --poly-* CSS custom property.

Style Variables

--poly-color-primary
--poly-color-primary-light
--poly-color-primary-dark
--poly-color-secondary
--poly-color-accent
--poly-color-bg
--poly-color-surface
--poly-color-text
--poly-color-text-muted
--poly-color-border
--poly-color-link
--poly-font-body
--poly-font-heading
--poly-font-mono
--poly-radius
--poly-border-width
--poly-shadow-card
--poly-hero-gradient

Spacing Variables

--poly-spacing-base
--poly-spacing-page-margin
--poly-spacing-section-gap
--poly-spacing-column-gap
--poly-spacing-card-padding
--poly-spacing-block-padding

Override any variable with /style:

/style {
  :root {
    --poly-color-primary: #e11d48;
  }
}

# List presets
poly style list
poly spacing list

# Build with presets
poly build doc.poly --style corporate
poly build doc.poly --spacing compact

# Combine freely
poly build doc.poly \
  --style playful \
  --spacing spacious \
  --format pdf

CLI Usage

# List available presets
poly style list
poly spacing list

# Apply presets
poly build doc.poly --style corporate --spacing compact

# Compose with format
poly build doc.poly --style playful --spacing spacious --format pdf

# Import terminal colorscheme as syntax theme
poly theme import ~/.config/kitty/kitty.conf --name kitty
poly theme list

Polyester Design System

Home CLI Reference Theme Studio MCP Server