Jonjo Wadwa
Brand Guidelines & Visual Identity
Color Palette
The colour palette is intentionally minimal. Black and white form the foundation of the brand, ensuring clarity, contrast, and versatility across all applications. A single yellow accent colour is used sparingly to introduce focus and emphasis without overwhelming the system.
Typography
Clash Display
Inter
Inter is used as the primary body typeface for its clarity, neutrality, and readability across digital platforms. For standard digital applications, body text sizes should typically fall between 16 - 18px.
Type Scale
A consistent type scale ensures hierarchy and readability across all touchpoints.
Logo
The primary logo represents clarity, technical precision, and systems-level thinking. It should be used as the default mark across all core brand touchpoints to ensure consistency and recognition.
Spacing System
Consistent spacing creates rhythm and visual harmony. The system uses an 8px base unit.
Components
Buttons
Tags & Badges
Input Fields
Design Tokens
Copy these CSS custom properties to implement the design system in your projects.
:root {
/* Colors */
--color-primary: #D3F265;
--color-charcoal: #222222;
--color-gray: #838383;
--color-gray-light: #F5F5F5;
--color-white: #FEFEFE;
/* Typography */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Inter', sans-serif;
/* Font Sizes */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 24px;
--text-2xl: 38px;
--text-3xl: 44px;
--text-4xl: 96px;
/* Spacing */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 100px;
}