update README's

This commit is contained in:
necatiozmen
2026-03-31 20:59:13 +03:00
parent 15caf5f40e
commit 3976d28923
31 changed files with 118 additions and 151 deletions

View File

@@ -1,6 +1,6 @@
# Apple Design System # Apple Inspired Design System
> Design.md extracted from the public [apple](https://apple.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) extracted from the public [apple](https://apple.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Apple design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/apple/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Apple design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Claude Design System # Claude Inspired Design System
> Design.md extracted from the public [claude](https://claude.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) extracted from the public [claude](https://claude.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Claude design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/claude/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Claude design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Clickhouse Design System # ClickHouse Inspired Design System
> Design.md extracted from the public [clickhouse](https://clickhouse.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) extracted from the public [clickhouse](https://clickhouse.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Clickhouse design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clickhouse/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the ClickHouse design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Clickhouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png) ![ClickHouse Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Clickhouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png) ![ClickHouse Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clickhouse/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Cohere Design System # Cohere Inspired Design System
> Design.md extracted from the public [cohere](https://cohere.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) extracted from the public [cohere](https://cohere.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Cohere design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cohere/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cohere design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Composio Design System # Composio Inspired Design System
> Design.md extracted from the public [composio.dev](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) extracted from the public [composio](https://composio.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Composio design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/composio/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Composio design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Light Mode
![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)
### Dark Mode ### Dark Mode
![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png) ![Composio Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-dark-screenshot.png)
### Light Mode
![Composio Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/composio/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Cursor Design System # Cursor Inspired Design System
> Design.md extracted from the public [cursor](https://cursor.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) extracted from the public [cursor](https://cursor.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Cursor design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/cursor/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Cursor design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Expo Design System # Expo Inspired Design System
> Design.md extracted from the public [expo](https://expo.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) extracted from the public [expo](https://expo.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Expo design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/expo/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Expo design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Figma Design System # Figma Inspired Design System
> Design.md extracted from the public [figma](https://figma.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) extracted from the public [figma](https://figma.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Figma design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/figma/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Figma design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Hashicorp Design System # HashiCorp Inspired Design System
> Design.md extracted from the public [hashicorp](https://hashicorp.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) extracted from the public [hashicorp](https://hashicorp.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Hashicorp design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/hashicorp/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the HashiCorp design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Hashicorp Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-dark-screenshot.png) ![HashiCorp Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Hashicorp Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-screenshot.png) ![HashiCorp Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/hashicorp/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Ibm — Design System # IBM Inspired Design System
> Design.md extracted from the public [ibm](https://ibm.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) extracted from the public [ibm](https://ibm.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Ibm design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ibm/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the IBM design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Ibm Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-dark-screenshot.png) ![IBM Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Ibm Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-screenshot.png) ![IBM Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/ibm/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Linear.app — Design System # Linear Inspired Design System
> Design.md extracted from the public [linear.app](https://linear.app.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) extracted from the public [linear](https://linear.app/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Linear.app design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/linear.app/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Linear design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Linear.app Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-dark-screenshot.png) ![Linear Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Linear.app Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-screenshot.png) ![Linear Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/linear.app/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Lovable Design System # Lovable Inspired Design System
> Design.md extracted from the public [lovable](https://lovable.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) extracted from the public [lovable](https://lovable.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Lovable design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/lovable/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Lovable design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Minimax Design System # Minimax Inspired Design System
> Design.md extracted from the public [minimax](https://minimax.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) extracted from the public [minimax](https://minimax.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Minimax design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/minimax/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Minimax design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Mintlify Design System # Mintlify Inspired Design System
> Design.md extracted from the public [mintlify](https://mintlify.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mintlify/DESIGN.md) extracted from the public [mintlify](https://mintlify.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Mintlify design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mintlify/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mintlify design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Mistral.ai — Design System # Mistral AI Inspired Design System
> Design.md extracted from the public [mistral.ai](https://mistral.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mistral.ai/DESIGN.md) extracted from the public [mistral](https://mistral.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Mistral.ai design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/mistral.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Mistral AI design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Mistral.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-dark-screenshot.png) ![Mistral AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Mistral.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-screenshot.png) ![Mistral AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/mistral.ai/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Notion Design System # Notion Inspired Design System
> Design.md extracted from the public [notion](https://notion.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/DESIGN.md) extracted from the public [notion](https://notion.so/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Notion design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/notion/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Notion design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Nvidia — Design System # NVIDIA Inspired Design System
> Design.md extracted from the public [nvidia](https://nvidia.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nvidia/DESIGN.md) extracted from the public [nvidia](https://nvidia.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Nvidia design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/nvidia/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the NVIDIA design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Nvidia Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-dark-screenshot.png) ![NVIDIA Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Nvidia Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-screenshot.png) ![NVIDIA Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/nvidia/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Ollama Design System # Ollama Inspired Design System
> Design.md extracted from the public [ollama](https://ollama.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ollama/DESIGN.md) extracted from the public [ollama](https://ollama.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Ollama design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/ollama/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Ollama design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Opencode.ai — Design System # OpenCode AI Inspired Design System
> Design.md extracted from the public [opencode.ai](https://opencode.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/opencode.ai/DESIGN.md) extracted from the public [opencode](https://opencode.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Opencode.ai design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/opencode.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the OpenCode AI design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Opencode.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-dark-screenshot.png) ![OpenCode AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Opencode.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-screenshot.png) ![OpenCode AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/opencode.ai/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Replicate Design System # Replicate Inspired Design System
> Design.md extracted from the public [replicate](https://replicate.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/replicate/DESIGN.md) extracted from the public [replicate](https://replicate.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Replicate design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/replicate/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Replicate design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Runwayml — Design System # RunwayML Inspired Design System
> Design.md extracted from the public [runwayml](https://runwayml.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/runwayml/DESIGN.md) extracted from the public [runwayml](https://runwayml.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Runwayml design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/runwayml/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the RunwayML design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Runwayml Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-dark-screenshot.png) ![RunwayML Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Runwayml Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-screenshot.png) ![RunwayML Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/runwayml/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Sanity Design System # Sanity Inspired Design System
> Design.md extracted from the public [sanity](https://sanity.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sanity/DESIGN.md) extracted from the public [sanity](https://sanity.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Sanity design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sanity/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Sanity design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Sentry Design System # Sentry Inspired Design System
> Design.md extracted from the public [sentry](https://sentry.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sentry/DESIGN.md) extracted from the public [sentry](https://sentry.io/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Sentry design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/sentry/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Sentry design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Stripe Design System # Stripe Inspired Design System
> Design.md extracted from the public [stripe](https://stripe.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/DESIGN.md) extracted from the public [stripe](https://stripe.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Stripe design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/stripe/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Stripe design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Supabase Design System # Supabase Inspired Design System
> Design.md extracted from the public [supabase](https://supabase.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/supabase/DESIGN.md) extracted from the public [supabase](https://supabase.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Supabase design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/supabase/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Supabase design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Together.ai — Design System # Together AI Inspired Design System
> Design.md extracted from the public [together.ai](https://together.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) extracted from the public [together](https://together.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Together.ai design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Together AI design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Together.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-dark-screenshot.png) ![Together AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Together.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-screenshot.png) ![Together AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Uber Design System # Uber Inspired Design System
> Design.md extracted from the public [uber](https://uber.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/uber/DESIGN.md) extracted from the public [uber](https://uber.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Uber design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/uber/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Uber design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Vercel Design System # Vercel Inspired Design System
> Design.md extracted from the public [vercel](https://vercel.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/vercel/DESIGN.md) extracted from the public [vercel](https://vercel.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Vercel design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/vercel/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Vercel design language.
## Preview ## Preview

View File

@@ -1,6 +1,6 @@
# Voltagent Design System # VoltAgent Inspired Design System
> Design.md extracted from the public [voltagent](https://voltagent.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/voltagent/DESIGN.md) extracted from the public [voltagent](https://voltagent.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,18 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Voltagent design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/voltagent/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the VoltAgent design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![Voltagent Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-dark-screenshot.png) ![VoltAgent Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![Voltagent Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-screenshot.png) ![VoltAgent Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/voltagent/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# X.ai — Design System # xAI Inspired Design System
> Design.md extracted from the public [x.ai](https://x.ai.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) extracted from the public [xai](https://x.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,16 +10,15 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the X.ai design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/x.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the xAI design language.
## Preview ## Preview
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page. A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
### Dark Mode ### Dark Mode
![X.ai Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-dark-screenshot.png) ![xAI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-dark-screenshot.png)
### Light Mode ### Light Mode
![X.ai Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-screenshot.png) ![xAI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/x.ai/preview-screenshot.png)

View File

@@ -1,6 +1,6 @@
# Zapier Design System # Zapier Inspired Design System
> Design.md extracted from the public [zapier](https://zapier.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar. [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/zapier/DESIGN.md) extracted from the public [zapier](https://zapier.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
## Files ## Files
@@ -10,9 +10,8 @@
| `preview.html` | Interactive design token catalog (light) | | `preview.html` | Interactive design token catalog (light) |
| `preview-dark.html` | Interactive design token catalog (dark) | | `preview-dark.html` | Interactive design token catalog (dark) |
## Usage
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Zapier design language. Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/zapier/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Zapier design language.
## Preview ## Preview