Lencr Design System Deep Dive

1. Brand Overview

Lencr is part of the Let's Encrypt ecosystem — it's essentially their certificate authority endpoint brand. That means the audience here is technical: developers, sysadmins, security engineers. This isn’t a lifestyle brand. It’s not selling sneakers or coffee beans. The design is utilitarian and precise because the product is trust and security.

When you land on the Lencr site, you get an immediate sense of seriousness. The palette is subdued except for a few deliberate hits of orange for calls to action. Typography is clean, sans-serif, and system-friendly — no decorative flourishes. The layout is grid-based with generous white space and sharp alignment. This is the design equivalent of a well-organized server rack: efficient, functional, and built for clarity.

They’re using Tailwind CSS and Vuetify, which tells me the design system is component-driven and responsive out of the box. Tailwind gives them atomic control over spacing, colors, and typography; Vuetify provides structured, accessible components. This combination is unusual — most brands pick one framework — but here, it works because the audience tolerates “framework look” as long as the content is clear.

The vibe: security-first, developer-friendly, no-nonsense. The design philosophy is "minimal but not bare." They avoid visual noise yet keep enough contrast and hierarchy to guide the eye. Buttons are obvious. Links are clear. Borders and radii are small but consistent. This is a system where every pixel has a job.

2. Color System

2.1 Primary Colors

The main brand color is #003a70 — a deep navy blue. This is the anchor of the palette. It’s used for text links, button borders, and logo accents. Psychologically, navy signals trust, authority, and stability — perfect for a security brand. Competitors in the CA space (like DigiCert or GlobalSign) also rely on blues, but Lencr’s tone is darker and less saturated, which feels more sober.

The accent color is #ffa300 — a bright orange. Orange in a security context is interesting: it’s warm and attention-grabbing without being aggressive like red. They use it for primary buttons and subtle highlights. This orange against the navy creates strong contrast, making calls to action unmissable.

2.2 Complete Palette

Color Name	Hex / Value	Role	Usage
Black	#000000	Text / UI outlines	Body text, icon strokes
White	#ffffff	Background / Text on dark	Page background, text on navy
Navy Blue	#003a70	Primary brand color	Links, button borders, logo
Soft Lavender	#eeeeff	Background tint	Section backgrounds
Light Gray	#e8e8e8	Borders	Code block borders
Bright Orange	#ffa300	Accent / CTA	Primary buttons
Dark Gray (OKLCH)	oklch(0.21 0.034 264.665)	Dark text	On light backgrounds
Medium Blue	#005fcc	Hover/focus state	Link hover, button focus
--color-link-on-dark	#fff	Links on dark backgrounds	Footer navigation
--color-link-active	#001f3d	Active link state	Nav menus
--color-gray-800	oklch(27.8% .033 256.848)	Dark gray text	Secondary text
--color-orange-700	oklch(55.3% .195 38.402)	Darker orange	Hover states, warnings
--color-blue-700	oklch(48.8% .243 264.376)	Dark blue	Buttons, links
--color-orange-50	oklch(98% .016 73.684)	Light orange background	Highlights
--color-blue-300	oklch(80.9% .105 251.813)	Light blue	Info banners
--color-link-on-dark-active	#ccc	Active link on dark	Footer hover
--color-gray-300	oklch(87.2% .01 258.338)	Light gray	Dividers
--color-gray-500	oklch(55.1% .027 264.364)	Medium gray	Placeholder text
--color-blue-500	oklch(62.3% .214 259.815)	Medium blue	Secondary buttons
--color-gray-900	oklch(21% .034 264.665)	Almost black	Headlines
--color-gray-50	oklch(98.5% .002 247.839)	Lightest gray	Background
--color-gray-700	oklch(37.3% .034 259.733)	Dark gray	Captions
--color-gray-400	oklch(70.7% .022 261.325)	Mid gray	Link text
--color-gray-600	oklch(44.6% .03 256.802)	Darker mid gray	UI controls
--color-blue-600	oklch(54.6% .245 262.881)	Darkish blue	Buttons
--color-primary-button-hover	#002b54	Button hover	CTA hover
--color-gray-100	oklch(96.7% .003 264.542)	Very light gray	Panels
--color-blue-50	oklch(97% .014 254.604)	Very light blue	Info background
--color-gray-200	oklch(92.8% .006 264.531)	Light gray	Inputs
--color-black	#000	Black	Text, icons
--color-orange-300	oklch(83.7% .128 66.29)	Light orange	Warnings

