# Dev BD IT design system

> Dev BD IT design system measured from devbdit.com: Roboto font, #59C21C primary on #FFFFFF, 14 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/devbdit.com/

Dev BD IT’s website (devbdit.com) uses the Roboto font and #59C21C as its main color on a white background. Measured by Sitepeel on November 6, 2026.

## What font does Dev BD IT use?

Dev BD IT uses Roboto (weights 400, 500 and 600) and Plus Jakarta Sans (weights 500 and 600) on devbdit.com. Page titles are 72px at weight 600 (26px on phones) and body text is 16px. Measured on November 6, 2026.

- Roboto (weights 400, 500, 600)
- Plus Jakarta Sans (weights 500, 600)
- system-ui (weights 400)

## Dev BD IT colors: palette and hex codes

Dev BD IT’s main colors are #FFFFFF (white) for the background, #000000 (near black) for text and #59C21C (green) as the main accent, with #001D39 (deep blue) and #985E23 (dark orange) as other accents. Measured on November 6, 2026.

- #FFFFFF: white
- #000000: near black
- #54595F: cool slate
- #736666: warm slate
- #737373: slate
- #FDFDFC: snow
- #F4FBF0: snow
- #F3F3F1: mist

## What is Dev BD IT built with?

Dev BD IT’s website (devbdit.com) is built with WordPress, Elementor, jQuery, PHP and LiteSpeed. Measured on November 6, 2026.

- Site builder & CMS: WordPress 7.1.4, Elementor 4.2.2
- JavaScript framework: jQuery 3.7.1
- Server: PHP 8.3.36, LiteSpeed
- Analytics: Microsoft Clarity, Google Analytics
- Fonts & icons: Lucide

## Questions and answers

### What font does Dev BD IT use?

Dev BD IT’s website uses Roboto (weights 400, 500 and 600) and Plus Jakarta Sans (weights 500 and 600). Page titles are 72px at weight 600 (26px on phones) and body text is 16px. Measured on November 6, 2026.

### What are the Dev BD IT colors and hex codes?

On devbdit.com: #FFFFFF (white) for the background, #000000 (near black) for text and #59C21C (green) as the main accent, with #001D39 (deep blue) and #985E23 (dark orange) as other accents. The color palette above lists all 14 colors with their hex codes and where each one is used.

### What is the Dev BD IT design system?

The design system on this page is devbdit.com’s, as measured on November 6, 2026: Roboto type, #59C21C as the main color and 12px corners, written down as a DESIGN.md. It is not Dev BD IT’s own documentation.

### What is Dev BD IT built with?

Dev BD IT’s website (devbdit.com) is built with WordPress, Elementor, jQuery, PHP and LiteSpeed. The full tech stack Sitepeel found: WordPress, Elementor, jQuery, PHP, LiteSpeed, Microsoft Clarity, Lucide and Google Analytics. Measured on November 6, 2026.

### What is the Dev BD IT DESIGN.md?

A plain-text file with Dev BD IT’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Dev BD IT’s official design system?

No. Sitepeel measured it from devbdit.com’s public page on November 6, 2026. It is an independent analysis, not made or approved by Dev BD IT.

### Can I use Dev BD IT’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Dev BD IT’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/devbdit.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Dev BD IT.

## The DESIGN.md file

