/* ========================================================================== Biscuit Studios brand tokens -------------------------------------------------------------------------- The machine-readable half of `brand.md` in this folder. Same values, same source. If the two ever disagree, `brand.md` is the one to fix first, then this file, in the same pass. Source: `Guidelines/biscuit-brand-guidelines-v1.pdf`, plus the role assignments given by Jason and Lucy on September 15, 2026. Paste it into a theme, import it, or drop it in the head of a mockup. Plain CSS, no build step, no preprocessor. ========================================================================== */ :root { /* --- Palette, exactly as the guidelines name it ------------------------- MAIN */ --biscuit-near-black: #2A2A2A; --biscuit-orange: #DF5730; --biscuit-off-white: #FCF9F5; --biscuit-white: #FFFFFF; /* ACCENTS */ --biscuit-gray: #4B4B4B; --biscuit-orange-deep: #AB3F25; --biscuit-cream: #F6F1E9; /* --- Roles. Use these in a layout, not the palette names above ---------- Given by Jason and Lucy, September 15, 2026. */ --biscuit-heading: var(--biscuit-near-black); /* h1 to h4 */ --biscuit-body: var(--biscuit-gray); /* paragraphs */ --biscuit-muted: #6A6A6A; /* captions, meta */ --biscuit-page: var(--biscuit-white); /* default ground */ --biscuit-page-alt: var(--biscuit-off-white); /* second ground */ --biscuit-panel: var(--biscuit-cream); /* cards, panels */ --biscuit-accent: var(--biscuit-orange); /* display, fills */ --biscuit-link: var(--biscuit-orange-deep); --biscuit-link-hover: var(--biscuit-orange); --biscuit-ground-dark: #1A1A1A; /* hero, dark bands */ /* Approved by Lucy, relayed by Jason, October 9, 2026. Not on the guidelines sheet, like the muted gray. On it the brand orange passes AA (4.59:1) and the deep orange fails (2.88:1). See brand.md. */ --biscuit-rule: rgba(42, 42, 42, .14); /* borders, grid */ --biscuit-rule-soft: rgba(42, 42, 42, .07); /* A filled orange button sits on the DEEP orange and brightens on hover. White on #DF5730 is 3.79:1 and fails AA at any normal label size. White on #AB3F25 is 6.05:1. */ --biscuit-button: var(--biscuit-orange-deep); --biscuit-button-hover: var(--biscuit-orange); --biscuit-button-label: var(--biscuit-white); /* --- Type --------------------------------------------------------------- Neue Haas Grotesk is licensed through Adobe Fonts and loaded with the Adobe web embed. Self-hosting the files is not permitted. Inter is the fallback wherever Neue Haas cannot load. It is a Google Font, so it works in Claude artifacts and Design canvases, where Adobe's CDN is blocked. */ --biscuit-font-display: "Neue Haas Grotesk Display Pro", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; --biscuit-font-text: "Neue Haas Grotesk Text Pro", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; --biscuit-weight-heading: 500; /* Display Medium 65, h1 to h4 */ --biscuit-weight-quote: 400; /* Display Roman 55, pull quotes */ --biscuit-weight-body: 400; /* Text Roman 55 */ --biscuit-weight-strong: 500; /* Text Medium 65, bold inside body copy */ /* Labels, eyebrows and attributions: Text Roman, uppercase, letterspaced. */ --biscuit-label-tracking: .08em; /* --- Logo --------------------------------------------------------------- Lockup artwork is 1792 x 240, a 7.467:1 ratio, on a 1796 x 244 canvas. The circular mark is the full height of the lockup, so mark diameter == lockup height. Gap from mark to wordmark is 0.292 of that diameter. Every PNG carries a 1 to 2px transparent bleed; nothing touches an edge. */ --biscuit-logo-ratio: 7.467; --biscuit-logo-gap: .292; /* multiple of mark diameter */ --biscuit-logo-min-web: 180px; /* full lockup */ --biscuit-logo-min-print: 1.5in; /* full lockup */ --biscuit-mark-min-web: 24px; --biscuit-mark-min-print: .25in; /* Clear space on all four sides is half the mark diameter, which is half the lockup height. At 180px wide the lockup is 24.1px tall, so clear space is about 12px. */ --biscuit-logo-clearspace: .5; /* multiplier on lockup height */ /* --- Grid pattern ------------------------------------------------------- Measured from `Graphics/biscuit-pattern-line.svg`. */ --biscuit-grid-size: 24.41px; --biscuit-grid-line: .25px; --biscuit-grid-cross: 3.63px; } /* -------------------------------------------------------------------------- Dark ground. Biscuit has exactly one dark, #2A2A2A, and a dark design needs several. These are derived from colors that already exist rather than invented: the off-white at low alpha lifts a surface, black at low alpha deepens one. Shading operations, not new brand colors, so they need no ruling. Apply with your own switch. This file does not assume prefers-color-scheme, because a page may offer an explicit toggle instead. -------------------------------------------------------------------------- */ .biscuit-dark { --biscuit-page: var(--biscuit-near-black); /* #2A2A2A */ --biscuit-page-alt: rgba(0, 0, 0, .4); /* deeper band */ --biscuit-panel: rgba(252, 249, 245, .055); /* lifted card */ --biscuit-heading: var(--biscuit-off-white); /* 13.68:1 */ --biscuit-body: var(--biscuit-off-white); --biscuit-muted: rgba(252, 249, 245, .6); /* 5.92:1 */ --biscuit-rule: rgba(252, 249, 245, .16); --biscuit-rule-soft: rgba(252, 249, 245, .08); /* The orange is 3.79:1 on #2A2A2A. Display type, fills, icons and dots only, never a body-size label. There is no lighter brand orange, so on a dark ground small emphasis is carried by the off-white, not by color. */ --biscuit-link: var(--biscuit-off-white); --biscuit-link-hover: var(--biscuit-orange); } /* -------------------------------------------------------------------------- The grid pattern, as a tintable background. Uses mask rather than background-image so one rule serves every ground: the mask carries the grid shape, background-color carries the color. Set --biscuit-grid-color to tint it. Default is the rule color. -------------------------------------------------------------------------- */ .biscuit-grid { --biscuit-grid-color: var(--biscuit-rule); background-color: var(--biscuit-grid-color); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.41' height='24.41' viewBox='0 0 24.41 24.41'%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10'%3E%3Cpath stroke-width='.25' d='M12.205 0v24.41M0 12.205h24.41'/%3E%3Cpath stroke-width='.5' d='M10.39 12.205h3.63M12.205 10.39v3.63'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.41' height='24.41' viewBox='0 0 24.41 24.41'%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10'%3E%3Cpath stroke-width='.25' d='M12.205 0v24.41M0 12.205h24.41'/%3E%3Cpath stroke-width='.5' d='M10.39 12.205h3.63M12.205 10.39v3.63'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: var(--biscuit-grid-size) var(--biscuit-grid-size); mask-size: var(--biscuit-grid-size) var(--biscuit-grid-size); } /* On the orange ground the grid reads as a lighter orange, not a darker one. */ .biscuit-grid--on-orange { --biscuit-grid-color: rgba(255, 255, 255, .22); } .biscuit-grid--on-cream { --biscuit-grid-color: rgba(42, 42, 42, .14); } /* -------------------------------------------------------------------------- Accessibility, measured not asserted. WCAG 2.1, September 15, 2026. PASSES AA for body text on white, off-white and cream: #2A2A2A 14.35 / 13.68 / 12.77 #4B4B4B 8.72 / 8.31 / 7.76 #6A6A6A 5.41 / 5.15 / 4.81 #AB3F25 6.05 / 5.77 / 5.38 FAILS AA for body text on every Biscuit ground: #DF5730 3.79 / 3.61 / 3.37, and 3.79 on #2A2A2A So #DF5730 is display type, headings, buttons, rules, icons and fills. It is never paragraph text and never a body-size link. That is why links are #AB3F25 and only the hover state brightens to #DF5730. "Large text" is 24px, or 18.66px when bold. -------------------------------------------------------------------------- */