// Direction 05 — BRAND × BENTO // 00 brand palette/type/logo + 01 Instrument Serif italic accents + 02 pastel bento sticker grid. const BB = { cream: "#FFF1E4", yellow: "#FFD76B", orange: "#FF8432", plum: "#270233", plumSoft: "#3D1450", // tinted brand pastels (warm + on-palette) peach: "#FFD9B8", butter: "#FFE9A8", apricot: "#FFC79A", blush: "#FBD2C5", sand: "#F5E2C8", inkSoft: "rgba(39,2,51,0.7)", inkMuted: "rgba(39,2,51,0.5)", border: "rgba(39,2,51,0.12)", font: "'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif", serif: "'Instrument Serif', 'Times New Roman', serif", mono: "'DM Mono', 'Geist Mono', ui-monospace, monospace", }; const BBSms = ({ children, style, variant = "accent" }) => { const variants = { primary: { background: BB.plum, color: BB.cream }, accent: { background: `linear-gradient(135deg, ${BB.yellow}, ${BB.orange})`, color: BB.plum }, cream: { background: BB.cream, color: BB.plum }, }; return ( e.currentTarget.style.transform = "translateY(-2px)"} onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}> {children} ); }; const BBWordLight = ({ height = 32 }) => Magica; const BBWordDark = ({ height = 32 }) => Magica; const BBIcon = ({ size = 48 }) => ; const BBEm = ({ children, color }) => ( {children} ); const BBLabel = ({ children }) => (
— {children}
); const bbH2 = { fontFamily: BB.font, fontWeight: 700, fontSize: 60, lineHeight: 1, letterSpacing: -2, color: BB.plum, margin: 0, maxWidth: 900, }; // ---------- NAV ---------- const BBNav = () => (
); // ---------- HERO (soft brand glow, no blocks) ---------- const BBHero = () => (
available on imessage

your personal
assistant,
one text away.

text what you need. magica handles the calls, the hold music, the phone trees, and texts you back when it's done.

text magica → or text +1 (617) 865-9772
calling cvs porter sq...
✓ added to calendar
); // ---------- HOW IT WORKS — soft brand cards w/ italic numerals ---------- const BBHow = () => (
how it works

three steps, that's it.

{[ { n: "01", c: BB.peach, t: "text magica", b: "say it like you'd tell a friend. no commands, no syntax, no thinking about it." }, { n: "02", c: BB.butter, t: "magica gets to work", b: "calls who needs calling. waits on hold. navigates phone trees. takes notes." }, { n: "03", c: BB.apricot, t: "you get your time back", b: "you get a text when it's done — usually with a confirmation, sometimes a question." }, ].map((s, i) => (
{s.n}
{s.t}
{s.b}
))}
); // ---------- CAPABILITIES — BENTO STICKER GRID (Pocket-style, brand pastels) ---------- const BBCaps = () => (
capabilities

what magica can do.

{/* Big phone-thread tile */}
→ rx pickup
); const BBSticker = ({ bg, icon, title, sub, cols, rows }) => (
e.currentTarget.style.transform = "translateY(-4px) rotate(-1deg)"} onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0) rotate(0)"}>
{icon}
{title}
{sub}
); // ---------- LIVE DEMO — "pick a thing. watch magica do it." ---------- const BBDemo = () => { const scenarios = ["dinner", "haircut", "flight", "doctor", "car", "vet"]; const [active, setActive] = React.useState("dinner"); const t = THREAD_LIBRARY[active]; return (
— live demo

pick a thing.
watch magica do it.

real conversations. real outcomes. lowercase, low-key, gets the job done.

{scenarios.map(k => { const s = THREAD_LIBRARY[k]; const isOn = active === k; return ( ); })}
); }; // ---------- EXAMPLES — sticker cards (Pocket-style, brand pastels) ---------- const BBExamples = () => { const keys = ["pharmacy", "reminder", "haircut"]; const colors = [BB.peach, BB.butter, BB.apricot]; return (
real threads

a few things people asked magica this week.

{keys.map((k, i) => { const t = THREAD_LIBRARY[k]; return (
{t.icon} {t.title}
); })}
); }; // ---------- FAQ ---------- const BBFaq = () => { const [open, setOpen] = React.useState(0); const items = [ { q: "do i need to download an app?", a: "no. magica works in imessage. add the number, text it like a friend." }, { q: "is it really making real phone calls?", a: "yes. ai voice calls. it waits on hold, navigates phone trees, and writes you a summary when it's done." }, { q: "what if it gets something wrong?", a: "magica asks before doing anything that's hard to undo. for everything else, you can just text 'no, redo it.'" }, { q: "what about my data?", a: "encrypted at rest, never sold, never used to train models. text 'forget me' to delete everything." }, { q: "android?", a: "yes — over sms. some imessage features are nicer on iphone, but magica works for everyone." }, { q: "international?", a: "us numbers only for now." }, ]; return (
faq

questions, answered.

{items.map((it, i) => (
{open === i && (
{it.a}
)}
))}
); }; // ---------- FINAL CTA ---------- const BBFinal = () => (

ready to get
your time back?

no app to download. just text.

text magica →
); const BBFooter = () => ( ); const BrandBentoSite = () => (
); window.BrandBentoSite = BrandBentoSite;