2.3 Color Relationships

The navy (#003a70) against white (#ffffff) is high contrast — easily WCAG AA/AAA compliant for text. The orange (#ffa300) against navy is also high contrast; orange on white might need bold weight to pass small-text accessibility.

They use OKLCH values for grays and blues — that’s a modern choice for perceptual uniformity. This means tints and shades are balanced visually, not just mathematically. That’s important when designing accessible states: hover blues aren’t too dark, disabled grays aren’t too light.

Dark mode isn’t explicitly visible in the extracted data, but the “link-on-dark” tokens suggest some components adapt.

2.4 Usage Guide

Works well:

Navy background + white text.
Orange button + navy text (inverse of the typical white text on orange).
Light gray backgrounds (#e8e8e8, #eeeeff) for code or info blocks.

Avoid:

Orange text on white — too low contrast for body copy.
Blue-300 (#80.9% lightness) on white — will feel washed out unless large.
Mixing OKLCH grays with pure hex grays without care — slight perceptual mismatch.

3. Typography

3.1 Font Families

Main UI font: ui-sans-serif with fallbacks:

system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

This is pure system stack — no Google Fonts, no Adobe Fonts. That’s consistent with a security-focused brand: fewer external dependencies, faster loads, predictable rendering.

Icons: Font Awesome 6 Free and Font Awesome 6 Brands — icon fonts, not SVGs. That’s old-school but works for consistent sizing.

3.2 Type Scale

Element	Font Family	Size	Weight	Line Height
Heading-1	ui-sans-serif	36px (2.25rem)	700	1.11
Link (icon)	Font Awesome 6 Free	28.8px (1.80rem)	900	1.00
Button	ui-sans-serif	16px (1.00rem)	400	1.50
Link	ui-sans-serif	16px (1.00rem)	400	1.50
Heading-1 (alt)	ui-sans-serif	16px (1.00rem)	400	1.50
Button (medium)	ui-sans-serif	16px (1.00rem)	500	1.50
Caption	ui-sans-serif	14px (0.88rem)	500	1.43
Caption	ui-sans-serif	12px (0.75rem)	400	1.33
Link (small)	ui-sans-serif	12px (0.75rem)	400	1.33
Caption (small uppercase)	ui-sans-serif	12px (0.75rem)	500	1.33

3.3 Hierarchy

H1 at 36px is the big anchor — rarely used, so it stands out. Body text is 16px, comfortable for reading. Captions drop to 12px–14px with uppercase and letter spacing to signal metadata.

Weights are conservative: 400 for body, 500 for buttons/captions, 700 for H1. No ultra-light or ultra-bold experiments. This keeps text legible and predictable across devices.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.

Value	Rem	Count (usage frequency)
1px	0.06rem	22
2px	0.13rem	1
4px	0.25rem	8
6px	0.38rem	2
8px	0.50rem	62
10px	0.63rem	1
12px	0.75rem	1
16px	1.00rem	13
20px	1.25rem	1
24px	1.50rem	9
32px	2.00rem	7
40px	2.50rem	2
70px	4.38rem	1

They stick to multiples of 2 or 4, with 8px as the most common. The 70px is probably a hero section gap.

4.2 Layout

Breakpoints:

480px
640px
1080px
1280px
1920px

These give fine control over mobile, tablet, and large desktop layouts. Tailwind responsive modifiers handle the rest. Expect containers to max out around 1280px with padding scaling at each breakpoint.

5. Visual Elements

Border radius:

3px — code blocks.
6px — buttons, menus, nav items.
8px — occasional divs.

Small radii keep things sharp. No pills, no extreme rounding.

Shadows: Mostly flat. Shadows are subtle rgba(0,0,0,0.1) with small offsets. Often multiple layered shadows for cards, but very faint.

Borders:

1px solid #e8e8e8 — code blocks.
1px solid #003a70 — buttons.
OKLCH grays for dividers.

They rely more on borders than shadows for separation.

6. Components

6.1 Buttons

Primary (btn-yellow):

Default: bg #ffa300, text #003a70, padding 8px 16px, radius 6px, border 1px solid #003a70, font 16px/500.
Hover: not explicitly extracted, but token --color-primary-button-hover = #002b54 suggests darker navy background.
Focus: outline #003a70.
Active/Disabled: not specified — likely opacity changes.

6.2 Links

Multiple link styles:

Navy (#003a70), underline default.
Dark gray (OKLCH 0.373) — no underline.
Mid gray (OKLCH 0.707) — weight 900, no underline.
White (#ffffff) — for dark backgrounds.

No hover styles extracted — could be subtle color shifts.

6.3 Forms

No inputs defined in extracted data — likely inherit Vuetify defaults.

6.4 Cards

Padding likely follows spacing scale (16px or 24px). Shadows from system: rgba(0,0,0,0.1) offsets. Borders in light gray for separation.

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-navy: #003a70;
  --color-soft-lavender: #eeeeff;
  --color-light-gray: #e8e8e8;
  --color-orange: #ffa300;
  --color-dark-gray-oklch: oklch(0.21 0.034 264.665);
  --color-medium-blue: #005fcc;
  --color-link-on-dark: #fff;
  --color-link-active: #001f3d;
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-orange-700: oklch(55.3% .195 38.402);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-orange-50: oklch(98% .016 73.684);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-link-on-dark-active: #ccc;
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-gray-900: oklch(21% .034 264.665);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-primary-button-hover: #002b54;
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-blue-50: oklch(97% .014 254.604);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-orange-300: oklch(83.7% .128 66.29);

  /* Typography */
  --font-ui: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-icons: "Font Awesome 6 Free";
  --font-icons-brands: "Font Awesome 6 Brands";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-70: 70px;

  /* Radius */
  --radius-3: 3px;
  --radius-6: 6px;
  --radius-8: 8px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px;
  --shadow-md: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px;
}

8. AI Coding Assistant Prompt

# Lencr Design System Specification

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

## Brand Context
Lencr is a certificate authority brand under Let's Encrypt. The design is minimal, security-focused, and developer-friendly. It uses a restrained palette with deep navy and bright orange accents, small-radius elements, and a strict 8px spacing grid.

## Color Palette
- Black: #000000 — Body text, icons
- White: #ffffff — Backgrounds, text on dark
- Navy Blue: #003a70 — Primary brand color, links, borders
- Soft Lavender: #eeeeff — Section backgrounds
- Light Gray: #e8e8e8 — Borders
- Bright Orange: #ffa300 — Primary buttons, accents
- Dark Gray OKLCH: oklch(0.21 0.034 264.665) — Dark text
- Medium Blue: #005fcc — Hover/focus states
- Link on Dark: #fff — Footer links
- Link Active: #001f3d — Active nav links
- Gray-800: oklch(27.8% .033 256.848) — Secondary text
- Orange-700: oklch(55.3% .195 38.402) — Hover/warnings
- Blue-700: oklch(48.8% .243 264.376) — Buttons
- Orange-50: oklch(98% .016 73.684) — Highlight background
- Blue-300: oklch(80.9% .105 251.813) — Info banners
- Link on Dark Active: #ccc — Footer hover
- Gray-300: oklch(87.2% .01 258.338) — Dividers
- Gray-500: oklch(55.1% .027 264.364) — Placeholder text
- Blue-500: oklch(62.3% .214 259.815) — Secondary buttons
- Gray-900: oklch(21% .034 264.665) — Headlines
- Gray-50: oklch(98.5% .002 247.839) — Background
- Gray-700: oklch(37.3% .034 259.733) — Captions
- Gray-400: oklch(70.7% .022 261.325) — Link text
- Gray-600: oklch(44.6% .03 256.802) — UI controls
- Blue-600: oklch(54.6% .245 262.881) — Buttons
- Primary Button Hover: #002b54 — CTA hover
- Gray-100: oklch(96.7% .003 264.542) — Panels
- Blue-50: oklch(97% .014 254.604) — Info background
- Gray-200: oklch(92.8% .006 264.531) — Inputs
- Orange-300: oklch(83.7% .128 66.29) — Warnings

## Typography
- UI Font: ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
- Icon Font: "Font Awesome 6 Free"
- Heading-1: 36px, weight 700, line-height 1.11
- Link Icon: 28.8px, weight 900, line-height 1.00
- Button: 16px, weight 400, line-height 1.50
- Link: 16px, weight 400, line-height 1.50
- Button (medium): 16px, weight 500, line-height 1.50
- Caption: 14px, weight 500, line-height 1.43, letter-spacing 0.7px, uppercase
- Caption small: 12px, weight 400, line-height 1.33
- Link small: 12px, weight 400, line-height 1.33
- Caption small uppercase: 12px, weight 500, line-height 1.33, letter-spacing 0.6px

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 70px
Component mapping: Button padding 8px 16px, card padding 16px or 24px, section gaps 32px–40px.

## Border Radius
- sm: 3px — code blocks
- md: 6px — buttons, menus
- lg: 8px — occasional divs

## Shadows & Depth
Use subtle rgba(0,0,0,0.1) shadows for cards:
- lg: 0px 10px 15px -3px, 0px 4px 6px -4px
- md: 0px 4px 6px -1px, 0px 2px 4px -2px
- sm: 0px 1px 3px 0px, 0px 1px 2px -1px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #ffa300;
  color: #003a70;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #003a70;
  box-shadow: none;
  outline: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #002b54; }
.btn-primary:focus { outline: 2px solid #003a70; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Link
```css
.link {
  color: #003a70;
  text-decoration: underline;
  font-weight: 400;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 6px;
  padding: 16px;
  box-shadow: var(--shadow-md);
}
```

## Layout & Responsive Rules
Max content width: ~1280px
Page padding: 16px mobile / 32px desktop
Grid gap: multiples of 8px
Breakpoints: 480px, 640px, 1080px, 1280px, 1920px

## Interaction Rules
Transition: 150ms ease
Focus: Outline color from component border or brand navy
Loading: Use opacity change or spinner from Font Awesome

## DO
- Use ONLY colors from the palette
- Maintain 8px spacing grid
- Keep border radius consistent (3px, 6px, 8px)
- Use system font stack
- Keep shadows subtle

## DON'T
- Add unapproved colors
- Use heavy shadows
- Mix rounded and sharp corners
- Change font family

## Code Examples

Primary Button (Tailwind):
```html
<button class="bg-[#ffa300] text-[#003a70] px-4 py-2 rounded-[6px] border border-[#003a70] font-medium text-base hover:bg-[#002b54] transition-colors duration-150">Click me</button>
```

Card:
```html
<div class="bg-white rounded-[6px] p-4 shadow-md">Card content</div>
```

Input:
```html
<input class="border border-gray-300 rounded-[6px] p-2 text-base focus:border-[#003a70] focus:outline-none" placeholder="Enter text">
```

9. Summary

TL;DR: Lencr’s design system is minimal, navy-and-orange, and rigorously structured on an 8px grid. Small border radii and subtle shadows keep it sharp. Typography is pure system sans-serif for speed and predictability.

Brand Keywords:

security-minimalist
developer-focused
navy-orange-contrast
small-radius-consistency
framework-driven

Lencr Design System: Minimalist Security-First UI

Brand Identity

Color Palette

Typography

Design Style

Full Analysis