{"section":{"id":"actions","title":"Actions And Glass","anchor":"#actions","intent":"Define the pill action recipes, the glass finish, and the closing CTA container — aligned to www.ezoic.com.","copy":["Translucent cloud or green over the page, a 12px backdrop blur, a 1px white top highlight, and one soft ink shadow. Glass marks what you can act on and how a page closes — pill actions, the closing CTA container, quote and stat panels, floating bars. It is a finish, not a texture: it never carries imagery, never stacks, never sits over the mark, and never replaces the Pixel Wash.","999px pill. 48px tall with 32px side padding (standard); 36px tall with 16px padding (compact, nav).","Inter Text 14px, −2% letter spacing. Bold 700 on green and ink pills, Medium 500 on glass and text actions. Title Case, authored; never all caps; no closing period.","One primary — Action Green, or the ink pill when green is already spent — plus at most one secondary glass pill per composition.","Cloud labels measure 2.2:1 on Action Green and 1.7:1 on the 70% green glass (below WCAG AA, matching www.ezoic.com). Where AA is required, use the ink pill — cloud on ink measures 11.7:1."],"actionsRef":"canonicalStyleGuide.actions","glassRef":"canonicalStyleGuide.glassFinish","related":{"actions":{"shape":"999px pill. 48px tall with 32px side padding (standard); 36px tall with 16px padding (compact, nav).","label":"Inter Text 14px, −2% letter spacing. Bold 700 on green and ink pills, Medium 500 on glass and text actions. Title Case, authored; never all caps; no closing period.","budget":"One primary — Action Green, or the ink pill when green is already spent — plus at most one secondary glass pill per composition.","contrast":"Cloud labels measure 2.2:1 on Action Green and 1.7:1 on the 70% green glass (below WCAG AA, matching www.ezoic.com). Where AA is required, use the ink pill — cloud on ink measures 11.7:1.","componentSource":"components/ui/button.tsx (variants: default, glass, ink, secondary, text, link)","variants":[{"name":"Primary","variant":"default","use":"The one primary action on light surfaces and in navigation.","tailwind":"rounded-full border border-white/30 bg-green-action text-cloud text-sm font-bold tracking-[-0.02em] h-12 px-8 shadow-glass backdrop-blur-md hover:bg-green-action/90 hover:border-white/50","css":"background: #79A65A; color: #E3E3E3; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; height: 48px; padding: 0 32px; font: 700 14px/20px Inter; letter-spacing: -0.02em; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);","hover":"background: rgb(121 166 90 / 0.9); border-color: rgb(255 255 255 / 0.5);"},{"name":"Primary glass","variant":"glass","use":"The primary inside a glass container — the closing CTA.","tailwind":"rounded-full border border-white/30 bg-green-action/70 text-cloud text-sm font-bold tracking-[-0.02em] h-12 px-8 shadow-glass backdrop-blur-md hover:bg-green-action hover:border-white/50","css":"background: rgb(121 166 90 / 0.7); color: #E3E3E3; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; height: 48px; padding: 0 32px; font: 700 14px/20px Inter; letter-spacing: -0.02em; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);","hover":"background: #79A65A; border-color: rgb(255 255 255 / 0.5);"},{"name":"Ink","variant":"ink","use":"Primary weight when green is already spent (hero beside a green nav CTA), and the accessible primary.","tailwind":"rounded-full border border-white/30 bg-ink text-cloud text-sm font-bold tracking-[-0.02em] h-12 px-8 shadow-glass backdrop-blur-md hover:bg-ink/90 hover:border-white/50","css":"background: #252726; color: #E3E3E3; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 999px; height: 48px; padding: 0 32px; font: 700 14px/20px Inter; letter-spacing: -0.02em; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);","hover":"background: rgb(37 39 38 / 0.9); border-color: rgb(255 255 255 / 0.5);"},{"name":"Secondary glass","variant":"secondary","use":"The one secondary action beside a primary. Over photography or a wash, use cloud 25% with an ink/25 border (hover 60% / ink/40).","tailwind":"rounded-full border border-ink/15 bg-cloud/40 text-ink text-sm font-medium tracking-[-0.02em] h-12 px-8 shadow-glass backdrop-blur-md hover:bg-cloud/75 hover:border-ink/30","css":"background: rgb(227 227 227 / 0.4); color: #252726; border: 1px solid rgb(37 39 38 / 0.15); border-radius: 999px; height: 48px; padding: 0 32px; font: 500 14px/20px Inter; letter-spacing: -0.02em; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);","hover":"background: rgb(227 227 227 / 0.75); border-color: rgb(37 39 38 / 0.3);"},{"name":"Text","variant":"text","use":"Low-stakes navigation actions (log in, view all) — no chrome.","tailwind":"rounded-full text-ink text-sm font-medium tracking-[-0.02em] h-9 px-4 hover:opacity-70","css":"background: none; border: 0; color: #252726; font: 500 14px/20px Inter; letter-spacing: -0.02em;","hover":"opacity: 0.7;"}]},"glassFinish":{"title":"Glass — the one surface finish.","rule":"Translucent cloud or green over the page, a 12px backdrop blur, a 1px white top highlight, and one soft ink shadow. Glass marks what you can act on and how a page closes — pill actions, the closing CTA container, quote and stat panels, floating bars. It is a finish, not a texture: it never carries imagery, never stacks, never sits over the mark, and never replaces the Pixel Wash.","source":"Audited from https://www.ezoic.com on 2026-10-07 (shadow-glass, backdrop-blur-md, rounded-4xl containers, rounded-full pills).","tokens":{"shadow":"inset 0 1px 0 rgb(255 255 255 / 0.45), 0 8px 30px -8px rgb(37 39 38 / 0.25)","blur":"12px","containerRadius":"32px","pillRadius":"999px"},"surfaces":[{"name":"Closing CTA container","use":"The last composition before the footer. Centered Display headline (Title Case, closed with a period), one graphite line, a green-glass primary and a secondary glass pill.","tailwind":"rounded-4xl border border-hairline/60 bg-cloud/50 px-8 pt-20 pb-40 text-center shadow-glass backdrop-blur-md","css":"background: rgb(227 227 227 / 0.5); border: 1px solid rgb(37 39 38 / 0.08); border-radius: 32px; padding: 80px 32px 160px; text-align: center; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);"},{"name":"Quote or stat panel","use":"One testimonial (32px radius) or one stat strip (16px radius) that needs to lift off the page.","tailwind":"rounded-4xl border border-hairline/60 bg-cloud/50 shadow-glass backdrop-blur-md","css":"background: rgb(227 227 227 / 0.5); border: 1px solid rgb(37 39 38 / 0.08); border-radius: 32px; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);"},{"name":"Floating bar","use":"A persistent input or action bar pinned over content.","tailwind":"rounded-full border border-hairline/60 bg-cloud/70 shadow-glass backdrop-blur-md","css":"background: rgb(227 227 227 / 0.7); border: 1px solid rgb(37 39 38 / 0.08); border-radius: 999px; backdrop-filter: blur(12px); box-shadow: var(--glass-shadow);"}],"rules":["Glass lives only on actions and on closing, quote, stat, and floating containers — never on ordinary cards or every panel.","One layer: never nest glass in glass beyond the pills inside a glass container.","shadow-glass is the only shadow in the system; never deepen, color, or stack it.","No glass in email — mail clients drop backdrop-filter and box-shadow; use the solid Action Green pill."]},"uiComponents":{"rules":["Actions are glass pills — see actions for exact recipes. Primary: Action Green fill (#79A65A), cloud label, Bold 700, −2%, 1px white/30 border, shadow-glass, 12px backdrop blur; hover fill 90% and border white/50. One per composition.","Primary glass: Action Green at 70% — the primary inside a glass container (the closing CTA); hover to solid.","Ink pill: #252726 fill, cloud label, Bold 700, same finish — primary weight when green is already spent, and the accessible primary (11.7:1).","Secondary glass: cloud 40% fill, ink label Medium 500, 1px ink/15 border, shadow-glass; hover cloud 75% and border ink/30. At most one per composition.","Text action: ink label, Medium 500, no chrome; hover opacity 70%.","Secondary action on ink: rounded ghost outline (white at 12% alpha) with cloud text.","Text link: ink text with an ink underline; hover recolors the underline to Action Green.","Closing CTA container: glass — cloud 50%, hairline at 60%, 32px radius, 12px blur, shadow-glass; centered Display headline, one graphite line, green glass + secondary glass pills; 80px top / 160px bottom padding on desktop.","Tag: small hairline pill, sentence case, graphite text — the guide's own 'experimental · v0.1' tag is the model.","Panel: white raised panel, 16px radius, hairline border. Bands take 24px radius; glass containers 32px.","Ruled rows: hairline-divided rows (no boxes) — label left in small graphite/steel, content right.","Proof slot: an Action Green signature moment at display size whose value area stays empty until a cited value exists.","Input field: white panel field with hairline border and graphite value text.","Section header: standalone display heading, Title Case, closed with a period.","Data visualization: Action Green is the single highlighted series; charcoal, graphite, and steel carry structure and labels. Never multiple saturated colors."],"limits":"Do not invent a full component library beyond what the current source proves. Missing states stay outside the current component scope unless implemented in source."},"motion":{"principle":"Quiet entrance motion: opacity plus a slight vertical rise. Hover motion stays minimal — color change, line extension, arrow reveal, button state.","easing":"cubic-bezier(0.22, 0.61, 0.36, 1)","sourceDurations":["0.6s","0.7s","0.8s"],"buttonStates":"Color-only transitions at 150ms — fills and borders change; nothing moves or scales.","rule":"Motion supports comprehension; it is not a brand motif by itself. Nothing bounces, nothing spins."}}}}