Customizations

Design Tutorial

The Universal Annotation Tool uses a clean, modern design with a black and white theme that supports both light and dark modes.

Themes & Settings

The application supports system-based theme detection and manual theme switching.

• Toggle between light and dark themes using the theme toggle in the navigation bar
• The theme preference is saved and persists across sessions
• System preference is detected automatically on first visit

Custom CSS

The application uses Tailwind CSS for styling. Custom CSS can be added through the global stylesheet for organization-specific branding (admin feature, coming soon).

Layout

The application uses a responsive layout that adapts to different screen sizes:

• Desktop: Full sidebar navigation and three-column layout
• Tablet: Collapsible sidebar with mobile-friendly navigation
• Mobile: Hamburger menu with overlay navigation

Basic Sizing

The application uses consistent sizing patterns throughout:

• Spacing follows a consistent scale (4px, 8px, 16px, 24px, etc.)
• Typography uses a hierarchical scale for headings and body text
• Components use standard sizes for buttons, inputs, and cards

Flexbox & Grid

Layouts use Flexbox and CSS Grid for responsive design:

• Flexbox for component-level layouts
• Grid for collection and document lists
• Responsive breakpoints for different screen sizes

Typography

The application uses the Geist font family:

• Geist Sans for body text and UI elements
• Geist Mono for code and technical content
• Consistent font sizes and line heights

Backgrounds

Background colors adapt to the selected theme:

• Light theme: White backgrounds with subtle borders
• Dark theme: Dark backgrounds with appropriate contrast
• Accent colors for interactive elements

Borders

Borders provide visual separation and structure:

• Consistent border radius for rounded corners
• Subtle border colors that adapt to theme
• Border widths follow a consistent scale

Plugins

The application architecture supports extensibility. Plugin support for custom annotation types and integrations is planned for future releases.

Presets

Annotation configuration presets for common use cases (e.g., medical NER, legal entity extraction) are available as public configurations that can be cloned and customized.