Screen Studio — restrained dark FAQ accordion

---
version: alpha
name: Screen Studio — restrained dark FAQ accordion
colors:
  surface: '#000000'
  ink: '#f5f5f7'
  muted: '#86868b'
  link: '#9d8bff'
typography:
  display:
    fontFamily: BlinkMacSystemFont
    fontSize: 48px
    fontWeight: 600
    lineHeight: 51.9984px
  interface:
    fontFamily: BlinkMacSystemFont
    fontSize: 19px
    fontWeight: 500
    lineHeight: 27.0009px
components:
  surface:
    backgroundColor: '{colors.surface}'
  link:
    backgroundColor: '{colors.link}'
  heading:
    typography: '{typography.display}'
    textColor: '{colors.ink}'
  interface-copy:
    typography: '{typography.interface}'
    textColor: '{colors.ink}'
  muted-copy:
    textColor: '{colors.muted}'
---

## Overview

An isolated black FAQ section with centered introduction, a violet contact link and eight compact closed question rows separated by fine rules.

Source: https://screen.studio/. Captured 2026-10-11T06:16:08.843704+00:00. This is an observational design reference, not an official brand specification.

## Colors

surface: #000000; ink: #f5f5f7; muted: #86868b; link: #9d8bff. Tokens describe observed interface surfaces and text, not every pixel in artwork. Translucent values retain source alpha; perceived colors vary with their backing surface.

## Typography

Primary sample: “Questions & answers.” uses BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif, 48px/51.9984px, weight 600, tracking normal. The corresponding mobile heading is 28px/32.0012px.

The interface token samples “Something else on your mind? 
Get in touch
.” at 19px/27.0009px, weight 500, using BlinkMacSystemFont, -apple-system, "SF Pro Display", "SF Pro", Inter, "Inter Fallback", sans-serif. These are measured local samples, not an inferred complete site-wide type scale.

## Layout

Center the heading and a short support sentence above a narrower question list. Set question text on the left and small plus marks on a consistent right edge. Use fine full-row separators instead of individual card backgrounds.

The native desktop screenshot is 1440 × 971px, prepared at a 1440px viewport. It contains only `#faq`. The measured element bounds are 1440.00 × 969.98px at desktop and 390.00 × 891.00px at 390px. Root padding is 144px 0px on desktop and 112px 0px on mobile.

At 390px the list uses about 24px side gutters and longer questions wrap to two lines. Heading text reduces from 48px to 28px; question labels reduce from 17px to 14px. Preserve the right-side plus column when copy wraps.

## Elevation & Depth

Almost entirely flat: black surface, bright labels, muted explanatory text and restrained rule contrast. The contact link provides the only violet accent.

## Shapes

Open rectangular rows and simple plus marks, with no surrounding card chrome or heavy outlines.

## Components

All eight questions are closed in the captured image. The DOM contains answer text, but expanded layouts, keyboard behavior and animation timing were not tested and are not claimed.

## Do's and Don'ts

Do retain generous click targets and visible disclosure affordances when adapting. Do not claim tested accessibility or invent expanded-answer styling from hidden DOM text. General accessibility recommendations are adaptation guidance, not claims of a completed keyboard or contrast audit.