https://cssstudio.ai/assets/BrandLab-DA4Hp57a.js

1import{w as i,p as e}from"./chunk-6CSD65Y2-B9EdUb7a.js";const n=[{name:"Ocean",hex:"#4E7BA5",end:"#235A84",ink:"#F9F5FF"},{name:"Petal",hex:"#FF8FD3",end:"#F8253F",ink:"#111314"},{name:"Ember",hex:"#FEA061",end:"#F24E16",ink:"#111314"},{name:"Paper",hex:"#F9F5FF",end:"#F9F5FF",ink:"#111314"}],l=[{name:"Ink",hex:"#111314",ink:"#F9F5FF"},{name:"Slate",hex:"#252A35",ink:"#F9F5FF"},{name:"Mist",hex:"#AAA5B3",ink:"#111314"}],d="/assets/BrandLab-BiRYVSpO.css",r=()=>[{rel:"stylesheet",href:d}],h=()=>[{title:"CSS Studio · Brand lab"},{name:"robots",content:"noindex, nofollow"}],x=i(function(){return e.jsx("main",{className:"studio-lab",children:e.jsxs("div",{className:"studio-lab-container",children:[e.jsxs("header",{className:"studio-lab-header",children:[e.jsxs("h1",{children:["CSS Studio ",e.jsx("span",{children:"Brand lab"})]}),e.jsxs("nav",{"aria-label":"Brand lab sections",children:[e.jsx("a",{href:"#palette",children:"Palette"}),e.jsx("a",{href:"#grid",children:"Grid"})]})]}),e.jsxs("section",{className:"studio-lab-section",id:"palette","aria-labelledby":"palette-title",children:[e.jsxs("div",{className:"studio-lab-section-heading",children:[e.jsx("h2",{id:"palette-title",children:"Palette"}),e.jsx("p",{children:"Ocean blue, petal pink and ember orange. Three colour ranges with a soft white."})]}),e.jsx("div",{className:"studio-lab-palette",children:n.map(s=>e.jsxs("article",{className:"studio-lab-swatch",style:{"--swatch":`linear-gradient(180deg, ${s.hex}, ${s.end})`,"--swatch-ink":s.ink},children:[e.jsx("h3",{children:s.name}),e.jsxs("code",{children:[s.hex,s.end!==s.hex&&e.jsxs(e.Fragment,{children:[e.jsx("br",{}),s.end]})]})]},s.name))}),e.jsx("div",{className:"studio-lab-neutrals","aria-label":"Neutral colours",children:l.map(s=>e.jsxs("div",{className:"studio-lab-neutral",children:[e.jsx("span",{className:"studio-lab-neutral-chip",style:{background:s.hex},"aria-hidden":"true"}),e.jsx("span",{children:s.name}),e.jsx("code",{children:s.hex})]},s.name))})]}),e.jsxs("section",{className:"studio-lab-section",id:"grid","aria-labelledby":"grid-title",children:[e.jsxs("div",{className:"studio-lab-section-heading",children:[e.jsx("h2",{id:"grid-title",children:"Grid"}),e.jsx("p",{children:"Twelve columns, one shared edge. Text and media change width by spanning the same tracks."})]}),e.jsxs("div",{className:"studio-lab-grid-specimen","aria-label":"Twelve-column layout specimen",children:[e.jsx("div",{className:"studio-lab-columns","aria-hidden":"true",children:Array.from({length:12},(s,a)=>e.jsx("span",{children:String(a+1).padStart(2,"0")},a))}),e.jsxs("div",{className:"studio-lab-placements",children:[e.jsxs("div",{className:"studio-lab-placement studio-lab-placement--rail",children:[e.jsx("span",{children:"Index rail"}),e.jsx("code",{children:"01–03"})]}),e.jsxs("div",{className:"studio-lab-placement studio-lab-placement--copy",children:[e.jsx("span",{children:"Primary copy"}),e.jsx("code",{children:"04–09"})]}),e.jsxs("div",{className:"studio-lab-placement studio-lab-placement--full",children:[e.jsx("span",{children:"Full-width specimen"}),e.jsx("code",{children:"01–12"})]}),e.jsxs("div",{className:"studio-lab-placement studio-lab-placement--media",children:[e.jsx("span",{children:"Feature media"}),e.jsx("code",{children:"03–12"})]})]})]}),e.jsxs("dl",{className:"studio-lab-grid-rules",children:[e.jsxs("div",{children:[e.jsx("dt",{children:"Container"}),e.jsx("dd",{children:"1440px maximum"})]}),e.jsxs("div",{children:[e.jsx("dt",{children:"Columns"}),e.jsx("dd",{children:"12 equal tracks"})]}),e.jsxs("div",{children:[e.jsx("dt",{children:"Gap"}),e.jsx("dd",{children:"16–32px, fluid"})]}),e.jsxs("div",{children:[e.jsx("dt",{children:"Gutter"}),e.jsxs("dd",{children:["20–76px, fluid",e.jsx("br",{}),"18px below 760px"]})]})]}),e.jsx("p",{className:"studio-lab-mobile-note",children:"On small screens, each placement spans the full width."})]})]})})});export{x as default,r as links,h as meta};