A unified visual system for CRM, AI assistants, automation, the website and future modules. Its foundation is a deep blue-graphite framework, a warm light workspace and brand green only where emphasis is needed.
This block is the core style contract. A new screen, landing page, module or AI mockup following it will look like part of the same product, even with entirely new content and workflows.
The product system is built on three roles. Dark creates navigation and contrast, light provides a calm workspace, and bright green makes the brand recognisable and signals action.
#151F24 Sidebars, dark panels and buttons, large high-contrast sections. #FBFBF9 Main product and website background. Warm yet visually neutral. #7ED957 Primary actions, active markers, toggles and selective brand accents. Dark does not fill the entire interface. It creates the navigation framework. The workspace stays light, with brand green signalling actions or current state.
The card remains white on a warm background. Colour does not interfere with reading data.
Semantic colour conveys meaning rather than decorating the interface.
Rule: Deep Blue for navigation and selected contrast surfaces. Canvas for the workspace. Brand Lime for actions. Keep these roles separate.
Use colours and system values by role rather than guessing on new screens. This is a minimum set for CSS variables, a Tailwind theme or design tokens.
Inter suits marketing pages and information-rich interfaces. A stable scale and consistent density across modules matter more than the number of sizes.
Corrected: sample sizes and labels now match. Use real Inter 400/500/600/700/800 weights rather than synthetic weights.
Components share the same colour roles. Bright green must not become a decorative background for the entire interface.
Primary: #7ED957 with dark #151F24 text. Avoid white text on bright green because contrast is weak.
Brand Lime does not replace semantics. Errors stay red, warnings amber and information blue.
One SVG language: 24×24, 1.8–2px strokes, rounded ends. Do not mix libraries and styles.
Geometry must be consistent. Radius is independent of shadows: a card may be flat if its background or border already separates it.
999px is for pills and statuses only. Avoid arbitrary 10/14/18px values without a specific reason.
Shadows are neutral with a Deep Blue tint. Green glow is a rare brand effect, not a treatment for every card.
Base grid: 4px. Most interface spacing uses 8 / 12 / 16 / 24 / 32px.
Focus must be clearly visible and not rely only on changing text colour.
These examples use real product modules. They illustrate correct design system usage in existing sections, not actual customer data.
Dark Core stays in the sidebar. Kanban, filters and cards sit on Warm Canvas. Statuses use semantic colours.
#151F24 sidebar · #FBFBF9 canvasColour does not interfere with the calendar or schedule. Size, spacing and states establish the visual hierarchy.
surface #FFFFFF · border #E5E8E2Even the AI module does not create a new visual language. Content and iconography differentiate it, not a different palette.
one brand system across modulesThe aim is not to brand every screen, but to make the product consistent, predictable and calm.
Use #151F24 for navigation, dark surfaces and strong contrast sections. Main work stays on light backgrounds.
#7ED957 signals a primary action, active state, enabled toggle or brand accent. Do not colour everything with it.
Use dark #151F24 on #7ED957. Reserve white for Dark Core and deeper coloured surfaces.
Success, warning, danger and info have their own colours. Users should recognise meaning before branding.
24×24, 1.8–2px strokes, soft geometry. Icons may be unique but must share optical weight.
Hierarchy, typography and spacing come first. Add colour, shadow and gradients only when functional.