# Databyte.com.mt Design System

> High-contrast corporate utility defined by deep slate foundations, teal accents, and generous white space.

**Source:** https://databyte.com.mt | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Databyte employs a professional, high-contrast aesthetic that balances a pure white canvas (`#ffffff`) with a deep slate palette (`#11202a`, `#232b30`). The system uses a distinctive teal-green accent for primary actions and iconography, providing a sharp "tech" signal against the otherwise sober corporate colors. Typography is clean and sans-serif, prioritizing legibility in dense service grids. Layouts are structured around a 12-column grid with significant vertical breathing room (section gaps), while interactive elements use sharp or slightly softened corners to maintain a precise, engineered feel.

## Signature DNA
1. **The Slate-Teal Contrast** (Deep `#11202a` headings paired with teal-green accents in logos and icons, creating a "modern enterprise" signature observed across the homepage).
2. **Dense Service Grids** (3-up feature blocks with centered typography and specific "More on..." teal buttons, establishing a repeatable pattern for complex product offerings).
3. **Inverted Footer Foundation** (A heavy dark-mode footer using `#232b30` as a grounding element, contrasting sharply with the light-mode body).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--enfold-main-color-bg` | `#ffffff` | Primary page canvas and section background | High | 100% | Token |
| `--enfold-header-color-heading` | `#11202a` | Primary display text and section headers | High | 100% | Token |
| `--enfold-footer-color-bg` | `#232b30` | Footer background and dark-mode sections | High | 100% | Token |
| `--enfold-main-color-color` | `#757575` | Default body text on light surfaces | High | 100% | Token |
| `--enfold-main-color-border` | `#e1e1e1` | Subtle dividers and card outlines | Medium | 100% | Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--enfold-main-color-primary` | `#4a1616` | Secondary brand accent (dark red) | Low | 100% | Token |
| `--wp--preset--color--palm-leaf` | `#83a846` | Decorative green elements | Low | 100% | Token |
| `--enfold-main-color-secondary` | `#ca8266` | Tertiary accent (muted orange) | Low | 100% | Token |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Sans-serif (System) | 400, 600, 700 | All UI, Headings, and Body | Inter | Proprietary/System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.h1}` | 48px | 1.1 | -0.02em | 700 | Hero headlines | `h1.av-special-heading-tag` |
| `{typography.h2}` | 32px | 1.2 | 0 | 600 | Section headers | `h2.av-special-heading-tag` |
| `{typography.h3}` | 24px | 1.3 | 0.05em | 600 | Feature titles | `h3.av-special-heading-tag` |
| `{typography.body-lg}` | 18px | 1.6 | 0 | 400 | Intro paragraphs | `.av_textblock_section p` |
| `{typography.body-md}` | 16px | 1.5 | 0 | 400 | Standard body | `body` |
| `{typography.nav}` | 15px | 1.0 | 0.1em | 600 | Main navigation | `#top #header .av-main-nav > li > a` |
| `{typography.button}` | 13px | 1.0 | 0 | 600 | CTA labels | `.avia-button` |
| `{typography.caption}` | 12px | 1.4 | 0 | 400 | Footer links | `#footer .widget` |

### Principles
1. **Uppercase Navigation**: Main menu items use all-caps with generous letter-spacing (0.1em) for clarity.
2. **Heading Contrast**: Headlines use the dark slate `#11202a` to pop against the white background.
3. **Line Height for Readability**: Body copy maintains a 1.5-1.6 line height to prevent fatigue in long-form descriptions.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.xs}` | 8px | Inline elements |
| `{spacing.md}` | 20px | Component internal padding |
| `{spacing.xl}` | 50px | Section vertical padding |
| `{spacing.xxl}` | 100px | Hero and major section gaps |

## Border radius
Table: | Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Primary CTA buttons, section containers | `.avia-button` |
| `{radius.sm}` | 3px | Form inputs, small badges | `input[type='text']` |
| `{radius.full}` | 9999px | Icon circles, avatars | `.av-icon-char` |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default state for all cards and sections | Homepage |

## Components

### Tier 1: Foundational

#### Main Navigation
**Role:** Primary site wayfinding
**Pages observed:** 1 (Header)
**Spec:** Background `#ffffff` / Text `#11202a` / Typography `{typography.nav}`
**States observed:** Default | Hover: Teal underline | Focus: Not captured

