Components

The kit in numbers

Actions

Feedback & state

Forms

Navigation

Data

Content

Identity

System

Events & blog

November 2026

Button

Dialog

Badge

Callout

Input · Select · Checkbox

Input

Select

Checkbox

Tabs

Metric

DonutChart

BarChart

LineChart

BrandTable

BenefitCard

CompareColumns

What Arcasiles brings

What the partner brings

Diagram

BulletList

Avatar

AccentLine

RichText

HexToken

CodeBlock

ServiceCard

Events

Marketing

Tech

Sample plan

CoverHero

LogoStrip

LogoMarquee

SponsorTiers

TeamGrid

Name Surname

Name Surname

Name Surname

PhotoGallery

BrandPhoto · PhotoBlock

SocialLinks

BrandPalette

CtaBlock

NavHeader

PageFooter

EventCards

Community meetup

Arcasiles Community · Autumn networking

Tech Talk · AI for event production

Monthly community meetup

Arcasiles Day · Season wrap-up

Arcasiles Group · Season kickoff

Tech Talk · Designing systems with AI

Community projects fair

Las Noches de Arcasiles · Live jazz

EventList

Upcoming7 events

Past1 event

EventCalendar

PostCard

How we use the brand kit in every document

Events and tech: two colors, one system

brand.arcasiles.com: the manual that behaves like the brand

Input

Select

Checkbox

Corporate text

Arcasiles text

Brand canon

Component guide

Your brief

BrandPhoto

PhotoBlock

EventCard

EventCards

System

The @arcasilesgroup/brand-kit library: buttons, badges, cards, charts and more.

The @arcasilesgroup/brand-kit package has 73 React components built on design-tokens.json v5.0.1, from Button to CtaBlock. They all read the CSS variables of the emphasis color in play, so they change color with no extra JavaScript. Here you will see 51 working, grouped by family; the remaining 22 are documented in their own chapters.

These figures are the Metric component doing real work: the data comes from the kit on every build, not from a mock.

Components

Exported by @arcasilesgroup/brand-kit v5.0.1

Emphasis colors

One prop, seven colors to choose from

5.0.1

Tokens

design-tokens.json, single source

The big number is set in BDSupperBold, the brand display face. It is reserved for figures and covers; body copy is always Lexend.

The Button with its six variants, and the Dialog that confirms before it runs. One primary action per surface; the rest step down the hierarchy.

Anatomy

A pill (radius 100px) with a centered label; optional leading/trailing icon and a loading spinner.

Purpose

The call to action: fires the primary intent of a view.

Variants · when

primary — THE action of the piece — one per surface.
soft — secondary you want to stand out without stealing focus.
outline — low-weight action on a light or dark (onDark) surface.
secondary — the companion to a primary: 1pt neutral border; with onDark, border and text in white.
ghost — tertiary and inline actions: text only, no border.
dark — on a photo or a colored fill: solid #272727 with white text.

States

default
hover
focus
active
disabled
loading

Sizes

sm · 9pt
md · 10.5pt (default)
lg · 12pt

Use exactly one primary per surface and label it with a verb.

Don't

Don't place two primaries together or use the button as a status badge.

Accessibility

role=button, min-height ≥44px, 2pt blue focus ring, Enter/Space activate; Label in Name (WCAG 2.5.3).

Props

Prop	Type	Default	Description
`variant`	`primary \| soft \| outline \| secondary \| ghost \| dark`	`primary`	Visual weight and hierarchy of the action.
`accent`	`Accent`	`amber`	Brand hue of the fill/border; emphasis only, never state.
`size`	`sm \| md \| lg`	`md`	Control size (the hit-target stays ≥44px).
`onDark`	`boolean`		Adjusts outline/secondary for dark surfaces.
`disabled`	`boolean`		Neutral gray; ignores hover and click. Never the brand color washed out.

Code

Button

<Button variant="primary" accent="lila">Reservar</Button>

Tokens

--arc-accent
--arc-accent-text
--arc-radius-badge
--arc-duration

The dialog buttons respond: try them.

Purpose

A confirmation panel rendered STATICALLY open to compose inline.

States

open (static)

Use it to compose confirmations in documents or previews; put actions in actions.

Don't

Don't expect a portal or open/close state: it manages no overlay or focus trap. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

