Paris, 12 de março de 1858.
Meu caro amigo, recebi com grande satisfação a vossa carta de fevereiro último…
Nº 108
Projeto Allan Kardec · UFJF
Kardec
Design System
Sistema de design editorial para o Projeto Allan Kardec. Tokens, componentes CSS e Blade Components para Laravel, construídos sobre uma estética de arquivo histórico refinada.
v 1.0
Laravel Blade
CSS Custom Properties
Alpine.js ready
EstruturaArquivos CSS
Importar em ordem
/* resources/css/app.css — ou via Vite */
@import 'kardec-tokens.css'; /* 1. Custom properties */
@import 'kardec-base.css'; /* 2. Reset + tipografia + utilitários */
@import 'kardec-components.css'; /* 3. Todos os componentes */
| Arquivo | Responsabilidade | Alterar aqui para... |
|---|---|---|
| kardec-tokens.css | CSS custom properties (valores brutos e semânticos) | Rebranding completo — mudar paleta, fontes, raios |
| kardec-base.css | Reset, tipografia global, utilitários, animações | Comportamento de scroll, estilos de foco, utilitários |
| kardec-components.css | Todos os componentes UI com classes .k-* | Aparência de um componente específico |
TokensPaleta de Cores
Família Ink (superfícies escuras)
ink-900
#0f1016
ink-800
#1a1c24
ink-600
#2e3245
ink-500
#3d4260
Família Parchment (superfícies claras)
parchment-100
#faf8f3
parchment-200
#f5f0e6
parchment-300
#ede5d0
parchment-400
#d9ccb0
Família Gold (acento principal)
gold-300
#e8c97a
gold-400
#d4a94a
gold-500 ★
#b8892a
gold-700
#7a5c1e
Papéis semânticos (use estes no CSS)
| Token | Valor | Uso |
|---|---|---|
| --surface-page | parchment-100 | Fundo do body / páginas |
| --surface-card | parchment-200 | Cards, painéis, inputs |
| --surface-dark | ink-800 | Seções escuras (hero, viewer) |
| --text-primary | ink-800 | Texto principal em fundo claro |
| --text-on-dark | parchment-200 | Texto em fundo escuro |
| --text-accent | gold-500 | Labels, seção-tags, ícones |
| --text-sepia | gold-700 | Categoria / labels em itálico |
| --text-muted | neutral-500 | Metadados, captions |
| --border-default | gold 22% opacity | Bordas de cards normais |
| --border-strong | gold 45% opacity | Hover / focus de cards |
TokensTipografia
Famílias tipográficas
--font-display
Playfair Display
Headings · Títulos · Logo
--font-body
Spectral
Body · Transcrições · Parágrafos
--font-mono
DM Mono
LABELS · BADGES · METADADOS
Escala de tamanhos
text-xs / .6remACERVO MUSEU AKOL
text-sm / .72remMANUSCRITOS RECENTES
text-base / .88remCarta a Eugène Vézy — c. 1858
text-md / 1remCarta a Eugène Vézy — c. 1858
text-lg / 1.2remAcervo digital de documentos originais de Allan Kardec
text-xl / 1.5remBiografias
text-2xl / 2remO Projeto
text-3xl / fluidManuscritos Recentes
text-4xl / fluidManuscritos
TokensEspaçamento
--space-1 / 4px
--space-2 / 8px
--space-3 / 12px
--space-4 / 16px
--space-6 / 24px
--space-8 / 32px
--space-12 / 48px
--space-16 / 64px
--section-py / fluidclamp(4rem,8vw,8rem)
ComponenteBadge
Tags pequenas para identificar acervos, categorias e estados.
Variantes
Museu AKOL
Novo
Carta
Dissertação
<x-badge>Museu AKOL</x-badge>
<x-badge variant="gold">Novo</x-badge>
<x-badge variant="outline">Carta</x-badge>
<x-badge variant="parchment">Dissertação</x-badge>
ComponenteChip
Pills de filtro — dark (para fundos escuros) e light (para fundos claros).
Variante Dark (hero / seções escuras)
Variante Light (seções claras)
<x-chip label="Todos" value="" :active="true" />
<x-chip label="Cartas" value="carta" />
<x-chip label="Cartas" value="carta" dot-color="#b8892a" variant="light" />
ComponenteButton
Variantes (fundo claro)
Variantes (fundo escuro)
ComponenteStat
Dark (hero)
600+
Manuscritos
3
Acervos
1800–1869
Período
Light (--ink variant)
600+
Manuscritos
3
Acervos
<x-stat number="600+" label="Manuscritos" />
<x-stat number="600+" label="Manuscritos" variant="ink" />
ComponenteSearch Box
Dark variant (hero)
<x-search-box
placeholder="Pesquise por palavras..."
:action="route('pesquisar')"
:value="request('q')"
/>
ComponenteManuscript Card
Card com placeholder
Nº 245
Dissertação sobre médiuns
<x-manuscript-card
:id="$manuscript->identifier"
:title="$manuscript->title"
:acervo="$manuscript->acervo->name"
:year="$manuscript->year_label"
:category="$manuscript->category"
:href="route('manuscritos.show', $manuscript)"
:image-url="$manuscript->thumbnail_url"
/>
ComponenteViewer
Manuscrito Original
Imagem
Transcrição
<x-viewer
:meta-id="$ms->identifier"
:meta-acervo="$ms->acervo->name"
:meta-ano="$ms->year_label"
:image-url="$ms->image_url"
>
<x-slot:transcript>
{!! $ms->transcript_html !!}
</x-slot:transcript>
</x-viewer>
ComponenteBio Card
A
Allan Kardec
Autor principal · 1804–1869
É
Émile Sabò
Colaborador
<x-bio-card
name="Allan Kardec"
role="Autor principal · 1804–1869"
:href="route('biografias.show', $bio)"
/>
ComponenteInfo Card
Categorias documentais
Carta · Comunicação · Cópia de carta · Discurso · Dissertação · Escritura · Evocação · Fragmento · Inventário · Nota · Prece · Psicografia
<div class="k-info-card">
<div class="k-info-card__label">Categorias</div>
<div class="k-info-card__content">…</div>
</div>
ComponentePage Header
<x-page-header
eyebrow="Acervo"
title="Manuscritos"
description="Documentos originais..."
/>
ComponenteSection Header
Acervo
Manuscritos Recentes
<x-section-header
tag="Acervo"
title="Manuscritos Recentes"
link-text="Ver todos"
:link-href="route('manuscritos.index')"
/>
{{-- Dark section --}}
<x-section-header
tag="Visualizador"
title="Imagem & Transcrição"
:inverted="true"
/>
ComponenteForm Elements
<label class="k-label">Identificador</label>
<input class="k-input" type="text" placeholder="ex. 108">
<label class="k-label">Acervo</label>
<select class="k-select">…</select>
Laravel BladeComo usar
Instalação
# Copiar arquivos CSS para resources/css/
cp kardec-tokens.css resources/css/
cp kardec-base.css resources/css/
cp kardec-components.css resources/css/
# Copiar componentes para resources/views/components/
cp blade/components/*.blade.php resources/views/components/
cp blade/layouts/app.blade.php resources/views/layouts/
# Registrar CSS no vite.config.js
input: [
'resources/css/kardec-tokens.css',
'resources/css/kardec-base.css',
'resources/css/kardec-components.css',
'resources/js/app.js',
]
Exemplo de página completa
<x-layouts.app title="Início">
<x-hero
eyebrow="Projeto Allan Kardec · UFJF"
title="Manuscritos <em>& Transcrições</em>"
subtitle="Acervo digital de documentos originais de Allan Kardec"
scroll-to="manuscritos"
>
<x-slot:search>
<x-search-box :action="route('pesquisar')" />
</x-slot:search>
<x-slot:filters>
<x-chip label="Todos" :active="true" />
<x-chip label="Cartas" value="carta" />
</x-slot:filters>
<x-slot:stats>
<x-stat number="600+" label="Manuscritos" />
<x-stat number="3" label="Acervos" />
</x-slot:stats>
</x-hero>
<x-section id="manuscritos" variant="light">
<x-section-header
tag="Acervo"
title="Manuscritos Recentes"
link-text="Ver todos"
:link-href="route('manuscritos.index')"
/>
<div class="k-ms-grid">
@foreach($manuscripts as $ms)
<x-manuscript-card
:id="$ms->identifier"
:title="$ms->title"
:acervo="$ms->acervo->name"
:href="route('manuscritos.show', $ms)"
/>
@endforeach
</div>
</x-section>
</x-layouts.app>
Laravel BladeComponentes disponíveis
| Componente | Arquivo | Descrição |
|---|---|---|
| <x-nav> | nav.blade.php | Navbar fixa com logo, links, CTA e menu mobile |
| <x-hero> | hero.blade.php | Seção hero full-screen com busca, filtros e stats |
| <x-search-box> | search-box.blade.php | Barra de busca (dark/light) com form Laravel |
| <x-section> | section.blade.php | Wrapper de seção com variantes de superfície |
| <x-section-header> | section-header.blade.php | Tag + título + link "ver todos" |
| <x-page-header> | page-header.blade.php | Header de páginas internas (não-hero) |
| <x-manuscript-card> | manuscript-card.blade.php | Card de manuscrito com imagem/placeholder |
| <x-viewer> | viewer.blade.php | Visualizador split-pane imagem + transcrição |
| <x-timeline-event> | timeline-event.blade.php | Card de evento na timeline |
| <x-bio-card> | bio-card.blade.php | Card de biografia (superfície escura) |
| <x-badge> | badge.blade.php | Tag pequena (default, gold, outline, parchment) |
| <x-chip> | chip.blade.php | Pill de filtro (dark/light, link ou button) |
| <x-stat> | stat.blade.php | Número grande + label |
| <x-footer> | footer.blade.php | Footer completo com colunas de links |
| <x-mobile-nav> | mobile-nav.blade.php | Navbar fixa bottom para mobile |