# Spacing and components

> Spacing units, radii, shadows and button styles from brand context APIs for linear.app: what Context.dev's Styleguide and Firecrawl return, and how they differ.

Two endpoints read the Linear CSS closely enough to return spacing and component styles: the Context.dev Styleguide and the Firecrawl branding format. They agree on the main button and differ on almost all other values. Rainbrand's Brand Skill returns written interface guidance instead of values.

| Endpoint | Key | What it returned for linear.app |
| --- | --- | --- |
| Context.dev Styleguide | `styleguide.elementSpacing` | `xs` 8 px, `sm` 20 px, `md` 30 px, `lg` 40 px, `xl` 78 px |
| Context.dev Styleguide | `styleguide.shadows` | One small shadow and one inner shadow, and `md`, `lg` and `xl` were "none" |
| Context.dev Styleguide | `styleguide.components` | Primary, secondary and link buttons and a card, each with colors, radius, padding, font and its CSS |
| Firecrawl branding | `spacing` | `baseUnit` 4, `borderRadius` "8px" |
| Firecrawl branding | `components` | An input and primary and secondary buttons, with colors, radii and shadows |
| Rainbrand Brand Skill | `references/interface-design.md` | "Use borders and separators only where they clarify relationships. Favor softer contrast and rounded edges" |

`GET /v1/web/styleguide?domain=linear.app` (Context.dev Styleguide)

```json
{
  "components": {
    "button": {
      "primary": {
        "backgroundColor": "#e5e5e6", "color": "#08090a",
        "borderRadius": "9999px",
        "padding": "14px 20px", "fontSize": "16px", "fontWeight": 510
      }
    },
    "card": { "backgroundColor": "#0f1011", "borderRadius": "9px", "padding": "12px 16px 16px" }
  }
}
```

1. `borderRadius`: Firecrawl's buttonPrimary agrees: #E5E5E6, 9999px.
2. `borderRadius`: Firecrawl's spacing gives 8px for the whole site.

## Where they agree and where they do not

| Style | Firecrawl branding | Context.dev Styleguide |
| --- | --- | --- |
| Primary button | Pale gray #E5E5E6, near-black text #08090A, 9999 px radius | The same |
| Secondary button | #141516 | Transparent, with white text |
| Radius | One value for the whole site, 8 px | 9 px for cards, 9999 px for buttons |
| Spacing | A 4 px base unit | Five named steps from 8 to 78 px |

## How to use them

These values help you build a page or a component that looks like the site. Pass them to a coding agent as CSS variables or design tokens (named style values), not as prose. They describe the styles of one page, so they do not cover an email, a slide, or an ad. The Context.dev docs tell you to review the Styleguide values before you use them as a design system.

---

Source: https://brandcontextapi.com/fields/spacing-and-components
Last updated: 2026-11-11
Published by The Brand Object. The Brand Object is run by Rainbrand, which makes two of the endpoints described here. Their pages follow the same rules as the others.