role=dialog with aria-label from the title; actions are real keyboard Buttons.

Code

Dialog

<Dialog title="Publish?" actions={<Button>Publish</Button>}>Body…</Dialog>

Notices and badges: how things get labelled and how the system answers. Here color means something and the semantic tone sets it; the emphasis color stays out.

Amber Lila Blue Ink

Anatomy

A flat pill (radius 100px) with uppercase Lexend 9pt text; no shadow, no focus.

Purpose

A short flat-pill label: category or brand, not state.

States

default
live (role=status)

Use it to categorize; pass live only when it announces a dynamic change (a counter).

Don't

Do not make it focusable or a touch target: it is text, not a control. For something clickable there is the Button.

Accessibility

No role by default (span). With live → role=status + aria-live=polite. Not focusable.

Props

Prop	Type	Default	Description
`children` ●	`ReactNode`		The label text.
`accent`	`Accent`	`amber`	Hue of the fill + text; emphasis only.
`live`	`boolean`		Turns it into role=status + aria-live=polite for dynamic changes.

Required field

Code

Badge

<Badge accent="blue">Beta</Badge>

Tokens

--arc-accent
--arc-accent-text
--arc-radius-badge

Brand emphasis

A Callout that takes its color by prop: tinted background and border in that color, without it meaning a state.

Info

Blue tinted background with semantic border and icon.

Success

Green confirmation with check icon.

Warning

Yellow warning with triangle.

Error

Red error with close icon.

Anatomy

An 8pt box with a 1pt border; a left dot/icon, an optional 11pt/600 title and a 10.5pt body.

Purpose

A highlighted notice in the flow: context, success, warning or error.

Variants · when

tone=info/success/warn/error — SEMANTIC system messaging.
accent — brand emphasis: the background takes the color it is given and means no state.

Choose tone when it communicates state; accent when it only emphasizes.

Don't

Do not mix semantic tone and brand color in the SAME message. If the notice reports something use tone; if it only stands out, use the color. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Readable title + body; the icon is decorative (aria-hidden). AA contrast guaranteed per tone.

Props

Prop	Type	Default	Description
`children` ●	`ReactNode`		The notice body.
`tone`	`info \| success \| warn \| error`		Semantic state: background at step 100 of the scale, border at 500, icon at 700.
`accent`	`Accent`	`amber`	Brand hue when there is NO tone (tint + border + dot).
`title`	`ReactNode`		Optional title above the body.

Required field

Code

Callout

<Callout tone="success" title="Done">The document was published.</Callout>

Tokens

--arc-accent
--arc-callout-bg
--arc-radius-card

Data entry with real states: focus, helper, error and disabled. The emphasis color paints the focus; the error is always the danger red.

Name

As it will appear in the material

Invalid format

Disabled

Emphasis color

The options come from the kit registry

With error

Invalid selection

Disabled

I accept the termsAvailable optionFixed option (disabled)

Anatomy

A top label + a 6pt box with a 1pt border; below it, helper text or an error message.

Purpose

Brand text field with label, helper and an accessible error state.

States

default
focus (accent border)
helper
error
disabled

Always pair a label; use error for validation (paints danger red + message).

Don't

Do not signal an error with the brand color: the error is ALWAYS the danger red, with its message beside it.

Accessibility

label tied by id (useId), error with aria-invalid + aria-describedby, 2pt blue focus ring.

Props

Prop	Type	Default	Description
`label`	`ReactNode`		Label tied to the field by id.
`error`	`ReactNode`		Validation message (danger red + aria-invalid).
`helper`	`ReactNode`		Helper text below the field.
`accent`	`Accent`	`amber`	Tints the focus border.
`disabled`	`boolean`		Blocks input and lowers contrast.

Code

Input

<Input label="Email" type="email" error="Invalid format" />

Tokens

--arc-accent
--arc-gray
--arc-radius-metric

Purpose

Styled native dropdown with label, helper, error and disabled.

States

default
focus (accent border)
helper
error
disabled

Give options with value/label; for a static preview use defaultValue.

Don't

Don't use it for 2 options (use Checkbox/segmented) or for actions.

Accessibility

native select → keyboard and screen-reader out of the box; label tied; error aria-invalid.

Code

Select

<Select label="Accent" options={[{value:"lila",label:"Lila"}]} />

Purpose

