lovable.dev

---
version: alpha
name: "Cloudflare Security Interstitial"
description: "A Cloudflare-generated security verification interstitial page for lovable.dev. The design is extremely sparse: a single centered column with a brand logo, page title, body copy, and an embedded Cloudflare Turnstile widget. Both light and dark themes are supported via prefers-color-scheme. Typography is exclusively system-ui at a small set of sizes. No border radii, shadows, or decorative elements are present beyond the Cloudflare widget itself. The dark theme uses near-black (#000000) backgrounds with near-white (#f2f2f2) text; the light theme inverts to near-white backgrounds with near-black (#313131) text."
colors:
  link-blue-dark: "#82b6ff"
  surface-base-dark: "#000000"
  text-muted-dark: "#b6b6b6"
  text-primary-dark: "#f2f2f2"
  link-blue: "#0000ee"
  surface-base: "#ffffff"
  text-primary: "#313131"
  border-subtle: "#d9d9d9"
typography:
  page-heading:
    fontFamily: "system-ui"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "50px"
  section-heading:
    fontFamily: "system-ui"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "30px"
  body:
    fontFamily: "system-ui"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-compact:
    fontFamily: "system-ui"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
  caption-footer:
    fontFamily: "system-ui"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "18px"
  monospace:
    fontFamily: "monospace"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "18px"
spacing:
  spacing-8: "8px"
  spacing-16: "16px"
  spacing-32: "32px"
  spacing-128: "128px"
  spacing-160: "160px"
components:
  body-text:
    fontFamily: "system-ui"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
    colorDark: "{colors.text-primary-dark}"
    colorLight: "{colors.text-primary}"
  body-text-muted:
    fontFamily: "system-ui"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
    colorDark: "{colors.text-muted-dark}"
    colorLight: "{colors.text-primary}"
  cloudflare-turnstile-widget:
    display: "inline-block"
    backgroundColor: "white (light) / dark (dark)"
    rounded: "vendor-defined"
    width: "~300px"
  footer-link:
    fontFamily: "system-ui"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "18px"
    colorDark: "{colors.link-blue-dark}"
    colorLight: "{colors.link-blue}"
    rounded: "0px"
    boxShadow: "none"
    padding: "0px"
  page-heading:
    fontFamily: "system-ui"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "50px"
    colorDark: "{colors.text-primary-dark}"
    colorLight: "{colors.text-primary}"
    rounded: "0px"
    boxShadow: "none"
    padding: "0px"
  ray-id-display:
    fontFamily: "{typography.monospace}"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "18px"
    colorDark: "{colors.text-primary-dark}"
    colorLight: "{colors.text-primary}"
  section-heading:
    fontFamily: "system-ui"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "30px"
    colorDark: "{colors.text-primary-dark}"
    colorLight: "{colors.text-primary}"
    rounded: "0px"
    boxShadow: "none"
    padding: "0px"
---

## Overview

