Appearance

light theme
dark theme

Custom Colors

Primary
Secondary
Tertiary

Preview

export default function App() {
  return <h1>Hello world</h1>
}
Open on CodeSandboxOpen Sandbox

Export

{
  "colors": {
    "surface1": "#ffffff",
    "surface2": "#EFEFEF",
    "surface3": "#F3F3F3",
    "clickable": "#808080",
    "base": "#323232",
    "disabled": "#C5C5C5",
    "hover": "#4D4D4D",
    "accent": "#0971F1",
    "error": "#ff453a",
    "errorSurface": "#ffeceb"
  },
  "syntax": {
    "plain": "#151515",
    "comment": {
      "color": "#999",
      "fontStyle": "italic"
    },
    "keyword": "#0971F1",
    "tag": "#d28cf6",
    "punctuation": "#3B3B3B",
    "definition": "#042d60",
    "property": "#0971F1",
    "static": "#FF453A",
    "string": "#bf5af2"
  },
  "font": {
    "body": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
    "mono": "\"Fira Mono\", \"DejaVu Sans Mono\", Menlo, Consolas, \"Liberation Mono\", Monaco, \"Lucida Console\", monospace",
    "size": "13px",
    "lineHeight": "20px"
  }
}