A single binary decision (accept, enable) with a clickable label.

States

unchecked
checked
focus (accent)
disabled

Use the label as the clickable area; control with checked+onChange.

Don't

Don't use it for immediate actions or to pick 1 of N (that's radio/Select).

Accessibility

native checkbox input, tied label, visible focus; disabled dims and blocks.

Code

Checkbox

<Checkbox checked={ok} onChange={setOk} label="I accept the terms" />

Move within a view without reloading the page. The active tab is marked by weight and an underline, never by color alone.

General panel with the information for the color in play.

Anatomy

A row of labels over a 1pt rule; the active one carries a colored underline; the panel sits below.

Purpose

Switch between panels inside one view without a reload.

Variants · when

uncontrolled (defaultActive) — state lives inside the component.
controlled (active + onActiveChange) — the caller owns the index.

States

active (accent underline + weight)
inactive
focus (blue ring)

Reserve Tabs for sibling views at the same level; mark active by weight + underline.

Don't

Don't use it as page navigation or with more than ~5 tabs.

Accessibility

role=tablist/tab/tabpanel; active never relies on color alone; 2pt blue focus ring.

Props

Prop	Type	Default	Description
`items` ●	`{ label; content }[]`		Tabs: label + panel content.
`accent`	`Accent`	`amber`	Tints the active tab underline.
`defaultActive`	`number`	`0`	Initial index in uncontrolled mode.
`active / onActiveChange`	`number / (i) => void`		Controlled mode: the caller owns the index.

Required field

Code

Tabs

<Tabs items={[{label:"One",content:<p>…</p>}]} accent="lila" />

Tokens

--arc-accent
--arc-blue
--arc-duration-fast
--arc-duration-press

Figures and series rendered on the server, zero JavaScript: the display metric, three SVG charts and the brand table. Colors come from the matching chartPalette.

Components

Emphasis colors

5.0.1

Tokens

Anatomy

A 6pt bordered card: a large BDSupperBold value, a label below and an optional gray caption.

Purpose

Brand display figure (BDSupperBold) with its label: KPIs and covers.

Reserve it for the numbers that matter; give it the color of the section it sits in.

Don't

Don't use it for running text or numbers inside a sentence. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Value and label are real text (not an image); AA contrast with accent="ink" on light.

Props

Prop	Type	Default	Description
`value` ●	`ReactNode`		The display figure.
`label` ●	`ReactNode`		What the number measures.
`caption`	`ReactNode`		Optional gray note under the label.
`accent`	`Accent`	`ink`	Text-safe color of the value.
`animate`	`boolean`		Countup 0→value on mount (numbers only; reduced-motion skips it).

Required field

Code

Metric

<Metric value="49" label="Components" accent="ink" />

Tokens

--arc-accent
--arc-font-display
--arc-radius-metric

Community40%Events25%Tech20%Music15%

Purpose

Split of a total into a few parts, as a server SVG.

Use 3–6 segments with their labels; colors come from the chartPalette.

Don't

Do not go past six parts, and do not use it for time series — LineChart is there for that.

Accessibility

SVG with accessible titles; color is not the only carrier (label + value).

Code

DonutChart

<DonutChart data={[{label:"Events",value:25}]} size={160} />

Purpose

Compare discrete magnitudes across categories, as a server SVG.

Label each bar; sort by a criterion (magnitude or chronology).

Don't

Don't use it for parts of a whole (that's DonutChart).

Accessibility

Server-first SVG, no JS; axes and labels readable at AA contrast.

Code

BarChart

<BarChart data={[{label:"Jan",value:120}]} />

20242025

Purpose

Trend of one or more series over time, as a server SVG.

Name each series and pass them by props in chartPalette order.

Don't

Don't re-order the colors by hand or mix units on one axis.

Accessibility

Accessible SVG; each series is named — not told apart by color alone.

Code

LineChart

<LineChart labels={m} series={[{name:"2025",points:[80,120]}]} />

Property	Value	Description
radius-metric	6pt	Cards and inputs
radius-card	8pt	Containers and callouts
radius-badge	100px	Pills and badges

Purpose

A data table with the brand typography and rhythm.

Give headers and rows; on narrow screens, let it overflow its container.

Don't

Don't use it for layout: it's tabular data, not a grid.

Accessibility

semantic table/th/td; the horizontal overflow is reachable with the keyboard too.

