#Guide

Welcome to the Clarity theme guide. This theme is designed for AI products, focusing on minimalism, readability, and elegance.

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." — Antoine de Saint-Exupéry

#Features

• Soft gradient backgrounds: A subtle radial gradient that adds depth without distraction.
• Minimalist UI: Clean borders, transparent backgrounds, and blurred navigation.
• Lots of whitespace: Large padding and margins to let the content breathe.
• Card-based information blocks: Bento grid layout for organizing complex information.
• Editorial typography: Playfair Display for headings, Inter for body text.

#Callouts

Callouts are styled with soft backgrounds, rounded corners, and elegant typography.

#Tabs & Steps

function App() {
  return <div>Hello World</div>
}

<template>
  <div>Hello World</div>
</template>

npm install @rspress/core

yarn add @rspress/core

pnpm add @rspress/core

bun add @rspress/core

deno add npm:@rspress/core

#Badges

You can use badges to highlight specific terms or versions:

• New Added support for dark mode.
• Beta Try the new AI search feature.
• Deprecated The old API will be removed in v2.0.
• Error Failed to connect to the server.

#Blockquotes

Blockquotes are styled with a large serif font to give them an editorial feel.

"Good design is making something intelligible and memorable. Great design is making something memorable and meaningful."

— Dieter Rams

#Tables

Tables have been redesigned to be clean, borderless (vertically), and spacious.

#Code Example

Here is an example of how code blocks look in this theme, complete with a title and syntax highlighting. For more details, check out the Rspress Documentation.

import { defineConfig } from 'rspress/config';
import path from 'path';

export default defineConfig({
  root: path.join(__dirname, 'docs'),
  title: 'Clarity',
  description: 'AI Product Minimalism Theme',
  themeConfig: {
    // ...
  },
});

#Bento Grid Layout

You can use the bento grid layout in your markdown files by using the bento-grid and bento-card classes: