Overview Pengrafic includes a carefully crafted color system built on Tailwind CSS. The color palette supports both light and dark modes with semantic color tokens.
Color Palette The complete color palette is defined in tailwind.config.js:
Primary Colors Color Value Usage Primary #4A6CF7Main brand color, buttons, links Yellow #FBB040Accents, highlights, call-to-actions Black #111b33Dark backgrounds, text White #FFFFFFLight backgrounds, text
// Usage examples < button className = "bg-primary text-white" > Primary Button </ button > < div className = "bg-yellow text-black" > Highlight Banner </ div >
Semantic Colors Colors that adapt to light/dark modes:
Body Text Color "body-color" : { DEFAULT: "#788293" , // Light mode dark: "#959CB1" , // Dark mode }
< p className = "text-body-color dark:text-body-color-dark" > This text adapts to the theme </ p >
Stroke Colors stroke : { stroke : "#E3E8EF" , // Light mode borders dark : "#353943" , // Dark mode borders }
< div className = "border border-stroke-stroke dark:border-stroke-dark" > Themed border </ div >
Gray Scale gray : { ... colors . gray , // Tailwind's default gray scale dark : "#111b33" , // Custom dark gray light : "#F0F2F9" , // Custom light gray }
< div className = "bg-gray-light" > Light gray background </ div >
Background Colors "bg-color-dark" : "#111b33"
Used for dark mode backgrounds:
src/app/RootClientLayout.tsx
< body className = "bg-[#FCFCFC] dark:bg-black" >
Customizing Colors Adding New Colors Add custom colors to the extend.colors section in tailwind.config.js:
module . exports = { theme: { extend: { colors: { // Add your custom colors brand: { DEFAULT: "#4A6CF7" , light: "#6B8EFF" , dark: "#3A5CD7" , }, success: "#10B981" , error: "#EF4444" , warning: "#F59E0B" , }, }, }, };
Changing the Primary Color Blue (Default)
Purple
Green
colors : { primary : "#4A6CF7" , }
After changing colors in tailwind.config.js, restart your development server to see the changes.
Theme-Aware Colors Create colors that change based on the theme:
colors : { card : { DEFAULT : "#FFFFFF" , // Light mode dark : "#1F2937" , // Dark mode }, }
Usage:
< div className = "bg-card dark:bg-card-dark" > Theme-aware card background </ div >
Shadow System Pengrafic includes custom shadow utilities for depth and elevation:
boxShadow : { signUp : "0px 5px 10px rgba(4, 10, 34, 0.2)" , one : "0px 2px 3px rgba(7, 7, 77, 0.05)" , two : "0px 5px 10px rgba(6, 8, 15, 0.1)" , three : "0px 5px 15px rgba(6, 8, 15, 0.05)" , sticky : "inset 0 -1px 0 0 rgba(0, 0, 0, 0.1)" , "sticky-dark" : "inset 0 -1px 0 0 rgba(255, 255, 255, 0.1)" , "feature-2" : "0px 10px 40px rgba(48, 86, 211, 0.12)" , submit : "0px 5px 20px rgba(4, 10, 34, 0.1)" , btn : "0px 1px 2px rgba(4, 10, 34, 0.15)" , "btn-hover" : "0px 1px 2px rgba(0, 0, 0, 0.15)" , }
Using Shadows < button className = "shadow-btn hover:shadow-btn-hover" > Button with shadow </ button > < div className = "shadow-two rounded-lg" > Card with elevation </ div >
Special Color Utilities Current Color < svg className = "text-primary" > < path fill = "currentColor" /> </ svg >
Transparent < div className = "bg-transparent border-2 border-primary" > Transparent background with border </ div >
Best Practices
Use semantic tokens : Prefer text-body-color over hardcoded hex valuesAlways provide dark variants : Ensure every color has a dark mode equivalentTest contrast : Verify text is readable in both themesConsistent palette : Stick to the defined color system for brand consistency Color Reference Here’s a quick reference for all custom colors:
current : "currentColor" transparent : "transparent" white : "#FFFFFF" black : "#111b33" dark : "#111b33" primary : "#4A6CF7" yellow : "#FBB040" bg - color - dark : "#111b33" body - color : "#788293" ( light ) / "#959CB1" ( dark ) stroke : "#E3E8EF" ( light ) / "#353943" ( dark ) gray - light : "#F0F2F9" gray - dark : "#111b33"
