Get started
Theming
Color, type, shape and texture tokens, in both themes.
Make it yours
The look below is opendraft's default. Seven brand tokens at the top of the theme change it everywhere: heading, body and code fonts, heading weight, the primary color, and corner radius for controls (buttons, inputs, tabs) and for surfaces (cards, menus, dialogs). Pick yours here, then copy the CSS, or copy the prompt and Claude will make the change for you.
Your theme
Invite your team
Teammates get an email with a link to join this workspace.
Use the opendraft design system for this. Read https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/llms.txt first and follow its rules: install components from the @opendraft registry and style only with its tokens. If you can't run shell commands, fetch each component's file from https://raw.githubusercontent.com/nuelmdesign/UI-System/HEAD/public/r/<name>.json (each file's content is inside) and create them in the project yourself. Build: [describe what you want to build]
Change a setting above and the prompt picks it up. With the defaults, the assistant uses opendraft's own look.
Color
Semantic tokens, redefined for dark mode under .dark. Use them through Tailwind (bg-primary, text-muted-foreground) and never reach for raw palette colors.
--background
Page ground
--card
Raised surfaces
--surface
Inset areas, sidebars
--muted
Quiet fills
--border
Hairlines
--foreground
Text
--muted-foreground
Secondary text
--primary
Actions, selection
--brand
Accent text and strokes
--ink
Solid black buttons and bands
--success
Positive status
--warning
Caution
--destructive
Errors, deletes
Blue scale
50
100
200
300
400
500
600
700
800
900
950
--blue-600 is primary in light mode, --blue-500 in dark. The whole scale is available as bg-blue-* for charts and textures.
Type
Newsreader, light, for headings (the default)
Geist for interface text, labels, inputs and data.
Geist Mono · the eyebrow utility
Shape and texture
By default corners are nearly square (2px on controls, 3px on surfaces), set by --control-radius and --surface-radius; rounded-full is only for avatars, dots and radios. Hairline borders carry structure; shadows only lift floating layers. Use bg-dots or PixelField for texture, and add the dark class to any section to make it a dark band in either theme.