Code

BrandTable

<BrandTable headers={["Prop","Value"]} rows={[["radius","8pt"]]} />

The pieces a page or document is composed from: cards, prose, photography, partner belts and the brand closers. All server HTML.

Server-first

All 73 components paint HTML on the server — nothing depends on the browser to show up.

Colour-aware

They read the --arc-* variables and receive the color by prop, with no re-render.

Token-built

Generated from design-tokens.json v5.0.1: one single source for color, radius and motion.

Purpose

A numbered card listing one benefit or step.

Use in trios or grids for 3–4 benefits; number + title + body.

Don't

Don't cram long paragraphs: it's a summary, not an article. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Real heading per card; the number is decorative, the title carries weight.

Code

BenefitCard

<BenefitCard number="01" title="Server-first">Server HTML.</BenefitCard>

Event brand and communication
Community and outreach
Content production

Venue and logistics
Amplification on their channels
Technical resources

Purpose

Two facing columns: what A brings vs. what B brings.

Use it for agreements or scope comparisons with parallel items.

Don't

Don't add more than 2–3 columns or long asymmetric lists. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Each column has its title; semantic lists.

Code

CompareColumns

<CompareColumns columns={[{title:"Arcasiles",items:["Brand"]}]} />

never published

“Estamos encantados de anunciar un evento disruptivo, premium y exclusivo.”

brand_check rejects it in CI and in the MCP.

goes through

“El 12 de octubre hacemos un evento en Siles con 12 artistas de la comarca.”

A figure, a date and a place.

The same announcement, written two ways. The lists that tell them apart live in the Voice chapter.

what a piece reads before it exists

“color is emphasis, not structure”

“one primary action per surface”

“a card for the October gathering”

Sample sentences, not verbatim quotes from the canon.

The three sources arrive together: the piece has to satisfy all three at once.

Anatomy

Figure frame with a caption; inside, two facing sides (Compare) or a block with sections and marked sentences (Block).

Purpose

Draw an idea with HTML and brand tokens — no screenshot, no loose PNG.

Variants · when

DiagramCompare — two versions face each other and color says which is which.
DiagramBlock — a long text and the sentences worth looking at inside it.

Leave the conclusion to the caption: the drawing shows the shape, it doesn't argue it.

Don't

Don't use it as ornament or in place of a table: the bars say “there is text here”, never figures.

Accessibility

Labels are real text; filler bars are aria-hidden. The verdict never rides on color alone: each side also says it in words.

Props

Prop	Type	Default	Description
`before / after` ●	`DiagramSide`		The two sides of DiagramCompare: title, figure, quote, chips and verdict.
`sections` ●	`DiagramBlockSection[]`		DiagramBlock sections, each with its lines and its marked sentence.
`tone`	`"problem" \| "good" \| "neutral" \| "accent"`	`"neutral"`	What the color of a side says before you read it.
`caption`	`ReactNode`		Figure caption. Without it the diagram renders unframed.
`accent`	`Accent`		Emphasis color for the subtree.

Required field

Code

Diagram

<DiagramCompare before={{title:"Not like this",tone:"problem"}} after={{title:"Prefer",tone:"good"}} />

Tokens

--arc-accent
--arc-accent-text
--arc-danger
--arc-green
--arc-gray
--arc-neutral-300

First list item with an ink dot
Second item with the same visual mark
Third item — the marker is neutral, never the emphasis color

Purpose

A list with the brand marker: a black dot, never a colored one.

Use it for short enumerations; the marker is neutral by design.

Don't

Do not paint the marker with the emphasis color. If something needs to stand out, set the text in bold.

Accessibility

semantic ul/li; the dot is decorative.

Code

BulletList

<BulletList items={["First","Second"]} />

AT AG BK

Anatomy

A circle (radius 100px) with initials derived from the name, or a cropped image.

Purpose

A person's portrait or initials in three sizes.

Variants · when

name — derives initials from the name automatically.
initials — explicit initials when there's no name.

Sizes

sm · 20pt
md · 28pt (default)
lg · 36pt

Pass name for automatic initials; pick the size by context.

Don't

Don't use it as a generic decorative icon: it represents a person.

Accessibility

Readable initials text; if it's an image, a descriptive alt.

Props

