# Graphwise Design System

> Functional utility on a stark white canvas, anchored by high-contrast blue actions and Segoe UI typography.

**Source:** [https://graphwise.ai](https://graphwise.ai) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Graphwise utilizes a high-contrast, utility-first aesthetic that prioritizes clarity over decorative flourish. The system is built on a pure white background (`#ffffff`) with text primarily rendered in a deep charcoal (`#202124`) and secondary information in a muted slate (`#5f6368`). Brand "voltage" is concentrated entirely in interactive elements, specifically a vibrant primary blue (`#1a73e8`) used for rounded pill-shaped buttons. Typography relies on the system-standard Segoe UI for headings and Arial for specific UI interactions, maintaining a familiar, OS-native feel.

## Signature DNA
1. **The Primary Blue Action** (A high-saturation `#1a73e8` used exclusively for primary CTAs, providing the only chromatic moment on an otherwise achromatic canvas).
2. **Softened Utility Geometry** (The use of a `20px` border radius on buttons and cards to soften the standard 4px grid system).
3. **Segoe UI Foundation** (Reliance on Segoe UI at weight 500 for semantic hierarchy, creating a "system-native" authority).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|------|------|------|
| `{color.canvas}` | `#ffffff` | Page background and button text | 3 | 0.6 | Computed style |
| `{color.ink.primary}` | `#202124` | Primary body and heading text | 9 | 0.6 | Computed style |
| `{color.ink.secondary}` | `#5f6368` | Secondary text and metadata | 6 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|------|------|------|
| `{color.primary}` | `#1a73e8` | Primary button background | 3 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Segoe UI | 400, 500 | Headings, body, captions | Open Sans | System |
| Arial | 400 | Specific UI buttons | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h1}` | 24px | 30px | normal | 400 | Main page title | `h1` |
| `{text.heading-sm}` | 24px | 30px | normal | 500 | Section headers | `span` |
| `{text.body}` | 15px | 24px | normal | 400 | Paragraph text | `p` |
| `{text.button}` | 13px | normal | normal | 400 | UI Action labels | `button#reload-button` |
| `{text.caption}` | 12px | 24px | normal | 400 | Error codes/Metadata | `div.error-code` |

### Principles
1. **System-Native Familiarity:** Use of Segoe UI and Arial ensures the interface feels like an extension of the user's operating system.
2. **Semantic Weight:** Hierarchy is driven by weight shifts (400 to 500) rather than significant size jumps.
3. **Achromatic Text:** All typography remains in the `#202124` to `#5f6368` range; color is never used for emphasis in text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|------|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 16px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|------|
| `{radius.none}` | 0px | Default containers | 15 occurrences |
| `{radius.lg}` | 20px | Buttons and feature cards | 3 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|------|-------|-----|------|
| Flat | none | All observed surfaces | 3 pages |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary CTA (e.g., "Reload")
**Pages observed:** 3
**Spec:** Background: `{color.primary}` (#1a73e8) / Text: `{color.canvas}` (#ffffff) / Radius: `20px` / Padding: `8px 16px` / Typography: 13.125px
**States observed:** Default: captured | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns
#### Error Display
**Role:** Communicating system status or access denial.
**Pages observed:** 3
**Spec:** Uses `{text.h1}` for the title, `{text.body}` for the description, and `{text.caption}` for technical codes.

## Layout
| Property | Value |
|------|-------|
| Content Alignment | Center-justified (observed in error states) |
| Max Width | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Button expands to near full-width (approx 90% of viewport) |
| Desktop | 1440px | Button maintains fixed width based on padding |

## Imagery & decoration
The brand uses literal, pixelated iconography (e.g., the "denied" document icon) to signal technical utility. It avoids gradients, shadows, and photographic backgrounds.

## Do's
- Use `#1a73e8` for the primary action button background.
- Set primary headings in Segoe UI at `24px` with a weight of `500`.
- Apply a `20px` border radius to all interactive buttons.
- Maintain a pure `#ffffff` background for all main content areas.
- Use `#5f6368` for secondary metadata and error codes.

## Don'ts
- **Wrong:** Using a blue text link for primary CTAs. **Right:** Use the `#1a73e8` pill button. **Reason:** Primary actions must be contained in the brand-specific rounded geometry.
- **Wrong:** Applying shadows to buttons. **Right:** Keep buttons flat. **Reason:** The system is strictly flat-design.
- **Wrong:** Using sub-brand colors (if they existed) for the "Reload" or "Home" actions. **Right:** Use the parent primary blue. **Reason:** Core utility functions belong to the parent brand identity.

## Similar brands
- Google Cloud (Utility-first, Segoe/Roboto mix, primary blue focus)
- Microsoft Azure (System-native typography, high-contrast utility)
- DigitalOcean (Clean white canvas, saturated blue accents)

## Quick start

```css
:root {
  --gw-color-primary: #1a73e8;
  --gw-color-canvas: #ffffff;
  --gw-color-ink-primary: #202124;
  --gw-color-ink-secondary: #5f6368;
  --gw-radius-pill: 20px;
  --gw-font-main: "Segoe UI", sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Graphwise blue #1a73e8, white text, and a 20px border radius."
- "Layout an error page with a 24px Segoe UI heading in #202124 and a 12px caption in #5f6368."
- "Generate a content card with a white background and 20px corner radius, using no shadows."

## Known gaps
- Hover and Active states for buttons were not captured in the source.
- Navigation bar structure was not present on the analyzed error and landing pages.
- Grid system for complex data layouts was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://graphwise.ai | 1440x900 | 2026-06-06 |
| Pricing | https://graphwise.ai/pricing | 1440x900 | 2026-06-06 |
| About | https://graphwise.ai/about | 390x844 | 2026-06-06 |