render.com

render.com is a Magician brand — kinetic, cool, modern, bold and visionary — anchored on #8a05ff and PPNeueMontreal, mixed motion.

Adjectives

• kinetic
• cool
• modern
• bold
• visionary

Personality axes

Evidence

• 50px median radius, 300ms median motion → kinetic (energy +0.73)
• #8a05ff at 272° reads cool → cool (warmth -0.62)
• sans display face, material-you material → modern (era +0.35)
• Axis fingerprint nearest the Magician archetype (74% fit, vs Explorer).

Page intent

landing 29% confidence

Material language

material-you

Imagery style

mixed

Component library

shadcn/ui

Stack

next · Tailwind

Voice tone

neutral

1 primary · 1 secondary · 1 accent · 10 neutrals · 30 total

Neutrals

Full palette

WCAG 100% · 1 passing pairs · 0 failing. Full breakdown in §11.

4 families · 13 sizes · 3 weights

Display

PPNeueMontreal

Body

Roobert

Weights

400, 500, 300

Specimen

Scale

Base 1px · 20 steps captured

Rhythm

3 radii · 1 elevation tiers

Border radii

Elevation

remix · 24 captured

Library

remix

Confidence

45%

Stroke style

mixedFillStroke

Feel: mixed · 4 durations · 4 easings

Duration scale

Easings

• custom
• ease-in-out
• linear
• custom

shadcn/ui · 2 component patterns captured

Mocks

Detected patterns

neutral · — · —

Headlines from the site

• Your fastest path to production for
• Click, click, done.
• Select a service
• Deploy your code

CTA verbs

• ×2
• ×2
• ×2
• ×2
• ×2
• ×1
• ×1

No failing contrast pairs detected.

Drop-in code for the most common stacks. All values from the live extraction.

:root {
  --color-primary: #8a05ff;
  --font-display: "PPNeueMontreal";
  --space-base: 4px;
  --radius-md: 50px;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#8a05ff' },
      fontFamily: { display: ['PPNeueMontreal', 'serif'] },
      spacing: { base: '4px' },
      borderRadius: { md: '50px' },
    },
  },
};

Run npx designlang pack render.com for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

1. Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.