Prop	Type	Default	Description
`name`	`string`		Name the initials are derived from.
`initials`	`string`		Explicit initials when there's no name.
`src`	`string`		Portrait image (cropped to the circle).
`size`	`sm \| md \| lg`	`md`	Avatar diameter.

Code

Avatar

<Avatar name="Arcasiles Team" size="lg" />

Tokens

--arc-accent
--arc-radius-badge

Purpose

A 3pt line under a heading, in the emphasis color: the brand's punctuation.

States

width via width prop

Use it under an h2/h3 to mark a section; it inherits --arc-accent-line.

Don't

Do not repeat it all over the block: one per section, and the rest is separated with space.

Accessibility

Decorative (adds no meaning); needs no alt text.

Code

AccentLine

<AccentLine width="80pt" />

The group's identity rests on two gestures of color. The brand yellow, #f9be4a, lights up the decorative highlights —never the running text— and sets the rhythm of every page as a brand piece, not a manual.

Events answers with its lila, #674a98, which repaints badges, lines and charts without touching a single line of HTML. The pill carries the exact color next to the hex, and the text around it stays as readable as a book.

Purpose

A long-prose container with a measure, line-height and book-like emphasis.

Use it for articles/descriptions; emphasis is by weight, not color.

Don't

Don't paint text yellow or exceed the reading measure.

Accessibility

45–75ch measure, 1.7 line-height; hierarchy via real headings.

Code

RichText

<RichText><p>Long prose…</p></RichText>

Color #f9be4a amber y #674a98 lila.

Purpose

An inline pill with a hex and its color, to quote tokens in prose.

Insert it inside the paragraph; the code is set light or dark by its WCAG luminance.

Don't

Don't use it as a large swatch (use BrandPalette) or outside text.

Accessibility

The hex reads as text; the pill is decorative.

Code

HexToken

<HexToken value="#674a98" />

accents.ts

import { accentVars } from "@arcasilesgroup/brand-kit";

const av = accentVars("lila");
// → { fill, onFill, strong } — cada rol es una CSS var del canon

Purpose

A code block with highlighting, a title and a copy button.

Variants · when

lineNumbers — when line numbers matter (refs).
maxHeight — to bound a very long block to a fixed height.

Pass lang for highlighting and locale for the button language.

Don't

Don't paste secrets or machine paths; it's public content.

Accessibility

Copy button with aria-label; the <pre> keeps the text for readers.

Code

CodeBlock

<CodeBlock code="const x = 1;" lang="ts" title="ex.ts" locale="en" />

End-to-end production of corporate and community events.

Event management
Congress organization
Team building

Brand communication, from strategy to execution.

Advertising
Marketing
Communication

Tailor-made technology for the event and the business.

Tailor-made solutions
IT & Cloud
Data

Recomendado

The pricing variant: display price in the text-safe tone, period in gray and a pill CTA. The featured prop adds the black border and the “Recomendado” pill.

€950/month

Let's talk

Purpose

A service or plan card, with a highlightable pricing variant.

Variants · when

base — describes a service with features.
pricing + featured — a plan with a price and a highlighted CTA.

Mark ONE plan as featured; the price uses the text-safe tone of the color.

Don't

Don't highlight several plans at once or invent rates. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Real heading; CTA is a Button/link with a ≥44px target.

Code

ServiceCard

<ServiceCard title="Plan" price="€950" featured cta={{label:"Talk",href:"#"}} />

Partnership document

Partnership proposal 2025

Siles · 2025

Para

Siles Town Council

Confidential

Partnership document

Partnership proposal 2025

Siles · 2025

Para

Siles Town Council

Confidential

Purpose

A document cover: title, subtitle, recipient and band.

Variants · when

default — a light cover, with the band in color.
accent + invertBand — a dark inverted cover (Tech).

Use it as the first page of proposals/documents.

Don't

Don't use it as a generic web hero (that's the site hero).

Accessibility

One h1 per document; AA contrast guaranteed by the band.

Code

CoverHero

<CoverHero title="Proposal" subtitle="2025" accent="ink" invertBand />

Main technology partners

Purpose

A titled row of logos: partners or the group's own marks.

Use each brand's original files; give an alt per logo.

Don't

Don't recreate third-party logos or paint them a color that isn't theirs. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Each logo has alt; the title heads the strip.

Code

LogoStrip

