Switch between the rendered Visual preview and the Raw DESIGN.md.
Ingamana's design system embodies a bold, forward-thinking aesthetic rooted in minimalist restraint and striking geometric contrast. The visual language prioritizes typography-first composition, leveraging clean lines and intentional negative space to convey sophistication and innovation. Saturated accent colors (electric blue and vibrant green) punctuate an otherwise monochromatic palette, creating moments of visual tension that draw attention to key content and calls-to-action. The overall effect is one of contemporary professionalism tempered by experimental edge—a design system that feels both established and cutting-edge, ideal for a development partner serving creative industries.
Key Characteristics
#000000): Dominant neutral for typography, primary text, component backgrounds, and structural elements throughout the interface#FFFFFF): Background fill for cards, containers, and high-contrast zones; primary surface color#0052CC): Featured in hero sections, brand messaging, and interactive highlights; reserved for primary visual moments#00D084): Secondary accent color used in tagline highlights, service banners, and promotional zones; creates chromatic tension with blue#000000): Unvisited links default to brand black with 100% opacity#A8A8A8): Secondary interactive text for muted navigation and secondary call-to-actions#A8A8A8): Secondary text, subtle UI dividers, disabled states, caption text#DFDFDF): Borders, subtle background tints, form field borders, dividing lines#DFDFDF): Default border color for form inputs, cards, and container divisions#FFFFFF): Default card and container background#000000): Dark-mode alternative surface for high-contrast zonesPrimary: ABCMonumentGrotesk (sans-serif, geometric)
Fallback Stack: ABCMonumentGrotesk, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | ABCMonumentGrotesk | 12px | 400 | 12px | 0px | Logo/wordmark scale; scaled up in context via CSS |
| Heading 2 / H2 | ABCMonumentGrotesk | 16px | 400 | 18px | 0px | Section headers, card titles |
| Body Text | ABCMonumentGrotesk | 12px | 500 | 14px | 0px | Primary body copy, default paragraph text |
| Body Small | ABCMonumentGrotesk | 12px | 400 | 12px | 0px | Secondary text, navigation labels |
| Button Text | ABCMonumentGrotesk | 16px | 400 | 16px | 0px | CTA and interactive button labels |
| Link Text | ABCMonumentGrotesk | 12px | 400 | 12px | 0px | Inline links, unvisited state |
| Link Bold | ABCMonumentGrotesk | 12px | 500 | 12px | 0px | Navigation links, footer links |
| Caption | ABCMonumentGrotesk | 12px | 400 | 14px | 0px | Metadata, dates, secondary labels |
#000000#FFFFFF16px400ABCMonumentGrotesk12px 20px0px2px solid #00000016px#FFFFFF, Text #000000, Border 2px solid #000000#A8A8A8, Text #FFFFFF, Border 2px solid #A8A8A8#DFDFDF, Text #A8A8A8, Border 2px solid #DFDFDF#FFFFFF#00000016px400ABCMonumentGrotesk12px 20px0px2px solid #00000016px#DFDFDF, Text #000000, Border 2px solid #000000#A8A8A8, Text #FFFFFF, Border 2px solid #A8A8A8#DFDFDF, Text #A8A8A8, Border 2px solid #DFDFDFtransparent#00000016px400ABCMonumentGrotesk12px 8px0px1px solid transparent16pxtransparent, Text #000000, Border-Bottom 1px solid #000000transparent, Text #0052CC, Border-Bottom 1px solid #0052CCtransparent, Text #A8A8A8, Border 1px solid transparent#FFFFFF#00000016px400ABCMonumentGrotesk20px0px1px solid #DFDFDFnone18px#000000#FFFFFF16px400ABCMonumentGrotesk20px0px1px solid #A8A8A8none18px#FFFFFF#00000012px500ABCMonumentGrotesk16px0px1px solid #DFDFDFnone14px#FFFFFF#00000012px400ABCMonumentGrotesk12px 16px0px1px solid #DFDFDF14px2px solid #000000, Background #FFFFFF#A8A8A8#FFFFFF#00000012px400ABCMonumentGrotesk12px 16px0px1px solid #DFDFDF120px14px2px solid #000000#FFFFFF#00000012px400ABCMonumentGrotesk12px 16px0px1px solid #DFDFDF14px2px solid #000000transparent#00000012px400ABCMonumentGrotesk8px 12px0pxnone12px#A8A8A8, Border-Bottom 1px solid #A8A8A8#000000, Border-Bottom 2px solid #000000transparent#00000012px500ABCMonumentGrotesk4px 0px0pxnone12px#0052CC#00D084Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 32px, 44px, 48px
1440px16px (standard horizontal spacing)20px to 48px top and bottom for full-bleed sections; 16px–20px horizontal margins on mobileWhitespace is treated as a first-class design element. Generous negative space around text and components elevates the design and draws focus to content. Block-level sections are vertically separated by 32px–48px gaps to create rhythm and visual breathing room. Horizontal spacing uses consistent 20px padding within containers and 16px–20px margins between full-width blocks.
| Level | Treatment | Use |
|---|---|---|
| Base | No shadow | Default cards, containers, body backgrounds |
| Raised | 0px 2px 8px rgba(0, 0, 0, 0.1) | Hover state on interactive cards, lifted buttons |
| Floating | 0px 4px 16px rgba(0, 0, 0, 0.15) | Modals, dropdowns, floating UI elements |
| Modal | 0px 8px 32px rgba(0, 0, 0, 0.2) | Overlay dialogs, expanded navigation, top-level popovers |
Shadow Philosophy: The design system employs minimal shadow usage to maintain the flat, contemporary aesthetic. Shadows are reserved for interactive states and modal overlays where depth creates necessary visual distinction. Black (#000000) with 10–20% opacity provides subtle elevation without compromising the stark visual identity. Shadows use 2px–8px blur radius and 0–4px offset to communicate proximity and interaction.
#0052CC) and green (#00D084) for selective emphasis32px–48px section spacing for clear visual hierarchy4px, 8px, 12px, 16px, 20px, 32px, 44px, 48px)#0052CC and #00D084| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | Single-column layout, 16px horizontal margin, button width 100%, font size 12px maintained, section spacing 20px |
| Tablet | 600px–1023px | 2-column grid, 20px horizontal margin, buttons 50% width or inline-flex, increased section spacing to 32px |
| Desktop | 1024px+ | 12-column grid, max container 1440px, centered with auto margins, buttons inline with 20px padding, section spacing 48px |
| Large Desktop | 1920px+ | Same as desktop; container remains capped at 1440px to preserve visual hierarchy |
44px × 44px (buttons, links, interactive elements)88px on touch devices; 64px on desktop with mouse44px × 24px for vertical stacks; 40px × 40px for icon buttons44px on touch; 36px on desktop8px gap between interactive elements48px to 20px600px viewport width12px across all breakpoints; enlargement happens through heading scale only48px (desktop) to 32px (tablet) to 20px (mobile)100% of container minus padding768px viewport; footer links restack vertically on mobile#000000) on White background; inverse to White on Black#FFFFFF) on Black background; borders use Black#0052CC) for hero sections and primary interactive moments#00D084) for promotional zones and tagline highlights#FFFFFF) for default surfaces; Black (#000000) for dark-mode cards#000000), ABCMonumentGrotesk, 16px weight 400#000000), ABCMonumentGrotesk, 12px weight 500#DFDFDF) for subtle divisions; Medium Gray (#A8A8A8) for secondary UI#A8A8A8) on Light Gray backgroundsTypography Foundation: All text uses ABCMonumentGrotesk exclusively. Render headings at 16px weight 400 and body at 12px weight 500. Line height is tight (12px–18px) for contemporary density.
Color Strategy: Default to Black text on White backgrounds. Reserve Electric Blue (#0052CC) and Vibrant Green (#00D084) for exactly two accent moments per page maximum. Never apply color to typography without functional reason (e.g., active link, brand call-out).
Spacing Execution: Use spacing scale multiples only: 4px, 8px, 12px, 16px, 20px, 32px, 44px, 48px. Section-to-section gaps are 32px–48px. Padding inside components is 12px–20px. Gaps between inline elements are 4px–8px.
Component Geometry: All components (buttons, inputs, cards, links) use 0px border radius. Buttons have 2px borders; inputs have 1px borders. Maintain hard edges for optical precision and brand alignment.
Elevation & Shadow: No shadows by default. Apply subtle shadows (0px 2px 8px rgba(0, 0, 0, 0.1)) only on hover states or modals. Larger modals use 0px 8px 32px rgba(0, 0, 0, 0.2).
Interactive States: Hover state changes text color or border; does not add background color unless explicitly a button. Active links show Electric Blue (#0052CC); secondary links show Green (#00D084). Disabled elements use Medium Gray (#A8A8A8).
Layout Containment: Max container width is 1440px centered on desktop. Mobile uses 320px–100% minus 16px–20px margins. Tablet uses 2-column 600px–1023px. Maintain 12-column grid structure on desktop.
Form Accessibility: All inputs have 44px minimum height on touch devices; 36px on desktop. Labels are positioned above fields. Placeholder text is #A8A8A8. Focus state is 2px solid #000000 border.