One — Brand Design System Deep Dive

1. Brand Overview

One.com positions itself in the digital infrastructure space — hosting, domains, and site-building tools. The tone is clean and businesslike, but not cold. This isn’t the hyper-minimalism of a B2B SaaS startup; it’s more approachable, more “you can do this yourself.”
The design philosophy here is straightforward: keep things clear, keep actions visible, and don’t overcomplicate with ornamental visuals. The layout breathes, the typography is modern and geometric, and the color palette is a tight set of blues with greys for balance.

Their primary blue (#0078c8) drives the whole experience. It’s used for CTAs, links, and interactive highlights. White (#ffffff) is the main background and secondary color. Greys like #69686b, #949494, and #e2e2e2 handle neutral UI elements and text that’s not primary. This is a safe palette but it works — it’s high contrast and easy to match across devices.

There’s a distinct decision to go heavy on pill shapes — many buttons have large border radii (27.5px or 100px), which makes the UI feel softer and more clickable. It’s almost mobile-app-like in its touch targets.

Typography is locked into Montserrat for nearly everything, giving a consistent geometric sans look. No serif, no playful secondary font — just one family, varied weights, and sizes. This keeps the brand voice consistent and clean.

The system is built on an 8px spacing grid. You can see it in the consistent multiples (8, 16, 24, 32, 48, 96). This consistency makes the site feel tightly constructed even when the content varies.

The overall vibe: approachable professionalism.
If you’re building on this system, think clarity first, decoration second. Everything should feel deliberate: colors from the palette, spacing on the grid, corners rounded according to the tokens. Nothing extra.

2. Color System

2.1 Primary Colors

Primary brand color: #0078c8 (rgb(0, 120, 200))
Psychology: This shade of blue sits between corporate and energetic. It’s friendlier than navy, more professional than teal. It signals trust and reliability without being too stiff.

Competitor comparison: Many hosting companies go darker (#003366 style) or more neutral. One.com’s choice is brighter, which makes interactive elements pop more against white backgrounds.

Secondary color: #ffffff — pure white. Used heavily for backgrounds, button fill in secondary styles, and to frame content.

2.2 Complete Palette

2.3 Color Relationships

The palette is entirely cool-toned except for the greys, which are neutral. Accessibility-wise, #0078c8 on white easily passes WCAG AA for normal text. The hover blue (#008ce6) maintains contrast.

White text on primary blue also passes AA for large text and normal text due to the strong luminance contrast.

Dark mode: Not implemented here — everything assumes a light background. If you were to adapt, dark greys could replace white, and lighter blues could adjust for contrast.

2.4 Usage Guide

• Primary Blue + White — core CTA combination. Works everywhere, but don’t use blue as background for large blocks of text; keep it for interactive elements.
• Link Blue (#0000ee) — default HTML link color appears in some contexts. If you’re styling it, override to primary blue for brand consistency.
• Avoid pairing medium grey (#949494) with pale blue (#cde4f4) — low contrast.
• Hover states always shift blue towards a brighter tone (#008ce6 or #32a3eb). Keep transitions subtle — no hue jumps.

3. Typography

3.1 Font Families

Montserrat — geometric sans, modern, clean.
Fallbacks: sans-serif (and sometimes monospace in heading contexts).
Source: No Google Fonts call detected; likely self-hosted.

No secondary fonts — Montserrat is used for headings, body, captions, links, and buttons. Arial appears rarely (button context at small sizes).

3.2 Type Scale

(Many more variations exist in the data — but note the repetition of Montserrat and a narrow size range for UI text.)

3.3 Hierarchy

Biggest heading (48px) is for hero titles.
Downsteps are logical: 48 → 40 → ~28 → 24 → 20 → 18 → 16 → 14 → 12 → 10px.
This is a fairly tight scale — no huge jumps, which keeps the UI feeling consistent.
Weights shift between 400, 500, 600, 900 depending on emphasis. The 900 weight is rare and used for small but bold labels.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.
Common values:

4.2 Layout

One breakpoint detected: 720px — likely mobile/tablet switch.
No giant max-width tokens in the data, but content appears centered with generous side padding.

5. Visual Elements

Border Radius

Opinion: Heavy use of 27.5px and 100px gives a pill-button vibe. Corners aren’t sharp anywhere — even modals get 4px rounding.

Shadows

Mostly subtle:

• rgba(60,60,60,0.1) 0px 4px 16px — soft elevation.
• rgb(221,221,221) 0px 0px 0px 0px — basically no shadow.
• Some inset shadows for colored backgrounds.

Not a “flat” design — shadows are minimal but present.

Borders

Strong use of 1px solid primary blue for buttons.
Grey borders (#cecece, #e2e2e2) for dividers.
Some 0px borders for text inputs — relying on background and radius instead.

6. Components

6.1 Buttons

Secondary Button ("d-button")
Default: white background, primary blue text, 10px 28px padding, 27.5px radius, 1px solid primary blue border.
Hover: white text, hover blue background, border changes to hover blue.

Primary Button ("c-button")
Default: primary blue background, white text, same padding and radius as secondary.
Hover: same hover blue swap.

CTA BuyNow
Default: transparent background, primary blue text, padding 11px 24px, 100px radius, 1px solid primary blue.
Hover: white text, hover blue background.

No disabled states in data — you’ll need to define.

6.2 Links

Four styles:

1. Primary blue (#0078c8) underline — hover to hover blue (#008ce6).
2. White text, no underline — hover stays white.
3. Legacy link blue (#0000ee) underline — hover to hover blue.
4. Dark grey (#69686b) underline — hover to hover blue.

6.3 Forms

Text input: white background, dark grey text (#3c3c3c), no border, 27px radius, padding 4px 30px.
Textarea: white background, black text (#141414), no border, no radius.

No explicit focus styles in data — likely handled by framework defaults.

6.4 Cards

No explicit “card” token, but shadow rgba(60, 60, 60, 0.1) and radius 4px or 10px appear on divs — likely card containers.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0078c8;
  --color-secondary: #ffffff;
  --color-link-blue: #0000ee;
  --color-dark-grey: #69686b;
  --color-medium-grey: #949494;
  --color-light-grey: #e2e2e2;
  --color-grey: #cecece;
  --color-hover-blue: #008ce6;
  --color-pale-blue: #cde4f4;
  --color-bright-blue: #32a3eb;
  --color-accent-blue: #0088e0;
  --color-deep-blue: #005fcc;

  /* Typography */
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: Arial, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 96px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 27px;
  --radius-pill: 27.5px;
  --radius-xl: 50px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-soft: rgba(60, 60, 60, 0.1) 0px 4px 16px;
  --shadow-none: rgb(221, 221, 221) 0px 0px 0px 0px;

  /* Breakpoints */
  --bp-mobile: 720px;
}

8. AI Coding Assistant Prompt

# One.com Design System Specification

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

## Brand Context
One.com’s design is clean, approachable, and professional. It uses a bright primary blue, generous white space, and pill-shaped interactive elements. Typography is consistent with Montserrat across all contexts. Spacing follows an 8px grid.

## Color Palette
- Primary Blue: #0078c8 — primary buttons, CTAs, links
- Secondary White: #ffffff — backgrounds, secondary button fill
- Link Blue: #0000ee — default HTML links
- Dark Grey: #69686b — body text
- Medium Grey: #949494 — captions
- Light Grey: #e2e2e2 — dropdown headers
- Grey: #cecece — dividers
- Hover Blue: #008ce6 — hover states for buttons/links
- Pale Blue: #cde4f4 — subtle hover backgrounds
- Bright Blue: #32a3eb — hover highlights
- Accent Blue: #0088e0 — alternate hover/focus
- Deep Blue: #005fcc — active/focus

## Typography
- Font Family: "Montserrat", sans-serif
- Alternate: Arial for rare small buttons

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 400 | 1.25 | Hero titles |
| H2 | 40px | 400 | 1.25 | Section headings |
| H3 | 28.8px | 400 | 1.40 | Subheadings |
| H4 | 24px | 600 | 1.25 | Card titles |
| Body | 16px | 400 | 1.5 | Paragraph text |
| Caption | 14px | 400 | 1.4 | Small notes |
| Small | 12px | 400 | 1.5 | Legal, footnotes |

## Spacing & Grid
Base: 8px. Scale: 4px, 8px, 16px, 24px, 32px, 48px, 96px.  
Buttons: padding 10px 28px.  
Cards: padding 32px.  
Sections: padding 48px–96px.

## Border Radius
- sm: 4px — small elements
- md: 10px — inputs
- lg: 27px — large inputs
- pill: 27.5px — standard buttons
- xl: 50px — large inputs
- full: 100px — pill buttons

## Shadows & Depth
- Soft: rgba(60,60,60,0.1) 0px 4px 16px — cards, modals
- None: rgb(221,221,221) 0px 0px 0px 0px — flat elements

## Component Specifications

### Primary Button (.c-button)
Default: bg #0078c8, text #ffffff, padding 10px 28px, radius 27.5px, border 1px solid #0078c8.  
Hover: bg #008ce6, border #008ce6.  
Font: Montserrat 14.4px 400.

### Secondary Button (.d-button)
Default: bg #ffffff, text #0078c8, same padding/radius as primary, border 1px solid #0078c8.  
Hover: bg #008ce6, text #ffffff.

### CTA BuyNow
Default: transparent bg, text #0078c8, padding 11px 24px, radius 100px, border 1px solid #0078c8.  
Hover: bg #008ce6, text #ffffff.

### Links
Primary: #0078c8 underline → hover #008ce6.  
White variant: no underline, stays white.

### Input Fields
Default: bg #ffffff, text #3c3c3c, radius 27px, padding 4px 30px, no border.  
Textarea: bg #ffffff, text #141414, no radius/border.

## Layout & Responsive Rules
- Breakpoint: 720px — switch to mobile layout
- Maintain centered content with side padding multiples of 8px

## Interaction Rules
- Transition: 150ms ease on hover/focus
- Focus: outline 2px solid primary blue
- No animation on non-interactive elements

## DO List
- Use only palette colors
- Maintain 8px grid spacing
- Keep typography Montserrat everywhere
- Match button radius to token values
- Use hover blue for all interactive hover states

## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners
- Don’t apply heavy shadows
- Don’t use serif fonts
- Don’t break the spacing scale

## Code Examples

### Primary Button
```css
.c-button {
  background: #0078c8;
  color: #ffffff;
  padding: 10px 28px;
  border-radius: 27.5px;
  border: 1px solid #0078c8;
  font: 400 14.4px/1.5 "Montserrat", sans-serif;
  transition: background 150ms ease;
}
.c-button:hover {
  background: #008ce6;
  border-color: #008ce6;
}

Secondary Button

.d-button {
  background: #ffffff;
  color: #0078c8;
  padding: 10px 28px;
  border-radius: 27.5px;
  border: 1px solid #0078c8;
  font: 400 14.4px/1.5 "Montserrat", sans-serif;
  transition: background 150ms ease;
}
.d-button:hover {
  background: #008ce6;
  color: #ffffff;
  border-color: #008ce6;
}

Input Field

.input {
  background: #ffffff;
  color: #3c3c3c;
  border: none;
  border-radius: 27px;
  padding: 4px 30px;
  font: 400 16px/1.5 "Montserrat", sans-serif;
}
.input:focus {
  outline: 2px solid #0078c8;
}

---

## 9. Summary

**TL;DR** — One.com’s system is clean, blue-forward, and Montserrat-heavy. Everything’s on an 8px grid with pill-shaped buttons and minimal shadows. Stick to the palette, round your corners, and keep spacing consistent.

**Brand Keywords**  
- approachable-professional  
- blue-centric  
- grid-consistent  
- pill-rounded  
- minimal-shadow