Design System
Components
Animations
Production Ready
Arkkan Design System

We Create
Experiences
That Breathe

A fusion of precision engineering and emotional design — where Antigravity's systematic rigor meets Arkkhe's warm, cinematic elegance.

Scroll
02 — Typography

Type Scale & Hierarchy

Font families: Aventa (display), Satoshi (body), Orbitron (accents/data), Google Sans Code (mono). Loaded via local @font-face + Google Fonts CDN.

H1 — Display
Built with Intent
AventaLight · 300 · clamp(3rem, 6vw, 5.5rem) · 1.02 · -0.03em · none
H2 — Section Title
Made to Be Felt
AventaLight · 300 · clamp(2.4rem, 4.5vw, 4rem) · 1.05 · -0.02em · none
H3 — Subsection
The Next Generation Platform
Satoshi · 500 · clamp(1.8rem, 3.5vw, 2.8rem) · 1.1 · -0.01em · none
H4 — Feature Title
Refined Process
Satoshi · 500 · clamp(1.4rem, 2.5vw, 2rem) · 1.15 · -0.005em · none
H5
Component Label
Satoshi · 600 · clamp(1.1rem, 1.8vw, 1.5rem)
H6
Card Heading
Satoshi · 600 · clamp(0.95rem, 1.4vw, 1.2rem)
Body Large
Every detail is shaped to resonate with purpose and intent.
Satoshi · 400 · 1.1rem · 1.7 · 0
Body
Because lasting experiences don't happen by chance — they're shaped with purpose.
Satoshi · 400 · 0.95rem · 1.65 · 0
Body Small
Real-time tracking with detailed dashboards and KPIs for measurable results.
Satoshi · 400 · 0.82rem · 1.6 · 0
Caption
19 de mai. de 2026 · Produto
Satoshi · 500 · 0.72rem · 0.04em
Label
In-house Methodology
Orbitron · 600 · 0.62rem · 0.18em · uppercase
Helper
Enter a valid email address
Satoshi · 400 · 0.7rem · 1.5
03 — Color System

Palette & Semantics

Arkkhe's warm amber tones fused with Antigravity's precise neutral scale. Every color has a defined semantic role and contrast intent.

Primary & Accent

Aa
Orange Primary
HEX #ff8400
RGB 255, 132, 0
HSL 31°, 100%, 50%
Primary / CTA
Aa
Orange Glow
HEX #ff6b1a
RGB 255, 107, 26
HSL 21°, 100%, 55%
Accent / Glow
Aa
Blue 600
HEX #3279F9
RGB 50, 121, 249
HSL 219°, 95%, 59%
Secondary / Info
Aa
Red Error
HEX #FF4641
RGB 255, 70, 65
HSL 2°, 100%, 63%
Error / Danger
Aa
Green Success
HEX #22c55e
RGB 34, 197, 94
HSL 142°, 71%, 45%
Success

Neutral Scale (Antigravity)

Grey 0
HEX #FFFFFF
Surface Light
Grey 10
HEX #F8F9FC
Container
Grey 50
HEX #E6EAF0
Border Light
Aa
Grey 800
HEX #45474D
Text Muted
Aa
Grey 1000
HEX #212226
Surface Dark
Aa
Grey 1200
HEX #121317
Background

Arkkhe Warm Tones

Cream
HEX #FAF7F2
Light Background
Muted
HEX #f5f0eb
Text Primary
Card BG
rgba(255,255,255,0.03)
Card Surface
Aa
Dark
HEX #0a0a0a
Deep Surface

Gradients

Orange → Glow → Red
Orange → Blue
Fade to Black
04 — UI Components

Interactive Building Blocks

Every component features hover animations, glow effects, and smooth state transitions.

Buttons

View Projects
Learn More

Inputs

We'll never share your email.
This field is required.

Cards

01
layers
∞scale
Refined Process
A proprietary methodology to scale brands with speed and confidence.
In-house methodology
02
grid_view
100%
Auditable Results
Real-time tracking with detailed dashboards and KPIs.
Real-time data
03
local_fire_department
+24/7
ROI-First
Strategies built around ROI, LTV, and a sustainable CAC.
Measurable ROI

Badges

Primary Secondary Success Error Neutral ● Live New Feature

Tooltips

I'm a tooltip!
Click to proceed →
Info
More details here

Modal

Navbar

Arkkan
Produto Casos de uso Blog
05 — Icons

Material Symbols & Lucide

Using Material Symbols (outlined, variable weight/fill) as primary icon set, with Lucide SVGs from Arkkhe for specialized UI elements.

codecode
terminalterminal
sparkspark
mergemerge
check_circlecheck_circle
deployed_codedeployed_code
searchsearch
downloaddownload
play_arrowplay_arrow
keyboard_arrow_rightarrow_right
layerslayers
grid_viewgrid_view
local_fire_departmentfire
menumenu
closeclose
dark_modedark_mode
settingssettings
folderfolder
commitcommit
device_hubdevice_hub
06 — Animations

Motion & Micro-interactions

From scroll-triggered reveals to hover micro-animations — every motion is crafted with custom easing curves inspired by both Antigravity and Arkkhe.

Entrance
Fade Up
Attention
Pulse
Entrance
Bounce
Loading
Spin
Ambient
Float
Emphasis
Glow
Transition
Scale
Motion
Slide
Loading
Shimmer
Sequence
Stagger

Easing Curves

ease-out-quint
cubic-bezier(.23, 1, .32, 1)
Scroll reveals, general transitions
ease-out-expo
cubic-bezier(.19, 1, .22, 1)
Slider motion, fast exits
ease-out-back
cubic-bezier(.34, 1.85, .64, 1)
Modals, bouncy entrances
ease-in-out-quart
cubic-bezier(.77, 0, .175, 1)
Page transitions, morphs