<LogoStrip title="Partners" logos={[{src:"/l.svg",alt:"Mark"}]} />

Purpose

An animated belt of logos that loops sideways.

States

animated
paused (hover/focus)
static (reduced-motion)

Use it for many partners; it pauses on hover or keyboard focus.

Don't

Don't put reading text in the belt or animations that ignore reduced-motion.

Accessibility

aria-label describes the belt; with prefers-reduced-motion it's a static row.

Code

LogoMarquee

<LogoMarquee items={items} ariaLabel="Partners" mono />

Bronze

€400

Logo on materials
Opening mention

Recomendado

Silver

€900

Everything in Bronze
Booth at the event
Dedicated post

Gold

€1,800

Everything in Silver
Sponsored talk
Logo on stage

Purpose

Sponsorship tiers with price and perks, one highlighted.

Order low to high; highlight the recommended tier with featured.

Don't

Don't invent real prices or highlight every tier. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Each tier has a heading; semantic perk lists.

Code

SponsorTiers

<SponsorTiers tiers={[{name:"Gold",price:"€1,800",perks:["…"]}]} />

Events

The role is set in the text-safe tone of the emphasis color, never in raw yellow: on light backgrounds yellow does not read.

Tech

Name in BDSupperBold and bio in 14px Lexend at 1.6 line-height — the whole card is server HTML.

Alcachofil painting with brush and palette

Community

With Instagram or LinkedIn present, the card adds SVG icon links above the WCAG touch-target minimum.

Purpose

A grid of team cards (TeamCard): portrait, name and role.

Use real portraits, name and role; add socials with a ≥44px touch target.

Don't

Do not invent people or put the brand character in production: real portraits go here, with name and role. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Name in a heading; social icons with aria-label and touch target.

Code

TeamGrid

<TeamGrid members={[{name:"…",role:"Events",photo:"/p.png"}]} />

Speaker presenting a chart on stage during an Arcasiles event — Real event photos, the same ones the kit embeds: a dense grid on desktop and a single horizontal strip on mobile.

Audience attending a session at an Arcasiles event — Real event photos, the same ones the kit embeds: a dense grid on desktop and a single horizontal strip on mobile.

Purpose

A dense photo grid with a caption and optional lightbox.

Use span to feature a photo; frame with position where the crop cuts faces.

Don't

Don't mix wildly different ratios or leave photos without alt.

Accessibility

Each photo has alt; the lightbox is keyboard-operable and closes on Escape.

Code

PhotoGallery

<PhotoGallery photos={[{src,alt:"…",span:2}]} caption="…" lightbox />

Speaker at the podium with the “Nuestra esencia” screen projected behind

Q&A moment: moderator and audience talking during the event

Purpose

One of the kit's six curated photos, with brand framing and radius.

Pick photo (charla/publico/qa/ponente/grupo/postevento); raise position if the crop cuts faces.

Don't

Don't use BrandPhoto for your own photos (use PhotoBlock).

Accessibility

Descriptive alt required; radius and framing by design.

Code

BrandPhoto

<BrandPhoto photo="ponente" height={200} position="center 30%" alt="…" />

Purpose

Bounds YOUR OWN photo with the brand 8pt radius and an optional caption.

Use it for photos not from the kit; give alt and an optional caption.

Don't

Don't use it for the kit's six curated photos (use BrandPhoto).

Accessibility

alt required; caption as real text below the image.

Code

PhotoBlock

<PhotoBlock src={url} alt="…" height={200} />

Purpose

A row of the group's OFFICIAL social icons (verified glyphs).

States

sm 16px
md 20px
lg 24px

Use the kit channels; the icons inherit the text color of the surface.

Don't

Don't swap them for emoji or unverified channel URLs.

Accessibility

Each link has the channel's aria-label, a 36px target (≥24px WCAG), rel=me.

Code

SocialLinks

<SocialLinks size="md" />

Neutros

black
#272727

darkGray
#afafaf

gray
#e9e9e9

whitesmoke
#f5f5f5

Superficie

paper
#faf9f7

Marca

primary
#f9be4a

green
#7fbf80

blue
#2797c4

lila
#674a98

pink
#e887a7

orange
#da7835

deepBlue
#114F82

Funcionales

success
#7fbf80

info
#2797c4

warn
#f9be4a

danger
#b3362a

link
#114F82

