llm.css: Styles for LLMs and agents

llm.css is a small set of CSS styles that you can give to an LLM or coding agent to steer the way it styles a web page. You can see what it looks like on our demo page. You can also visit the GitHub repo.

Table of Contents

Origin

I created llm.css by asking ChatGPT to create a set of CSS variables based on Tailwind. Then I asked it to create a set of rules using those variables. The project was inspired by Tailwind, Open Props, and various classless and class-light CSS frameworks.

Usage

I think there are 4 ways you can use this project:

  1. At a minimum, I think you can probably give an LLM just the CSS variables and that should help steer it.
  2. If you want to steer it even more, give it the full CSS code.
  3. You can also change the values for the CSS variables or add more variables if you want to customize the way it looks.
  4. If you just want to take this idea as inspiration, you're free to come up with your own CSS variable names, values, and rules.

Code

Here are the core CSS variables:


:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-900: #111827;
  --slate-600: #475569;

  --color-bg: var(--white);
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-muted: var(--gray-500);
  --color-border: var(--gray-300);
  --color-primary: var(--slate-600);
  --color-accent: var(--slate-600);

  --border: 1px;
  --container: 960px;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);

  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
}

And here is the full code (you can also download the full code):

CDN

You can also use the file through a CDN. If you're using it with an LLM, you still might want to give it the code so it knows what's inside (or you might want to at least mention it's a class-light CSS framework). If you're using it with an agent, you might want to have it fetch the file and read the contents of the file first before using it.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jhonkaman/llm-css/llm.css">

Dark Mode

If you'd like the user to be able to switch to dark mode, you can add this to the end of llm.css. If you'd like the app to be in dark mode all of the time, delete the media query wrapping the CSS.


@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111827;
    --color-surface: #1f2937;
    --color-text: #f3f4f6;
    --color-muted: #9ca3af;
    --color-border: #374151;
  }

  a {
    color: var(--color-muted);
  }

  .button-outline, button.button-outline {
    color: var(--color-muted);
  }

  mark {
    background: #374151;
  }
}