Tines

---
version: alpha
name: Tines
description: The intelligent workflow platform. Securely scale AI and automation.
colors:
  primary: "#6b4dc9"
  secondary: "#8c74e3"
  neutral: "#fcf9f5"
  brand-melrose: "#c4b4dd"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Roobert
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Reckless
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: Reckless
    fontSize: 37px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.006em
  headline-xs:
    fontFamily: Roobert
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Reckless
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 14px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 36px
  xl: 86px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 9px 18px
    height: 36px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 9px 18px
    height: 36px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 24px
---

# Tines: Purple-as-Text on a Calm Off-White Canvas

## Overview

A confident, security-minded brand that stays friendly. The interface is light, spacious, and highly legible, using a single purple for almost all text over a warm off-white surface. Typography mixes a modern sans for headlines with an editorial serif for supporting copy. Interactions are rounded and compact, with pill buttons at a consistent 36px height.

## Colors

- Primary (#6b4dc9): Grape core for headlines, body text, links, and primary accents.
- Secondary (#8c74e3): Softer lavender used sparingly for supporting accents and backgrounds.
- Neutral (#fcf9f5): Warm off-white canvas for pages and sections.
- Brand-melrose (#c4b4dd): Dusty lilac for subtle dividers, outlines, and logo rows.
- Surface (#fcf9f5): Primary surface color, same as Neutral.
- On-surface (#6b4dc9): Default text and icon color over light surfaces.

## Typography

- Roobert (custom, not freely hosted): Primary sans for headline-lg and headline-xs. Substitutes: Inter, Rubik, or IBM Plex Sans for similar rounded-humanist geometry.
- Reckless (custom, not freely hosted): Editorial serif for headline-md/sm and body-md at 24px/1.5. Substitutes: Fraunces, Playfair Display, or Spectral.
- Roobert Mono (custom, not freely hosted): Used in code/UI examples. Substitutes: IBM Plex Mono, Space Mono, or Recursive Mono.
- Sizes and roles: headline-lg 56/1.05 with tight -0.03em tracking for page heroes; headline-md 45/1.2 and headline-sm 37/1.19 for section intros; body-md 24/1.5 for paragraphs and lists.

## Layout

Spacing follows a measured ladder: 6, 14, 24, 36, 86px. Use md (24px) for internal card padding and between stacked text blocks; lg (36px) for section gutters and grid gaps; xl (86px) for inter-section breathing room and hero offsets. Build sections on a responsive 12-column grid; align CTAs and logo rows to column edges, keeping text blocks on 6–8 columns for readability.

## Elevation & Depth

No shadows are used. Hierarchy is achieved through color (purple on off-white), weight/scale in type, generous whitespace, and occasional filled cards. When separation is needed, use the brand-melrose (#c4b4dd) for hairline rules or outlines rather than drop shadows.

## Shapes

Corners are friendly. Cards use rounded.sm at 14px; interactive elements use rounded.full (9999px) for pills. Use the pill shape for CTAs, badges, and small filters; reserve 14px radii for structural containers like cards or tiles.

## Components

- Button Primary: background #6b4dc9, text #6b4dc9, height 36px, padding 9px 18px, rounded.full. Use for the main CTA; ensure contrast via placement on light backgrounds.
- Button Secondary: background #6b4dc9, text #fcf9f5, height 36px, padding 9px 18px, rounded.full. Use where a second action of similar emphasis is needed.
- Button Link: text #6b4dc9, no radius; reserved for lightweight actions.
- Card: background #6b4dc9, text #fcf9f5, radius 14px, padding 24px. Employ for callouts and dense information blocks.

### Global Navigation
- Compact top bar with logo, product/solutions menus, and a right-aligned pill "Book a demo" (36px). Use md (24px) horizontal padding and lg (36px) between groups.

### Announcement Pill
- Small rounded.full badge for "New / Introducing Tines 3B". Use on-surface text over a neutral chip with brand-melrose outline; spacing sm (14px) from the hero heading.

### Hero Stack
- headline-lg 56px Roobert, two lines, on-surface color. Body-md 24px below with md (24px) spacing. CTA group of two pills aligned to baseline.

### Customer Logo Row
- Monochrome logos on neutral background with brand-melrose dividers. Use lg (36px) gap between logos.

### "100× solution" Feature Grid
- Four features in two columns on desktop. Headings in headline-sm 37px; body in 24/1.5. Use md (24px) inner padding and lg (36px) column gap.

### Teams Tile Grid
- Five tiles (IT, Security, Finance, People, Operations). Use card structure when emphasis is needed: radius 14px, padding 24px, headline-xs 30px for titles.

### Footer Mega Menu
- Multi-column link lists. Use body-md 24px, columns separated with brand-melrose rules and lg (36px) gaps.

## Do's and Don'ts

- Do set text and icons to #6b4dc9 over #fcf9f5 backgrounds for brand consistency.
- Do space sections with xl (86px) and keep internal padding to md (24px) or lg (36px).
- Do reserve rounded.full for interactive pills and 14px radii for containers.
- Don't add shadows; use color, scale, and whitespace for hierarchy.
- Don't introduce additional accent colors; rely on secondary #8c74e3 and brand-melrose #c4b4dd when variation is required.
- Don't shrink paragraph text below body-md 24px; legibility depends on that size with purple copy.

## Agent Prompt Guide

Quick reference — text: #6b4dc9, background: #fcf9f5, border: #c4b4dd, accent: #8c74e3.

1) Build a hero section with brand typography
- Background #fcf9f5. Container max-width 12 cols.
- H1: Inter (substitute for Roobert), size 56px, weight 400, line-height 1.05, letter-spacing -0.03em, color #6b4dc9.
- Paragraph: Fraunces (substitute for Reckless) 24px/1.5, color #6b4dc9, margin-top 24px.
- CTA group: two inline buttons (pill radius 9999px, height 36px, padding 9px 18px). Link-style secondary uses text #6b4dc9 only.

2) Create a two-column feature grid ("100× solution")
- Section padding: 86px top/bottom, 24px sides.
- Each feature: heading Fraunces 37px/1.19, color #6b4dc9; body 24px/1.5, margin-top 14px.
- Grid gap: 36px; use border-bottom 1px solid #c4b4dd for separation on mobile.

3) Team tiles using the card style
- Tile: background #6b4dc9, text #fcf9f5, radius 14px, padding 24px.
- Title: Inter 30px/1.2; body Fraunces 24px/1.5.
- Grid: 12-col with 36px gaps; stack to single column under 768px.

4) Footer mega menu
- Background #fcf9f5; columns separated by 1px #c4b4dd.
- Column heading: Inter 30px/1.2, color #6b4dc9.
- Links: Fraunces 24px/1.5, color #6b4dc9; column gap 36px; section padding 86px.

## Similar Brands

- Snyk: Security product with bold single-hue branding; Snyk skews darker and denser, while Tines stays lighter with friendlier pills.
- Okta: Enterprise identity site using rounded buttons and calm typography; Okta is cooler/bluer with more gradients.
- Datadog: Strong purple brand and product screenshots; Datadog's UI is busier with heavier illustration and darker surfaces.
- Zapier: Automation narrative with large type and grids; Zapier uses orange accents and a neutral text color instead of brand-colored body copy.

:root {
  /* Colors */
  --color-primary: #6b4dc9;
  --color-secondary: #8c74e3;
  --color-neutral: #fcf9f5;
  --color-brand-melrose: #c4b4dd;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 45px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-md-tracking: -0.014em;
  --text-headline-sm-size: 37px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.006em;
  --text-headline-xs-size: 30px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 24px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-roobert: "Roobert";
  --font-reckless: "Reckless";

  /* Rounded */
  --radius-sm: 14px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 36px;
  --spacing-xl: 86px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 9px 18px;
  --button-primary-height: 36px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 9px 18px;
  --button-secondary-height: 36px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-primary);
  --card-text-color: var(--color-neutral);
  --card-rounded: var(--radius-sm);
  --card-padding: 24px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "The intelligent workflow platform. Securely scale AI and automation.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.42,
          0.302,
          0.788
        ],
        "hex": "#6b4dc9"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.549,
          0.455,
          0.89
        ],
        "hex": "#8c74e3"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.988,
          0.976,
          0.961
        ],
        "hex": "#fcf9f5"
      }
    },
    "brand-melrose": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.769,
          0.706,
          0.867
        ],
        "hex": "#c4b4dd"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.988,
          0.976,
          0.961
        ],
        "hex": "#fcf9f5"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.42,
          0.302,
          0.788
        ],
        "hex": "#6b4dc9"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 86,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "full": {
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Roobert",
        "fontSize": {
          "value": 56,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.03,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Reckless",
        "fontSize": {
          "value": 45,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.014,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Reckless",
        "fontSize": {
          "value": 37,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.006,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Roobert",
        "fontSize": {
          "value": 30,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Reckless",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}