<!-- Generated by ExtractVibe — https://extractvibe.com/brand/screenframed.com -->
<!-- Extracted: 2026-04-12T01:01:46.269Z | Schema: v1 | Quality: n/a/100 -->
---
version: alpha
name: "ScreenFramed — The Screenshot API That Actually Looks Good"
description: "ScreenFramed — The Screenshot API That Actually Looks Good presents a professional web presence."
colors:
  primary: "#7c3aed"
  tertiary: "#10b981"
  neutral: "#f3f0ff"
  surface: "#ffffff"
  on-surface: "#111111"
  border: "#e5e7eb"
  link: "#111111"
  primary-dark: "#5b21b6"
  surface-dark: "#111111"
typography:
  display-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "64px"
    fontWeight: "800"
    lineHeight: "70.4px"
    letterSpacing: "-1.6px"
  headline-lg:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "36px"
    fontWeight: "800"
    lineHeight: "40px"
    letterSpacing: "-0.9px"
  headline-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "18px"
    fontWeight: "700"
    lineHeight: "28px"
  body-md:
    fontFamily: "Plus Jakarta Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "14px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    rounded: "3.35544e+07px"
    padding: "14px 32px"
    fontSize: "16px"
    fontWeight: "600"
    borderWidth: "2px"
  button-outline:
    textColor: "#111111"
    rounded: "14px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "2px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px"
---

# ScreenFramed — The Screenshot API That Actually Looks Good — Design System

## Overview

ScreenFramed establishes a professional web presence. The design system prioritizes clarity, functionality, and a polished aesthetic, reflecting the brand's core promise: a high-quality, reliable screenshot API. This is not a playful or experimental brand; its visual language is direct and purposeful, designed to instill confidence and signify technical competence. The aesthetic avoids unnecessary ornamentation or trendy design elements that could quickly date the interface. Instead, it opts for timeless principles of good design: strong hierarchy, ample whitespace, and a clean visual flow.

The design unequivocally communicates a serious, high-performance tool. There is no ambiguity in its presentation; it is built for developers who demand precision and reliability. The visual identity is engineered to be unobtrusive, allowing the product's functionality to take center stage while consistently reinforcing a sense of professionalism and trustworthiness. This design system ensures that every interaction with ScreenFramed reinforces its position as a superior, dependable API solution.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The color palette centers on a primary violet (#7c3aed) that conveys innovation and sophistication without being overly aggressive. This vibrant hue is balanced by a soft, almost white surface color (#faf7ff), creating a clean, high-contrast environment. This combination ensures readability and a modern feel, signaling a brand that is both forward-thinking and user-friendly. The limited palette maintains visual discipline, reinforcing the professional and focused nature of ScreenFramed.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#7c3aed` | Blue Violet |
| accent / tertiary | `#10b981` | Medium Sea Green |
| surface | `#ffffff` | White |
| background | `#faf7ff` | Ghost White |
| text | `#111111` | Near-Black |
| border | `#e5e7eb` | Lavender |
| link | `#111111` | Near-Black |
| muted | `#f3f0ff` | Alice Blue |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#5b21b6` | Rebecca Purple |
| background | `#111111` | Near-Black |

## Typography

Plus Jakarta Sans serves as the primary typeface for its modern, geometric clarity and excellent readability across various scales. Its clean lines reinforce the professional and efficient brand identity. For code and technical elements, ui-monospace is employed, ensuring precise character alignment and legibility crucial for a developer-centric product. The typographic hierarchy is direct and functional, prioritizing information access and ease of comprehension, aligning with the brand's commitment to straightforward utility.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Plus Jakarta Sans | body | self-hosted | 400, 500, 600 |
| Plus Jakarta Sans | heading | self-hosted | 700, 800 |
| ui-monospace | mono | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Plus Jakarta Sans | 64px | 800 | 70.4px | -1.6px |
| Heading 2 | Plus Jakarta Sans | 36px | 800 | 40px | -0.9px |
| Heading 3 | Plus Jakarta Sans | 18px | 700 | 28px | — |
| Body | Plus Jakarta Sans | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — ui-monospace

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.627 0.147802 -0.219953 / 0.25) 0px 10px 15px -3px, oklab(0.627 0.147802 -0.219953 / 0.25) 0px 4px 6px -4px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px` |

### Gradients

- `linear-gradient(160deg, rgb(255, 255, 255) 0%, rgb(243, 240, 255) 40%, rgb(237, 229, 255) 100%)`
- `linear-gradient(160deg, rgb(250, 247, 255) 0%, rgb(243, 240, 255) 100%)`

## Shapes

Border-radius scale:

- `md` — 14px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Radius — `3.35544e+07px`
- Padding — `14px 32px`
- Font size — `16px`
- Font weight — `600`
- Sample copy — "Try the Playground"

**Outline**

- Text — `#111111`
- Radius — `14px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | svg | [link](brands/screenframed.com/logo-0.svg) | 95% |
| primary | — | svg | [link](brands/screenframed.com/logo-1.svg) | 85% |
| primary | — | svg | [link](brands/screenframed.com/logo-svg-2.svg) | 90% |
| primary | — | svg | [link](brands/screenframed.com/logo-svg-3.svg) | 90% |

## Sources

- Official brand guidelines — https://screenframed.com/brand
- Live brand page — https://extractvibe.com/brand/screenframed.com
- Raw JSON — https://extractvibe.com/api/brand/screenframed.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/screenframed.com/design.md
- Extracted — 2026-04-12T01:01:46.269Z
- Generator — ExtractVibe vv1