// brand.jsx — Medicya brand tokens, logo, shared atoms.
// All visual choices are sourced from the brand board image.
const M = {
// Greens
primary: '#0E7A65', // deep teal — buttons, headlines accents
primaryDk: '#0A5A4A', // hover, dark-hero bg overlay
primaryHi: '#1AA585', // mid teal — gradient stop, hover lift
mint: '#7DE3C5', // light mint — chip backgrounds, gradient tip
forest: '#063A33', // darkest forest teal — dark hero, deep blocks
forestDeep: '#04231F',
// Neutrals
ink: '#0E1B33', // body text on light
ink2: '#3A4257', // secondary text
ink3: '#6B7385', // tertiary
rule: '#E6E2D7', // hairlines on cream
ruleSoft: '#EFEAD9',
cream: '#F6F2E8', // page bg
creamSoft: '#FBF8F0',
white: '#FFFFFF',
// Accents (from swatch row)
navy: '#0E1B33',
indigo: '#5757D6',
steel: '#D8DEEA',
};
// ─── Logo ───────────────────────────────────────────────────────────────
// Two overlapping leaf-strokes forming an "M" + a punctuating dot.
function Logo({ size = 36, monochrome = null }) {
const a = monochrome || M.primary;
const b = monochrome || M.primaryHi;
const c = monochrome || M.mint;
const dot = monochrome || M.primary;
return (
);
}
function Wordmark({ size = 28, color = M.ink, mark = true, gap = 10 }) {
return (
{mark && }
Medicya®
);
}
// ─── Buttons ────────────────────────────────────────────────────────────
function Btn({ children, kind = 'primary', size = 'md', onClick, style, full = false }) {
const sizes = {
sm: { p: '10px 18px', f: 14, r: 999 },
md: { p: '14px 24px', f: 15, r: 999 },
lg: { p: '18px 32px', f: 16, r: 999 },
};
const s = sizes[size];
const palettes = {
primary: { bg: M.primary, color: '#fff', border: 'transparent' },
dark: { bg: M.forest, color: '#fff', border: 'transparent' },
light: { bg: '#fff', color: M.ink, border: M.rule },
ghost: { bg: 'transparent', color: M.ink, border: M.rule },
onDark: { bg: 'rgba(255,255,255,0.08)', color: '#fff', border: 'rgba(255,255,255,0.22)' },
};
const p = palettes[kind];
return (
);
}
// ─── Section wrapper ────────────────────────────────────────────────────
function Section({ children, bg = M.cream, color = M.ink, py = 96, id, screenLabel }) {
return (
);
}
// ─── Eyebrow / Tag ──────────────────────────────────────────────────────
function Eyebrow({ children, dark = false }) {
return (
{children}
);
}
// ─── Icon set (line, 24px) ──────────────────────────────────────────────
const Icon = {
arrow: (c = 'currentColor') => (
),
check: (c = 'currentColor') => (
),
dna: (c = 'currentColor') => (
),
brain: (c = 'currentColor') => (
),
shield: (c = 'currentColor') => (
),
pulse: (c = 'currentColor') => (
),
doctor: (c = 'currentColor') => (
),
cal: (c = 'currentColor') => (
),
lock: (c = 'currentColor') => (
),
vial: (c = 'currentColor') => (
),
spark: (c = 'currentColor') => (
),
chevron: (c = 'currentColor') => (
),
star: (c = 'currentColor') => (
),
};
// expose globally for other JSX scripts
Object.assign(window, { M, Logo, Wordmark, Btn, Section, Eyebrow, Icon });