ce-net / Design / r0012
One design.
Every ce-net page, cell screen and document links these files. Change a value once in the design.tokens cell and every page follows within five minutes. Light is the default; dark by the switch.
Put this in every page's head
<link rel="stylesheet" href="https://design.ce-net.com/v1/tokens.css"> <link rel="stylesheet" href="https://design.ce-net.com/v1/components.css"> <script src="https://design.ce-net.com/v1/theme.js"></script> <link rel="icon" href="https://design.ce-net.com/v1/logo/ce-net-favicon-light.svg" type="image/svg+xml"> <meta name="theme-color" content="#f2f2ee">
Pin a release instead of following the live set: replace /v1/ with /r/r0012/. Releases: releases.json.
Colours
--ground
--surface
--well
--raise
--panel
--ink
--ink-2
--ink-3
--line
--line-2
--hover
--press
--acc
--acc-hi
--acc-ink
--acc-soft
--live
--ok
--warn
--bad
--stage
--stage-2
--stage-ink
--stage-ink-2
--stage-line
--theme-color
Type
Planet observatory.
Geist body text, 15 px.
94,030 factories
Every token
| --ground | #f2f2ee |
| --surface | #ffffff |
| --well | #e8e8e3 |
| --raise | #f7f7f4 |
| --panel | rgba(255,255,255,.82) |
| --ink | #0d0f0d |
| --ink-2 | #5d625b |
| --ink-3 | #8a8f87 |
| --line | rgba(13,15,13,.12) |
| --line-2 | rgba(13,15,13,.2) |
| --hover | rgba(13,15,13,.04) |
| --press | rgba(13,15,13,.07) |
| --acc | #b8730a |
| --acc-hi | #d98a10 |
| --acc-ink | #ffffff |
| --acc-soft | rgba(184,115,10,.12) |
| --live | #3f8f2a |
| --ok | #3f8f2a |
| --warn | #b8730a |
| --bad | #dc2626 |
| --stage | #f2f2ee |
| --stage-2 | #ffffff |
| --stage-ink | #0d0f0d |
| --stage-ink-2 | #5d625b |
| --stage-line | rgba(13,15,13,.12) |
| --theme-color | #f2f2ee |
| --cjk | "PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif |
| --sans | Geist,Inter,system-ui,-apple-system,var(--cjk),sans-serif |
| --mono | "JetBrains Mono","Geist Mono",ui-monospace,SFMono-Regular,Menlo,var(--cjk),monospace |
| --disp | Michroma,Orbitron,system-ui,var(--cjk),sans-serif |
| --t-2xs | 9.5px |
| --t-xs | 10.5px |
| --t-sm | 12px |
| --t-md | 13px |
| --t-base | 15px |
| --t-lg | clamp(15px,1.4vw,17px) |
| --t-num | 21px |
| --t-xl | clamp(19px,2.4vw,27px) |
| --t-2xl | clamp(26px,3.4vw,40px) |
| --t-3xl | clamp(32px,4.4vw,56px) |
| --track-label | .12em |
| --track-crumb | .18em |
| --track-disp | .06em |
| --s-1 | 4px |
| --s-2 | 8px |
| --s-3 | 12px |
| --s-4 | 16px |
| --s-5 | 24px |
| --s-6 | 32px |
| --s-7 | 48px |
| --s-8 | 72px |
| --m | clamp(16px,3vw,40px) |
| --max | 1120px |
| --rail | 64px |
| --r | 3px |
| --r-sm | 2px |
| --r-pill | 2px |
| --tick | 8px |
| --blur | blur(10px) |
| --edge | 0 0 0 1px var(--line) |
| --lift | 0 18px 40px -22px rgba(13,15,13,.25) |
| --over-shadow | none |
| --ease | cubic-bezier(.2,.7,.1,1) |
| --fast | .15s |
| --mid | .25s |
| --slow | .6s |
| --logo-mark | url(https://design.ce-net.com/v1/logo/ce-net-mark-light.svg) |
| --logo-lockup | url(https://design.ce-net.com/v1/logo/ce-net-lockup-light.svg) |
| --bg | var(--ground) |
| --s1 | var(--surface) |
| --s2 | var(--well) |
| --s3 | var(--raise) |
| --dim | var(--ink-2) |
| --faint | var(--ink-3) |
| --f | var(--sans) |