s
sloth Brand Book
DESIGN BLUEPRINT · v1.0

The Sloth Mint
design system.

A friendly, technical brand book inspired by Unsloth Studio. Mint green energy on clean off-white, anchored by bold black accents. Every token, component, and pattern you need to build a fast, modern AI/ML product.

#22D88F
faster training
01

Foundations

Logomark

s
sloth

Mint disk + wordmark. Always pair with at least 8px of clearspace.

Voice

  • + Friendly, technical, plain-spoken
  • + Numbers over adjectives ("2× faster", not "blazing")
  • + Sentence case, never SHOUTING
  • Avoid jargon-as-drama, hype, FOMO

Design principles

  • Content first. Chrome second.
  • Mint accents do the heavy lifting.
  • Generous whitespace, soft shadows.
  • Mono for numbers, sans for prose.
02

Color system

Mint scale (primary)

50
#E8FBF2
100
#C7F0DE
200
#9EE6C5
300
#5EE0A8
400 ★
#22D88F
500
#0FA968
600
#0B8954
700
#076B41
800
#054E2F

Neutrals

White
#FFFFFF
Cloud
#F7F8FA
Border
#E5E7EB
Slate 400
#94A3B8
Slate Ink
#475569
Carbon
#0A0A0A

Semantic

Success
#22D88F
Warning
#F59E0B
Danger
#EF4444
Info
#60A5FA

Category accents

Violet
#A78BFA
Pink
#F472B6
Orange
#FB923C
Teal
#14B8A6
03

Typography

Display · 72 / 0.95 / -0.03em / 800
Train smarter.
H1 · 48 / 1.05 / -0.03em / 700
Configure your training run.
H2 · 30 / 1.15 / -0.02em / 700
Build something delightful.
H3 · 20 / 1.3 / -0.01em / 700
Real-time observability for every layer.
Lead · 18 / 1.55 / 0 / 400
A friendly intro paragraph that sits below a hero headline and explains the value in plain language.
Body · 15 / 1.55 / 0 / 400
Standard body copy. Most page content sits at this size. Generous line height keeps long passages readable.
Caption · 12 / 1.4 / 0.04em / 500 · uppercase
Section label · metadata · table headers
Mono · 13 / 1.5 / 0 / 500
learning_rate = 5e-5 · steps = 200 · qwen3.5-4b

Weights

Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800
04

Tokens · spacing, radius, shadow

Spacing

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px

Radius

2 · sm
6 · md
8 · lg
12 · xl
16 · 2xl
∞ · pill

Shadow

sm-soft
card
lift
05

Components

Buttons

Form controls

Token must start with hf_.

Precision

Advanced

Send telemetry

Anonymous training metrics.

200

Total optimizer steps. Use 0 to run by epochs.

Dropdown menus

Badges & tags

Active Beta Deprecated New Pro Draft RUNNING LIVE v1.2.0 qwen3.5-4b

Avatars

JR
DK
AL
MP
SL
JR
DK
AL
+4
DK

Cards

KPI cards

Tokens / sec

2,412 ▲ 12%

VRAM used

14.2 GB ▲ 4%

Active runs

3 ▲ 1

2 LoRA · 1 QLoRA

Cost saved

$1,240

vs FA2 baseline · this month

Feature cards

Datasets

Import from Hugging Face, CSV, or JSON. Auto-format prompts and labels.

Parameters

Sane defaults for LoRA, QLoRA, full FT. Override anything from the sidebar.

Observability

Loss, throughput, VRAM. Real-time charts that don't lag.

Complex card · training run

RUNNING run #482

qwen3.5-4b · alpaca-cleaned

Started 14m ago · 7.5k / 12k steps · ETA 9m

Loss

1.04

Tokens / sec

2,412

VRAM

14.2 GB

Learning rate

5e-5

62%7,520 / 12,000

Pricing cards

Free

For tinkering and learning.

$0 / month
  • 1 GPU, up to 7B
  • Open-source kernels
  • Community support
MOST POPULAR

Pro

For serious fine-tuners.

$49 / month
  • Up to 8 GPUs
  • 2.5× faster training
  • Priority support
  • Enhanced MultiGPU

Enterprise

For production training at scale.

Custom
  • Multi-node, 30× faster
  • +30% accuracy
  • Dedicated support

Profile card

DK

Daniel Kim