Purpose

A live reference of the palette: exact canon names and hex codes.

Use it to quote the brand color; it's reference, not decoration.

Don't

Don't re-declare hex by hand elsewhere: this is the quoted source.

Accessibility

Names and hex as readable text; not reliant on the swatch alone.

Code

BrandPalette

<BrandPalette view="palette" />

¿Hablamos?

Email	info@arcasiles.com
Web	arcasiles.com

Purpose

A full-bleed document closer: ink background, logo and contact channels.

Use it as a proposal footer; put email and web in channels.

Don't

Don't use it as a mid-page banner: it's a closer.

Accessibility

AA contrast on ink; the channels are real text.

Code

CtaBlock

<CtaBlock subtitle="Let's talk?" channels={[{label:'Email',value:'…'}]} />

Principal

Voice

ES MCP

Anatomy

Logo on the left, dropdown groups and standalone links in the middle, pill CTA on the right.

Purpose

The header of a brand site, with its full navigation.

Variants · when

links — the navigation fits in one row of destinations.
groups — there are more destinations than fit: each group opens its list.

States

idle
hover
focus-visible
open
current page

Mark the current page with active: the group holding it underlines itself.

Don't

Don't add more than one CTA, or use a group for a single entry — that is a standalone link.

Accessibility

Each group is a native <details>: it opens on press, closes with Escape and announces its state with no JavaScript. The current page carries aria-current, not just weight.

Props

Prop	Type	Default	Description
`links` ●	`NavLink[]`		Standalone destinations, after the groups.
`groups`	`NavGroup[]`		Dropdown groups, before the standalone links.
`cta`	`string`		Pill CTA label, right-aligned.
`accent`	`Accent`	`"amber"`	Emphasis color of the active underline and the CTA.

Required field

Code

NavHeader

<NavHeader groups={[{label:"System",links:[{label:"Components",href:"/components"}]}]} links={[]} />

Tokens

--arc-accent
--arc-gray
--arc-blue

Purpose

A brand page footer with copyright and links.

Use it at the end of pages/documents; link to the group's sites.

Don't

Don't duplicate full navigation: it's a footer, not a menu.

Accessibility

semantic nav/link list; copyright as text.

Code

PageFooter

<PageFooter copyright="© 2026 Arcasiles" links={[{label:"web",href:"#"}]} />

The group's agenda and blog: one data source as a card, a list, a calendar and a post. The kit never calls an API — it receives everything by props.

Community

Saturday, October 12 · 19:30 · Siles

The badge takes its color from the kit registry; the photo stays bounded and the CTA inherits that same color, with the text on top already computed by contrast.

Group photo of attendees and team at the close of an event

Community

Sep 2519:00

Arcasiles Space, Siles

An open community gathering to close the season; seats are reserved on Luma.

Luma Reserve on Luma

Tech

Oct 1618:30

Tech Room, Siles + online

A technical talk with a live demo; sign up on Luma or follow it from LinkedIn Events.

Luma LinkedIn Reserve a seat

Meetup

Nov 1319:00

Downtown Café, Siles

The open meetup every month; the call and the seats live on Meetup.

Meetup LinkedIn Join on Meetup

Season

May 2219:00

Municipal Auditorium, Siles

We looked back on the season with the team and the community; the recap and photos are published.

View recap

Group

Nov 518:00

Arcasiles HQ, Siles

Season kickoff with the whole group: quarter agenda and goals.

Tech

Nov 1218:30

Tech Room, Siles + online

A technical talk with a live demo; seat on Luma.

Events

Nov 2018:00

Municipal Auditorium, Siles

An open showcase of the season's projects.

Music

Nov 2721:00

Las Noches Club, Siles

A jazz session from the night-time sub-brand.

Anatomy

An 8pt card: optional cover on top, a color badge, title, date and place, and a pill CTA.

Purpose

A single event's card: cover, color badge, date, place and CTA.

Give date, place and cta; frame the cover with imagePosition.

Don't

Do not invent events or call an API from here: the kit receives its data by props. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

CTA with a ≥44px touch target; the badge only stands out, it does not report a state.

Props

Prop	Type	Default	Description
`title / date / place` ●	`ReactNode`		The event's base data.
`accent`	`Accent`	`amber`	Color of the category badge.
`cta / ctaHref`	`string`		Button label + target.
`image / imagePosition`	`string`		Optional cover and its framing.

