# Selleo Design System

> The Selleo brand design system (selleo.com): Sofia Pro, accent #FF6D2A, 8px grid, three token layers (primitives → --s-color-* aliases → components), the selleo.com page header and footer, Tailwind and shadcn/ui themes for apps. Version 0.4.1. Every visual decision is a token lookup in the specs, not a choice.

Start with the [rules for agents](/design-system/ai/guidelines.md): they say how to tell a website page from an app and what applies to each. Everything in one file: [llms-full.txt](/llms-full.txt).

## Start

- [Rules for AI agents (website and app)](/design-system/ai/guidelines.md)
- [Everything in one file](/llms-full.txt)
- [Spec index and reading paths](/design-system/specs/README.md)
- [Token reference: the closed list of tokens](/design-system/specs/tokens/token-reference.md)
- [fonts.css](/design-system/fonts.css) · [selleo.css](/design-system/selleo.css) · [tokens.css](/design-system/tokens.css)
- [Tailwind 4 theme](/design-system/tailwind-v4.css) · [shadcn/ui theme](/design-system/shadcn.css)
- [Page header (HTML 1:1)](/design-system/partials/header.html) · [Footer (HTML 1:1)](/design-system/partials/footer.html) · [Starter page](/design-system/starter/index.html)

## Foundations

- [Accessibility](/design-system/specs/foundations/accessibility.md)
- [Color](/design-system/specs/foundations/color.md)
- [Content and tone](/design-system/specs/foundations/content.md)
- [Shadow, blur, layers](/design-system/specs/foundations/elevation.md)
- [Graphic elements](/design-system/specs/foundations/graphics.md)
- [Icons](/design-system/specs/foundations/iconography.md)
- [Photos](/design-system/specs/foundations/imagery.md)
- [Grid, viewports, container](/design-system/specs/foundations/layout-grid.md)
- [Logo](/design-system/specs/foundations/logo.md)
- [Motion](/design-system/specs/foundations/motion.md)
- [Radii](/design-system/specs/foundations/radius.md)
- [Spacing](/design-system/specs/foundations/spacing.md)
- [Typography](/design-system/specs/foundations/typography.md)

## Components

- [App header (app bar)](/design-system/specs/components/app-header.md)
- [Avatar and avatar group](/design-system/specs/components/avatar.md)
- [Button · `.s-btn`](/design-system/specs/components/button.md)
- [Card · `.s-card`](/design-system/specs/components/card.md)
- [Case study card · `.s-card.s-card--case`](/design-system/specs/components/case-card.md)
- [Checkbox](/design-system/specs/components/checkbox.md)
- [Date picker (calendar)](/design-system/specs/components/date-picker.md)
- [Footer · `.s-footer`](/design-system/specs/components/footer.md)
- [Header (top navigation) · `.s-header`](/design-system/specs/components/header.md)
- [Icon button · `.s-icon-btn`](/design-system/specs/components/icon-button.md)
- [Input · `.s-field` / `.s-input`](/design-system/specs/components/input.md)
- [Arrow link · `.s-link`](/design-system/specs/components/link.md)
- [Photo · `.s-photo`](/design-system/specs/components/photo.md)
- [Radio button](/design-system/specs/components/radio.md)
- [Search field](/design-system/specs/components/search.md)
- [Select and dropdown menu](/design-system/specs/components/select.md)
- [Sidebar (app navigation)](/design-system/specs/components/sidebar.md)
- [Stats · `.s-stats`](/design-system/specs/components/stats.md)
- [Tabs](/design-system/specs/components/tabs.md)
- [Tag / pill · `.s-tag`](/design-system/specs/components/tag.md)
- [Upload area (drag and drop)](/design-system/specs/components/upload.md)

## Patterns

- [Pattern: form in an app](/design-system/specs/patterns/app-form.md)
- [Pattern: card grid](/design-system/specs/patterns/card-grid.md)
- [Pattern: case study grid](/design-system/specs/patterns/case-grid.md)
- [Pattern: contact form](/design-system/specs/patterns/contact-form.md)
- [Pattern: dark section](/design-system/specs/patterns/dark-section.md)
- [Pattern: hero](/design-system/specs/patterns/hero.md)
- [Pattern: section order and backgrounds](/design-system/specs/patterns/page-order.md)
- [Pattern: page skeleton](/design-system/specs/patterns/page-skeleton.md)
- [Pattern: section and its rhythm](/design-system/specs/patterns/section.md)
- [Pattern: text + image (split)](/design-system/specs/patterns/split.md)

## Tools

- [AGENTS.md for a project](/design-system/agents/AGENTS.md)
- [Token audit (Node, no dependencies)](/design-system/scripts/token-audit.mjs)
- [Tokens: W3C DTCG JSON](/design-system/tokens/tokens.json)
- [ZIP for Claude and other agents](/selleo-design-system.zip) ([without photos](/selleo-design-system-no-photos.zip))

## Optional

- [Prompt: build a website page](/design-system/ai/build-prompt.md)
- [Prompt: audit a website page](/design-system/ai/audit-prompt.md)
- [Logo](/design-system/assets/logo/INDEX.md) · [Graphics](/design-system/assets/graphics/INDEX.md) · [Icons](/design-system/assets/icons/INDEX.md)