Staff ML Engineer · sloth-team

Admin ML

Tables

Data table

Training runs

42
Run Model Status Loss Tok/s Owner Updated
#482 qwen3.5-4b RUNNING 1.04 2,412
JR
Jon R.
14m ago
#481 llama-3-8b DONE 0.87 1,890
DK
Daniel K.
2h ago
#480 gemma-4-2b PAUSED 1.22 3,104
AL
Alex L.
5h ago
#479 mistral-7b FAILED
MP
Maya P.
1d ago
#478 qwen3-1.5b DRAFT
JR
Jon R.
2d ago

Showing 1–5 of 42

Compact / striped

HyperparameterDefaultCurrentRange
learning_rate2e-45e-51e-6 → 1e-3
batch_size8161 → 128
max_steps1002000 → 100000
lora_rank16321 → 256
warmup_ratio0.030.050 → 0.5

Alerts & banners

Training complete.

qwen3.5-4b finished after 14m 28s. Final loss 0.87.

VRAM approaching limit.

14.2 / 16 GB used. Consider enabling gradient checkpointing.

Run #479 failed.

CUDA out of memory at step 312. View logs for stack trace.

New model available.

qwen3.6 dropped today. Drop-in compatible with your current config.

PRO

Unlock multi-GPU training and 2.5× speedups.

Tabs

Underline

Pill (segmented)

Chip filter

Modal / dialog

Start training run?

qwen3.5-4b on alpaca-cleaned. Estimated 14 minutes on your current GPU.

$ unsloth train --model qwen3.5-4b --steps 200 --lr 5e-5

Toasts

Run started

#482 · qwen3.5-4b

!

Checkpoint saved

step-7000.safetensors · 2.1 GB

Tooltips

Hover me
Tooltip on top
With shortcut
Save run ⌘S
Mint info
Recommended

Progress & loaders

Linear

Step 7,520 / 12,00062%
Download28%
VRAM89%

Circular

62%

Training

7,520 / 12,000 steps

ETA 9m 22s

Skeleton

Code & terminal

train.py PY
from unsloth import FastLanguageModel

model, tokenizer = FastLanguageModel.from_pretrained(
    model_name = "unsloth/qwen3.5-4b",
    max_seq_length = 2048,
    load_in_4bit = True,
)

trainer.train()  # 2× faster, 50% less VRAM
● ~/sloth $ zsh
$ unsloth train --model qwen3.5-4b
  ✓ Loaded base model (4.0B params)
  ✓ Mounted dataset alpaca-cleaned (52,002 rows)
  ⚡ Starting LoRA fine-tune...

  step    loss    tok/s   vram
  ────    ────    ─────   ────
  0500    1.42    2,310   12.1G
  1000    1.21    2,398   13.8G
  7520    1.04    2,412   14.2G ← live

Charts

Throughput by model

tokens / sec

7d
1.5b3b4b7b8b13b

Training loss

run #482

▼ 0.38

VRAM allocation

  • Weights 9.2G
  • Optimizer 3.2G
  • Activations 1.8G

Empty state

No runs yet

Kick off your first training run by choosing a model and a dataset. We'll keep you posted.

Breadcrumbs & pagination

06

Patterns · app shell

Dashboard

Good afternoon, Jon

Tokens / sec

2,412

Active runs

3

Saved

$1,240

Recent activity

07

Usage · do & don't

DO
  • Use Mint 400 for one primary action per view.
  • Pair mint with carbon for high contrast.
  • Keep cards on white, page on cloud.
  • Use mono font for numbers, code, IDs.
DON'T
  • Don't put white text on mint 400 (insufficient contrast).
  • Don't use mint as a body text color.
  • Don't stack more than one mint CTA per fold.
  • Don't apply heavy shadows — keep it subtle.
08

Accessibility

Contrast ratios against white background. WCAG AA target ≥ 4.5 for body text, ≥ 3 for UI / large text.

ForegroundBackgroundContrastUse
Carbon #0A0A0AWhite19.8 ✓Body, headings
Slate Ink #475569White8.0 ✓Secondary text
Deep Mint #0FA968White4.7 ✓Mint links, labels
Sloth Mint #22D88FWhite2.3 △UI only, ≥ 18pt large text on white
Carbon #0A0A0ASloth Mint8.6 ✓Primary CTA (carbon-on-mint)