Lijit Brand Design System Deep Dive

1. Brand Overview

Lijit’s visual language on lijit.com reads as utilitarian tech with just a hint of personality. The site is clean. No overblown gradients, no ornamental chaos. The palette is restrained — black, white, and a single electric blue (#3c4dff) that pops exactly where it needs to.

This is a brand that knows its audience: publishers, advertisers, and data-driven marketers. They don’t need romantic storytelling. They need clarity, trust, and signals of competence. The typography choices — LL Circular and Fira Sans — are contemporary and humanist, but not too quirky. They communicate: “We’re modern, but we’re serious.” LL Circular does the heavy lifting for headings and links, while Fira Sans appears selectively, likely for body or functional text.

The overall feel is modular. Bootstrap underpins the grid, so everything falls into predictable, well-spaced columns. The spacing system is 8px-based, which gives consistency across breakpoints. And yes, they’re using a lot of breakpoints — from tiny (98px) up to large desktop (1345px). That suggests they care about fine-tuning across devices, not just mobile/tablet/desktop.

The shadows? Minimal. One low-opacity black shadow shows up (rgba(0,0,0,0.35) 0px 2px 4px 0px), which is subtle depth, not skeuomorphic fluff. Border radii are small — 5px for most elements, and a single asymmetric 20px top-only radius for something custom (likely a card or modal top edge). Corners are generally tight, reinforcing a professional feel.

In short: Lijit’s design system is lean, functional, and grid-loyal. It’s not here to impress with visual fireworks; it’s here to convey stability and professionalism, with just enough branded blue to anchor the identity. The audience is B2B, and the design reflects that: trustworthy, no-nonsense, but still modern.

2. Color System

2.1 Primary Colors

The hero of the palette is #3c4dff — a saturated electric blue. It’s used for links, CTAs, and interactive accents. Psychologically, this blue leans toward energy and decisiveness, but without crossing into aggressive territory. In a B2B context, it’s also a safe bet: blue equals trust, but this particular hue is more vivid than the corporate navy blues you see from giants like IBM or Facebook.

The rest of the palette is pure black (#000000) and pure white (#ffffff). These neutrals do the heavy lifting for text and background surfaces. The contrast is stark, especially with the blue as an accent. It’s a minimal triad of colors that makes the blue stand out even more.

Compared to competitors: Many ad tech companies go heavy on gradients or use softer blues and grays. Lijit’s choice to go with pure black and white and a single vivid blue feels deliberate — it’s about control and focus, not variety.

2.2 Complete Palette

2.3 Color Relationships

• Black on White: Maximum contrast. WCAG AAA compliant for text of any size.
• White on Black: Again, maximum contrast. Used for inverted sections.
• Blue (#3c4dff) on White: Good contrast (~6.77:1), passes WCAG AA for normal text and AAA for large text. Works well for links and buttons.
• White on Blue: Strong enough contrast (~8.59:1), safe for buttons and CTA text.

No evidence of a dark mode. The palette is minimal enough that inversion would be trivial: swap white and black, keep the blue.

2.4 Usage Guide

• Do: Use #3c4dff for interactive states — links, buttons, highlights. Keep it rare in non-interactive contexts so it retains its clickability.
• Do: Keep backgrounds either pure white or pure black to maintain brand contrast.
• Avoid: Using blue on black — the contrast drops (~3.02:1) and fails accessibility for normal text.
• Avoid: Introducing new accent colors. This system works because it’s minimal.

3. Typography

3.1 Font Families

The system uses LL Circular Bold Web and LL Circular Book Web as primary brand fonts. They fall back to Helvetica, Arial if unavailable. LL Circular is a geometric sans with a friendly but precise look — think modern tech startup meets Swiss minimalism.

There’s also Fira Sans in the mix for a smaller heading style. Fira Sans is open-source, slightly more condensed, and functional. It likely appears in utility text or smaller UI labels.

No Google Fonts or Adobe Fonts detected — likely self-hosted or licensed locally.

3.2 Type Scale

3.3 Hierarchy

The scale is tight. The jump from 37px H1 to 20px subhead is steep — this creates a clear visual break between major headings and body/subhead text. The smaller sizes (16px, 14px) are used for navigation and labels, with all-caps + letter-spacing (1.25px) for the smallest link style. This uppercase microtype is a common trick for nav menus — it feels structured and crisp.

The hierarchy relies on weight and case as much as size. Even at the same size (20px), a bold heading and a regular link will feel different.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Most values are multiples of 8, with a few outliers for specific component needs.

4.2 Layout

Framework: Bootstrap. That means a 12-column grid, .container widths matching breakpoints, and standard .row/.col behavior.

Breakpoints detected:

• 98px (tiny — likely for very small devices)
• 575px / 576px (Bootstrap XS/SM threshold)
• 767px / 768px (SM/MD)
• 991px / 992px (MD/LG)
• 1200px / 1201px (LG/XL)
• 1345px (custom large desktop)

This is a responsive system tuned for in-between device widths. The duplication (e.g., 575px and 576px) shows exact CSS media query boundaries.

5. Visual Elements

Border Radius

Two values:

• 5px — default small rounding, likely for buttons, inputs, and cards.
• 20px 20px 0px 0px — heavy rounding on top corners only, flat bottom corners. Likely for a modal or card with a “sheet” feel.

These are small, controlled radii. No full pills or extreme rounding.

Shadows

One shadow in the system:

rgba(0, 0, 0, 0.35) 0px 2px 4px 0px

It’s subtle, short, and soft. Used sparingly — maybe on dropdowns or modals.

Borders

Two combinations:

1. 0px 0px 3px solid rgb(51, 51, 51) — bottom border. Could be a section divider.
2. 3px 0px 0px solid rgb(95, 95, 95) — top border. Possibly for tab indicators or section headers.

6. Components

6.1 Buttons

No explicit button styles extracted — possibly all styled as links or via Bootstrap defaults. Given the border-radius 5px, we can infer buttons are rectangular with slightly rounded corners. The primary color for buttons would be #3c4dff with white text.

6.2 Links

Three variants:

1. White text, no underline — White in default and hover. Likely for nav on dark backgrounds.
2. Blue (#3c4dff), underline — Default link style on light backgrounds. Hover changes to white (suggests hover state in dark section).
3. Black (#000000), no underline — Neutral links. Hover changes to white — again, context-dependent.

6.3 Forms

No input styles extracted. Likely relying on Bootstrap’s defaults with small customizations.

6.4 Cards

No explicit card component, but spacing and shadow suggest simple white boxes with 5px radius and the subtle shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-primary: #3c4dff;

  /* Typography */
  --font-ll-circular-bold: "LL Circular Bold Web", Helvetica, Arial;
  --font-ll-circular-book: "LL Circular Book Web", Helvetica, Arial;
  --font-fira-sans: "Fira Sans";

  --font-size-h1: 37px;
  --font-size-subhead: 20px;
  --font-size-body: 16px;
  --font-size-label: 14px;

  --line-height-tight: 1.14;
  --line-height-default: 1.50;
  --line-height-h1: 1.30;

  --letter-spacing-label: 1.25px;

  /* Spacing Scale */
  --space-1: 1px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-16: 16px;
  --space-30: 30px;
  --space-32: 32px;
  --space-35: 35px;
  --space-40: 40px;
  --space-58: 58px;
  --space-60: 60px;
  --space-62: 62px;
  --space-90: 90px;

  /* Border Radius */
  --radius-sm: 5px;
  --radius-top-lg: 20px 20px 0 0;

  /* Shadows */
  --shadow-sm: 0px 2px 4px 0px rgba(0,0,0,0.35);

  /* Borders */
  --border-bottom-3-dark: 0px 0px 3px solid rgb(51,51,51);
  --border-top-3-gray: 3px 0px 0px solid rgb(95,95,95);
}

8. AI Coding Assistant Prompt

# Lijit Design System Specification

You are a Lijit design expert. Build UIs matching their visual language exactly.

## Brand Context
Lijit’s design language is minimal, modern, and functional. It’s built for a B2B audience, prioritizing clarity and trust. The visual identity is anchored by a single electric blue on a black-and-white foundation, with tight grid-based spacing and clean, geometric typography.

## Color Palette
- Black: #000000 — Primary text, dark backgrounds, structural elements
- White: #ffffff — Primary background, inverted text color
- Primary Blue: #3c4dff — Links, CTAs, interactive highlights

### Color Rules
- Only use these three colors
- Blue is for interactive elements only
- Avoid blue on black for accessibility reasons
- Maintain high contrast for text

## Typography
- Headings: "LL Circular Bold Web", Helvetica, Arial
- Body: "LL Circular Book Web", Helvetica, Arial
- Utility text: "Fira Sans"

| Level                | Size  | Weight | Line Height | Use For |
|----------------------|-------|--------|-------------|---------|
| H1                   | 37px  | 500    | 1.30        | Page titles |
| Subhead / Link Large | 20px  | 400    | 1.50        | Section headings, large links |
| Body                 | 16px  | 400    | 1.50        | Paragraph text |
| Link Small           | 16px  | 400    | 1.50        | Navigation links |
| Label Uppercase      | 14px  | 400    | 1.14        | Menu labels, uppercase, 1.25px letter-spacing |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 8px, 10px, 15px, 16px, 30px, 32px, 35px, 40px, 58px, 60px, 62px, 90px.
Use multiples of 8px wherever possible.

## Border Radius
- sm: 5px — buttons, inputs, cards
- top-lg: 20px 20px 0 0 — special cards or modals

## Shadows & Depth
- sm: rgba(0, 0, 0, 0.35) 0px 2px 4px 0px — subtle depth for dropdowns, overlays

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #3c4dff;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 5px;
  font-family: "LL Circular Bold Web", Helvetica, Arial;
  font-size: 16px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #000000;
}
.btn-primary:focus {
  outline: 2px solid #3c4dff;
  outline-offset: 2px;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Navigation Links
Default/hover styles from data:
```css
.nav-link-white {
  color: #ffffff;
  text-decoration: none;
}
.nav-link-white:hover {
  color: #ffffff;
}

.nav-link-blue {
  color: #3c4dff;
  text-decoration: underline;
}
.nav-link-blue:hover {
  color: #ffffff;
  text-decoration: none;
}

.nav-link-black {
  color: #000000;
  text-decoration: none;
}
.nav-link-black:hover {
  color: #ffffff;
}
```

## Layout & Responsive Rules
- Bootstrap grid: 12 columns
- Breakpoints: 98px, 575px, 576px, 767px, 768px, 991px, 992px, 1200px, 1201px, 1345px
- Max content width follows Bootstrap `.container` widths
- Page padding: multiples of 8px

## Interaction Rules
- Transition duration: 150ms ease for hover/focus changes
- Focus indicators: 2px solid primary blue with 2px offset
- Hover changes link colors and removes underline where specified

## DO
- Use only #000000, #ffffff, #3c4dff
- Maintain 8px grid for spacing
- Use LL Circular for headings and body
- Keep border-radius consistent (5px or specified variant)
- Use uppercase + letter spacing for small labels

## DON'T
- Add unapproved colors
- Use inconsistent corner radii
- Overuse shadows
- Put blue text on black backgrounds
- Mix fonts outside the approved families

## Code Examples

### Button
```css
.btn-primary {
  background: #3c4dff;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 5px;
  font-family: "LL Circular Bold Web", Helvetica, Arial;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.35);
  padding: 16px;
}
```

### Input
```css
.input {
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 8px;
  font-family: "LL Circular Book Web", Helvetica, Arial;
  font-size: 16px;
}
.input:focus {
  border-color: #3c4dff;
  outline: none;
}
```

9. Summary

TL;DR — Lijit’s design system is a stripped-down, professional toolkit: black, white, and one electric blue. LL Circular handles the type, an 8px grid keeps spacing clean, and Bootstrap does the heavy lifting for layout. Depth is minimal, radii are tight, and the blue is reserved for clickable things. It’s tech-B2B minimalism done right.

Brand Keywords:

• grid-disciplined
• tech-professional
• minimal-accented
• contrast-driven
• typography-conscious