# Logicomm-inc Design System

> Brutalist utility and raw structural transparency defined by default browser heuristics and achromatic foundations.

**Source:** https://logicomm-inc.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Logicomm-inc operates on a "system-as-interface" philosophy, utilizing a monochrome palette where #808080 (Gray) serves as the primary structural anchor for borders and foundation elements. The system rejects modern decorative trends in favor of raw HTML defaults, utilizing Times New Roman at a 700 weight for all typographic hierarchy. Interaction is signaled through high-contrast Signal Blue (#0000ee) text links. The visual language is strictly linear, defined by sharp 0px corners and horizontal rules that segment the white canvas.

## Signature DNA
1. **Achromatic Structuralism** (The use of #808080 for both text and borders creates a flattened hierarchy where structure and content share the same visual weight.)
2. **Default Serif Hierarchy** (Times New Roman 700 is the exclusive typographic voice, relying on browser-native rendering rather than custom web fonts.)
3. **Sharp-Edge Geometry** (A universal 0px border-radius policy applies to all containers and dividers, reinforcing a rigid, technical atmosphere.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.foundation.gray}` | `#808080` | Primary structural color, borders, and secondary text | 4 | 0.6 | Computed Style |
| `{color.foundation.white}` | `#ffffff` | Page canvas / background | 1 | 0.9 | Screenshot |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.blue}` | `#0000ee` | Interactive text links (unvisited) | 4 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Times New Roman | 700 | All headings and body links | Tinos | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 32px | normal | normal | 700 | Page Title (H1) | `h1` |
| `{type.body.md}` | 16px | normal | normal | 700 | Navigation links | `a` |
| `{type.body.sm}` | 14px | normal | normal | 400 | Table metadata | `td` |
| `{type.label.md}` | 16px | normal | normal | 700 | Column headers | `th` |

### Principles
1. **Native Weighting:** Hierarchy is established through size and browser-default bolding (700 weight) rather than varied font families.
2. **Underline as Affordance:** All interactive elements (`#0000ee`) must maintain a standard text underline to signal clickability.
3. **Achromatic Body:** Non-link text defaults to the foundation gray or black, avoiding chromatic saturation in prose.

## Spacing
**Base unit:** custom
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.row}` | 2px | 2 |
| `{space.indent}` | 40px | 1 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All containers, dividers, and interactive zones | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All elements sit flush on the canvas | `shadows` evidence |

## Components
### Tier 1: Foundational
#### Horizontal Rule
**Role:** Section demarcation and structural containment.
**Pages observed:** 1
**Spec:** Border-top: 1px solid #808080; Margin: 8px 0; Radius: 0px.
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Directory Breadcrumb
**Role:** Navigation and location signaling.
**Pages observed:** 1
**Spec:** Typography: Times New Roman 700 (32px); Color: #000000; Margin-bottom: 20px.
**States observed:** Default: captured

#### Navigation Link Row
**Role:** Primary site navigation.
**Pages observed:** 1
**Spec:** Typography: Times New Roman 700 (16px); Color: #0000ee; Text-decoration: underline.
**States observed:** Default: captured | Hover: captured (color shift to #551a8b observed in standard browser behavior)

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 100% (Fluid) |
| Alignment | Left-aligned |
| Gutter | 0px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Content scales to viewport width; text wraps natively. |

## Imagery & decoration
The brand avoids all photographic or illustrative content. Decoration is limited to CSS borders and horizontal rules (`<hr>`) using the foundation gray (#808080).

## Do's
- Use `#808080` for all non-interactive structural lines.
- Ensure all primary links use `#0000ee` with a mandatory underline.
- Set all border-radii to `0px`.
- Use Times New Roman for all typographic elements.
- Maintain a white (`#ffffff`) background for maximum contrast with structural elements.

## Don'ts
- **Wrong:** Using a rounded pill button. **Right:** Using a square-edged text link. **Reason:** The system prohibits non-zero radii.
- **Wrong:** Introducing a third-party sans-serif font like Inter. **Right:** Stick to Times New Roman. **Reason:** Brand identity is tied to system-default serifs.
- **Wrong:** Labeling a sub-brand blue as the parent primary. **Right:** Use `#808080` as the primary foundation. **Reason:** Parent brand is strictly monochrome.
- Do not use drop shadows or any form of depth/elevation.
- Do not use background fills for buttons; use text links only.

## Similar brands
- Craigslist
- Berkshire Hathaway
- Wikipedia (Standard)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-foundation-gray: #808080;
  --color-accent-blue: #0000ee;
  --font-primary: "Times New Roman", serif;
  --radius-none: 0px;
}
```

```javascript
/* Tailwind v4 @theme */
@theme {
  --color-gray-structure: #808080;
  --color-link-blue: #0000ee;
  --font-serif-brand: "Times New Roman";
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a navigation list using Times New Roman 700, 16px, with links in #0000ee and a 1px solid #808080 horizontal rule below it."
- "Design a header component with a 32px Times New Roman bold title on a white background, ensuring 0px border radius on all elements."
- "Generate a table layout where headers are 16px bold serif and all borders are 1px solid #808080."

## Known gaps
- Hover and Active states for links were not explicitly declared in tokens, though standard browser defaults (#551a8b) are visible in use.
- Spacing scale is not tokenized in source; values are derived from browser-default element margins.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://logicomm-inc.com | 1440x900 | 2026-06-06 |
| Mobile View | https://logicomm-inc.com | 390x844 | 2026-06-06 |