# tailark.com — Design System

## 1. Visual Theme & Atmosphere

Tailark is a Tailwind CSS component and block library — and its design embodies the Tailwind philosophy with precision. The interface is pure white, system-font-based, and relies almost entirely on structural clarity rather than visual decoration. The shadow system is state-of-the-art, using `oklab()` color space for perceptually accurate shadows — a technical detail that reveals the site is built by people who think deeply about visual quality. The near-absence of color means the components themselves are the content; the site is a neutral gallery for templates.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(255,255,255)` | Pure white background |
| Card surface | `rgb(255,255,255)` | Raised components |
| Accent surface | `rgb(183,203,215)` | Decorative inset-ring element |
| Black contrast | `rgb(0,0,0)` | Dark image/video backgrounds |
| Text primary | `lab(2.51107 0.242703 -0.886115)` ≈ near-black | Primary text — expressed in Lab color space |
| Text muted | `oklab(0.141... / 0.75)` | Secondary navigation text |
| Focus: indigo | Derived from `oklab(0.58499 0.0288518 -0.231183)` | Focus ring color |

No accent brand color beyond structural grays. The `oklab`/`lab` color usage is a Next.js / modern CSS signal — Tailwind v4 territory.

## 3. Typography Rules

System sans-serif exclusively — `ui-sans-serif, system-ui`. No custom typeface loaded at all.

- `h1`: 30px, weight 500, −0.75px tracking
- `h2`: 16px, weight 400 — remarkably flat, used as subtitle/label
- `h3`: 14px, weight 500 — component category headers
- `body/a`: 16px, weight 400
- `p`: 14px, weight 400
- `button`: 14px, weight 500

The flatness of the hierarchy (h1 at 30px, h2 at 16px) reflects a component library where multiple demo contexts must coexist without visual domination.

## 4. Component Stylings

Extensive shadow system using `oklab()` — perceptually uniform shadows. Radii: 6, 8, 10, 12, 16px — a complete Tailwind-like scale. Ring/border combined with drop shadow approach: `oklab(0 0 0 / 0.075) 0px 0px 0px 1px` (ring) plus drop shadow. No custom border colors; borders expressed through shadow rings.

## 5. Layout Principles

No explicit breakpoints detected — Next.js with Tailwind handles responsive via utility classes. Footer has `64px` bottom padding. No grid gaps defined; all layout is utility-class-based in the HTML.

## 6. Depth & Elevation

The most sophisticated shadow system in this set: 25+ shadow variants using `oklab()`. Each component type has specific color-tinted shadows (blue-tinted shadows for blue components, green-tinted for green ones). The standard card shadow: `1px ring + 0px 1px 3px drop shadow` — feather-light.

## 7. Do's and Don'ts

**Do:** Use `oklab()`/`oklch()` for shadows and borders to match the quality bar. Keep backgrounds pure white — the components are the content. Use system fonts to avoid interfering with component demonstrations.

**Don't:** Add custom brand colors — this is a neutral component gallery. Don't use heavy shadows. Don't introduce custom typefaces.

## 8. Responsive Behavior

Tailwind utility-based responsive — no explicit CSS breakpoints in the extracted data. Standard Tailwind breakpoints (sm: 640, md: 768, lg: 1024, xl: 1280) almost certainly apply.

## 9. Agent Prompt Guide

> "Design in the style of tailark.com: pure white canvas, system sans-serif, minimal weight-500 heading at 30px with negative tracking, ultra-light oklab shadows, 6–16px Tailwind radius scale, no brand color, neutral gallery presentation for component libraries."

*Generated by Sparkbites — extracted from live CSS analysis*