Cootlogix Brand Design System Deep Dive

1. Brand Overview

Cootlogix presents itself with the stripped-back utilitarian vibe you’d expect from a platform that’s more about function than frills. There’s no ornamental noise—almost everything in the design language feels boiled down to essentials. It’s a brand where the visual interface plays support to the product, not the star.

The color work makes this clear: recurring greys (#555555 and #3e3e3e) as the neutral backbone, an almost textbook link blue (#0000ee) for standard hypertext contexts, and one punchy accent—#fb7d33—that does the heavy lifting for “look at me” interactions. This isn’t the deep branding palette of a marketing-heavy brand; it’s a skeletal, functional set.

Typography reinforces this utilitarian approach: Helvetica Neue in various weights for almost everything, with occasional appearances of Times for certain heading or link contexts. Helvetica Neue is corporate-modern, neutral, easily readable at multiple sizes without much personality. Times adds contrast when needed—but not for decorative flourish; the choices feel pragmatic, almost as if legacy parts of the site demanded a serif choice.

Spacing? Tight but scalable, based on a 4px rhythm. Some surprisingly large vertical pushes (87px, 187px) show the site isn’t afraid of white space between major sections, but don’t expect micro-padding around every element—it’s functional, not ornamental.

One oddity: the favicon and logo pull from Wix’s default assets. That screams “template origin” more than “custom brand asset,” but if you’re reverse-engineering the design system, it tells you they haven’t locked down every branding element yet. That lack of polish could be intentional—product still in dev mode—or simply a case of brand identity lagging behind product rollout.

In short, Cootlogix’s visual system feels unpretentious, focused on clarity, and intentionally stripped. No gradients, minimal shadows (only one subtle rgba(0,0,0,0.2) drop shadow spotted), no ornamental borders. This keeps cognitive load low—good for utility products. But it also leaves room for refinement once they want stronger brand recall.

2. Color System

The color system is brutally straightforward: a handful of neutrals, one bright accent, and functional blue for links.

2.1 Primary Colors

No dedicated “corporate primary” background tone here—#fb7d33 is clearly the accent hero. It’s vivid orange, leaning toward warmth, which works psychologically as an attention magnet. It’s cheerful but not “playful” like yellow—it still feels grounded enough for business contexts.

If you compare to competitor palettes (e.g., SaaS dashboard tools often use greens or blues as primary action colors), the choice stands out. Warm colors for CTAs are effective in drawing user flow forward—more urgent than blue—but risk coming across aggressive if overused.

2.2 Complete Palette

2.3 Color Relationships

Contrast analysis (WCAG):

• #fb7d33 on white: ~3.4:1 contrast ratio – borderline for normal text under WCAG AA, fine for large text/icons.
• #555555 on white: ~7.7:1 – safe for all text sizes (excellent accessibility compliance).
• #0000ee on white: ~8.6:1 – strong contrast, meets AAA.
• #3e3e3e on white: ~11.2:1 – rock-solid readability.

The accent orange’s contrast is the only possible concern—pair it with white text at large sizes or with darker backgrounds for smaller text.

No evidence of dark mode—palette is designed around white/light backgrounds.

2.4 Usage Guide

Works well:

• #fb7d33 accent against white backgrounds for primary links/buttons—pop without full danger/red signals.
• #555555 text for secondary/less important info—safe, readable.
• Link blue (#0000ee) for in-flow hyperlinks—recognizable, instinctive.

Avoid:

• Long paragraphs in #fb7d33 on white—contrast is too low for sustained reading.
• Mixing #fb7d33 and #0000ee in close proximity—both fight for attention.
• Using semi-yellow overlay (#ffcc00 @ 33% opacity) on top of orange—visual clash.

3. Typography

3.1 Font Families

Multiple Helvetica Neue variants dominate:

• HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma
• HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh
• HelveticaNeueW01-65Medi, HelveticaNeueW02-65Medi, HelveticaNeueW10-65Medi

Fallbacks: other Helvetica Neue variants. No Google Fonts, no Adobe Fonts integration—these are likely custom WOFF assets.

Occasional Times regular—likely legacy content styles or intentional serif contrast.

3.2 Type Scale

3.3 Hierarchy

Hierarchy here is weak—lots of overlap in sizes and weights between headings and links. The only big jump is 34px at the top level, then quickly down to 22px and 18px. It’s very flat vertically—probably intentional to keep UI text consistent. Functional readability is solid: short line heights (1.18) for headings, longer (3.75) for some link contexts to align vertically with nav bars or spaced lists.

The mix of Helvetica Neue Light (45Ligh) and Medium (65Medi) lets them modulate emphasis subtly—no bold shouting.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 4px system.

Values:

• 10px (0.63rem) — rare, micro-gaps.
• 17px (1.06rem) — twice used—probably small component padding.
• 20px (1.25rem) — general component interior padding.
• 30px (1.88rem) — larger component/lists spacing.
• 87px (5.44rem) — major section gap.
• 187px (11.69rem) — hero/banner gap.

4.2 Layout

Breakpoints not defined in extracted data—likely default Wix responsive settings. No custom container widths noted. Layout depends heavily on spacing tokens above to modulate vertical rhythm.

5. Visual Elements

• Border radius: None present. This is sharp-corner territory—cards, buttons, inputs all likely square-edged in current state.
• Shadow system: One drop shadow spotted—rgba(0,0,0,0.2) 0px 0px 3px 0px. Very subtle, probably for floating elements or modals.
• Borders/dividers: Not defined explicitly—no heavy borders in extracted data.

6. Components

6.1 Buttons

No distinct button styles extracted—likely handled by default Wix styling or built into templates. For now, assume accent color (#fb7d33) in text or background for primary interaction.

6.2 Links

Two variants:

1. Neutral (#555555) — text-decoration:none, font-weight:400. Used for body nav links and secondary actions.
2. Accent orange (#fb7d33) — text-decoration:none, font-weight:400. Used for high-visibility links (support, CTAs).

Hover states not explicitly defined—either handled globally or unchanged.

6.3 Forms

No input styles extracted—so likely default template inputs.

6.4 Cards

Padding and shadows not extracted—only one shadow globally.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-neutral-gray: #555555;
  --color-accent-orange: #fb7d33;
  --color-link-blue: #0000ee;
  --color-dark-gray: #3e3e3e;
  --color-overlay-yellow: #ffcc00; /* semi at 33% opacity */
  --color-transparent: rgba(0,0,0,0);

  /* Typography */
  --font-helvetica-roman: "HelveticaNeueW01-55Roma","HelveticaNeueW02-55Roma","HelveticaNeueW10-55Roma";
  --font-helvetica-light: "HelveticaNeueW01-45Ligh","HelveticaNeueW02-45Ligh","HelveticaNeueW10-45Ligh";
  --font-helvetica-medium: "HelveticaNeueW01-65Medi","HelveticaNeueW02-65Medi","HelveticaNeueW10-65Medi";
  --font-times: "Times";

  --size-h1: 34px;
  --size-h1-small: 22px;
  --size-h1-smaller: 18px;
  --size-link-large: 22px;
  --size-link-medium: 18px;
  --size-link-small: 16px;

  --line-height-tight: 1.18;
  --line-height-normal: 1.39;
  --line-height-loose: 3.75;

  /* Spacing */
  --space-10: 10px;
  --space-17: 17px;
  --space-20: 20px;
  --space-30: 30px;
  --space-87: 87px;
  --space-187: 187px;

  /* Radius */
  --radius-none: 0;

  /* Shadows */
  --shadow-subtle: rgba(0,0,0,0.2) 0px 0px 3px 0px;
}

8. AI Coding Assistant Prompt

# Cootlogix Design System Specification

System Prompt:
You are a Cootlogix design expert. Build UIs matching their visual language exactly.

Brand Context:
Cootlogix's design system is minimal, utilitarian, and stripped-down. It emphasizes clarity over decoration, with a small, high-contrast palette and Helvetica Neue typography. Sharp edges, minimal shadows, and functional spacing keep the UI focused.

## Color Palette
- Neutral Gray: #555555 — Secondary text, header links
- Accent Orange: #fb7d33 — Support links, CTAs
- Link Blue: #0000ee — Standard hyperlinks
- Dark Gray: #3e3e3e — Hover/focus variants
- Overlay Yellow: #ffcc00 @ 33% opacity — Hover overlay effects
- Transparent: rgba(0,0,0,0) — Transparent backgrounds

## Typography
Fonts:
- HelveticaNeueW01-55Roma, HelveticaNeueW02-55Roma, HelveticaNeueW10-55Roma — Regular headings & body
- HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh — Light headings
- HelveticaNeueW01-65Medi, HelveticaNeueW02-65Medi, HelveticaNeueW10-65Medi — Medium-weight links & headings
- Times — Occasional headings/links contrast

| Element | Font | Size | Weight | Line Height | Use For |
|---------|------|------|--------|-------------|---------|
| H1 | HelveticaNeueW01-55Roma | 34px | 400 | 1.18 | Main titles |
| H1 Alt | Times | 22px | 400 | 1.18 | Alternate headings |
| H1 Light | HelveticaNeueW01-45Ligh | 22px | 400 | 1.18 | Section titles |
| Link Large | HelveticaNeueW01-65Medi | 22px | 400 | 1.18 | Main nav links |
| H1 Small Light | HelveticaNeueW01-45Ligh | 18px | 400 | 1.39 | Secondary headings |
| Link Medium | HelveticaNeueW01-65Medi | 18px | 400 | 1.39 | Subnav links |
| H1 Small Medium | HelveticaNeueW01-65Medi | 18px | 400 | 1.39 | Emphasized headings |
| Link Small Serif | Times | 16px | 400 | 3.75 | Footer links |
| Link Small Medium | HelveticaNeueW01-65Medi | 16px | 400 | 3.75 | Footer links alternative |

## Spacing & Grid
Base: 4px
Scale: 10px, 17px, 20px, 30px, 87px, 187px
- 10px — micro gaps
- 17px — small padding
- 20px — component interior
- 30px — section gap
- 87px — large section spacing
- 187px — hero/banner vertical gap

## Border Radius
- none: 0 — Applies to all components

## Shadows & Depth
- subtle: rgba(0,0,0,0.2) 0px 0px 3px 0px — Used rarely for floating boxes

## Component Specifications

### Primary Button
Default: background #fb7d33, color white, padding 10px 20px, radius 0, border none.
Hover: background #3e3e3e, color white.
Focus: outline 2px solid #0000ee.
Disabled: opacity 0.5.

### Secondary Button
Default: background transparent, color #555555, padding 10px 20px, radius 0, border 1px solid #555555.

### Navigation Links
Default: color #555555, no underline, weight 400.
Accent nav links: color #fb7d33, no underline.
Hover: darken to #3e3e3e.

### Input Fields
Default: border 1px solid #555555, radius 0, padding 10px, font 16px HelveticaNeueW01-65Medi.
Focus: border-color #fb7d33.

### Cards
Background white, radius 0, padding 20px, shadow subtle.

## Layout & Responsive Rules
No custom breakpoints defined; follow 4px grid spacing rules.

## Interaction Rules
Transitions: 150ms ease all state changes.
Focus indicators: high-contrast outlines using #0000ee or #fb7d33.

## DO
- Use only palette colors
- Keep spacing multiples of 4px
- Maintain square corners
- Keep text decoration off for links unless legacy
- Use Helvetica Neue for headings, Times only where coded
- Maintain accent orange for CTAs
- Ensure accessible contrast

## DON'T
- Introduce additional colors
- Round corners
- Overuse shadow
- Underline accent links without need
- Use #fb7d33 for long body text
- Mix orange and link blue close together

## Code Examples

### Button
```css
.btn-primary {
  background: #fb7d33;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0;
  border: none;
  font-family: var(--font-helvetica-medium);
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #3e3e3e; }
.btn-primary:focus { outline: 2px solid #0000ee; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Card
```css
.card {
  background: #fff;
  border-radius: 0;
  padding: 20px;
  box-shadow: var(--shadow-subtle);
}
```

### Input
```css
.input {
  border: 1px solid #555555;
  border-radius: 0;
  padding: 10px;
  font-size: 16px;
  font-family: var(--font-helvetica-medium);
}
.input:focus { border-color: #fb7d33; outline: none; }
```

9. Summary

TL;DR: Cootlogix runs on a minimal palette, Helvetica Neue typography, and a square-corner, low-shadow approach. Orange is your accent hammer, grey is your workhorse, blue is reserved for functional links.

Brand Keywords:

• utilitarian-minimalist
• accent-driven
• sharp-corner
• low-shadow