# Sokigo Design System

> Geometric precision meets municipal cyan: a structured, high-contrast framework for public sector digital services.

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

## TL;DR
Sokigo utilizes a "Municipal Modern" aesthetic, characterized by a high-contrast foundation of pure black (#000000) and white (#ffffff) punctuated by a vibrant cyan accent (#3eb1c8). Typography is anchored by **Gotham**, used with generous tracking and consistent 400-500 weights to maintain a professional, accessible tone. The system relies on a 14px border radius for content containers, creating a "soft-grid" feel, while interactive elements use a 42px pill-shape. Layouts are strictly modular, alternating between white and light gray (#f5f5f5) bands to organize dense information.

## Signature DNA
1. **The Cyan Pulse** (#3eb1c8 used as a high-voltage accent for primary buttons and iconography against achromatic backgrounds).
2. **Gotham Display** (52px headlines with aggressive -3px letter spacing, creating a tight, authoritative typographic signature).
3. **The 14px Radius** (A consistent corner treatment applied to all cards and content surfaces to soften the structured grid).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 127 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary text, footer background, borders | 122 | 1.0 | Computed |
| `{color.dark-gray}` | `#232323` | Secondary surfaces, primary buttons | 63 | 0.8 | Computed |
| `{color.medium-gray}` | `#5c5c5c` | Secondary body text | 45 | 0.8 | Computed |
| `{color.light-gray}` | `#f5f5f5` | Section background bands | 17 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#3eb1c8` | Primary brand accent, icons, active states | 17 | 0.8 | Computed |
| `{color.pale-cyan}` | `#eaf8fb` | Decorative card backgrounds | 2 | 0.7 | Computed |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Gotham | 400, 500, 700 | Heading, Display, UI | Montserrat | Licensed |
| Arial | 400 | Body fallback, Inputs | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 52px | 54.6px | -3px | 400 | Hero H1 | `h1.hero-title` |
| `{type.display-lg}` | 48px | 48px | -0.35px | 400 | Large dates | `span.date-large` |
| `{type.heading-md}` | 38px | 44.08px | normal | 400 | Section titles | `h2.art-image__title` |
| `{type.heading-sm}` | 26px | 33.8px | normal | 400 | Card titles | `h3.post-item-title` |
| `{type.body-lg}` | 20px | 30px | -0.35px | 400 | Intro paragraphs | `p` |
| `{type.body-md}` | 18px | 27px | normal | 400 | Default text | `p` |
| `{type.button}` | 18px | 21.6px | normal | 500 | CTA Labels | `a.button` |
| `{type.caption}` | 14px | 19.6px | -0.35px | 400 | Metadata/Tags | `span.date` |

### Principles
1. **Negative Tracking on Display:** Large H1 headers must use -3px letter spacing to achieve the brand's "compact" look.
2. **Weight Restraint:** Headlines and body text both favor 400 weight; 500 is reserved strictly for buttons and navigation.
3. **Achromatic Hierarchy:** Text is #000000 for primary and #5c5c5c for secondary; cyan is never used for long-form body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 14 |
| `{space.sm}` | 16px | 3 |
| `{space.md}` | 24px | 19 |
| `{space.lg}` | 40px | 18 |
| `{space.xl}` | 80px | 2 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Inputs, Sharp sections | `radius: 0px` |
| `{radius.sm}` | 4px | Form fields | `radius: 4px` |
| `{radius.md}` | 14px | Content cards, image containers | `radius: 14px` |
| `{radius.pill}` | 42px | Primary buttons | `radius: 42px` |

## Elevation
*The system is primarily flat. No drop shadows were captured in validated evidence.*

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions and CTAs.
**Pages observed:** https://sokigo.com/pricing, https://sokigo.com/about
**Spec:** 
- **Background:** #232323
- **Text:** #ffffff
- **Border:** 1px solid rgba(0, 0, 0, 0.2)
- **Radius:** 42px
- **Padding:** 8px 26px
- **Typography:** Gotham 500 (18px)
**States observed:** Default | Hover: captured (cyan arrow transition)

#### Text Input
**Role:** Form data entry.
**Pages observed:** https://sokigo.com/pricing, https://sokigo.com/about
**Spec:**
- **Background:** #ffffff
- **Border:** 1px solid #7e7e7e
- **Radius:** 4px
- **Padding:** 20px 25px
- **Typography:** Gotham 400 (16px)

### Tier 2: Patterns

#### Content Card
**Role:** Teaser content and feature blocks.
**Pages observed:** https://sokigo.com, https://sokigo.com/pricing
**Spec:**
- **Background:** #f5f5f5 or #ffffff
- **Border:** 1px solid #eeeeee (when on white)
- **Radius:** 14px
- **Padding:** 46px 40px

### Tier 3: Surface-specific

#### Cyan Feature Block
**Role:** High-impact brand messaging.
**Pages observed:** https://sokigo.com/pricing, https://sokigo.com/about
**Spec:**
- **Background:** #eaf8fb
- **Text:** #000000
- **Radius:** 14px
- **Padding:** 80px 20px

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 80px (vertical) |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 20px. |
| Desktop | 1440px | 12-column modular grid active. |

## Do's
- Use #3eb1c8 for interactive icons and button accents.
- Apply -3px letter spacing to Gotham 52px headlines.
- Maintain a 14px border radius on all content cards.
- Alternate section backgrounds between #ffffff and #f5f5f5.
- Use 42px pill-shaped buttons for all primary CTAs.

## Don'ts
- **Wrong:** Using #0693e3 (WP default) instead of #3eb1c8. **Right:** Always use the brand cyan. **Reason:** Brand consistency.
- **Wrong:** Applying border radius to text inputs. **Right:** Keep inputs at 4px or 0px.
- **Wrong:** Using bold weights for body text. **Right:** Stick to Gotham 400.
- **Wrong:** Using cyan for body text. **Right:** Cyan is for accents only.

## Similar brands
- Addnode Group (Parent company)
- Trimble
- ESRI
- Hexagon

## Quick start

```css
/* CSS Custom Properties */
:root {
  --sokigo-primary: #3eb1c8;
  --sokigo-black: #000000;
  --sokigo-white: #ffffff;
  --sokigo-gray-dark: #232323;
  --sokigo-gray-light: #f5f5f5;
  --sokigo-radius-card: 14px;
  --sokigo-radius-pill: 42px;
  --sokigo-font-main: 'Gotham', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using a #ffffff background, a 1px #eeeeee border, and a 14px border radius. Use Gotham 400 for the title."
- "Generate a primary button with a #232323 background, white text, and a 42px border radius. Include a #3eb1c8 arrow icon."
- "Design a hero section with a 52px Gotham headline using -3px letter spacing and #000000 text."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured.
- Success/Error semantic tokens were not present in the analyzed pages.
- Shadow tokens were not detected; the system appears to rely on borders and background shifts for depth.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://sokigo.com | 1440px | 2026-06-06 |
| Pricing | https://sokigo.com/pricing | 1440px | 2026-06-06 |
| About | https://sokigo.com/about | 1440px | 2026-06-06 |