# Dexbytes Design System

> High-contrast engineering blue anchored by technical typography and rounded pill-geometry.

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

## TL;DR
Dexbytes utilizes a professional "Corporate Tech" aesthetic defined by a primary blue (`#077fc8`) and deep navy (`#01012c`) foundation. The system is characterized by high-contrast typography using **Bai Jamjuree** for technical headings and **DM Serif Display** for high-impact editorial moments. UI elements lean heavily into pill-shaped geometry (`100px` radius) for primary actions, often paired with a secondary yellow accent (`#ffc930`) for highlights. The layout follows a clean, white-canvas approach with generous vertical spacing and structured content grids.

## Signature DNA
1. **The Technical Pill** (Primary buttons and badges use a consistent `100px` border-radius and `#077fc8` background, creating a soft but professional interactive language across all pages.)
2. **Dual-Heading Strategy** (The interplay between the geometric sans-serif **Bai Jamjuree** and the high-contrast **DM Serif Display** allows the brand to pivot between technical authority and editorial storytelling.)
3. **Navy Foundation** (The use of `#01012c` for footers and deep-surface backgrounds provides a heavy visual anchor for the lighter, blue-accented content sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text | 110 | 1 | `--bs-body-bg` |
| `{color.navy}` | `#01012c` | Footer background, surface headers | 9 | 0.6 | Computed style |
| `{color.gray.dark}` | `#212529` | Primary body text | 122 | 1 | `--bs-body-color` |
| `{color.gray.light}` | `#f3f4f6` | Subtle section backgrounds | 3 | 1 | `--bs-gray-100` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#077fc8` | Primary CTAs, links, borders | 95 | 0.8 | Computed style |
| `{color.primary.light}` | `#0d6efd` | Focus rings, text accents | 44 | 1 | `--bs-primary` |
| `{color.yellow}` | `#ffc930` | Secondary CTAs, highlight text | 31 | 0.8 | Computed style |
| `{color.green}` | `#186506` | Success indicators (decorative) | 6 | 0.6 | Computed style |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#198754` | Valid states |
| `{color.error}` | `#dc3545` | Invalid states |
| `{color.warning}` | `#ffc107` | Warning backgrounds |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Bai Jamjuree | 400, 500, 600, 700 | Primary Heading, UI, Body | Bai Jamjuree (Google Fonts) | SIL Open Font |
| DM Serif Display | 500 | Editorial Display | DM Serif Display (Google Fonts) | SIL Open Font |
| Chilanka | 400, 600 | Handwriting Accents | Chilanka (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 64px | 51.2px | -4px | 500 | Project titles | `h2.project-related-tt` |
| `{type.display.hero}` | 60px | 60px | -2.4px | 500 | Homepage hero | `h1.mega-heading` |
| `{type.display.lg}` | 44px | 52.8px | normal | 700 | Section headers | `h2` |
| `{type.heading.md}` | 24px | 28.8px | normal | 600 | Footer headings | `h4.links-heading` |
| `{type.heading.sm}` | 20px | 30px | normal | 600 | Primary buttons | `button.btn.blue-btn` |
| `{type.body.lg}` | 19px | 28.8px | normal | 400 | Intro paragraphs | `p` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body | `section#testmonial-video` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Nav links | `a.nav-link` |

### Principles
1. **Negative Tracking on Display:** Large display type (60px+) requires tight tracking (-2.4px to -4px) to maintain visual tension.
2. **Weight Contrast:** Headings frequently jump from 400 (Chilanka) to 700 (Bai Jamjuree) to create hierarchy in small clusters.
3. **Blue-on-White Priority:** Interactive text defaults to `#077fc8` on white backgrounds for maximum brand recognition.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 60 |
| `{space.sm}` | 12px | 53 |
| `{space.md}` | 16px | 97 |
| `{space.lg}` | 32px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|------|----------|
| `{radius.none}` | 0px | Sections, cards, footer | 339 occurrences |
| `{radius.pill}` | 100px | Buttons, tags, input fields | 44 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** All
**Spec:** Background: `{color.primary}` (#077fc8) | Text: `{color.white}` (#ffffff) | Radius: `100px` | Padding: `6px 12px` | Typography: `{type.heading.sm}`
**States observed:** Default | Hover | Active: captured

#### Surface
**Role:** Content grouping and containers
**Pages observed:** All
**Spec:** Background: transparent | Border: `1px solid rgba(255, 255, 255, 0.24)` | Radius: `0px` | Padding: `8px 12px 0px`

### Tier 2: Patterns
#### Footer
**Role:** Global site navigation and attribution
**Pages observed:** All
**Spec:** Background: `{color.navy}` (#01012c) | Text: `#ffffff` (observed in imagery) | Radius: `0px` | Padding: `16px 0px 8px`

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1320px (standard Bootstrap container) |
| Section Padding | 80px - 100px vertical |
| Grid | 12-column |

## Do's
- Use `#077fc8` for all primary action backgrounds.
- Apply `100px` border-radius to all interactive elements.
- Pair **Bai Jamjuree** (700) with **DM Serif Display** (500) for hero sections.
- Maintain white backgrounds for primary content areas to ensure readability.
- Use `#01012c` for high-contrast footer sections.

## Don'ts
- Do not use `#0d6efd` (Bootstrap default) as a primary button background; use brand blue `#077fc8`.
- Avoid sharp corners on buttons; the brand identity relies on the `100px` pill shape.
- Do not use **Chilanka** for long-form body text; it is strictly for decorative accents.
- Never place `#077fc8` text on a `#01012c` background (insufficient contrast).

## Quick start

```css
/* CSS Custom Properties */
:root {
  --dex-blue: #077fc8;
  --dex-navy: #01012c;
  --dex-yellow: #ffc930;
  --dex-text: #212529;
  --radius-pill: 100px;
  --font-main: "__Bai_Jamjuree_02468c", sans-serif;
  --font-display: "__DM_Serif_Display_0e4539", serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Dexbytes brand blue #077fc8, white text, and a 100px pill border radius."
- "Design a section header using DM Serif Display at 60px with -2.4px letter spacing."
- "Generate a footer component with a navy #01012c background and white Bai Jamjuree text links."

## Known gaps
- Shadow tokens were not captured in the source evidence; the system appears to favor flat design with borders over elevation.
- Mobile-specific typography scaling was not explicitly declared in tokens, though responsive behavior is observed in screenshots.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://dexbytes.com | 1440px | 2026-06-06 |
| Pricing | https://dexbytes.com/pricing | 1440px | 2026-06-06 |
| About | https://dexbytes.com/about | 1440px | 2026-06-06 |