Globalsign Design System Deep Dive

1. Brand Overview

Globalsign’s interface tells you exactly what business they’re in before you even click a nav link — security, reliability, enterprise-scale trust. Nothing in their visual direction feels overly playful or ornamental. This is a system designed for corporate tech buyers, IT professionals, and compliance officers. You can see it in every choice: strong greens and blues, a disciplined sans-serif typeface, a grid structure that keeps everything locked down like it’s in a compliance audit.

The first impression? Functional clarity. Greens signal success states and environmental trust; blues tie to authority, stability, and the technical space. There’s no photographic overload. Instead, UI elements and structure dominate, using Bootstrap’s grid and Vuetify’s components to keep things consistent.

Even the typography choice of Open Sans — not fashionable, but widely supported, legible in multiple languages, and scalable across viewport sizes — reflects that “no surprises” attitude. The line heights and spacing are tight enough to maximize information density without sacrificing readability. This isn’t a site meant to entertain; it’s meant to convey trust through clarity and repeatable structure.

If you look closely, you’ll see lots of subtle depth — 0px–8px shadows, crisp 1px borders — but Globalsign avoids big, dramatic drop shadows or gradients. That’s on brand: any decorative flourish would dilute the “we run PKI infrastructure for governments and Fortune 500s” vibe. They’ve nailed down a system that says, “Here’s the information, here’s your path to act, here are the controls you trust.”

I love that they didn’t dilute their identity chasing trendy neumorphism or hyper-minimal darkness. Everything stays in an accessible, bright, straightforward zone. For the audience, that’s perfect — it reassures instead of surprising.

2. Color System

2.1 Primary Colors

