Root unofficial community
All Design Assets
in One Place
Download original SVG icons, ready-to-use HTML/CSS buttons, and styles. Everything you need for your ROOT project, ready for immediate use.
ROOT CommunityROOT CommunityDownload original SVG icons, ready-to-use HTML/CSS buttons, and styles. Everything you need for your ROOT project, ready for immediate use.
Download original ROOT logo variants in transparent PNG or vector SVG formats.
Download All PNGs (.ZIP)Invite button to your ROOT community!
Download All (.ZIP)ROOT's colour palette
Main
#0d1521Secondary
#161e2aText
#ecececOnline
#a8ff5dOffline
#4f5c6fMentioned
#251721Idle
#ea913eIcons
#9ea1a6Settings
#3b6af9Delete
#EF4444Error
#7c2b2eSudo
#8859f2The core font of the ROOT brand is Gotham Bold. It brings clarity, modern aesthetic, and strong impact.
Get the font hereBody text and paragraphs. Gotham Bold ensures every word stands out with confidence and legibility, even at smaller sizes.
Size: 16px | Weight: BoldExplore, copy SVG code, or download our official system icons.
Download All SVGs (.ZIP)Integrate ROOT design components directly into your own Next.js or React applications.
npm install "@jetomit.bio/components"Add this import to your application's entry file (e.g., layout.tsx or _app.tsx):
import '@jetomit.bio/components/styles.css';Configure Tailwind CSS depending on your version:
globals.css):@source "../node_modules/@jetomit.bio/components/dist/**/*.{js,mjs}";tailwind.config.js):module.exports = {
presets: [
require('@jetomit.bio/components/tailwind.config.js')
],
content: [
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@jetomit.bio/components/dist/**/*.{js,mjs,ts,tsx}"
]
}Here is a simple example of how to import and render a button with an icon and a glassmorphic card:
'use client';
import { RootButton, RootCard, RootIcon } from '@jetomit.bio/components';
export default function Demo() {
return (
<div className="space-y-6 p-6">
<RootCard
title="Server Instance"
description="Manage root system instances."
cardStatus="online"
/>
<RootButton variant="primary">
<RootIcon name="Rocket" size={16} className="mr-2" />
Start Server
</RootButton>
</div>
);
}