Design Systems (design.md)

What is a design.md?#

A design.md is a single Markdown file that describes your brand's visual system — colors, typography, spacing, shapes, motion, and component conventions. Attach one in Omma and the AI treats it as a non-negotiable brief: every generation uses your fonts, your hex values, and your rules, from its very first response.

In Omma these files are surfaced as Styles (managed under Manage Styles). One design.md keeps output on-brand everywhere you generate:

• In Chat, every message you send applies the active design.md.
• In the Canvas, it steers all frames — so even a batch of dozens stays consistent.

The format follows the open Google design.md convention, so a file you write for Omma is portable to other tools that read it.

Two ways to write one#

A design.md can be structured Markdown, an official token spec with YAML front matter, or a mix of both. Omma reads either.

Structured Markdown#

The simplest form is prose under a set of known headings. Omma recognizes these sections:

# Atelier Style

## Brand & Voice
Quiet, architectural minimalism for a premium product studio.
Voice is calm, precise, and confident.

## Typography
Headings: Inter, 80px / 400 / tight tracking
Body: Inter, 18px / 300 / 28px

## Color Palette
Background: #FFFFFF
Text: #0A0A0A
Accent: #0A0A0A
Subtle: #E5E5E5

## Shapes & Radii
Hairline 1px borders. Radius family: 2px, 4px, 9999px.

## Do's
- Use generous whitespace on a strict 8px rhythm.
- Keep contrast high and color minimal.

## Don'ts
- Don't add shadows or extra accent colors.

Token spec (YAML front matter)#

For pixel-precise control, define tokens in YAML front matter. Components reference color tokens by name, and if you provide both colors and colorsDark, Omma automatically wires up dark-mode support (CSS custom properties on :root, overridden under prefers-color-scheme: dark).

---
name: Vector Style
description: High-energy, dark-mode-native brand for a developer tool
colors:
  background: '#0A0A0A'
  text: '#FAFAFA'
  primary: '#FF3B30'
  accent: '#00F0FF'
  border: '#262626'
colorsDark:
  background: '#000000'
  text: '#FFFFFF'
  primary: '#FF453A'
  accent: '#64D2FF'
  border: '#1F1F1F'
typography:
  heading:
    fontFamily: Geist
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: '-0.02em'
  body:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: 2px
  md: 6px
  pill: 9999px
spacing:
  base: 4px
components:
  button:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.text}'
    rounded: '{rounded.md}'
    padding: 12px 20px
---

Adding a design.md to Omma#

Open Manage Styles from the sidebar, then click New to choose how to create one:

• Import a .md file — drag and drop or browse to a file you already have. The contents are stored verbatim.
• Paste content — paste design.md text directly.
• Generate from a URL — paste a website address and Omma generates a design.md describing its visual style.
• Generate from a description — give a brand name and description (plus optional colors, fonts, vibe, and notes), and Omma drafts the full file. Starter templates — Minimal, Bold, Editorial, Playful, Tech — pre-fill the form.
• Create from scratch — fill in the section fields directly in the editor.

Using a design.md#

How Omma applies it#

When a style is active, Omma instructs the model to treat the design.md as mandatory:

• Fonts — every font-family uses the exact typefaces you named; custom fonts are loaded via @import or <link> rather than falling back to system fonts.
• Colors — only your hex/rgb values are used, mapped to background, text, primary, accent, and border. If you defined colorsDark, dark mode is wired up with CSS variables.
• Spacing & radii — buttons, cards, and inputs use your radius family and spacing scale.
• Do's & Don'ts — each item is treated as an absolute constraint, not a suggestion.

This is the cleanest way to get cohesive output at scale: define the rules once, then let every generation — including the Canvas's massive parallel runs — apply them.

Tips#

• Be concrete. Exact hex values and named typefaces beat "blue" and "a clean sans-serif."
• Lead with the essentials. Colors and typography do most of the work; add spacing, shapes, and components as you refine.
• Use Do's and Don'ts for edge cases. They're the fastest way to stop a recurring mistake ("Don't introduce accent colors outside the palette").
• Reuse across projects. Because it's a portable file, the same design.md keeps every Chat and Canvas project on the same brand.