Camaleo
EN · PTGitHub
// preview in
saved for every page

Cupertino

Inspired by Apple’s Human Interface Guidelines: hairlines, grouped lists and continuous corners.

Cupertino

Inspired by Apple’s Human Interface Guidelines: hairlines, grouped lists and continuous corners.

SF (Apple) / Inter

Revenue · 30 days$48.2k+12.4%vs. last month
Quarter goal
x
Family
Platform
Fonts
SF (Apple) / Inter
Radius
18px controls · 22px surfaces
Edges & depth
0.5px hairlines · grouped cells · translucent chrome
Motion
200 / 340ms

Not affiliated. This skin is inspired by Apple’s Human Interface Guidelines. Camaleo is not affiliated with Apple and ships none of its fonts, icons or trademarks.

Use it

import "@camaleo/styles/base.css";
import "@camaleo/styles/cupertino.css";

<StyleProvider styleName="cupertino">…</StyleProvider>

Fonts are not bundled. The skin asks for Inter by name, so any loader that registers that family works: next/font (below), a <link> to a font service or your own @font-face. On Apple devices the skin asks for the system font (San Francisco) first; Inter is the fallback everywhere else.

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

<html className={`${inter.variable}`}>

When to use it

Good fit

  • Web apps that sit next to iOS and macOS products
  • Settings-heavy interfaces built from grouped lists
  • Calm products where the brand works as a system tint

Think twice

  • Pixel-perfect native Apple looks: SF only shows up on Apple devices (it is not shipped), and there are no SF Symbols
  • Brands that want sharp, square geometry

Light and dark

Both modes are designed, not inverted, and pass the same contrast checks. The brand comes from the preview bar.

Weekly report

Sent every Monday at 9:00.

Monthly quota
x
Draft
light

Weekly report

Sent every Monday at 9:00.

Monthly quota
x
Draft
dark

Components in Cupertino

Real components from the library, in Cupertino, with the mode and brand from the preview bar.

Button

As it appears on your ID. We print it on invoices.

Field
Select
Checkbox
Plan
Radio group
Switch
Slider
Number field
Toggle
In reviewNewArchived
Badge
Revenue$48,250+14.2%vs. September
Stat
Uploading invoice-march.pdf
x
Progress
Storage64.2 of 100 GB
x
Meter
CPERLFMS+3
Avatar
How was your stay?
Rating
Chip
Spinner
Tooltip
Copy
Ctrl+C
Paste
Ctrl+V
Find in all files
Ctrl+Shift+F
Kbd

Scheduled maintenance on Sunday

Sign-in will be unavailable from 2:00 to 2:15 AM UTC on November 2. Your data is not affected.

Alert

Trip dates, October 2026

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Range calendar

Acme Store

Online store · created on 03/02/2025

Shown on invoices and in emails to customers.

Tabs
Checkout3 items · $54.80
  1. Cart, done
  2. Shipping
  3. Payment
  4. Review
Stepper
InvoiceStatusAmount
INV-4029Paid$340.00
INV-4028Pending$1,280.50
INV-4027Overdue$75.00
Table

Accordion
Pagination

  1. Order placed

    Order #48920, 3 items, $214.90.

  2. Payment approved

    Visa ending in 4242.

  3. Delivered

    Signed for by the front desk.

Timeline

Preview every component page in Cupertino →

Tokens

The values this skin sets, read from cupertino.css. Override any of them on a parent element to adjust it locally.

