toni.li — Design System

1. Visual Theme & Atmosphere

Toni.li reads as a warm minimalist personal site — the kind of space that feels handcrafted rather than templated. A transparent canvas lets the browser’s default white show through, while a sand-beige card tone (rgba(198, 188, 169, 0.1)) gives groupings a faint warmth without committing to a colored background. Text sits in a desaturated warm brown (rgb(72, 71, 70)) rather than pure black, softening the reading experience and evoking aged paper.

The type stack is entirely system UI — no custom fonts loaded. This is a deliberate choice: the site trusts the user’s operating system to provide the right typeface, keeping the bundle lean and the rendering native. Built with Tailwind CSS and SvelteKit, the design feels understated and fast.

2. Color Palette & Roles

The palette is deliberately restrained — no accent color beyond the warm card tint. Hierarchy comes from contrast between rgb(72,71,70) text and the near-white background, not from color variation. Any link or interactive accent would stand out dramatically against this neutral base.

3. Typography Rules

Typeface: System UI stack — system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue. No custom fonts.

No letter-spacing, no text-transform, no weights above 400 detected. The heading scale wasn’t captured distinctly — likely matches the 16px / 24px rhythm or steps to 20–24px naturally.

Notably absent: No custom typeface, no display size above ~24px, no italic or uppercase styles.

4. Component Stylings

Tailwind’s utility classes style components inline; no CSS custom properties for components.

• Navigation — transparent background, warm brown text, hairline bottom border in rgb(229,231,235)
• List groups — rgba(198,188,169,0.1) warm-tinted background, subtle visual grouping without hard borders
• Buttons/inputs — inherit system UI styling; likely minimal custom treatment
• Links — full-width 16px, no underline override evident; blend into running text

5. Layout Principles

• Two breakpoints: 640px and 768px — Tailwind’s sm and md breakpoints
• Single-column centered layout likely at all sizes; content width constrained to ~365px on mobile contexts
• 64px gap / padding values used for section spacing
• 2px gap for tight inline groupings
• Padding-first layout model typical of Tailwind compositions

6. Depth & Elevation

No shadows. No border-radius detected. Depth is achieved through:

1. The warm card tint — rgba(198,188,169,0.1) is barely perceptible, acting as a gentle grouping layer
2. Border hairlines — rgb(229,231,235) single-pixel dividers define separation without visual weight
3. Typographic rhythm — consistent 1.5× line height creates vertical breathing room that reads as spaciousness

7. Do’s and Don’ts

Do:

• Use rgb(72,71,70) for all text — never pure black
• Use system fonts; the lean load time is part of the brand
• Keep all type at 16px / 24px line height for reading comfort
• Use hairline borders (rgb(229,231,235)) as the only visual separator
• Apply the warm tint sparingly — one grouping layer per view

Don’t:

• Load a custom typeface — it breaks the system-native aesthetic
• Introduce color accents without considered intent; this palette is silent
• Use font-weight: 700 or bold in running text
• Add shadows or elevation layers — the design is deliberately flat
• Use uppercase or tracked text for labels

8. Responsive Behavior

At all sizes, the type scale remains 16px — no responsive font scaling detected.

9. Agent Prompt Guide

“Design in the style of toni.li: transparent/white canvas, all text in warm desaturated brown #484746, system UI font stack at 16px/24px line height, weight 400 throughout, warm card groupings at 10% rgba(198,188,169), hairline borders in #e5e7eb, no shadows, no custom typeface, no accent colors — minimal, personal, native-feeling.”

Generated by Sparkbites — extracted from live CSS analysis