The primary semantic color is rgb(97, 167, 63) (#61a73f). This green is saturated enough to pop but not neon or childish. It psychologically leans toward growth, environmental awareness, and success confirmation — all fitting Globalsign’s “secure and positive outcomes” narrative. It’s used for primary CTAs, “success” messaging, and sometimes as an accent border for highlighted assets.

In the industry, many enterprise security brands stick to blues as their primary. Globalsign’s decision to elevate green into the primary slot distinguishes them — they still use authoritative blues (#005eae, #007bff, #007cbe) to frame or support actions, but that green gives them a different flavor compared to say, DigiCert’s pure blue or Symantec’s yellow.

2.2 Complete Palette

2.3 Color Relationships

Primary green on white has excellent contrast: WCAG ratios over 4.5:1 for body text equivalent. Green over dark blue and charcoal also reads fine, though dark mode versions would need careful adjustment — deep green on charcoal risks dipping below 3.0:1 if used for text.

The blue palette (#005eae, #007bff, #007cbe) all sit well together — tonal variations make it easy to handle hover/focus states with slight shifts. The darker blues maintain readability over white; the bright ones are safe over dark gray backgrounds.

The neutrals are consistent: #212529 and #141414 anchor the dark spectrum; #d6d6d6 and #ffffff anchor the light side. No rogue warm tones — which keeps a “cold tech precision” feel.

2.4 Usage Guide

Works:

• Green #61a73f with white text — safe, brand-aligned.
• Blue #005eae on white — strong contrast.
• White over charcoal (#141414) — crisp.

Avoid:

• Green text on charcoal without bold weight — thins contrast.
• Bright blue (#007bff) over green backgrounds — too much vibrance clash.
• Use gray (#8b8b8b) only for secondary text in clearly non-critical areas.

3. Typography

3.1 Font Families

Primary family: Open Sans — widely used UI sans-serif, clear letterforms, neutral tone. Multiple weights from 300 to 700. Fallbacks not explicitly defined besides "sans-serif" in secondary contexts, and specific language fallbacks like "segoe ui, meiryo, yu gothic, hiragino kaku gothic pron" for Japanese contexts.

Source: No Google/Adobe webfont load detected — likely self-hosted or system font fallback.

3.2 Type Scale

(The table continues with all extracted rows — I’d keep them intact in docs so no dev has to guess.)

3.3 Hierarchy

Heading levels drop steadily in size, but weight and line-height adjustments are the main hierarchy driver. Big H1s at 600 weight, low line-height — assertive, minimal vertical padding. Subheadings use weights between 300 and 600 to shift visual importance without changing color. Buttons trend heavier fonts for emphasis; link typography stays 400–600 with underlines as the primary emphasis indicator.

4. Spacing & Layout

4.1 Spacing Scale

Globalsign runs an 8px base scale — multiples appear everywhere. They sneak in some half-step values like 7.5px for tight in-component spacing.

4.2 Layout

Frontend is Bootstrap + Vuetify — fluid grid, max-content widths match standard 1200px+ breakpoints. Breakpoints listed from micro (98px) to full HD (1920px). They cover odd device widths aggressively — you’ll hit different media rules for 767px vs 768px, 991 vs 992px — classic Bootstrap cutpoints plus Vuetify’s deeper range.

5. Visual Elements

Border radius system is mixed — small UI bits get 3–4px, content blocks can go 15px, rounded pill avatars up to 60px or 50%.

Shadows subtle, layered — main depth: rgba(0, 0, 0, 0.15) 0px 8px 16px.

Borders: heavy reliance on neutrals (#d6d6d6) for dividers, accent borders for CTAs (#83c341, #1c89ca).

6. Components

6.1 Buttons

Primary (btn btn-success):

• Default: bg #61a73f, text white, padding 8px 15px, border 1px solid #2e7d07, radius 0.
• Hover: bg #005eae, border 1px solid #d0d5dd, same text, box-shadow inset for feedback.
• Active: bg #61a73f, no border, no shadow.
• Focus: bg #0070cb, border 2px solid rgba(255,255,255,0.12), text white.

Secondary (CybotCookiebotDialogBodyButton blue variant):

• Default: bg #005eae, white text, padding 15px, radius 3.75px, border 2px white.
• Hover: same bg, white, opacity 0.85.

Secondary white variant:

• Default: bg white, text #141414, border 2px #005eae.
• Hover: bg #005eae, white text, opacity 0.85.

Blue large variant (btn btn-lg from Vuetify):

• Default: bg #0070cb, white text, padding 12px 18px, radius 8px, border 2px solid rgba(255,255,255,0.12).
• Hover: bg rgba(0,0,0,0.05), text #005eae, transform scale(1.01), subtle shadow.

6.2 Links

Range from bold #005eae no underline, underline on hover, to lighter blues and grays with hover switching to underline.

Example:

• Default: #005eae, no decoration.
• Hover: #0d69b2, underline.

6.3 Forms

Select:

• Default: bg white, text black, border 1px solid #9c9c9c, no radius.
• Focus: border-color #80bdff.

Checkbox simple: no bg, no radius; on focus gets box-shadow rgba(0,123,255,0.25).

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #61a73f;
  --color-charcoal: #141414;
  --color-darkgray1: #212529;
  --color-black: #000000;
  --color-lightgray: #d6d6d6;
  --color-white: #ffffff;
  --color-brightblue: #007bff;
  --color-deepblue: #005eae;
  --color-midgray: #8b8b8b;
  --color-gray33: #333333;
  --color-accentblue: #007cbe;
  --color-leafgreen-alt: #83c341;
  --color-accentcyan: #1c89ca;
  --color-success-darkgreen: #2e7d07;

  /* Typography */
  --font-primary: "Open Sans", sans-serif;
  --font-size-h1: 96px;
  --font-size-h1-alt: 68px;
  --font-size-h1-small: 60px;
  /* etc — full mapping from extracted data */

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-5: 5px;
  --space-7: 7px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22_5: 22.5px;
  --space-24: 24px;
  /* etc */

  /* Radius */
  --radius-sm: 3px;
  --radius-sm-alt: 3.75px;
  --radius-md: 7.5px;
  --radius-lg: 15px;
  --radius-pill: 60px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.15) 0px 8px 16px 0px;
  --shadow-inset-hover: rgba(10, 13, 18, 0.18) 0px 0px 0px 1px inset, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset, rgba(10, 13, 18, 0.05) 0px 1px 2px 0px;
}

8. AI Coding Assistant Prompt

# Globalsign Design System Specification

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

Brand Context:
Globalsign is a security-focused enterprise brand. Design choices emphasize clarity, trustworthiness, and authoritative communication. Colors are tightly controlled greens and blues; typography is utilitarian and legible.

Color Palette:
- Primary Green: #61a73f — Primary CTAs, success indicators
- Charcoal: #141414 — Text on light banners, dark mode bg
- Dark Gray: #212529 — Menu backgrounds
- Black: #000000 — Iconography, arrows
- Light Gray: #d6d6d6 — Dividers, form borders
- White: #ffffff — Backgrounds, text over dark
- Bright Blue: #007bff — Links, secondary buttons
- Deep Blue: #005eae — Secondary brand color, borders
- Mid Gray: #8b8b8b — Icons, muted text
- Gray 33: #333333 — Menu text
- Accent Blue: #007cbe — Alternate link hover
- Leaf Green Alt: #83c341 — Accent borders
- Accent Cyan: #1c89ca — Border accents

Typography:
Font family: "Open Sans", sans-serif; certain locales: "Segoe UI, Meiryo, Yu Gothic, Hiragino Kaku Gothic Pron"
Sizes (partial list):
- H1: 96px, 600 weight, LH 1.28
- H1 Alt: 68px, 300 weight, LH 1.20
- H2 Large: 60px, 600, LH 1.20
- Button: 26px, 400, LH 1.00
- Link: 16px, 400–700

Spacing & Grid:
Base: 8px grid.
Tokens: 1px, 3px, 5px, 7px, 7.5px, 8px, 10px, 12px, 15px, 16px, 20px, 22.5px, 24px.

Border Radius:
- none: 0 — tables
- sm: 3px / 3.75px — small buttons, cookie consent
- md: 7.5px — list items, divs
- lg: 15px — cards
- pill: 60px — buttons, avatars
- full: 50% — perfect circles

Shadows & Depth:
- Medium: rgba(0,0,0,0.15) 0 8px 16px — cards
- Hover inset: See token --shadow-inset-hover

Component Specifications:
Primary Button (`btn-success`):
Default: bg #61a73f, color #fff, padding 8px 15px, radius 0, border 1px solid #2e7d07.
Hover: bg #005eae, color #fff, inset shadow, border #d0d5dd.
Active: bg #61a73f, no border/shadow.
Focus: bg #0070cb, border 2px solid rgba(255,255,255,0.12).

Secondary Button Blue:
Default: bg #005eae, white text, padding 15px, radius 3.75px, border 2px white.
Hover: opacity 0.85.

Link:
Default: color #005eae, no underline.
Hover: color #0d69b2, underline.

Input:
Default: bg white, text black, border 1px solid #9c9c9c.
Focus: border-color #80bdff.

Layout & Responsive Rules:
Bootstrap + Vuetify grid, max width 1200px+, standard breakpoints: 576px, 768px, 992px, 1200px, plus device-specific breakpoints from 98px to 1920px.

Interaction Rules:
Transitions ~150ms ease for hover/focus.
Focus outlines visible on form fields, hidden on mouse interactions.

DO:
- Use only hex values above
- Follow 8px grid
- Keep consistent radii per component type
- Maintain WCAG contrast
- Use Open Sans exclusively

DON'T:
- Invent new colors
- Mix corner styles
- Add heavy drop shadows
- Compress line heights below data values

Code Examples:

```css
.btn-success {
  background: #61a73f;
  color: #fff;
  padding: 8px 15px;
  border-radius: 0;
  border: 1px solid #2e7d07;
}
.btn-success:hover {
  background: #005eae;
  box-shadow: var(--shadow-inset-hover);
}
```

```css
.link-primary {
  color: #005eae;
  text-decoration: none;
}
.link-primary:hover {
  color: #0d69b2;
  text-decoration: underline;
}
```

```css
.input-select {
  background: #fff;
  color: #000;
  border: 1px solid #9c9c9c;
  padding: 8px 30px 8px 15px;
}
.input-select:focus {
  border-color: #80bdff;
  outline: none;
}
```

9. Summary

TL;DR — Globalsign’s design system is a disciplined, grid-locked, enterprise toolkit. Greens lead the way for actions, blues reinforce authority, Open Sans keeps everything readable under pressure. Small radii, subtle shadows, and exact spacing keep the brand looking tight and trustworthy.

Brand Keywords:

• security-focused
• grid-disciplined
• enterprise-trust
• blue-green-authoritative
• data-driven-clean