A Cloudflare-generated security verification interstitial page for lovable.dev. The design is extremely sparse: a single centered column with a brand logo, page title, body copy, and an embedded Cloudflare Turnstile widget. Both light and dark themes are supported via prefers-color-scheme. Typography is exclusively system-ui at a small set of sizes. No border radii, shadows, or decorative elements are present beyond the Cloudflare widget itself. The dark theme uses near-black (#000000) backgrounds with near-white (#f2f2f2) text; the light theme inverts to near-white backgrounds with near-black (#313131) text.

**Signature traits:**
- Dual typeface system: Pairs system-ui and monospace across the type hierarchy.
- Single-accent color discipline: A neutral-led palette reserves #0000ee as the lone accent.

## Colors

The palette uses 8 validated color tokens across 2 theme profiles. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **content-text** maps to `text-primary`: Role "text" is grounded by usage context "All body text, headings, and footer text in light mode".
- **surface-background** maps to `surface-base`: Role "background" is grounded by usage context "Page background in light mode (visually confirmed white)".
- **action-background** maps to `link-blue`: Role "background" is grounded by usage context "Hyperlinks in light mode (footer links)".
- **border-border** maps to `border-subtle`: Role "border" is grounded by usage context "Divider line at footer in light mode".

### Dark Theme

### Text Scale
- **Text Muted Dark** (#b6b6b6): Secondary/muted body text in dark mode. Role: text. {authored: rgb(182, 182, 182), space: rgb}
- **Text Primary Dark** (#f2f2f2): All body text, headings, and footer text in dark mode. Role: text. {authored: rgb(242, 242, 242), space: rgb}

### Surface & Shadows
- **Link Blue Dark** (#82b6ff): Hyperlinks in dark mode (footer links, probe-confirmed). Role: background. {authored: rgb(130, 182, 255), space: rgb}
- **Surface Base Dark** (#000000): Page background in dark mode. Role: background. {authored: rgb(0, 0, 0), space: rgb}

### Light Theme

### Text Scale
- **Text Primary** (#313131): All body text, headings, and footer text in light mode. Role: text. {authored: rgb(49, 49, 49), space: rgb}

### Interactive
- **Border Subtle** (#d9d9d9): Divider line at footer in light mode. Role: border. {authored: rgb(217, 217, 217), space: rgb}

### Surface & Shadows
- **Link Blue** (#0000ee): Hyperlinks in light mode (footer links). Role: background. {authored: rgb(0, 0, 238), space: rgb}
- **Surface Base** (#ffffff): Page background in light mode (visually confirmed white). Role: background.

## Typography

Typography uses system-ui, monospace across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes system-ui and monospace for visual contrast. Weight range spans semi-bold, regular. Sizes range from 12px to 40px.

### Font Roles
- **Headline Font**: system-ui
- **Body Font**: system-ui

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary page title (h1) — 'Performing security verification' | system-ui | 40px | 600 | 50px | normal | system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Sub-heading or brand name display | system-ui | 24px | 600 | 30px | normal | system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Body paragraph text | system-ui | 16px | 400 | 24px | normal | system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Compact body text, widget labels | system-ui | 16px | 400 | 18.4px | normal | system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Footer text, small labels, Ray ID | system-ui | 12px | 400 | 18px | normal | system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | Extracted token |
| Ray ID value display | monospace | 12px | 400 | 18px | normal | monospace | Extracted token |

## Layout

Responsive system uses 2 breakpoint tier(s): mobile, desktop.

This system uses a 8px base grid with scale values 8, 16, 32, 128, 160.

### Responsive Strategy
- **mobile (<= 350px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-8 | 8px | 8 | Extracted spacing token |
| spacing-16 | 16px | 16 | Extracted spacing token |
| spacing-32 | 32px | 32 | Extracted spacing token |
| spacing-128 | 128px | 128 | Extracted spacing token |
| spacing-160 | 160px | 160 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | rgb(49, 49, 49) ; rgb(0, 0, 238) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Dark | outline-color | rgb(242, 242, 242) ; rgb(130, 182, 255) ; rgb(182, 182, 182) |
| Dark | outline-width | 3px |
| Dark | outline-offset | 0px |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| n/a | n/a | 0 | No radius tokens extracted |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| n/a | No radius payload | n/a |

## Components

Components should be recreated from token references first, then tuned with variant notes and probe-backed state guidance.
- **Page Heading H1**: Primary page title rendered as an h1 element with semibold system-ui at 40px.
- **Section Heading**: Secondary heading at 24px semibold system-ui, used for brand name or sub-section titles.
- **Body Text**: Standard paragraph text at 16px regular system-ui.
- **Footer Link**: Small hyperlink in the page footer at 12px system-ui.
- **Ray ID Display**: Monospace caption showing the Cloudflare Ray ID for debugging.
- **Cloudflare Turnstile Widget**: Embedded third-party CAPTCHA widget with checkbox and Cloudflare branding. Rendered in an iframe.

### Body Text

**Default**
- fontFamily: system-ui
- fontSize: 16px
- fontWeight: 400
- lineHeight: 24px
- colorDark: #f2f2f2
- colorLight: #313131
- State guidance: Probe-confirmed via div.main-content, padding 0px 32px.

**Muted**
- fontFamily: system-ui
- fontSize: 16px
- fontWeight: 400
- lineHeight: 18.4px
- colorDark: #b6b6b6
- colorLight: #313131
- State guidance: Probe-confirmed via #tzPC0 selector, color rgb(182,182,182) in dark mode.

### Cloudflare Turnstile Widget

**Default**
- display: inline-block
- backgroundColor: white (light) / dark (dark)
- rounded: vendor-defined
- width: ~300px
- State guidance: Third-party widget; internal styles are vendor-controlled and not extracted.

### Footer Link

**Default**
- fontFamily: system-ui
- fontSize: 12px
- fontWeight: 400
- lineHeight: 18px
- colorDark: #82b6ff
- colorLight: #0000ee
- rounded: 0px
- boxShadow: none
- padding: 0px
- State guidance: Probe-confirmed via a.footer-text selector, color rgb(130,182,255) in dark mode.

### Page Heading

**Default**
- fontFamily: system-ui
- fontSize: 40px
- fontWeight: 600
- lineHeight: 50px
- colorDark: #f2f2f2
- colorLight: #313131
- rounded: 0px
- boxShadow: none
- padding: 0px
- State guidance: Probe-confirmed: h1 selector, color rgb(242,242,242) in dark mode.

### Ray ID Display

**Default**
- fontFamily: monospace
- fontSize: 12px
- fontWeight: 400
- lineHeight: 18px
- colorDark: #f2f2f2
- colorLight: #313131
- State guidance: CSSOM-confirmed monospace tuple at 12px.

### Section Heading

**Default**
- fontFamily: system-ui
- fontSize: 24px
- fontWeight: 600
- lineHeight: 30px
- colorDark: #f2f2f2
- colorLight: #313131
- rounded: 0px
- boxShadow: none
- padding: 0px
- State guidance: Probe-confirmed via #oqnd2 selector, fontSize 24px, color rgb(242,242,242).

## Do's and Don'ts

Guardrails protect Dual typeface system, Single-accent color discipline without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 350px | (max-width: 350px) |
| Breakpoint 2 | Unknown | (prefers-color-scheme: dark) |

## Agent Prompt Guide

### Example Component Prompts
- Create Body Text variant that preserves Standard paragraph text at 16px regular system-ui..
- Create Cloudflare Turnstile Widget variant that preserves Embedded third-party CAPTCHA widget with checkbox and Cloudflare branding. Rendered in an iframe..
- Create Footer Link variant that preserves Small hyperlink in the page footer at 12px system-ui..

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.