# Canecto Design System

> A literary intelligence interface defined by sand-toned canvases, deep forest accents, and high-contrast condensed typography.

**Source:** [https://canecto.com](https://canecto.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Canecto utilizes a sophisticated, earth-toned palette that moves away from standard SaaS blues toward a "literary" aesthetic. The system is anchored by a warm sand-colored foundation (`#f5f3f0`) and deep ink text (`#1a1714`), punctuated by a signature "Reading DNA" green (`#2d6a4f`). Typography is a high-contrast pairing of **Roboto Condensed** for authoritative, tight-tracked headlines and **Roboto** or **Inter** for legible, academic body text. UI elements favor generous border radii (20px to 28px) and soft, expansive shadows to create a layered, paper-like depth.

## Signature DNA
1. **The DNA Radar Plot** (A pentagonal data visualization representing Genre, Mood, Tone, Theme, and Pace, appearing as the central brand motif on the Homepage and About pages).
2. **Sand & Forest Contrast** (The use of warm neutrals like `{colors.sand-100}` (#f5f3f0) against deep green primary actions like `{colors.green-500}` (#2d6a4f)).
3. **Condensed Display Hierarchy** (Roboto Condensed at 700 weight, used for all major section headers to create a "book-jacket" typographic authority).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.ink-900}` | `#1a1714` | Primary display text | 19 | 1 | `--crd-ink-900` |
| `{colors.sand-100}` | `#f5f3f0` | Section background / Card fill | 5 | 1 | `--crd-sand-100` |
| `{colors.white}` | `#ffffff` | Page background / Button text | 30 | 1 | `--the7-page-bg-color` |
| `{colors.ink-500}` | `#5c554e` | Secondary body text | 10 | 1 | `--crd-ink-500` |
| `{colors.charcoal}` | `#1a1c20` | Footer and Top-bar background | 1 | 1 | `--the7-footer-bg-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.green-500}` | `#2d6a4f` | Primary CTA background | 1 | 1 | `--crd-green-500` (decorative_only) |
| `{colors.green-300}` | `#b7dac6` | DNA visualization borders | 4 | 1 | `--crd-green-300` |
| `{colors.gold-accent}` | `#d8b280` | Secondary buttons / Icons | 1 | 1 | `--the7-accent-color` (decorative_only) |
| `{colors.ink-300}` | `#9b8e82` | Muted labels / Metadata | 5 | 1 | `--crd-ink-300` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto Condensed | 700 | Display / Headings | Roboto Condensed (Google) | Apache 2.0 |
| Roboto | 400, 700, 800 | Body / Brand | Roboto (Google) | Apache 2.0 |
| Inter | 400, 600 | UI / Metadata | Inter (Google) | OFL |
| Arial | 400, 700 | Fallback / Buttons | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-lg}` | 46px | 52.9px | normal | 700 | Hero H2 | `h2` |
| `{text.display-md}` | 42px | 50.4px | normal | 700 | Section H2 | `h2` |
| `{text.heading-md}` | 28px | 34px | normal | 700 | Section H3 | `h3` |
| `{text.brand-logo}` | 22px | 25.6px | normal | 800 | Header Brand | `.canecto-topbar__brand` |
| `{text.body-lg}` | 18px | 32.4px | normal | 400 | Intro Paragraphs | `p` |
| `{text.body-md}` | 16px | 25.6px | normal | 400 | Standard Body | `header.canecto-topbar` |
| `{text.subheading}` | 16px | 20.8px | -0.16px | 700 | Card Titles | `h3.crd-rate-card__title` |
| `{text.caption}` | 12px | 25.6px | 0.12px | 600 | Trust Pills | `.crd-onboard__trust-pill` |

### Principles
1. **Condensed for Authority:** All primary headlines use Roboto Condensed to maximize horizontal space and mimic editorial layouts.
2. **Generous Leading:** Body text at 18px uses a 1.8x line-height (32.4px) to ensure high readability for long-form content.
3. **Tight Tracking on UI:** Small labels and card titles use negative letter-spacing (-0.16px) to maintain a crisp, modern feel.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 49 |
| `{space.md}` | 24px | 9 |
| `{space.section}` | 90px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.input}` | 4px | Form fields | 4px (3 occurrences) |
| `{radius.card}` | 20px | Content cards | 20px (5 occurrences) |
| `{radius.panel}` | 24px | Feature blocks | 24px (12 occurrences) |
| `{radius.pill}` | 999px | Primary CTAs | 999px (6 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(45, 41, 32, 0.04) 0px 1px 2px 0px` | Small cards | Homepage cards |
| `{shadow.floating}` | `rgba(0, 0, 0, 0.06) 0px 12px 30px 0px` | Feature panels | About page blocks |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 0px 18px 45px 0px` | Hover states / Modals | About page cards |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Create My Reading DNA")
**Pages observed:** Homepage, About
**Spec:** Background `{colors.green-500}` (#2d6a4f) | Text `{colors.white}` (#ffffff) | Radius `{radius.pill}` (999px) | Typography `{text.body-md}` (16px/700)
**States observed:** Default | Hover: captured (darkens to `#17211f`)

#### Top Navigation
**Role:** Global site header
**Pages observed:** Homepage, About
**Spec:** Background `{colors.white}` (#ffffff) | Height 80px | Text `{colors.ink-900}` (#1a1714) | Shadow: none

### Tier 2: Patterns

#### Feature Card
**Role:** Explaining steps or features
**Pages observed:** Homepage, About
**Spec:** Background `{colors.white}` (#ffffff) | Radius `{radius.card}` (20px) | Border 1px `{colors.sand-200}` (#ede9e3) | Shadow `{shadow.subtle}`

#### Trust Pill
**Role:** Status indicators (e.g., "Private", "Personalisation only")
**Pages observed:** Homepage
**Spec:** Background `{colors.sand-100}` (#f5f3f0) | Typography `{text.caption}` (12px/600) | Radius `{radius.pill}`

### Tier 3: Surface-specific

#### Reading DNA Radar
**Role:** Core brand data visualization
**Pages observed:** Homepage, About
**Spec:** Stroke `{colors.green-300}` (#b7dac6) | Fill: transparent | Typography: Inter 13px

#### Book Rate Card
**Role:** Interactive book selection
**Pages observed:** Homepage
**Spec:** Background `{colors.white}` (#ffffff) | Radius `{radius.card}` (20px) | Padding 24px | Shadow `{shadow.subtle}`

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 90px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text reduces to 32px; Cards stack vertically. |
| Desktop | 1440px | 12-column grid; Horizontal card layouts. |

## Imagery & decoration
Canecto uses high-fidelity book cover art and clean, mathematical radar plots. It avoids generic SaaS illustrations, opting instead for a "museum-label" style of presentation where the content (the book) is the hero.

## Do's
- Use `{colors.sand-100}` (#f5f3f0) for large surface areas to reduce eye strain.
- Apply `{text.display-lg}` (46px) only for primary page heroes.
- Ensure all primary buttons use the `{radius.pill}` (999px) geometry.
- Maintain a 90px vertical rhythm between major content sections.
- Pair Roboto Condensed headlines with Roboto body text for consistent brand voice.

## Don'ts
- **Wrong:** Using a generic blue (#007aff) for primary actions. **Right:** Use `{colors.green-500}` (#2d6a4f). **Reason:** Blue is not part of the Canecto brand palette and belongs to sub-brand or system defaults.
- Do not use sharp corners (0px) for cards; always use at least `{radius.card}` (20px).
- Do not use Roboto Condensed for body paragraphs; it is reserved for headings.
- Never use pure black (#000000) for text; always use `{colors.ink-900}` (#1a1714).

## Similar brands
- Goodreads (Academic/Literary)
- StoryGraph (Data-driven reading)
- Medium (Editorial typography)

## Quick start
```css
:root {
  --canecto-ink: #1a1714;
  --canecto-sand: #f5f3f0;
  --canecto-green: #2d6a4f;
  --canecto-radius-card: 20px;
  --canecto-shadow-subtle: rgba(45, 41, 32, 0.04) 0px 1px 2px 0px;
}
```

## Agent prompt examples
- "Generate a feature section with three cards using a #ffffff background, 20px border radius, and Roboto Condensed 700 for the titles."
- "Create a primary pill button using #2d6a4f background and white text at 16px weight 700."
- "Design a hero section with a sand-colored background (#f5f3f0) and a large 46px headline in Roboto Condensed."

## Known gaps
- Hover states for secondary gold buttons were not fully captured in the automated run.
- Mobile-specific typography tokens for H1 were inferred from visual scaling.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://canecto.com | 1440x900 | 2026-06-06 |
| About | https://canecto.com/about | 1440x900 | 2026-06-06 |
| Mobile | https://canecto.com | 390x844 | 2026-06-06 |