Corpo de artigo — parágrafo com --font-size-body (15px) e line-height 27px.
Não: #fff, rgba(...) em componentes
Sim: var(--*) de tokens.css
DESIGNSYSTEM
Contrato visual alinhado à produção: tokens, componentes, padrões e estados reais do site em uma vitrine única.
Anti-patterns
Desvios comuns que quebram o contrato visual. Consulte docs/BUG_REGISTRY.md antes de refatorar CSS.
Tracker: docs/design/AI_DS_CLOSURE_PLAN.md (Fase A–E)
Não: {--spacing-md}
Sim: var(--spacing-md)
Não: <button class="btn"> ad hoc
Sim: Button.astro
Não: PostCard no arquivo denso /posts
Sim: PostListItem na list; PostCard no grid
Não: badge dominante para metadata
Sim: Badge variant="tag"
Não: HTML de artigo inventado na página
Sim: pipeline + classes post-content-wrapper
Tokens & tipografia
Cores, tipografia e espaçamento usados no site. Tipografia mostra classes de produção; tokens Pixso ficam como referência.
Produção: styles/tokens.css, variables.css, post-content.css
Accentvar(--accent)
Secondaryvar(--accent-secondary)
Bordervar(--border)
Surfacevar(--bg-secondary)
Canvasvar(--bg-primary)
Textvar(--text-primary)
Últimos Posts
.section-title — 12px mono (eyebrow)Título de post no detalhe do artigo
.post-title-main — 1.85rem / boldTítulo em PostCard ou ProjectCard
.card-title — clamp(1.25rem, 2.5vw, 1.5rem).post-content-wrapper — --font-size-body, --line-height-body, --post-text-inset; h2 1.5rem, h3 1.375rem.breadcrumb-metadata — 13px mono.hero-greeting 0.875rem · .hero-title clamp(3rem, 8vw, 5rem) · .hero-description clamp(1rem, 2vw, 1.25rem)Tokens brutos (Pixso — nem todos mapeiam 1:1 para o blog)
--font-size-h140px — títulos de podcast, não posts--font-size-h318px — token reservado; H3 de artigo usa 1.375rem--font-size-body15px — cards, posts, UI--font-size-metadata13px — datas, contadores, badges--font-size-eyebrow12px — SectionHeader e labels--font-family-primarySpace Grotesk ·--font-family-monoSource Code Pro
xs
4px2xs
6pxsm
12pxmd
16pxmd-lg
20pxlg
24pxxl
32pxxl-2xl
40px2xl
48px3xl
64px--post-text-inset— recuo horizontal do corpo (--spacing-md, 16px)--post-heading-gap-before— ar acima de títulos (--spacing-xl-2xl)--post-heading-gap-after— ar abaixo de títulos (--spacing-md-lg)- Corpo:
--font-size-body(15px) +--line-height-body(27px) - Títulos h2/h3/h4: escala em
remnopost-content.css(não mapeiam 1:1 aos tokens Pixso de UI) - Blocos (code, card, callout):
margin-inline: var(--post-text-inset)
Card
var(--card-shadow)Card hover
var(--card-shadow-hover)Border
var(--border-width-small)--border-radius-none(0) — padrão UI: cards, badges, botões, callouts--radius-lg(8px) — exceção markdown: blockquote e prompt blocks- Evitar
--border-radius-sm/md/lglegados (removidos devariables.css)
Marca & Aplicação do Logotipo
Especificações do logotipo dairan.dev no estilo Neo-Brutalista Bauhaus. Tipografia Source Code Pro (peso 900) e tokens de cor sincronizados com o tema.
Guia completo: docs/design/BRAND_LOGO_GUIDELINES.md | Assets: public/images/brand/
Horizontal (Logotipo Principal)
Light Mode
Dark Mode
Uso: Headers, assinaturas de e-mail e cabeçalhos oficiais.
Tokens: var(--text-primary) + var(--accent)
Ícone / Símbolo (24px)
Light (24px)
Dark (24px)
Uso: Favicon de abas, atalhos, botões compactos e micro-ícones de UI.
Grid: 24×24px | Escalas canônicas: 16px, 24px, 32px, 48px.
Vertical (Stacked Badge)
Light Mode
Dark Mode
Uso: Splash screens, cartões, vinhetas em vídeo e crachás.
Estrutura: Squircle badge com raio 14px + wordmark alinhado.
App Icon / Avatar (Squircle)
Light Badge
Dark Badge
Uso: Apple Touch Icon, perfis de redes sociais e atalhos móveis.
Formato: SVG e PNG 512×512px com squircle contínuo.
Cards
Containers simples, com sombra dura e leitura rápida para listas de posts, projetos e episódios.
Produção: components/ui/Card.astro — prop href opcional (interativo vs estático)
Static
InteractiveCard Estatico
Usado para exibir informações que não são clicáveis, como notas ou estatísticas.
Card Interativo
O card como link possui efeito de elevação Neo-Brutalista e cursor pointer.
Badges & Tags
Variantes do componente Badge. Tags de post usam variant="tag" na listagem e no detalhe.
Produção: components/ui/Badge.astro — variant (tag para metadata de post)
TecnologiaNovoPreviewPost list tag
Post listing
Grid na home (destaque com tilt) e list no arquivo — mesma família de metadados, variantes distintas.
Produção: grid → PostCard.astro (descriptionSource); list → PostListItem.astro
Editorial section
Bloco recorrente na home: SectionHeader + conteúdo + link CTA opcional (posts, podcast, projetos).
Produção: components/ui/SectionHeader.astro — title, icon, level, link
Post detail
Layout de artigo com sidebar sticky (TOC), breadcrumb e tags no header — espelha /post/[slug]. Recuo e ritmo vertical: tokens --post-text-inset e --post-heading-gap-* em post-content.css.
Produção: Breadcrumb.astro, TableOfContents.astro, classes post-content-wrapper
Harness Engineering: contexto, validação e menos improviso
Parágrafo de demonstração com tipografia de leitura. O conteúdo real vem do pipeline Markdown (callouts, code blocks, Mermaid).
Contexto do problema
Seção ancorada pelo TableOfContents na sidebar.
Search & empty states
Campo de busca do arquivo /posts e feedback quando nenhum resultado corresponde ao filtro.
Produção: styles/posts.css — posts-search, posts-no-results
Nenhum post encontrado para xyz-inexistente
Page Components
Blocos reutilizáveis fora do fluxo de post. TOC completo está em Post detail.
Produção: ProjectCard.astro, PodcastEpisodeActions.astro
Últimos Posts
Ver todos →Markdown content
Callouts e code blocks gerados pelo pipeline Markdown — classes de post-content.css e callouts.css.
Produção: pipeline Markdown + callouts.css; copy via lib/ui/code-copy.ts
Note. Contexto ou referência sem urgência.
Tip. Atalho ou boa prática.
Warning. Cuidado ao aplicar em produção.
plain fence without languageconst answer = 42;ScrollAnimate
Wrapper declarativo usado em home, posts, projetos e podcast. Role a página para ver os exemplos abaixo.
Produção: components/ScrollAnimate.astro — type, delay
Entrada vertical padrão para cards e listas.
Cabeçalhos de seção e campos de busca.
Sidebar e TOC em posts.
Grids de projetos e episódios.
Skeleton & loading
Placeholders brutais enquanto posts ou cards carregam via API.
Produção: styles/components/loading.css — .spinner, .post-card-skeleton
Carregando posts...
App States
Peças que aparecem no contorno do app ou em estados especiais.
Produção: components/ErrorPage.astro — rotas 4xx/5xx
404
Pagina nao encontrada
Exemplo compacto do estado de erro usado nas rotas 400, 401, 403, 404 e 500.
Voltar para homeShell & Backgrounds
Contorno do app e assets R2. Header/Footer abaixo são previews isolados — esta página já renderiza ambos via BaseLayout.
Produção: layouts/BaseLayout.astro, Header.astro, Footer.astro, R2BlogHeroImage.astro
R2 / hero
homepage-hero-v2.webpPreview local garantidoR2 / section
Background sectionSlot de conteúdo sobre asset remoto.
Media & Podcast
Feed estilo app de podcast: capa + metadados + play na linha; destaque com ações completas.
Produção: podcast/PodcastHero.astro, PodcastEpisodeCard.astro, PodcastEpisodeActions.astro
Spec-Driven Development: Desenvolvendo com IA sem Perder o Controle
Neste episodio, discutimos o conceito de Spec-Driven Development na pratica: como escrever especificacoes claras antes do codigo permite que agentes de IA trabalhem com autonomia, respeitando contratos de API, testes au…