Typography
--cml-font-body-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif"Inter", system-ui, sans-serif
--cml-font-displayinheritsvar(--cml-font-body)
--cml-font-size0.9375rem0.9375rem
--cml-font-weight-control500500
--cml-font-weight-display600600
Color
--cml-surfacelight-dark(#f2f2f7, #000000)light-dark(#ffffff, #09090b)
--cml-surface-raisedlight-dark(#ffffff, #1c1c1e)light-dark(#ffffff, #18181b)
--cml-fglight-dark(#000000, #ffffff)light-dark(#09090b, #fafafa)
--cml-fg-mutedlight-dark(#636366, #aeaeb2)light-dark(#71717a, #a1a1aa)
--cml-bordervar(--cml-cu-hairline) = light-dark(#c6c6c8, #38383a)light-dark(#e4e4e7, #27272a)
--cml-border-controllight-dark(#7c7c80, #8e8e93)light-dark(#8e8e98, #71717a)
--cml-accentvar(--cml-brand-600)light-dark(var(--cml-brand-600), var(--cml-brand-400))
--cml-accent-fgvar(--cml-brand-600-fg)light-dark(var(--cml-brand-600-fg), var(--cml-brand-400-fg))
--cml-accent-textlight-dark(var(--cml-brand-700), var(--cml-brand-300))light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ringlight-dark(var(--cml-brand-600), var(--cml-brand-500))var(--cml-accent-text)
--cml-dangerlight-dark(#d70015, #ff8078)light-dark(#b42318, #f97066)
Shape & depth
--cml-border-width0.5px1px
--cml-radius-control18px8px
--cml-radius-surface22px12px
--cml-radius-popover20px10px
--cml-shadow-controlinheritsnone
--cml-shadow-surface0 16px 40px -12px light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.7))0 1px 2px rgb(0 0 0 / 0.06), 0 16px 40px -12px rgb(0 0 0 / 0.25)
--cml-focus-width3px2px
Density
--cml-control-height2.5rem2.25rem
--cml-field-height2.75rem2.375rem
--cml-surface-padding1.25rem1.5rem
--cml-gapinherits0.5rem
Motion
--cml-duration-fast200ms180ms
--cml-duration-base340ms280ms
--cml-ease-standardcubic-bezier(0.32, 0.72, 0, 1)cubic-bezier(0.22, 1, 0.36, 1)
--cml-press-translate0px0px
All 156 custom properties this skin sets
--cml-cu-elevated
light-dark(#ffffff, #2c2c2e)
--cml-cu-hairline
light-dark(#c6c6c8, #38383a)
--cml-cu-hairline-glass
light-dark(rgb(60 60 67 / 0.3), rgb(235 235 245 / 0.16))
--cml-cu-fill
light-dark(rgb(120 120 128 / 0.16), rgb(120 120 128 / 0.3))
--cml-cu-grey
light-dark(#e3e3e8, #2c2c2e)
--cml-cu-segment-track
light-dark(#dcdce1, #1c1c1e)
--cml-cu-segment
light-dark(#ffffff, #636366)
--cml-cu-zebra
light-dark(#f4f4f7, #232325)
--cml-cu-gray-ink
light-dark(#8e8e93, #636366)
--cml-cu-tinted
light-dark(var(--cml-brand-100), var(--cml-brand-900))
--cml-cu-tinted-line
color-mix(in oklab, var(--cml-accent-text) 30%, transparent)
--cml-cu-glass
light-dark(rgb(250 250 252 / 0.8), rgb(36 36 38 / 0.94))
--cml-cu-glass-pop
light-dark(rgb(250 250 252 / 0.82), rgb(36 36 38 / 0.94))
--cml-cu-glass-alert
light-dark(rgb(246 246 248 / 0.96), rgb(36 36 38 / 0.96))
--cml-cu-glass-tip
light-dark(rgb(36 36 38 / 0.9), rgb(72 72 74 / 0.9))
--cml-cu-glass-tip-solid
light-dark(rgb(36 36 38), rgb(72 72 74))
--cml-cu-glass-pop-solid
light-dark(rgb(250 250 252), rgb(36 36 38))
--cml-cu-blur
blur(24px) saturate(180%)
--cml-cu-blur-alert
blur(30px) saturate(180%)
--cml-cu-blur-tip
blur(20px) saturate(160%)
--cml-cu-edge
light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1))
--cml-cu-shadow-float
0 0 0 0.5px var(--cml-cu-edge), 0 10px 30px -8px light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.6)), 0 2px 6px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3))
--cml-cu-shadow-raised
0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.04)
--cml-cu-shadow-knob
0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16)
--cml-cu-spring
cubic-bezier(0.34, 1.32, 0.64, 1)
--cml-font-body
-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif
--cml-font-size
0.9375rem
--cml-font-size-control
0.9375rem
--cml-font-size-control-sm
0.875rem
--cml-font-size-control-lg
1.0625rem
--cml-font-size-field
0.9375rem
--cml-font-size-label
0.8125rem
--cml-font-size-help
0.8125rem
--cml-font-weight-control
500
--cml-font-weight-label
600
--cml-font-weight-display
600
--cml-font-weight-error
500
--cml-surface
light-dark(#f2f2f7, #000000)
--cml-surface-raised
light-dark(#ffffff, #1c1c1e)
--cml-fg
light-dark(#000000, #ffffff)
--cml-fg-secondary
light-dark(#3c3c43, #d1d1d6)
--cml-fg-muted
light-dark(#636366, #aeaeb2)
--cml-border
var(--cml-cu-hairline)
--cml-border-control
light-dark(#7c7c80, #8e8e93)
--cml-accent
var(--cml-brand-600)
--cml-accent-fg
var(--cml-brand-600-fg)
--cml-accent-hover
var(--cml-brand-600-hover)
--cml-accent-text
light-dark(var(--cml-brand-700), var(--cml-brand-300))
--cml-focus-ring
light-dark(var(--cml-brand-600), var(--cml-brand-500))
--cml-backdrop
light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.56))
--cml-danger
light-dark(#d70015, #ff8078)
--cml-danger-fg
light-dark(#ffffff, #000000)
--cml-success
light-dark(#187236, #30d158)
--cml-warning
light-dark(#8a4a00, #ffd60a)
--cml-info
var(--cml-accent-text)
--cml-item-highlight
var(--cml-cu-fill)
--cml-disabled-opacity
0.4
--cml-border-width
0.5px
--cml-corner-shape
squircle
--cml-radius-control
18px
--cml-radius-control-sm
15px
--cml-radius-control-lg
22px
--cml-radius-surface
22px
--cml-radius-popover
20px
--cml-radius-check
7px
--cml-radius-field
16px
--cml-radius-item
0px
--cml-shadow-surface
0 16px 40px -12px light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.7))
--cml-shadow-popover
var(--cml-cu-shadow-float)
--cml-focus-width
3px
--cml-focus-offset
2px
--cml-control-height
2.5rem
--cml-control-height-sm
2rem
--cml-control-height-lg
3.125rem
--cml-control-padding
1rem
--cml-control-padding-sm
0.75rem
--cml-control-padding-lg
1.375rem
--cml-surface-padding
1.25rem
--cml-button-solid-shadow
none
--cml-button-danger-shadow
none
--cml-button-outline-bg
var(--cml-cu-tinted)
--cml-button-outline-border
transparent
--cml-button-outline-shadow
none
--cml-button-ghost-fg
var(--cml-accent-text)
--cml-toggle-pressed-bg
var(--cml-accent)
--cml-toggle-pressed-fg
var(--cml-accent-fg)
--cml-field-height
2.75rem
--cml-field-padding
0.875rem
--cml-field-border-width
1px
--cml-field-shadow
0 0 0 0 transparent
--cml-field-focus-halo
0 0 0 0 transparent
--cml-check-size
1.375rem
--cml-check-border-width
1.5px
--cml-switch-width
51px
--cml-switch-height
31px
--cml-switch-border
0px
--cml-switch-pad
2px
--cml-switch-knob
27px
--cml-switch-knob-on
27px
--cml-switch-track
light-dark(#8a8a8e, #6c6c70)
--cml-switch-knob-bg
#ffffff
--cml-switch-knob-shadow
var(--cml-cu-shadow-knob)
--cml-switch-knob-on-shadow
var(--cml-cu-shadow-knob)
--cml-slider-track-h
4px
--cml-slider-track
light-dark(#8e8e93, #636366)
--cml-slider-thumb-w
26px
--cml-slider-thumb-h
26px
--cml-slider-thumb-border
0 solid transparent
--cml-slider-thumb-shadow
0 0 0 0.5px rgb(0 0 0 / 0.18), 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.12)
--cml-number-gap
6px
--cml-number-padding
5px
--cml-number-weight
600
--cml-number-btn-align
center
--cml-number-btn-size
44px
--cml-number-btn-block
32px
--cml-number-btn-bg
var(--cml-cu-tinted)
--cml-number-btn-radius
12px
--cml-number-divider
0 solid transparent
--cml-select-trigger-shadow
none
--cml-popover-bg
var(--cml-cu-glass)
--cml-popover-border
transparent
--cml-popover-border-width
0px
--cml-popover-padding
0px
--cml-item-height
2.625rem
--cml-item-padding
1rem
--cml-item-divider
0.5px solid var(--cml-cu-hairline-glass)
--cml-dialog-border
transparent
--cml-tabs-gap
2px
--cml-tabs-list-bg
var(--cml-cu-glass)
--cml-tabs-list-border
transparent
--cml-tabs-list-shadow
0 0 0 0.5px var(--cml-cu-edge), 0 8px 24px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6)), 0 1px 3px rgb(0 0 0 / 0.05)
--cml-tabs-list-padding
4px
--cml-tabs-list-radius
var(--cml-radius-pill)
--cml-tab-radius
var(--cml-radius-pill)
--cml-tab-active-bg
var(--cml-cu-tinted)
--cml-tab-active-fg
var(--cml-accent-text)
--cml-tab-active-shadow
none
--cml-card-border
transparent
--cml-card-shadow
none
--cml-avatar-ring
var(--cml-surface)
--cml-skeleton
light-dark(#e8e8ed, #2c2c2e)
--cml-tooltip-bg
var(--cml-cu-glass-tip)
--cml-tooltip-fg
#ffffff
--cml-scrollbar-size
8px
--cml-scrollbar-track
transparent
--cml-scrollbar-thumb
light-dark(rgb(0 0 0 / 0.38), rgb(255 255 255 / 0.38))
--cml-scrollbar-idle-opacity
0.5
--cml-duration-fast
200ms
--cml-duration-base
340ms
--cml-ease-standard
cubic-bezier(0.32, 0.72, 0, 1)
--cml-motion-distance
10px
--cml-motion-scale
0.96
--cml-press-translate
0px
--cml-cu-avatar-1
linear-gradient(180deg, var(--cml-brand-600), var(--cml-brand-700))
--cml-cu-avatar-2
linear-gradient(180deg, #27804a, #1a6337)
--cml-cu-avatar-3
linear-gradient(180deg, #a85a0c, #874505)

Same family

Other skins in the Platform family. Compare side by side →

ProgressiveA neutral installable-app look, warm and modern, without borrowing any platform.MaterialInspired by Material Design 3: tonal surfaces from one brand color and pill-shaped buttons.
Was this page helpful? · Edit this page on GitHub