--- version: alpha name: Screen Studio description: Dark design system extracted from screen.studio (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12). colors: background: "#111112" on-surface: "#F5F5F7" on-surface-variant: "#86868B" surface: "#1D1D1F" primary: "#4D2FF5" color-6: "#000000" color-7: "#F5F5F7E0" color-8: "#9D8BFF" color-9: "#333336D1" color-10: "#FFFFFFE6" color-11: "#FFFFFF0D" color-12: "#00000090" color-13: "#00000069" color-14: "#00000045" color-15: "#00000028" color-16: "#00000012" on-primary: "#F5F5F7" typography: display-lg: fontFamily: SF Pro (system-ui) fontSize: 72px fontWeight: 600 lineHeight: 1.056 headline-md: fontFamily: SF Pro (system-ui) fontSize: 56px fontWeight: 600 lineHeight: 1.071 title-md: fontFamily: SF Pro (system-ui) fontSize: 17px fontWeight: 600 lineHeight: 1.235 body-md: fontFamily: SF Pro (system-ui) fontSize: 17px fontWeight: 400 lineHeight: 1.471 body-sm: fontFamily: SF Pro (system-ui) fontSize: 14px fontWeight: 400 lineHeight: 1.429 rounded: xs: 9.5px sm: 22.5px md: 32px lg: 45px full: 9999px spacing: xxs: 4px xs: 6px sm: 8px md: 10px lg: 12px xl: 14px 2xl: 16px 3xl: 18px 4xl: 20px 5xl: 22px 6xl: 24px 7xl: 32px 8xl: 40px 9xl: 48px container: 1260px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-surface}" rounded: 9.6px padding: 0px height: 32px card: backgroundColor: "{colors.background}" rounded: "{rounded.md}" padding: 0px --- # Screen Studio > Extracted from [https://screen.studio/](https://screen.studio/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy. ## Overview Screen Studio uses a dark canvas (#111112) with a palette led by #4D2FF5. Type is set in **SF Pro (system-ui)** (display + body), with 17px body text. Layout: 1260px container, top-fixed+transparent navigation, 22 sections. Built with next.js, vercel. ## Colors Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter. | Token | Hex | OKLCH | Role | Share of paint | CSS variable | |---|---|---|---|---|---| | `background` | `#111112` | 0.178 0.002 286.2 | bg | 41.9% | — | | `on-surface` | `#F5F5F7` | 0.971 0.003 286.4 | text | 4.8% | — | | `on-surface-variant` | `#86868B` | 0.622 0.007 286.2 | muted | 3.2% | — | | `surface` | `#1D1D1F` | 0.232 0.004 286.1 | surface | 1.7% | — | | `primary` | `#4D2FF5` | 0.497 0.269 277.1 | accent | 0.12% | — | | `color-6` | `#000000` | 0 0 0 | other | 41.7% | — | | `color-7` | `#F5F5F7E0` (on bg `#DADADC`) | 0.971 0.003 286.4 | other | 1.6% | — | | `color-8` | `#9D8BFF` | 0.703 0.166 288.5 | other | 0.40% | — | | `color-9` | `#333336D1` (on bg `#2D2D30`) | 0.322 0.005 286.1 | other | 0.36% | — | | `color-10` | `#FFFFFFE6` (on bg `#E7E7E7`) | 1 0 0 | other | 0.31% | — | | `color-11` | `#FFFFFF0D` (on bg `#1D1D1E`) | 1 0 0 | other | 0.31% | — | | `color-12` | `#00000090` (on bg `#070708`) | 0 0 0 | other | 0.36% | — | | `color-13` | `#00000069` (on bg `#0A0A0B`) | 0 0 0 | other | 0.51% | — | | `color-14` | `#00000045` (on bg `#0C0C0D`) | 0 0 0 | other | 0.51% | — | | `color-15` | `#00000028` (on bg `#0E0E0F`) | 0 0 0 | other | 0.58% | — | | `color-16` | `#00000012` (on bg `#101011`) | 0 0 0 | other | 0.43% | — | Contrast: text on background 17.33:1, muted text 5.21:1, accent 2.73:1. Gradients in use: `linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.733) 6.67%, rgba(0, 0, 0, 0.65) 13.33%, rgba(0, 0, 0, 0.565) 20%, rgba(0, 0,`; `linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.004), rgba(0, 0, 0, 0.016), rgba(0, 0, 0, 0.035), rgba(0, 0, 0, 0.063), rgba(0, 0, 0`. The site does not change under `prefers-color-scheme: dark`. ## Typography | Family | Role | Weights | Share of text | Source | |---|---|---|---|---| | **SF Pro (system-ui)** (CSS: `system-ui`) | display, body | 400, 500, 600 | 99.8% | system (stack `"system-ui", -apple-system, "SF Pro Display", "SF Pro", Inte`, resolved on macos) | Declared in `@font-face` but not used to paint text on this page: Inter, Manrope, Inconsolata. Don't treat these as the page's fonts. Scale (px): 12, 14, 17, 19, 21, 28, 48, 56, 56.5, 72. Effective ratio ≈ 1.229 (close to a major third). Body 17px at line-height 1.471; display 72px with tracking 0em. Headings are sentence case. On a 390px viewport the body is 17px and display 40px. ## Layout Spacing has no reliable single base unit; the most used steps are 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 32, 40, 48px. Sections open with about 144px of space before their first line of text. Content sits in a 1260px container on a 2-column grid. Text density 0.089 (text area / page area). Section order (desktop). Kinds below the review threshold are shown as *section*: 1. **hero** — “Beautiful screen recordings, in minutes.” (2501px, bg #000000) 2. **nav** (52px, bg #000000) 3. **section** — “Made with Screen Studio.” (661px, bg #111112) 4. **section** — “Nothing stays too small to read.” (1618px, bg #000000) 5. **section** — “Your camera, your screen, or both.” (1288px, bg #000000) 6. **section** — “Movement that feels filmed, not captured.” (1184px, bg #000000) 7. **section** — “Record once. Post everywhere.” (1538px, bg #111112) 8. **section** — “Ready when you are.” (1069px, bg #111112) 9. **testimonials** — “Edit with your transcript.” (995px, bg #000000) 10. **section** — “Voice that sounds like you meant it.” (1359px, bg #000000) 11. **section** — “Captions that keep up with the story.” (1019px, bg #111112) 12. **section** — “Make it look like it belongs to you.” (946px, bg #111112) 13. **testimonials** — “iPhone and iPad, framed for you.” (1178px, bg #000000) 14. **section** — “From stop to shared in seconds.” (1386px, bg #111112) 15. **section** — “Hide what’s private.” (961px, bg #111112) 16. **section** — “Offline first.” (1249px, bg #000000) 17. **section** — “Import any video” (1014px, bg #111112) 18. **section** — “Designed to feel at home on a Mac.” (666px, bg #111112) 19. **testimonials** — “In their words.” (2017px, bg #000000) 20. **section** — “Everything included.” (1095px, bg #111112) 21. **faq** — “Questions & answers.” (970px, bg #000000) 22. **footer** — “Create videos” (469px, bg #111112) ## Elevation & Depth Style: elevated. Most used shadows: - `rgba(0, 0, 0, 0.45) 0px 30px 90px 0px` - `rgba(77, 47, 245, 0.22) 0px 10px 30px 0px` - `rgba(0, 0, 0, 0.5) 0px 30px 80px 0px` ## Shapes Dominant corner radius 32px; radii in use: 9.5px, 22.5px, 32px, 45px, pill. Borders: hairline (1px). ## Components - **button-primary**: backgroundColor `#4D2FF5`, textColor `#F5F5F7`, rounded `9.6px`, padding `0px 0px`, height `32px`, fontFamily `system-ui`, fontSize `16px`, fontWeight `400` - **card**: rounded `32px`, padding `0px`, backgroundColor `#111112` ## Do's and Don'ts - Do reserve `#4D2FF5` for primary actions and highlights; it covers only 0.12% of the painted page. - Do set body copy in SF Pro (system-ui) at 17px / 1.471. - Don't introduce font weights beyond 400, 500, 600. - Do keep corners at 32px for most controls, and use the larger radii only for cards and media. - Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets. ## Provenance Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.base`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.