Area17
Split Studio
Deep charcoal expanse, crisp sans-serif precision, and subtle electric teal highlights.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Segoe UI | 46px | 700 | 1.22 | -0.46px | Aa Bb Cc |
| body | Segoe UI | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Segoe UI | 13px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1600px
:root {
--color-dominant: #7dc40e;
--color-surface: #782424;
--color-ink: #7eb3d9;
--color-accent: #63759b;
--color-detail: #c7baa1;
}
/* CSS variables exposed by source */
:root {
--font-family-sans-serif: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
--font-family-monospace: Consolas,"Courier New",Courier,monospace;
--primary: #107c10;
--secondary: #000;
--light: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--yellow: #ffb900;
--pd-hero-text: #fff;
--tw-ring-shadow: 0 0 #0000;
--pd-hero-alert-text: #000;
--toast-close-button-start: 0;
--pink: #e83e8c;
--breakpoint-xs: 0;
--gray-dark: #2f2f2f;
--white: #fff;
--success: #107c10;
--red: #dc3545;
--breakpoint-xl: 1400px;
--indigo: #243a5e;
--tw-border-spacing-x: 0;
--tw-scale-y: 1;
--toast-close-button-transform: translate(-35%, -35%);
--tw-ring-color: rgba(59,130,246,.5);
--breakpoint-lg: 1084px;
--blue: #0067b8;
--tw-translate-y: 0;
--warning: #ffb900;
--info: #d2d2d2;
--tw-rotate: 0;
--orange: #d83b01;
--tw-ring-offset-color: #fff;
--video-fragment-btn-bg-hover: rgba(0,0,0,.8);
--green: #107c10;
--video-fragment-btn-bg: rgba(0,0,0,.6);
--uhf-font-family: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif;
--tw-skew-x: 0;
--video-fragment-btn-color: #fff;
--toast-button-margin-end: 0;
--reach-dialog: 1;
--teal: #008575;
--breakpoint-md: 860px;
--video-fragment-btn-outline: #fff;
--danger: #dc3545;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--gray: #505050;
--cyan: #30e5d0;
--dark: #000;
--tw-scroll-snap-strictness: proximity;
--toast-svg-margin-end: 0px;
--tw-scale-x: 1;
--tw-shadow-colored: 0 0 #0000;
--toast-icon-margin-end: 4px;
--tw-border-spacing-y: 0;
--purple: #8661c5;
--tw-skew-y: 0;
--breakpoint-sm: 540px;
--toast-icon-margin-start: -3px;
--pd-hero-checklist-icon: #107c10;
}Drop-in prompt
Build a landing page in the visual style of Xbox.
Reference design system (extracted from the live site):
- Palette: #7dc40e, #782424, #7eb3d9, #63759b, #c7baa1
- Typefaces: Segoe UI
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/xbox-com