# Design Reference - Render
> Crisp canvas, gradient fireworks. A bright, white backdrop that provides contrast for a constellation of colorful gradients and powerful typography.

## Source
- Original site: https://render.com
- Captured: 2026-04-11T16:01:27.213Z

## Tags
- clean
- modern
- gradient-rich
- high-contrast
- developer-focused
- vibrant-accents
- sharp-edges
- minimalist
- expressive-typography

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| White Canvas | `#ffffff` | neutral | Primary page and component backgrounds, offering a pristine, expansive base for content. |
| Charcoal Text | `#0d0d0d` | neutral | Primary text color for headlines and body copy, ensuring strong contrast against light backgrounds. |
| Asphalt Gray | `#272727` | neutral | Darker borders and subtle background elements, providing visual separation without harshness. |
| Pebble Gray | `#4d4d4d` | neutral | Secondary text, navigation items, and less prominent text, offering a softened contrast. |
| Smoke Gray | `#6b6b6b` | neutral | Tertiary text, subtle descriptions, and inactive states. |
| Silver Lining | `#e3e3e3` | neutral | Borders, dividers, and subtle background fills, establishing visual structure on cards and sections. |
| Lavender Mist | `#e6daff` | neutral | Lightest accent background for navigation states and contextual highlights. |
| Arctic Blue Tint | `#e0f4ff` | neutral | Background for specific informational sections or subtle visual separation. |
| Grape Glow | `#8a05ff` | accent | Highlight elements, interactive states, and specific brand feature callouts – the primary accent color. |
| Sunset Violet | `#d67f2` | brand | Prominent headings and visual highlights, signifying importance and drawing immediate attention with its vibrant energy. |
| Digital Emerald | `#009e7a` | accent | Specific callouts and highlighted text/icons, indicating positive states or unique offerings. |
| Deep Plum | `#48008c` | accent | Link states and stronger purple accents, providing depth to interactive elements. |
| Crimson Spark | `#e96770` | accent | Highlighting specific sections and attention-grabbing elements, signaling urgency or novelty. |
| Candy Pink | `#f347ff` | accent | Secondary vibrant accent, used for diverse visual elements to add a playful yet modern touch. |
| Sky Surge | `#33acff` | accent | Secondary accent for active states and informational elements, providing a clear, bright contrast. |
| Twilight Gradient | `#8a05ff` | brand | Used for hero sections and distinctive backgrounds, creating a sense of depth and advanced technology. |
| Radiant Purple to Pink | `#9b52fb` | accent | Used for specific interactive elements or visual flourishes, adding a dynamic and soft touch. |

## Typography
- role: Headlines and prominent display text that require a strong, modern presence. The negative letter spacing at larger sizes creates a tight, impactful visual.; sizes: 20px, 32px, 40px, 48px, 56px, 64px, 80px; family: Roobert; weight: 300, 400; lineHeight: 1.00, 1.05, 1.06, 1.07, 1.08, 1.10, 1.15, 1.20; substitute: Inter; letterSpacing: -0.03em at 80px, -0.025em at 64px, -0.02em at 56px, -0.015em at 48px, -0.01em at 40px
- role: Body copy, navigation, buttons, and general UI text. Its clean, readable nature ensures clarity for all informational content.; sizes: 12px, 14px, 16px, 18px, 20px, 24px; family: PPNeueMontreal; weight: 400, 500; lineHeight: 1.12, 1.21, 1.25, 1.33, 1.38, 1.40, 1.44, 1.50; substitute: System UI; letterSpacing: 0.02em at 12px, 0.01em at 14px, 0.005em at 16px
- role: Code snippets, technical labels, and specialized data display where monospaced precision is essential for alignment and clarity.; sizes: 11px, 12px, 14px; family: PPNeueMontrealMono; weight: 400, 500; lineHeight: 1.27, 1.33, 1.43; substitute: Space Mono; letterSpacing: 0.025em at 11px, 0.02em at 12px

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "tags": "937px",
      "buttons": "0px",
      "default": "0px"
    },
    "elementGap": "8px",
    "sectionGap": "40px",
    "cardPadding": "20px"
  },
  "radius": {
    "tags": "937px",
    "buttons": "0px",
    "default": "0px"
  }
}
```

## Component Patterns
- name: Hero CTA Button Group
- name: Feature Steps — Click, click, done
- name: Announcement Banner + Pill Tags
- name: Primary Dark Button; role: Call to Action
- name: Outline Button; role: Secondary Action
- name: Text Link Button; role: Tertiary Action
- name: Header Navigation Item; role: Primary Navigation
- name: Hero Headline; role: Page Title
- name: Feature List Item Heading; role: Section Sub-heading
- name: Body Paragraph; role: General Content
- name: Pill Tag; role: Metadata/Label

## Do
- Use Charcoal Text (`#0d0d0d`) for all primary text against white backgrounds to ensure AAA contrast.
- Apply `borderRadius: 0px` for all standard buttons and cards to maintain a sharp, modern aesthetic.
- Utilize `Roobert` for all headlines with negative letter spacing (`-0.03em` to `-0.01em`) to create a signature tight, impactful look.
- Employ the `Grape Glow` (`#8a05ff`) as the primary accent for interactive elements and key numerical highlights.
- Incorporate the linear brand gradients (e.g., `linear-gradient(to right, rgb(138, 5, 255), rgb(214, 127, 46))`) for high-impact headlines or distinctive background sections.
- Maintain a clear visual hierarchy by consistently using `PPNeueMontreal` for body text and UI elements, with `16px` as a base font size.
- Ensure all interactive elements have a clear hover state, typically darkening the text or background subtly as seen on navigation items.

## Don't
- Do not introduce rounded corners other than `937px` for specific pill-shaped tags to maintain the sharp aesthetic.
- Avoid using additional bright, highly saturated colors for backgrounds; reserve them for accents and gradients.
- Do not deviate from the specified font families; PPNeueMontreal and Roobert define the typographic voice.
- Do not use generic box shadows; elevation is primarily achieved through background color shifts and borders.
- Avoid overuse of the vivid accent colors; their power comes from strategic placement to highlight key information.
- Do not apply `letterSpacing: 0` to large headlines; the distinctive negative letter spacing of Roobert is crucial.
- Do not use a solid background color for the 'apps & agents' portion of the main hero headline; it must retain its gradient fill.