--- version: alpha name: Render description: A bright-white cloud hosting platform with Roobert's ultra-light 300-weight display headlines, a single saturated Render Purple CTA, sharp-cornered cards separated by a warm light-gray border system, and a signature purple-to-amber gradient reserved for brand-level declarations. colors: # Surface / canvas background: "#ffffff" surface: "#f4f0ff" # lavender-tinted hover/focus surface — from interactiveDeltas surface-soft: "#fafafa" # subtle off-white section wells # Ink / text ink: "#0d0d0d" # primary headings and body — near-black, not pure ink-secondary: "#6b6b6b" # muted supporting copy, captions ink-muted: "#4d4d4d" # mid-tier labels, secondary nav text # Brand accent — Render Purple primary: "#8a05ff" # saturated violet-purple CTA and brand highlight primary-dark: "#48008c" # deeper purple — CSS --color-purple-700, used on links primary-hover: "#9b52fb" # lighter hover variant — CSS --color-purple-500 primary-container: "#e7dbff" # lavender tint container — CSS --color-purple-100 on-primary: "#ffffff" # Gradient stops (for the signature purple→amber brand gradient) gradient-from: "#8a05ff" # Render Purple start gradient-via: "#2a0052" # deep purple mid gradient-to: "#d67f2e" # warm amber end — CSS --color-orange-400 # Semantic success: "#009e7a" # CSS --color-green-500 warning: "#c29800" # CSS --color-yellow-400 error: "#e23642" # CSS --color-red-500 info: "#0088e5" # CSS --color-blue-500 # Borders border: "#e3e3e3" # dominant border system — high-frequency across the UI border-strong: "#0d0d0d" # 1px ink border used on large CTAs # Focus focus-tint: "#f4f0ff" # lavender tint on nav hover — was rgba(244,240,255,0.97) # Shadow tints (opaque approximations) shadow-soft: "#e3e3e3" # was rgba(0,0,0,0.08) flattened over white typography: display-hero: fontFamily: "Roobert, DM Sans, Arial, sans-serif" fontSize: 80px fontWeight: 300 lineHeight: 1.00 letterSpacing: -2.4px display: fontFamily: "Roobert, DM Sans, Arial, sans-serif" fontSize: 64px fontWeight: 300 lineHeight: 1.05 letterSpacing: -1.28px heading: fontFamily: "Roobert, DM Sans, Arial, sans-serif" fontSize: 40px fontWeight: 300 lineHeight: 1.10 letterSpacing: -0.6px heading-sub: fontFamily: "Roobert, DM Sans, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.8px body-large: fontFamily: "PPNeueMontreal, Plus Jakarta Sans, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0px body: fontFamily: "PPNeueMontreal, Plus Jakarta Sans, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0.2px body-small: fontFamily: "PPNeueMontreal, Plus Jakarta Sans, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.44 letterSpacing: 0.09px button-ui: fontFamily: "PPNeueMontreal, Plus Jakarta Sans, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.21 letterSpacing: -0.14px label-ui: fontFamily: "PPNeueMontreal, Plus Jakarta Sans, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0.16px caption: fontFamily: "PPNeueMontreal, Plus Jakarta Sans, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.24px mono-label: fontFamily: "PPNeueMontrealMono, DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: 0.28px mono-caption: fontFamily: "PPNeueMontrealMono, DM Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 11px fontWeight: 500 lineHeight: 1.27 letterSpacing: 0.275px spacing: xs: 5px sm: 8px md: 16px lg: 20px xl: 24px 2xl: 36px 3xl: 60px 4xl: 80px 5xl: 120px rounded: none: 0px sm: 2px pill: 9999px components: # Primary CTA — dark filled, sharp corners button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 20px button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 10px 20px # Secondary CTA — outlined with ink border button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 20px 24px borderColor: "{colors.border-strong}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 20px 24px borderColor: "{colors.border-strong}" # Ghost / text button button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.primary-dark}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 16px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 16px # Standard card — sharp, bordered card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px borderColor: "{colors.border}" card-hover: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px borderColor: "{colors.border}" # Feature card — lavender tinted card-accent: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-dark}" rounded: "{rounded.none}" padding: 24px borderColor: "{colors.border}" # Navigation nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 16px 24px borderColor: "{colors.border}" nav-link-hover: backgroundColor: "{colors.focus-tint}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 8px 12px rounded: "{rounded.none}" # Input input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.label-ui}" rounded: "{rounded.sm}" padding: 10px 16px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.background}" borderColor: "{colors.primary}" # Badge / pill badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-dark}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px # Mono label mono-tag: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.mono-caption}" rounded: "{rounded.sm}" padding: 2px 6px --- # Render Design System ## Overview Render's website is a study in confident restraint — a white canvas where a single saturated violet forces the eye with an almost uncomfortable directness. The background is pure `{colors.background}`, and against it, the primary CTA button arrives in Render Purple (`{colors.primary}`, `#8a05ff`) as a near-electric jolt. There is no gradient diffusing its intensity, no supporting palette warming it up; the purple appears, lands hard, and expects no apology. This tension between a calm white field and an uncompromising saturated accent is the brand's opening argument: cloud infrastructure can be effortless and modern without being soft. The typography is equally unconventional. Roobert — a geometric sans set at weight 300 — carries all display and heading work, at sizes ranging from 80px down to 32px, with negative letter-spacing reaching -2.4px at the hero level (`{typography.display-hero}`). The effect is an unusual visual contradicting the infrastructure category: the lighter the weight, the more architectural the type feels. Where Vercel compresses and engineers its headlines, Render stretches and opens them — pages feel airy, even spacious, despite the subject matter. Body and UI text passes to PPNeueMontreal, a neutral and well-proportioned grotesque, handled at weights 400 and 500. PPNeueMontrealMono supplies the technical layer — uppercase-transformed labels and code chips — keeping the developer vocabulary without letting it dominate the composition. The shape system is almost binary. Cards, buttons, and panels are sharp-cornered (`{rounded.none}`), which reinforces a no-nonsense engineering posture. Decoration arrives instead through a signature gradient — purple `{colors.gradient-from}` through deep violet `{colors.gradient-via}` to warm amber `{colors.gradient-to}` — used selectively on brand-level announcements and accent bars. Borders are light and warm (`{colors.border}`, `#e3e3e3`), dividing the layout with a hairline grid that keeps sections organized without imposing weight. The result is a design that feels like well-maintained infrastructure code: precise, readable, and structured by convention rather than decoration. **Key Characteristics:** - Pure white canvas (`{colors.background}`) with a single saturated Render Purple (`{colors.primary}`) CTA — maximum contrast pop - Roobert at weight 300 across all display and heading sizes (`{typography.display-hero}`) — ultra-light geometric sans creating airy, architectural headlines - Aggressive negative tracking at display scales (-2.4px at 80px, -1.28px at 64px) that tightens without compressing - PPNeueMontreal for body and UI text (`{typography.body}`, `{typography.button-ui}`) — neutral, reliable grotesque - PPNeueMontrealMono uppercase for technical labels and mono chips (`{typography.mono-label}`, `{typography.mono-caption}`) - Sharp corners (`{rounded.none}`) throughout — zero border-radius on cards, buttons, and panels - Signature purple-to-amber gradient (`{colors.gradient-from}` → `{colors.gradient-to}`) on brand-level declarations only - Warm light-gray border system (`{colors.border}`, `#e3e3e3`) providing the layout grid - Lavender tint surface (`{colors.surface}`, `{colors.primary-container}`) for hover states and accent fills - Near-black `{colors.ink}` (not pure `#000`) softening the dark end of the contrast range ## Colors ### Surface & Canvas - **White** (`{colors.background}`): The entire page canvas — zero tint, pure white. - **Lavender Tint** (`{colors.surface}`): Navigation hover state; a whisper of purple landing on an otherwise white field. - **Off-White** (`{colors.surface-soft}`): Subtle well for section backgrounds and card hover states. ### Brand Accent - **Render Purple** (`{colors.primary}`): The signature CTA — a fully saturated `#8a05ff` violet. Hovers to a lighter variant `{colors.primary-hover}`. - **Deep Purple** (`{colors.primary-dark}`): A darker `#48008c` purple for links and secondary purple elements (`--color-purple-700`). - **Lavender Container** (`{colors.primary-container}`): The tinted fill for feature cards and badges — a gentle lavender echo of the primary. ### Gradient - **Purple → Amber** (`{colors.gradient-from}` → `{colors.gradient-via}` → `{colors.gradient-to}`): The signature brand gradient, reserved for announcement banners and accent bars. ### Ink / Text - **Near-Black** (`{colors.ink}`): Primary headings and body — `#0d0d0d`, just off true black. - **Mid Gray** (`{colors.ink-secondary}`): Secondary text, muted labels and captions. - **Dark Gray** (`{colors.ink-muted}`): Mid-tier labels and secondary navigation text. ### Semantic - **Success** (`{colors.success}`): Status confirmations, "Available" states in the product dashboard. - **Warning** (`{colors.warning}`): Caution states. - **Error** (`{colors.error}`): Destructive actions and error messages. - **Info** (`{colors.info}`): Informational states and link highlights. ### Borders & Focus - **Border** (`{colors.border}`): The dominant `#e3e3e3` hairline grid — appears on nearly every card and panel edge. - **Border Strong** (`{colors.border-strong}`): `#0d0d0d` ink border used on the large "Get in touch" CTA. - **Focus Tint** (`{colors.focus-tint}`): Lavender fill on navigation hover — was `rgba(244,240,255,0.97)`, opaque-flattened. - **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for soft card lift (original rgba flattened per Google spec). ## Typography ### Font Family - **Display**: `Roobert` — proprietary self-hosted geometric sans at weight 300; fallback `DM Sans, Arial, sans-serif`. All headings and display. - **Body / UI**: `PPNeueMontreal` — neutral grotesque at weights 400 and 500; fallback `Plus Jakarta Sans, Arial, sans-serif`. All body copy and UI controls. - **Monospace**: `PPNeueMontrealMono` — the mono companion for technical labels; fallback `DM Mono, ui-monospace, Menlo, monospace`. Always uppercase-transformed. ### Hierarchy The full type scale is in the `typography:` token block. Use tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.). | Token | Use | |---|---| | `display-hero` | 80px / Roobert 300 / -2.4px — hero billboard headline | | `display` | 64px / Roobert 300 — large section titles | | `heading` | 40px / Roobert 300 — feature and workflow headings | | `heading-sub` | 32px / Roobert 400 — sub-section headings | | `body-large` | 24px / PPNeueMontreal — lead paragraphs and feature descriptions | | `body` | 20px / PPNeueMontreal — standard reading copy | | `body-small` | 18px / PPNeueMontreal — supporting copy | | `button-ui` | 14px / PPNeueMontreal 500 — buttons and UI labels | | `label-ui` | 16px / PPNeueMontreal — nav links and form labels | | `caption` | 12px / PPNeueMontreal 500 uppercase — badge text, meta labels | | `mono-label` | 14px / PPNeueMontrealMono 500 uppercase — technical feature labels | | `mono-caption` | 11px / PPNeueMontrealMono 500 uppercase — smallest technical tags | ### Principles - **Light weight as confidence**: Roobert at 300 is the headline voice — openness and air, not authority through mass. - **Negative tracking scales with size**: -2.4px at 80px, -1.28px at 64px, -0.6px at 40px; relaxes toward 0 at body sizes. - **Mono only in caps**: PPNeueMontrealMono always renders uppercase — it signals the machine layer without ever being read as body text. - **Two-family discipline**: Roobert for expression, PPNeueMontreal for information, mono for the technical — three voices, three roles, no overlap. ## Layout ### Spacing System The full scale is in the `spacing:` token block. The base unit is an irregular 5px, though Tailwind usage shows 8px multiples dominating practical spacings. The `{spacing.5xl}` (120px) step is used heavily — 21 instances in the page — creating a dramatic rhythm between major sections that amplifies the white canvas feel. ### Grid & Container - Max content width: approximately 1200px (breakpoints confirm 1180–1200px stops) - Hero: centered single-column, product dashboard screenshot at right - Feature sections: typically 2-column grids or full-width alternating text+image - The layout makes frequent use of edge-to-edge bordered rows, with full-width horizontal rules using `{colors.border}` to divide sections ### Whitespace Philosophy - **120px gaps between sections** (`{spacing.5xl}`) — the dominant rhythm of the page; white space is the punctuation - **Sharp edges everywhere**: because cards and buttons carry no radius, whitespace and border lines do all the organizational work - **Purple reserved for energy**: the white field is calm; the purple CTA creates a single pulse of energy per view ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no fill | Text sections, inline content | | Bordered (Level 1) | `1px solid {colors.border}` | Cards, panels, table rows — the dominant depth signal | | Ink-Bordered (Level 1b) | `1px solid {colors.border-strong}` | Large "Get in touch" CTA button | | Hover Fill (Level 2) | `{colors.surface-soft}` fill | Card hover states — elevation by color, not shadow | | Gradient Accent (Brand) | `{colors.gradient-from}` → `{colors.gradient-to}` | Announcement banners, brand-level accent bars | **Shadow Philosophy**: Render operates almost entirely without drop shadows. Depth is achieved through borders — the warm `{colors.border}` grid defines every card edge — and through fill tints on hover (`{colors.surface-soft}`, `{colors.surface}`). The only "elevated" treatment is the gradient bar, which appears above and below select elements as a chromatic border, not a shadow. This flat-bordered approach gives the UI a printed-grid feel: precise, logical, and entirely without atmospheric blur. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | All cards, buttons, inputs, panels, nav items | | `sm` | 2px | Smallest chips and inline code tags | | `pill` | 9999px | Badge pills and circular avatar elements | Render is one of the most binary radius systems in developer tooling. The dominant answer to "how rounded?" is 0px — sharp corners everywhere. The pill (9999px, also exposed as a `937px` equivalent in the computed CSS) covers only the smallest status chips. There is no middle ground: the system communicates precision through the absence of softening. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Near-black (`{colors.ink}`) fill, white text, sharp corners. The default CTA. On hover, shifts to Render Purple (`{colors.primary}`) — the purple arrives as a reward, not as the default state. - **`button-secondary`** — White with a full `{colors.border-strong}` ink border, 20px 24px padding. The "Get in touch" pattern — large, generous, architectural. - **`button-ghost`** — White with deep-purple (`{colors.primary-dark}`) text. Navigation and secondary link-style actions. ### Cards - **`card`** — White fill, `{colors.border}` perimeter, sharp corners, 24px padding. The universal content unit across the site. - **`card-hover`** — Subtle `{colors.surface-soft}` fill on pointer entry; no radius change. - **`card-accent`** — Lavender-tinted (`{colors.primary-container}`) fill for feature cards and highlight sections. ### Inputs - **`input`** — White, `{colors.border}` edge, near-zero radius. Focus shifts border to `{colors.primary}` purple — the only moment the purple appears on non-button UI. ### Badges - **`badge`** — Lavender container fill, deep-purple text, full pill radius, uppercase caption text. Status and category labels. ### Navigation - **`nav-bar`** — White sticky header, ink text, border-bottom. On hover, nav links fill with lavender tint (`{colors.focus-tint}`). ### Mono Tags - **`mono-tag`** — Off-white fill, gray text, PPNeueMontrealMono uppercase. Technical feature labels and service-type chips. ## Do's and Don'ts ### Do - Build on pure white (`{colors.background}`) — the canvas has zero tint; don't add warmth or gray - Set headlines in Roobert at weight 300 (`{typography.display-hero}`) with appropriate negative tracking — the lightness is structural - Reserve Render Purple (`{colors.primary}`) for primary CTA buttons — one saturated hit per viewport - Use sharp corners (`{rounded.none}`) on all cards, buttons, and panels — the system is binary: 0 or pill - Divide layout sections with `{colors.border}` hairlines and generous `{spacing.5xl}` vertical gaps - Apply the purple → amber gradient only at brand-declaration scale (banners, hero accent bars) - Use PPNeueMontrealMono in uppercase for technical labels and service-type chips - Let hover states deliver the lavender tint (`{colors.surface}`) or `{colors.surface-soft}` — color does the lift, shadows do not ### Don't - Don't introduce intermediate border-radius values (4–16px) — the system has no mid-range, only `{rounded.none}` and `{rounded.pill}` - Don't use Render Purple (`{colors.primary}`) for decorative fills, backgrounds, or body text — it belongs to the CTA - Don't add drop shadows to cards — `{colors.border}` hairlines and fill tints are the only depth tools - Don't set Roobert at weight 400 or heavier for display headlines — the ultra-light 300 is the brand voice - Don't apply the purple → amber gradient to small elements or UI chrome — it's a brand statement, not a utility pattern - Don't use PPNeueMontrealMono in mixed-case for labels — the mono voice is always uppercase - Don't add mid-page color variation (tinted section backgrounds) — the white canvas must remain dominant throughout --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile XS | <400px | Tight single column; hero headline scales down; CTA stacks | | Mobile | 400–600px | Standard mobile, full-width stacked layout | | Tablet | 600–768px | 2-column feature grids begin; nav condenses | | Tablet Large | 768–1024px | Full card grids; product dashboard shifts to side-by-side | | Desktop Small | 1024–1200px | Standard layout; product screenshots at full size | | Desktop | 1200–1440px | Max-width container; 120px section gaps fully visible | | Large Desktop | >1440px | Centered, margins widen; layout stable | ### Touch Targets - Primary CTA buttons carry 10px–20px vertical padding — adequate tap height - Secondary buttons at 20px vertical padding are generous on touch - Navigation links have per-item 8px horizontal padding with lavender hover tint ### Collapsing Strategy - **Hero**: Roobert 300 headline scales from 80px toward ~48px on mobile; negative tracking proportionally reduced - **Navigation**: horizontal full-menu → mobile hamburger with modal overlay - **Feature cards**: 2–3 column grids → single stacked column - **Dashboard screenshot**: floats right on desktop → stacks below headline on mobile - **Section gaps**: `{spacing.5xl}` (120px) → `{spacing.3xl}` (60px) on mobile ### Image Behavior - Product dashboard screenshots maintain `{colors.border}` border treatment at all viewport sizes - Service architecture diagrams (purple-tinted illustration elements) crop and scale, maintaining aspect ratio - The gradient accent bar is decorative and degrades gracefully to a single-color line on narrow viewports --- ## Agent Prompt Guide ### Quick Color Reference - Background: White `{colors.background}` - Text: Near-Black `{colors.ink}` - Brand accent: Render Purple `{colors.primary}` - Secondary text: Mid Gray `{colors.ink-secondary}` - Border: Warm Light Gray `{colors.border}` - Primary CTA (default): `{colors.ink}` — turns `{colors.primary}` on hover - Accent container: Lavender `{colors.primary-container}` ### Example Component Prompts - "Create a hero section on white (`{colors.background}`). Headline 80px Roobert weight 300, letter-spacing -2.4px, line-height 1.00, color `{colors.ink}`. Sub-headline 20px PPNeueMontreal weight 400, color `{colors.ink-secondary}`. Primary button: `{colors.ink}` fill, white text, sharp corners (border-radius 0), 10px 20px padding, hover shifts to `{colors.primary}`." - "Design a feature card: white fill, `1px solid {colors.border}` perimeter, border-radius 0, 24px padding. Title 32px Roobert weight 400, letter-spacing -0.8px, color `{colors.ink}`. Body text 18px PPNeueMontreal weight 400, color `{colors.ink-secondary}`. Hover: background shifts to `{colors.surface-soft}`." - "Build the secondary CTA button: white background, `1px solid {colors.border-strong}` full border, border-radius 0, 20px 24px padding, 20px PPNeueMontreal weight 400, color `{colors.ink}`. Hover: background fills `{colors.surface}`." - "Create a navigation bar: white sticky header, `1px solid {colors.border}` bottom edge. Nav links at 14px PPNeueMontreal weight 500, color `{colors.ink}`. Hover fills link background with lavender tint `{colors.focus-tint}`, padding 8px 12px. End-cap primary button: `{colors.ink}` fill, white text, sharp corners." - "Render a badge/tag: lavender `{colors.primary-container}` fill, deep purple `{colors.primary-dark}` text, 12px PPNeueMontreal weight 500 uppercase, letter-spacing 0.24px, pill radius (9999px), 4px 10px padding." - "Design a product announcement banner: full-width, `linear-gradient(to right, {colors.gradient-from}, {colors.gradient-via}, {colors.gradient-to})` background, white text at 14px PPNeueMontreal weight 500. Include a ghost CTA link: white text, 1px solid white border, sharp corners, 5px 10px padding." ### Iteration Guide 1. Start with a pure white canvas (`{colors.background}`). Any tint or gray wash breaks the Render aesthetic — the white must be absolute. 2. Set all headlines in Roobert weight 300 (`{typography.display-hero}`). If using DM Sans as a fallback, confirm the fallback weight is also 300. 3. The primary CTA begins as `{colors.ink}` fill and reveals `{colors.primary}` purple on hover. Never default-state the button to purple — that defeats the one-accent discipline. 4. Apply `border-radius: 0` everywhere except badge pills (`{rounded.pill}`). Any intermediate radius looks wrong. 5. Divide sections with `1px solid {colors.border}` lines and 120px (`{spacing.5xl}`) vertical gaps. The white canvas needs punctuation, not color variation. 6. Reach for the purple → amber gradient (`{colors.gradient-from}` → `{colors.gradient-to}`) only at banner/announcement scale — never on cards or buttons. 7. Uppercase PPNeueMontrealMono (`{typography.mono-label}`) for all service and feature type labels. Mixed-case mono reads as inline code, not as a UI label. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Render. Brand names and trademarks belong to their respective owners.