Brand Style Guide

Devlowper
Brand Identity

Complete brand identity system — Logo, Colors, Typography,
UI Components & Usage Guidelines.

Explore Identity
6
Logo Files
14
Brand Colors
8
Components
02 — Icon Sizes
Icon Scale
Blue Background Variant
512px512 px
256px256 px
128px128 px
64px64 px
48px48 px
32px32 px
24px24 px
16px16 px
App Icon Shapes
Circle white
Circle / White
Circle blue
Circle / Blue
Circle dark
Circle / Dark
Rounded blue
App / Blue
Rounded white
App / White
Rounded dark
App / Dark
Square
Square / Blue
03 — Colors
Color Palette
Primary Colors
Brand Blue
#3267e3
rgb(50, 103, 227)
White
#ffffff
rgb(255, 255, 255)
Blue Scale
Darker
#0f2d8a
Dark
#1a4cc8
Base ★
#3267e3
Mid
#5583ea
Light
#6b93f0
Pale
#dde8ff
Neutral Scale
Dark BG
#0d1117
Black
#0c0f1a
Gray 600
#4a5568
Gray 400
#8896b3
Contrast Ratios
White on Blue AA ✓
Blue on White AA ✓
White on Dark AAA ✓
Dark on Blue AA ✓
04 — Typography
Type System
Primary · DM Sans
DM Sans
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z · 0–9
Light 300 Regular 400 SemiBold 600 Bold 700 ExtraBold 800 Black 900
Monospace · DM Mono
DM Mono
const devlowper = () => <build />;
Type Scale
Display / 72 / 900
Build. Ship. Scale.
H1 / 48 / 800
Modern Web Dev
H2 / 32 / 700
Tools for developers
H3 / 22 / 700
Get started in seconds
Body / 16 / 400
We help developers build better products faster with clean code.
Small / 14 / 400
Version 1.0.0 · March 2025
Label / 11 / 700
Get Started Free
Code / 14 Mono
npm install devlowper
05 — Spacing
Spacing Scale
4xs
8sm
12md
16base
24lg
32xl
482xl
643xl
964xl
1285xl
Border Radius
4px
8px
12px
16px
20px
999px
06 — Components
UI Components
Buttons
Badges & Tags
New Developer Pro <devlowper/> Beta ● Live
Cards
Fast Deploy
Ship to production in seconds with zero config.
Clean Code
Write better code with smart tooling.
Scale Easy
Built to grow with your team from day one.
Form Elements
07 — Logo Usage
Do's & Don'ts

✓ Do

  • Always use the original logo files provided
  • Blue bg → use white "dl" icon (logo-2 / logo-6)
  • White bg → use blue "dl" icon (logo-1 / logo-4)
  • Dark bg → use white "dl" icon (logo-3 / logo-5)
  • Maintain clear space equal to icon height on all sides
  • Scale proportionally — keep the aspect ratio always
  • Use DM Sans for all wordmark and UI typography
  • Use monochrome version where color is unavailable

✗ Don't

  • Never alter or recreate the "dl" letterform
  • Never stretch, rotate, or distort the logo
  • Never apply drop shadows or effects to the logo
  • Never place on low-contrast or patterned backgrounds
  • Never mix wrong variants on wrong backgrounds
  • Never change the brand blue #3267e3
  • Never use below minimum clear space
  • Never use the icon at sizes below 16px
08 — Brand In Use
Brand Applications
Social / Avatar
avatar
devlowper
@devlowper · 12.4k followers
Browser Favicon
favicon devlowper — Build. Ship. Scale. ×
loading logo
LOADING...
Devlowper
devlowper

Brand Style Guide · Version 1.0 · 2025

© 2025 Devlowper. All rights reserved.