#### Primary Button
**Role:** Call to action
**Pages observed:** 1 (Hero, Contact)
**Spec:** Background transparent / Border 2px `#11202a` / Text `#11202a` / Radius 0px
**States observed:** Default | Hover: Background `#11202a`, Text `#ffffff`

### Tier 2: Patterns

#### Feature Card
**Role:** Service/Product summary
**Pages observed:** 1 (Homepage grid)
**Spec:** Background transparent / Text `#757575` / Header `#11202a` / Alignment: Centered
**States observed:** Default

#### Icon List (Checklist)
**Role:** Value proposition listing
**Pages observed:** 1 ("Why Choose" section)
**Spec:** Icon Background `#f8f8f8` / Icon Color Teal / Text `#11202a`
**States observed:** Default

### Tier 3: Surface-specific

#### Service CTA Button
**Role:** Deep link to sub-products
**Pages observed:** 1 (Service grid)
**Spec:** Background Teal / Text `#ffffff` / Radius 0px / Padding 10px 15px
**States observed:** Default | Hover: Darker teal

#### Footer Widget
**Role:** Site metadata and contact info
**Pages observed:** 1 (Footer)
**Spec:** Background `#232b30` / Text `#e4e6f0` / Heading `#8e9392`
**States observed:** Default

## Layout
Table: | Property | Value |
|----------|-------|
| Max-width | 1310px |
| Column count | 12 |
| Gutter | 30px |

## Responsive
Table: | Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 767px | Navigation collapses to hamburger; 3-up grids become 1-up stacks. |
| Tablet | 768px - 989px | 3-up grids become 2-up with wrap. |
| Desktop | > 990px | Full 12-column layout enabled. |

## Imagery & decoration
Databyte utilizes high-quality workspace photography (laptops, meetings) with a bright, airy feel. Decorative elements include teal-colored line icons and circular icon containers. The brand avoids heavy shadows or complex gradients, favoring flat, clean shapes.

## Do's
- Use `#ffffff` as the primary canvas for all content-heavy sections.
- Apply `{typography.h1}` only once per page in the hero section.
- Use teal accents exclusively for interactive elements or iconography.
- Maintain 100px vertical spacing between major homepage sections.
- Ensure all CTA buttons use sharp 0px corners.

## Don'ts
- **Wrong:** Using sub-brand colors (like `#ff6900` orange) for parent-level navigation.
  **Right:** Use `#11202a` for all primary navigation and headers.
  **Reason:** Maintains parent brand authority and prevents visual confusion with sub-products.
- **Wrong:** Applying border-radius to primary buttons.
  **Right:** Keep buttons at `{radius.none}` (0px).
  **Reason:** Sharp corners are a core part of the "engineered" brand aesthetic.
- **Wrong:** Using `#000000` for body text.
  **Right:** Use `#757575` for running body copy.
  **Reason:** Reduces visual vibration and improves long-form reading comfort.

## Similar brands
- SAP (Corporate high-contrast)
- Microsoft (Clean enterprise utility)
- Sage (Professional service-oriented layout)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --db-canvas: #ffffff;
  --db-ink-primary: #11202a;
  --db-ink-body: #757575;
  --db-accent-teal: #008a8a; /* Derived from logo */
  --db-footer-bg: #232b30;
  --db-radius-none: 0px;
}
```

## Agent prompt examples
- "Create a 3-column grid of service cards using a white background, centered `#11202a` headers, and teal-colored sharp-cornered buttons labeled 'More on [Service]'."
- "Design a footer section using a `#232b30` background with three columns for 'Find Us', 'Contact Us', and 'More Info' using `#e4e6f0` text."
- "Generate a hero section with a centered H1 in `#11202a` at 48px, followed by a 18px body paragraph and a sharp-bordered transparent button."

## Known gaps
- Specific hover hex codes for teal buttons were not explicitly tokenized in the source.
- Mobile-specific typography scale for H1-H3 was not fully captured.
- Success/Error semantic colors were not observed on the analyzed pages.

## Provenance
Table: | Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://databyte.com.mt | Desktop 1440px | 2026-06-06 |