# Getcoco · Design system migration spec

> Source: https://www.getcoco.com  ·  Curated by OpenDesign  ·  en

> A great example of a modern, playful SaaS landing page that uses bold typography and vibrant accents to create a friendly and empowering brand voice.

## 1. Identity DNA

Getcoco's design system is a vibrant, approachable toolkit for modern social entrepreneurs. Like a well-organized workshop, it combines a clean, high-contrast foundation with a single, potent tool—the electric blue accent—to empower users in their social commerce growth.

**One-liner:** A playful, utility-focused SaaS landing page that uses bold typography and vibrant accents to market a social selling app.
**Keywords:** Social · Selling · Instagram · Growth · Commerce
**Analogy:** A vibrant, approachable toolkit for modern social entrepreneurs.

## 2. Color

The color system is defined by a strict high-contrast neutral base: pure white and black, with a single vibrant electric blue reserved for primary actions. This creates immediate clarity and directs user focus with surgical precision.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.6)` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--accent` | `#23C4F7` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast neutral base with a single vibrant electric blue accent for primary actions.

The principle is one of functional restraint, using a vibrant accent not for decoration, but as a clear signal for interaction.

## 3. Typography

The typographic voice is set by **GT America**, a geometric sans-serif used exclusively. Bold weights (700) command headlines with punchy confidence, while a medium weight (500) ensures body text remains clear and accessible, establishing a utility-focused tone.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 700 | -1px | Hero headline |
| h2 | 32px | 1.25 | 700 | -0.32px | Section headline |
| body | 14px | 1.4 | 500 | 0 | UI elements and body text |

**Type rules:**
- Use Geometric Sans (GT America) for all text.
- Use bold weight (700) for headlines and medium weight (500) for body text.

## 4. Spacing

Content breathes within a consistent vertical rhythm, established by generous padding of 24px, 40px, and 48px to separate blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent padding of 24px, 40px, and 48px is used to separate content blocks.

## 5. Surfaces

Surfaces rely on depth through subtlety: a dual-layer shadow system creates a soft lift, while interactive elements like inputs are defined by a single, fine border.

- **Radius:** sm 3px · md 16px · lg 24px · pill 100px
- **Shadows:**
  - 0px 1px 3px 0px rgba(0, 0, 0, 0.1)
  - 0px 0px 0px 1px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(0,0,0,0.1) for interactive elements like inputs.

## 6. Layout

The layout skeleton is a standard, centered container that prioritizes generous vertical spacing. This creates a clean, single-column flow that guides the user's eye straight through the content hierarchy.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered container layout with generous vertical spacing.

## 7. Motion & Interaction

Motion philosophy prioritizes smooth, functional feedback over spectacle. Transitions are minimal but deliberate, focused on reinforcing interactivity through changes like the background-color shift on a button hover.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`
- **Patterns:**
  - Smooth background-color transitions on hover for buttons.

- **Hover:** Buttons and interactive elements change background color smoothly.
- **Click:** Immediate visual feedback with cursor pointer on interactive elements.
- **Transition:** All properties transition smoothly, with a specific focus on background-color.
- **Keyboard:** Standard focus management for interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident, empowering, and slightly playful, using short, benefit-oriented headlines and direct, action-focused calls to action. Language avoids complex structures and corporate jargon in favor of punchy, empowering clarity.

- **Tone:** Confident, empowering, and slightly playful.
- **Headline style:** Short, punchy, and benefit-oriented with a large, bold geometric font.
- **CTA style:** Direct and action-oriented, using bright colors to draw attention.
- **Avoid:** Overly formal or corporate jargon. / Passive language. / Complex sentence structures.

### Don'ts
- ❌ Don't use small, tight fonts — screenshot shows large, bold geometric type.
- ❌ Don't use muted, earthy palettes — screenshot shows a bright, high-contrast palette with vibrant accents.
- ❌ Don't use sharp corners — screenshot shows highly rounded, pill-like shapes.
- ❌ Don't use thin, light weights — screenshot shows medium to bold weights for clarity.
- ❌ Don't use dark mode — screenshot shows a predominantly white background with dark text.
- ❌ Don't use complex, busy layouts — screenshot shows a clean, spacious, single-column layout.

The system deliberately forgoes dark mode, muted palettes, sharp corners, and dense layouts, committing fully to its bright, spacious, and rounded identity.

## System Prompt (paste into AI tool)

```
This is a SaaS landing page for a social selling app called Coco. It features a clean, white background with bold, geometric sans-serif typography (GT America). Key hex colors include #FFFFFF for the background, #000000 for the main ink, and a vibrant electric blue (#23C4F7) for primary CTAs and accents. The layout is spacious with generous padding (24px-48px). Critical donts: do not use small font sizes, do not use sharp corners, and do not use a dark color scheme. The design is playful, utility-focused, and high-contrast.
```
