Back to Getting Started
Article Styling

Article Styling Templates

Customize the look and feel of your generated articles. Choose from pre-built templates or create your own custom styles.

Configure in Dashboard

Access the live style editor with real-time preview

Open Dashboard

Available Templates

Minimal Clean

Simple, readable layout with generous whitespace

CSS Code

css
/* Minimal Clean Theme */
.article {
  max-width: 680px;
  font-family: system-ui, -apple-system, sans-serif;
}
.article h1, .article h2, .article h3 {
  font-weight: 600;
  letter-spacing: -0.025em;
}
.article p {
  line-height: 1.8;
  color: #374151;
}
.article a {
  color: #2563eb;
  text-decoration: none;
}
.article a:hover {
  text-decoration: underline;
}

Creating Custom Styles

CSS Selectors

All article content is wrapped in a .prose class. Use these selectors to style different elements:

SelectorDescription
.proseMain article container
.prose h1Article title
.prose h2, .prose h3Section headings
.prose pParagraphs
.prose aLinks
.prose ul, .prose olLists
.prose blockquoteBlockquotes
.prose preCode blocks
.prose tableTables

Example Custom CSS

css
/* Custom Brand Theme */
.prose {
  font-family: 'Your Brand Font', system-ui, sans-serif;
  max-width: 720px;
  margin: 0 auto;
}

.prose h1, .prose h2, .prose h3 {
  color: #your-brand-color;
  font-weight: 700;
}

.prose a {
  color: #your-link-color;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: #your-hover-color;
}

.prose blockquote {
  border-left: 4px solid #your-accent-color;
  background: #f8f9fa;
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.prose img {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Using Google Fonts

You can use any Google Font in your custom CSS. All Google Fonts are licensed under the SIL Open Font License, which permits commercial use.

css
/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

/* Apply to your articles */
.prose {
  font-family: 'Playfair Display', Georgia, serif;
}

.prose h1, .prose h2 {
  font-weight: 700;
}

Popular choices: Merriweather, Lora, Playfair Display (serif), Inter, Roboto, Open Sans (sans-serif)

Next Steps

Open the live style editor in DashboardApply styles to WordPressIntegrate with Next.js
SEO Sniper