Veritas Design System
A complete guide to the visual styles, colors, and UI components of the Veritas Security template.
Colors
The foundational color palette of the Veritas template.
The template's color system is fully dynamic and
centralized in the
css/colors.css file for
effortless customization.
To re-theme the entire site, you only need to adjust the
base HSL (Hue, Saturation, Lightness) variables for each
of the three core palettes:
Primary, Secondary, and Gray. Simply
modify the values for variables like
--primary-h, --secondary-s, or
--gray-l.
All shades for every palette are then automatically calculated and generated from these base values. Because the entire template references these CSS variables, your changes will propagate globally, ensuring a consistent and fully customized theme.
Primary Palette
--primary-100
--primary-200
--primary-300
--primary-400
--primary-500
--primary-600
--primary-700
--primary-800
--primary-900
Secondary Palette
--secondary-100
--secondary-200
--secondary-300
--secondary-400
--secondary-500
--secondary-600
--secondary-700
--secondary-800
--secondary-900
Gray Palette
--gray-50
--gray-100
--gray-200
--gray-300
--gray-400
--gray-500
--gray-600
--gray-700
--gray-800
--gray-900
Typography
Heading 1 (text-5xl, font-extrabold)
Heading 2 (text-3xl, font-bold)
Heading 3 (text-xl, font-semibold)
This is a standard paragraph of text. Links, like this one here, will use the primary accent color.
Alerts
Info: This is an informational alert.
Success: Your action was completed successfully.
Warning: Please check the details you entered.
Danger: There was an error processing your request.
Cards
Card with Icon
A simple card component ideal for highlighting features or key points.
Card with Image
Perfect for blog posts, case studies, or any content that benefits from a strong visual.
Accordion
This is the content for the first item. It is hidden by default and appears when the button is clicked.
This is the content for the second item. The script handles opening one at a time if desired, or multiple.
Tabs
Content for the first tab. This panel is shown by default.
Content for the second tab. Click the tab button to see this content.
Content for the third tab. The JavaScript handles all the logic.