Required field

Code

EventCard

<EventCard title="Meetup" date="…" place="Siles" cta="Sign up" />

Tokens

--arc-accent
--arc-radius-card
--arc-radius-badge

Purpose

The same events as a card grid (auto-fit).

Reuse the SAME data source as EventList/EventCalendar.

Don't

Do not duplicate the agenda: one single data source, three presentations. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

Each card has a heading; chips with icon + label.

Code

EventCards

<EventCards items={items} lang="en" />

25Sep
Community
Arcasiles Community · Autumn networking
19:00Arcasiles Space, Siles
An open community gathering to close the season; seats are reserved on Luma.
Luma
Reserve on Luma
16Oct
Tech
Tech Talk · AI for event production
18:30Tech Room, Siles + online
A technical talk with a live demo; sign up on Luma or follow it from LinkedIn Events.
Luma LinkedIn
Reserve a seat
5Nov
Group
Arcasiles Group · Season kickoff
18:00Arcasiles HQ, Siles
Season kickoff with the whole group: quarter agenda and goals.
12Nov
Tech
Tech Talk · Designing systems with AI
18:30Tech Room, Siles + online
A technical talk with a live demo; seat on Luma.
13Nov
Meetup
Monthly community meetup
19:00Downtown Café, Siles
The open meetup every month; the call and the seats live on Meetup.
Meetup LinkedIn
Join on Meetup
20Nov
Events
Community projects fair
18:00Municipal Auditorium, Siles
An open showcase of the season's projects.
27Nov
Music
Las Noches de Arcasiles · Live jazz
21:00Las Noches Club, Siles
A jazz session from the night-time sub-brand.

22May
Season
Arcasiles Day · Season wrap-up
19:00Municipal Auditorium, Siles
We looked back on the season with the team and the community; the recap and photos are published.
View recap

Purpose

An agenda as a list grouped by status (Upcoming, Past).

Pass items with a status; the past one offers a “view recap”.

Don't

Do not shuffle the order: upcoming first, past after.

Accessibility

Chips ≥24px, CTA 44px; SVG icons with a label, never emoji.

Code

EventList

<EventList items={items} lang="en" />

Group
Tech
Meetup
Events
Music

Thursday, November 5
Thursday, November 12
Friday, November 13
Monthly community meetup
Friday, November 20
Friday, November 27

Purpose

A navigable monthly calendar with events as per-day pills.

States

island (client)
collapses to a per-day list on mobile

Pin month/year for the first render (SSR-stable); the browser resolves “today”.

Don't

Do not use new Date in render, it breaks SSR: pass the month and the year by props.

Accessibility

Semantic accessible table; ‹/› glyphs labelled; per-day list on mobile.

Code

EventCalendar

<EventCalendar items={items} month={9} year={2026} lang="en" />

GuideFebruary 19, 2026Arcasiles Team

From the meetup poster to the partnership proposal: the same variables and components, zero recreated versions.

EventsApril 23, 2026Arcasiles Team

Each emphasis color repaints badges, callouts and charts with its own scale. The component does not change; the color it receives does.

ProductJune 30, 2026Arcasiles Team

13Monthly community meetup

The manual lives on the web, exposes its MCP and ships the kit as an npm package. This photo-less card is the text-only variant.

Purpose

A blog-post card: optional cover, title, excerpt and meta.

Variants · when

with image — there's a cover (empty alt, decorative of the link).
text-only — no cover: the text variant.

Link to the real post with href; PostMeta composes ISO date + author.

Don't

Do not put an h1 inside: the card title is an h3, and PostHero paints the h1 on the open post. Never use a color strip attached to only one edge of the card, panel or container: not top, bottom, left or right.

Accessibility

The whole card is a link; the date is an ISO <time>.

Code

PostCard

<PostCard title="…" excerpt="…" href="/blog/x" meta={{date,author}} />

51 components live in this chapter, out of the 73 the kit exports. All of them read the same color prop, and none of them keeps a hex of its own.

The remaining 22 are not missing: they work in another chapter. Logo and SectionCard are in Logo, ColorSwatch in Color, Alcachofil in its own chapter, CodeBlock in MCP, and DocPage and SlidePage in Templates. SectionHeader and Heading compose these very pages.