:root {
  --docu-blue: #3b82f6;
  --docu-gold: #FBBF24;
  --docu-dark: #0f172a;
  --docu-base: #f1f5f9;
  --docu-radius-max: 3rem;
  --docu-radius-input: 1.5rem;
  --docu-ink: #0f172a;        /* slate-900 */
  --docu-body: #64748b;       /* slate-500 */
  --docu-muted: #94a3b8;      /* slate-400 */
}

<button class="bg-blue-600 text-white rounded-2xl font-black uppercase tracking-[0.2em] px-10 py-4 text-[10px] hover:translate-y-[-2px] hover:shadow-xl hover:shadow-blue-600/30 transition-all duration-300">
  Создать документ
</button>

<button class="bg-blue-600 text-white rounded-[2.5rem] font-black uppercase tracking-[0.3em] px-16 py-8 text-[12px] hover:scale-[1.02] hover:translate-y-[-4px] transition-all duration-500">
  Начать бесплатно
</button>

<button class="bg-[#FBBF24] text-slate-900 rounded-2xl font-black uppercase tracking-widest px-8 py-4 text-[10px] hover:bg-[#f59e0b] hover:shadow-[0_0_25px_rgba(251,191,36,0.4)] transition-all duration-300">
  Заполнить с ИИ
</button>

<button class="border-2 border-slate-200 text-slate-400 rounded-2xl font-black uppercase tracking-widest px-8 py-4 text-[10px] hover:bg-slate-50 hover:text-slate-600 transition-all duration-300">
  Отмена
</button>

<div class="bg-white border border-slate-100 rounded-[4rem] p-10 md:p-16 shadow-[0_50px_100px_-20px_rgba(15,23,42,0.05)]">
  <!-- форма -->
</div>

<div>
  <label class="text-[9px] font-black uppercase tracking-widest text-slate-400 ml-2 mb-2 block">
    Название организации
  </label>
  <input type="text" class="w-full bg-slate-50 border border-slate-100 rounded-2xl px-6 py-4 text-sm font-bold text-slate-900 focus:bg-white focus:border-blue-600 focus:ring-4 focus:ring-blue-600/10 transition-all duration-200" />
</div>

<label class="flex items-center gap-3 cursor-pointer">
  <div class="w-6 h-6 rounded-lg border-2 border-slate-200 flex items-center justify-center peer-checked:bg-blue-600 peer-checked:border-blue-600">
    <svg class="w-4 h-4 text-white hidden peer-checked:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
    </svg>
  </div>
  <span class="text-sm font-medium text-slate-600">Согласен с условиями</span>
</label>

<div class="bg-white border border-slate-100 rounded-[2.5rem] overflow-hidden">
  <table class="w-full">
    <thead class="bg-slate-50/80">
      <tr>
        <th class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 px-8 py-5 text-left">Наименование</th>
        <th class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 px-8 py-5 text-right">Сумма</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors">
        <td class="text-sm font-bold text-slate-900 px-8 py-6">Услуга</td>
        <td class="text-sm font-medium text-slate-500 px-8 py-6 text-right">10 000 руб.</td>
      </tr>
    </tbody>
    <tfoot class="bg-blue-50/30">
      <tr>
        <td class="px-8 py-6 text-sm font-bold text-slate-900">Итого</td>
        <td class="px-8 py-6 text-xl font-black text-blue-600 tracking-tighter text-right">10 000 руб.</td>
      </tr>
    </tfoot>
  </table>
</div>

<div class="bg-white border border-slate-100 rounded-[3rem] p-10 hover:-translate-y-2 hover:shadow-xl transition-all duration-500 cursor-pointer">
  <span class="docu-tag-muted mb-4 block">Категория</span>
  <h3 class="docu-h3 text-slate-900 mb-4">Заголовок карточки</h3>
  <p class="docu-body">Описание карточки с основной информацией.</p>
</div>

<div class="bg-slate-50 relative">
  <div class="pattern-light absolute inset-0 pointer-events-none"></div>
  <div class="relative z-10">
    <!-- контент -->
  </div>
</div>

.pattern-light {
  background-image: radial-gradient(#3b82f6 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.25;
}

<a href="/" class="docu-logo flex items-center gap-3">
  <svg viewBox="0 0 64 64" width="40" height="40">
    <path d="M12 16H48V48H12V16Z" fill="#3b82f6" fill-opacity="0.1"/>
    <path d="M18 24H46M18 32H46M18 40H34" stroke="#3b82f6" stroke-width="6" stroke-linecap="round"/>
    <circle cx="48" cy="40" r="6" fill="#FBBF24"/>
  </svg>
  <span class="text-xl font-black text-slate-900">docu</span><span class="text-xl font-light text-slate-400">matica</span>
</a>

1. Читай: reference/buttons.html и reference/buttons.css
2. Выбери нужный тип: btn--primary, btn--smart, btn--outline
3. Используй готовую структуру с правильными классами

/* Spacing */
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;

/* Radius */
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
--radius-3xl: 3rem;
--radius-4xl: 4rem;

/* Transitions */
--transition-base: all 0.2s ease;
--transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-arrow: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);