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 trackingh2: 16px, weight 400 — remarkably flat, used as subtitle/labelh3: 14px, weight 500 — component category headersbody/a: 16px, weight 400p: 14px, weight 400button: 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
