---
version: alpha
name: Carrd — Quiet Gradient One-Page Builder
description: A restrained website-builder landing page with a blue-to-mauve geometric
  hero, centered white Arial typography, teal start buttons and a dark charcoal body.
  A thin vertical line connects product screenshots, alternating image-and-copy feature
  rows, a two-column Pro checklist and a compact outlined closing CTA. Mobile converts
  the sequence to stacked inset panels.
colors:
  primary: '#33ADA9'
  surface: '#24252D'
  on-surface: '#FFFFFF'
  body-text: rgba(255, 255, 255, 0.75)
  panel: rgba(36, 37, 45, 0.6)
  outline: rgba(255, 255, 255, 0.25)
  muted: rgba(255, 255, 255, 0.376)
typography:
  brand:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 56px
    fontWeight: '700'
    lineHeight: 89.6px
    letterSpacing: -1.4px
  hero-heading:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 56px
    fontWeight: '700'
    lineHeight: 70px
    letterSpacing: -1.4px
  section-title:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 34px
    fontWeight: '700'
    lineHeight: 42.5px
    letterSpacing: -0.85px
  feature-title:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 38.4px
    letterSpacing: -0.6px
  body:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 28px
  action:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 16px
    fontWeight: '700'
    lineHeight: 52.8px
  mobile-body:
    fontFamily: Arial, Helvetica, sans-serif
    fontSize: 14.6667px
    fontWeight: '400'
    lineHeight: 25.6667px
---

# Carrd — Quiet Gradient One-Page Builder

## Overview

Observed 2026-09-24T06:07:27.362964+00:00 at 1440 × 1000 CSS pixels, device scale factor 1. Mobile reviewed at 390 × 844, including a separate full-page mobile capture. Numeric CSS values below are measured; visual estimates are explicitly labeled. This is a static reference, not a test of every interaction or animation.

Carrd starts with a compact centered brand, short promise and two stacked actions over a soft blue-to-mauve geometric field. Below, real example websites make the service tangible. The page progresses from a broad introduction through Simple, Responsive and Free, then an optional paid-feature checklist and a final start action. A fine vertical connector links the chapters. Keep the page calm, direct and product-led rather than turning it into a dense dashboard presentation.

## Colors

The measured body ground is #24252D. White headings sit above supporting copy at rgba(255,255,255,0.75). The primary start button uses measured #33ADA9; the same teal family appears in the checklist ticks. Secondary actions are transparent with pale outlines. The closing CTA uses an inset 2px outline at rgba(255,255,255,0.25). Muted legal copy measures rgba(255,255,255,0.376).

The hero background is image-based in computed CSS and visually blends cool blue at the upper/right side into muted mauve toward the lower/left side. Large translucent hexagonal forms add depth. These are visual observations, not measured CSS gradient stops: do not invent exact stop tokens. Content sections use measured rgba(36,37,45,0.6), so the mobile background can remain subtly visible through their surfaces. Avoid applying the teal to large background areas; it primarily marks the start action and checks.

## Typography

Use Arial with Helvetica and sans-serif fallbacks throughout the interface. The brand is 56px/89.6px, weight 700, tracking -1.4px at desktop. The introductory heading is 56px/70px with the same weight and tracking. Feature chapter headings are 34px/42.5px, tracking -0.85px. Pro feature labels are 24px/38.4px, tracking -0.6px. Body copy is 16px/28px, weight 400. The start and login actions use 16px bold labels inside 52.8px line-height controls.

At 390px the brand becomes 44px/70.4px with -1.1px tracking. Introductory and chapter headings share 25.6667px/38.5px, weight 700, tracking -0.641667px. Body copy is 14.6667px/25.6667px. Pro labels become 14.6667px/23.4667px, bold with -0.366667px tracking. Product screenshots contain their own template typography; do not confuse those example-site fonts with Carrd's marketing interface.

## Layout

At desktop, center the main sections in a measured 1024px container beginning at x=208. The hero fills the initial 1000px-high viewport with the brand and promise centered in an approximately 494px-wide text area. Stack the two 264px-wide hero actions with a modest gap. The small What is Carrd control sits lower in the hero and starts the vertical connecting rule. The top-right menu is compact rather than a conventional full-width link list.

The introduction uses a 1024px panel with measured header padding of 112px 64px 80px. Its heading/body content is 896px wide at x=272, followed by a large website preview. Continue with three 1024 × 384px image-and-copy rows. Alternate image left, image right, image left; the copy columns measure 384px wide. Screenshots, not decoration, provide each row's visual proof. Use generous gaps between major chapters; the measured supplemental layout places 160px between the intro and feature stack and again before the Pro panel. Animated layout settling can shift absolute vertical positions, so preserve relative rhythm rather than hard-coding the screenshot's total height.

The Pro section centers a short introduction, then two columns of three checked benefits. Its section heading block uses 96px 64px 64px padding. Benefit descriptions align beneath their labels, with the circular tick to the left. A faint horizontal divider separates the checklist from the trial/payment note and Learn More action. The closing CTA is a narrow measured 512px panel with 64px 64px 32px padding, connected from above by the fine center rule.

At 390px the main inset panels measure 368px wide at x=11, while text measures approximately 309.34px wide at x=40.33. Hero actions expand to the text width. The hero becomes content-height, bringing the next panel into the first screen, and the desktop What is Carrd control is not visible. Feature images and descriptions stack vertically, with image before description for all three features. Pro benefits become one column. Introductory headers use 44px 29.3333px 14.6667px padding. The closing panel is about 305px wide at x=42.47. Document scroll width equals viewport width on both tested sizes. Intermediate breakpoints were not measured.

## Elevation & Depth

The design is mostly flat. Main panels report no CSS box shadow. Translucent surfaces over the geometric backdrop and overlapping example-site screenshots supply depth. The final CTA is defined by a measured 2px inset pale outline, not an outer shadow. Avoid raised-card shadows on every feature; the alternating screenshots already provide visual hierarchy.

## Shapes

Use measured 6px radii for action controls and outer section corners. Hero start and login controls are 264px wide on desktop with 24px horizontal padding. The logo is a thin white folded-page outline. Checklist checks sit in thin circles; exact stroke widths were not measured. The main chapter connector is visually a fine gray vertical rule, centered between sections; its precise color and width are estimates, unlike the measured closing-panel inset outline.

## Components

The core components are the folded-page brand, concise hero promise, solid start action paired with outlined login, optional lower hero anchor, product preview panel, alternating feature rows, Pro benefit checklist, trial note, outlined final CTA and sparse legal footer. The repeated Choose a Starting Point action bookends the story. Supporting links within the Pro descriptions are subtle dotted underlines in the captured state.

Keep feature headings short and the text centered in the three introductory rows; keep the denser benefit list left-aligned. Prices and plan limits are capture-time copy, not permanent product facts. No signup, purchase, menu or editor flow was exercised. The decorative background is represented by one static frame; motion timing, focus and hover states are uninspected.

## Do's and Don'ts

- Do pair a quiet geometric atmosphere with real, readable example websites.
- Do reserve the teal fill for the repeated start action and use outlines for secondary actions.
- Do preserve the centered connector and alternating desktop feature rhythm.
- Do reorder all mobile feature pairs into image then description.
- Don't reproduce desktop viewport-height whitespace unchanged on mobile.
- Don't mistake fonts inside template screenshots for the site's interface font.
- Don't invent gradient-stop values or interaction behavior from a static image.