v1.6

Prose UI Subatomic design system guided by principles of consistency, simplicity, accessibility, and modularity... 

<!--
  ⚠️ LLM instructions for AI to consume and generate consistent UI ⚠️
  1. Copy the instruction text and paste it into an AI/LLM prompt
  2. Replace the {application description} with your requirements
-->

- [ ] Create _{application description}_ using the following assets for the UI
- [ ] The llms file contains all the instructions for the design system
- [ ] Please include TailwindCSS in the project or use the latest CDN version for portable prototype

***

- https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/llms.md
- https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/tokens.css
- https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/styles.css
- https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/typography.css
<!doctype html>
<html lang="en" class="bg-transparent antialiased" x-data="app">
  <!--
    ⚠️ Portable starter ⚠️
    - Paste this entire file into an HTML file and open in your browser
    - OPTIONALLY: Use VSCode/Cursor/Antigravity and the Live Preview extension for a mini portable dev env with no dependencies
      - Make changes to the file and see them in realtime
  -->

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>{title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=overlays-content" />
    <link href="https://fonts.googleapis.com" rel="preconnect" />
    <link href="https://fonts.gstatic.com" rel="preconnect" />
    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap" rel="stylesheet" />

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
      @theme {
        --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        --font-serif: 'Literata', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
        --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
      }
      @layer base {
        hr { @apply my-6 border-(--prs-c-gray-300); }
      }
    </style>
    <!-- // PROSE // -->
    <link href="https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/tokens.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/gh/prose-ui/prose-ui@latest/styles.css" rel="stylesheet" />

  </head>

  <body class="bg-(--prs-c-white) text-(--prs-c-gray-950) !block" style="display: none;">
    <div class="min-h-screen flex flex-col" x-cloak>
      <header class="w-full shrink-0"></header>
      <main class="w-full grow">
        <section class="mx-auto p-4 max-w-5xl">

          <div class="pt-4 pb-8">
            <!-- UI HERE -->
            <button class="prs-btn prs-btn-primary">Button</button>
            <label><input type="checkbox" class="prs-toggle" role="switch" aria-label="Toggle" /></label>
            <!-- // UI HERE -->
          </div>

          <article class="prose">
            <!-- SHORT FORM WRITING HERE -->
            <h1>Heading</h1>
            <p>Lorem ipsum <a href="#" class="text-primary underline font-semibold">dolor sit amet</a>. Magna et ullamco quis quis eiusmod amet. Adipisicing quis officia exercitation do ad nostrud commodo. Esse sit id eu culpa eu elit deserunt ullamco. Cillum do non mollit incididunt anim id qui. Deserunt cillum dolore dolore dolor proident.</p>
            <hr />
            <h2>Lists</h2>
            <ul>
              <li>List</li>
            </ul>
            <ol>
              <li>List</li>
            </ol>
            <!-- // SHORT FORM WRITING HERE -->
          </article>

        </section>
      </main>
      <footer class="w-full shrink-0"></footer>
    </div>
  </body>

  <script type="module">
    // icons
    import 'https://esm.run/iconify-icon';

    // alpine
    import Alpine from 'https://esm.run/alpinejs';
    document.addEventListener('alpine:init', () => {
      Alpine.data('app', () => ({
        // key: 'value',
      }));
    });
    window.Alpine = Alpine;
    Alpine.start();
  </script>

</html>

Builder.io Integration Jump to heading

No results...