CSS Variables

Copy

:root {
  /* ── Body ── */
  --velin-body-bg:          oklch(0.99 0.003 260);
  --velin-body-color:       oklch(0.20 0.015 260);
  --velin-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --velin-body-font-size:   1rem;
  --velin-body-line-height: 1.6;

  /* ── Surfaces ── */
  --velin-surface:          oklch(1.00 0 0);
  --velin-surface-alt:      oklch(0.97 0.003 260);

  /* ── Headings ── */
  --velin-heading-color:    oklch(0.15 0.015 260);
  --velin-heading-font:     var(--velin-body-font-family);
  --velin-heading-weight:   700;

  /* ── Links ── */
  --velin-link-color:       var(--velin-primary);
  --velin-link-hover-color: var(--velin-primary-600);
  --velin-link-decoration:  underline;

  /* ── Borders ── */
  --velin-border-color:     oklch(0.88 0.005 260);
  --velin-border-width:     1px;
  --velin-border-radius:    0.5rem;

  /* ── Shadows ── */
  --velin-shadow-sm:  0 1px 2px oklch(0 0 0 / 0.05);
  --velin-shadow:     0 4px 6px oklch(0 0 0 / 0.07);
  --velin-shadow-lg:  0 10px 25px oklch(0 0 0 / 0.1);

  /* ── Focus ── */
  --velin-focus-ring-color: oklch(0.55 0.22 264 / 0.5);
  --velin-focus-ring-width: 3px;

  /* ── Transitions ── */
  --velin-transition-speed:  200ms;
  --velin-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

Copy

:root {
  --velin-primary:   oklch(0.55 0.22 264);
  --velin-secondary: oklch(0.60 0.10 250);
  --velin-success:   oklch(0.62 0.19 145);
  --velin-danger:    oklch(0.55 0.22 25);
  --velin-warning:   oklch(0.75 0.18 85);
  --velin-info:      oklch(0.65 0.15 230);
  --velin-light:     oklch(0.96 0.005 260);
  --velin-dark:      oklch(0.25 0.015 260);
  --velin-muted:     oklch(0.60 0.01 260);
}

Copy

:root {
  --velin-spacer:   1rem;
  --velin-spacer-0: 0;
  --velin-spacer-1: 0.25rem;
  --velin-spacer-2: 0.5rem;
  --velin-spacer-3: 1rem;
  --velin-spacer-4: 1.5rem;
  --velin-spacer-5: 3rem;
}

Copy

:root {
  --velin-font-sans:  'Inter', system-ui, sans-serif;
  --velin-font-serif: 'Merriweather', Georgia, serif;
  --velin-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  --velin-fs-xs:  0.75rem;
  --velin-fs-sm:  0.875rem;
  --velin-fs-base: 1rem;
  --velin-fs-lg:  1.125rem;
  --velin-fs-xl:  1.25rem;
  --velin-fs-2xl: 1.5rem;
  --velin-fs-3xl: 1.875rem;
  --velin-fs-4xl: 2.25rem;

  --velin-fw-light:    300;
  --velin-fw-normal:   400;
  --velin-fw-medium:   500;
  --velin-fw-semibold: 600;
  --velin-fw-bold:     700;
}

Copy

:root {
  /* Radius */
  --velin-radius-sm:   0.25rem;
  --velin-radius:      0.5rem;
  --velin-radius-lg:   1rem;
  --velin-radius-xl:   1.5rem;
  --velin-radius-pill: 9999px;

  /* Z-index */
  --velin-z-dropdown:  1000;
  --velin-z-sticky:    1020;
  --velin-z-fixed:     1030;
  --velin-z-backdrop:  1040;
  --velin-z-modal:     1050;
  --velin-z-popover:   1060;
  --velin-z-tooltip:   1070;
  --velin-z-toast:     1080;
}

Copy

.my-card {
  background: var(--velin-surface);
  border: var(--velin-border-width) solid var(--velin-border-color);
  border-radius: var(--velin-radius-lg);
  box-shadow: var(--velin-shadow);
  padding: var(--velin-spacer-4);
  font-family: var(--velin-font-sans);
  transition: box-shadow var(--velin-transition-speed) var(--velin-transition-easing);
}

.my-card:hover {
  box-shadow: var(--velin-shadow-lg);
}