```markdown
---
version: alpha
name: Dev BD IT
description: "Light interface measured from devbdit.com: Roboto type with Plus Jakarta Sans, green accents, tonal surfaces and 12px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#54595F"
  on-surface-muted: "#736666"
  on-surface-subtle: "#737373"
  surface-container-low: "#FDFDFC"
  surface-container: "#F4FBF0"
  surface-container-high: "#F3F3F1"
  surface-container-highest: "#E1F5D6"
  outline: "#B1AAAA"
  primary: "#59C21C"
  on-primary: "#FFFFFF"
  secondary: "#001D39"
  tertiary: "#985E23"
typography:
  headline-display:
    fontFamily: Roboto
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1
  headline-lg:
    fontFamily: Roboto
    fontSize: 47px
    fontWeight: 600
    lineHeight: 1
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
  headline-sm:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1
  body-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
  label-md:
    fontFamily: Roboto
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1
  label-sm:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: Roboto
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.2
  headline-lg-mobile:
    fontFamily: Roboto
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1
rounded:
  sm: 12px
  md: 18px
  lg: 22px
spacing:
  xs: 2px
  sm: 8px
  md: 12px
  lg: 24px
  gutter: 20px
  section: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 37px
  button-outline:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.sm}"
    padding: 15px 25px
    height: 46px
  link:
    textColor: "{colors.on-surface-subtle}"
---

# Dev BD IT Design System

## Overview

Dev BD IT describes itself as: “Professional WordPress Web Designer and Developer specializing in Elementor, Crocoblock, Digital Marketing and SEO. Let’s build a high-converting website.” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Green (#59C21C)** as the main accent.

Type is set in **Roboto** and **Plus Jakarta Sans**. Headlines run large; body text is 16px. The surface language is flat. Corners are mostly 12px.

Measured from [devbdit.com](https://devbdit.com/) on November 6, 2026 at 1440×900 and 390×844 from 318 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 14 roles.

- **White (#FFFFFF):** Page background, seen 1 time. Token `background`, CSS `--iti-dropdown-bg`.
- **Near Black (#000000):** Primary text and headings, seen 24 times. Token `on-surface`.
- **Cool Slate (#54595F):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Warm Slate (#736666):** Muted text and metadata, seen 2 times. Token `on-surface-muted`.
- **Slate (#737373):** Subtle text and placeholders, seen 18 times. Token `on-surface-subtle`.
- **Snow (#FDFDFC):** Raised areas one step from the page, seen 3 times. Token `surface-container-low`.
- **Snow (#F4FBF0):** Cards and panels, seen 1 time. Token `surface-container`.
- **Mist (#F3F3F1):** Hover and pressed fills, seen 3 times. Token `surface-container-high`.
- **Pale Green (#E1F5D6):** Highest raised elements, seen 47 times. Token `surface-container-highest`.
- **Warm Gray (#B1AAAA):** Borders and dividers, seen 1 time. Token `outline`.
- **Green (#59C21C):** Primary buttons and calls to action, seen 39 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Deep Blue (#001D39):** Accent (CSS variable). Token `secondary`.
- **Dark Orange (#985E23):** Accent (CSS variable). Token `tertiary`.

## Typography

**Roboto**, **Plus Jakarta Sans** and **system-ui** share the interface. Fallback stack: `Roboto, sans-serif`.

- **headline-display:** Roboto 72px at weight 600, line height 1 (26px on mobile). Page title (h1).
- **headline-lg:** Roboto 47px at weight 600, line height 1 (22px on mobile). Section headings (h2).
- **headline-md:** Plus Jakarta Sans 28px at weight 600, line height 1.2. Sub-section headings.
- **headline-sm:** Roboto 24px at weight 600, line height 1. Card and feature titles.
- **body-md:** system-ui 16px at weight 400, line height 1.5. Body text.
- **body-lg:** Plus Jakarta Sans 18px at weight 500, line height 1.5. Lead paragraphs.
- **body-sm:** Roboto 12px at weight 400, line height 1.5. Secondary and small text.
- **label-lg:** Plus Jakarta Sans 16px at weight 600, line height 1.25. Large buttons and tabs.
- **label-md:** Roboto 15px at weight 500, line height 1. Buttons, navigation and labels.
- **label-sm:** Roboto 14px at weight 600, line height 1.2. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 60% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 8px, md 12px, lg 24px.
- **Sections:** 80px vertical padding between major sections.
- **Gaps:** 20px is the most common gap in flex and grid layouts.
- **Breakpoints:** 479px, 480px, 575px, 576px, 767px, 768px, 991px, 992px, 1024px, 1199px, 1200px, 1360px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#FDFDFC → #F4FBF0 → #F3F3F1 → #E1F5D6) and #B1AAAA borders.

## Shapes

Most elements use 12px corners. Measured radii, most used first:

- **sm (12px):** 204 elements.
- **md (18px):** 24 elements.
- **lg (22px):** 12 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Hire Me”):** #59C21C fill, #FFFFFF text, 13px/600, 12px radius, padding 12px 24px.
- **button-outline (“View Portfolio”):** #F4FBF0 fill, #000000 text, 16px/600, 12px radius, padding 15px 25px.
- **link:** transparent fill, #737373 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #FDFDFC, #F4FBF0, #F3F3F1, #E1F5D6.
- Do keep text in 4 levels: #000000, #54595F, #736666, #737373.
- Do reserve #59C21C for primary actions and key highlights.
- Do reuse the measured spacing steps (8px, 12px, 24px).
- Do use 12px corners on most elements; larger surfaces also use 18px and 22px.
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond Roboto, Plus Jakarta Sans and system-ui.
- Don't use #59C21C for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.3s, 0.4s, 0.5s. Longer ambient animations run 300s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/devbdit.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```