Switch between the rendered Visual preview and the Raw DESIGN.md.
The Abakus Direct design system embodies a minimalist, error-state aesthetic with stark clarity and professional restraint. Built around a monochromatic foundation, the system prioritizes direct communication and accessibility through typography over decorative flourishes. The design conveys restriction and permission boundaries with deliberate simplicity, using negative space and bold typographic hierarchy to establish hierarchy and meaning. This approach reflects institutional clarity—reminiscent of utility interfaces and system feedback—creating an atmosphere of technical precision and unambiguous messaging.
Key Characteristics
#000000): Primary text, headings, and structural elements; establishes primary visual hierarchy#FFFFFF): Page background, negative space, and primary surface#F5F5F5): Subtle background tinting for card surfaces and containers (inferred)#808080): Secondary text, disabled states, and reduced prominence (inferred)#333333): Tertiary text and borders (inferred)#E0E0E0): Dividing lines and subtle structural boundaries (inferred)#D3D3D3): Light rule lines and section separators (inferred)Primary: Times New Roman, Georgia, serif Secondary: Times New Roman, Georgia, serif (monolithic serif stack) Fallback: Serif system fonts for maximum compatibility
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|---| | Display / H1 | Times New Roman | 32px | 700 | 1.2 | 0px | Primary page heading, high authority | | Heading 2 | Times New Roman | 28px | 700 | 1.3 | 0px | Section headers | | Heading 3 | Times New Roman | 24px | 700 | 1.3 | 0px | Subsection headers | | Heading 4 | Times New Roman | 20px | 700 | 1.4 | 0px | Minor headings | | Body / Paragraph | Times New Roman | 16px | 400 | 1.5 | 0px | Standard reading text | | Body Small | Times New Roman | 14px | 400 | 1.5 | 0px | Secondary descriptive text | | Caption | Times New Roman | 12px | 400 | 1.4 | 0.5px | Tertiary labels and hints | | Button | Times New Roman | 16px | 600 | 1.2 | 0px | Call-to-action text | | Link | Times New Roman | 16px | 400 | 1.5 | 0px | Inline and standalone links | | Code | Times New Roman | 14px | 400 | 1.6 | 0px | Monospace fallback to serif for consistency |
#000000#FFFFFF12px 24px0px2px solid #00000016px600#333333, Border 2px solid #333333#000000, Border 2px solid #000000, Text #FFFFFF#CCCCCC, Border 2px solid #CCCCCC, Text #666666#FFFFFF#00000012px 24px0px2px solid #00000016px600#F5F5F5, Border 2px solid #000000#E0E0E0, Border 2px solid #000000#FFFFFF, Border 2px solid #CCCCCC, Text #999999transparent#00000012px 24px0px1px solid #00000016px400#FFFFFF, Border 1px solid #000000#F5F5F5, Border 1px solid #000000transparent, Border 1px solid #CCCCCC, Text #999999#FFFFFF1px solid #E0E0E024px0px0px 1px 3px rgba(0, 0, 0, 0.08)#F5F5F51px solid #D3D3D324px0pxnone#FFFFFF#0000001px solid #D3D3D312px 16px0px16px4002px solid #000000, Outline none, Background #FFFFFF#F5F5F5, Border 1px solid #E0E0E0, Text #8080802px solid #D32F2F, Background #FFFFFF20px × 20px2px solid #0000000px#FFFFFF#000000#FFFFFF2px solid #333333 outer ring20px × 20px2px solid #00000050%#FFFFFF#FFFFFF with 8px solid #000000 inner circle2px solid #333333 outer ring#FFFFFF#00000016px 24px1px solid #E0E0E016px400#000000underline2px4px#000000underline1pxall 0.2s ease-outBase Unit: 8px
Scale:
4px (0.5 unit): Tight micro-spacing for icon padding8px (1 unit): Default padding for small components12px (1.5 units): Comfortable padding for form elements16px (2 units): Standard internal component padding24px (3 units): Section padding and card interiors32px (4 units): Major section spacing48px (6 units): Page section breaks64px (8 units): Large visual separationUsage Context:
4px – 8px12px – 16px24px32px – 64px1200px24px between columns24px on sides16px on sidesGenerous negative space creates breathing room and reduces cognitive load. The design prioritizes vertical rhythm and section isolation. Whitespace between typographic elements establishes hierarchy through visual rest, not decoration. Large margins around primary content emphasize focus and authority.
0px: All interactive and structural components (buttons, inputs, cards)| Level | Treatment | Use |
|---|---|---|
| Flat (Ground) | No shadow, border: 1px solid #E0E0E0 | Standard containers, cards, inputs |
| Raised (+1) | 0px 1px 3px rgba(0, 0, 0, 0.08) | Subtle card elevation, hover states |
| Floating (+2) | 0px 4px 12px rgba(0, 0, 0, 0.12) | Modals, dropdowns, overlays (inferred) |
| Modal (+3) | 0px 8px 24px rgba(0, 0, 0, 0.15) | Full-screen dialogs, high-priority overlays (inferred) |
Shadow Philosophy: Minimal shadow use maintains the flat, institutional aesthetic. Shadows are used sparingly to indicate state change or overlay hierarchy, not as decorative flourish. All shadows use pure black with reduced opacity to preserve the monochromatic palette. Shadows should be barely perceptible, suggesting subtle elevation rather than dramatic depth.
0px border radius) to all components for consistency48px for touch, 20px for desktop)1.2× for any text role| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 0px – 479px | Single column, 16px side padding, 24px section spacing, 14px body text |
| Small Tablet | 480px – 767px | Single column, 20px side padding, 32px section spacing, 16px body text |
| Tablet | 768px – 1023px | Two column grid, 24px side padding, 40px section spacing, 16px body text |
| Desktop | 1024px – 1199px | Three column grid, 24px side padding, 48px section spacing, 16px body text |
| Large Desktop | 1200px+ | Four column grid, 32px side padding, 64px section spacing, 16px body text, max-width container 1200px |
48px × 48px for fingers32px × 32px for mouse/trackpad14px 20px (increases to 12px 24px on desktop)4px offset from text baseline to prevent accidental taps768px breakpoint768px768px, by 50% below 480pxbody stays 14px on mobile, 16px on tablet+64px (desktop) → 48px (tablet) → 32px (mobile)#000000)#FFFFFF)#E0E0E0)#808080)#000000)#000000), Text White (#FFFFFF)#FFFFFF), Border Black (#000000)#D32F2F)#000000), 2px solid#FFFFFF), Border #E0E0E012px – 32px) and weight (400 – 700)0px; maintain rectilinear aesthetic12px internal component padding; 24px for containers0px 1px 3px for subtle raise, max 0px 8px 24px for modals)32px – 64px) establish rhythm; horizontal breaks use 1px borders48px on mobile, 32px on desktop768px, padding/spacing reduced 25–50% on small screens, typography hierarchy maintained across all breakpoints