Photonix

Design at the Speed of Light

Design at the Speed of Light

Photonix is a quantum-inspired Design System and UI Framework that helps you craft interfaces with atomic precision and glow performance.

Photonix is a quantum-inspired Design System and UI Framework that helps you craft interfaces with atomic precision and glow performance.

Photonix gave our team one visual language from landing pages to admin tools. We stopped redrawing the same patterns every sprint.

M

Maya Chen

Northstar

Rolled out across 14 surfaces

Design systems team

The components feel production-ready instead of demo-ready. Our engineers shipped the first pass almost exactly as design handed it off.

J

Jasper Hauser

Darkroom

Cut handoff revisions by 63%

Product design lead

We replaced a patchwork of UI kits with Photonix and finally got consistency across web, iOS handoff references, and internal tooling.

A

Andrej Miholic

Gentler Streak

Unified web and mobile references

Growth product team

The templates gave us a serious starting point for marketing pages and account flows. We launched faster without the usual polish gap.

L

Lena Foster

Orbit Labs

Launch week moved up by 5 days

Founding team

Design Tokens

Quantum Theming Engine

Token-first theming that propagates color, spacing, typography, and motion across every component. Switch modes or brands instantly and keep visual integrity across the entire Photonix system.

New

Flexible foundations

Semantic tokens, nested theme scopes, and layout primitives keep large surfaces aligned without boxing the system in.

Every state precise

Contrast, elevation, and emphasis remain calibrated as components move between quiet and expressive surfaces.

Reviewable component specs

Anatomy layers, token mappings, and state coverage — all visible before a single line ships.

Button

Ready
variantsizehover

bg-brand-primary

text-primary-inverse

border-radius-md

3 tokens · 4 states · 0 overrides

NauhT
NauhT@nauht
View profile
Workspace settings
Theme preferences
Billing
Sign out
Puchen
Puchen@puchen
View profile
Workspace settings
Theme preferences
Billing
Sign out

Native Theme Switching

Toggle between Light and Dark modes instantly utilizing `data-theme` attributes mapped to underlying primitive color palettes.

Extensive Token Library

Hundreds of meticulously defined CSS variables covering dimensions, radiuses, typography scaling, and motion timings.

tokens.css
:root {
  /* Color */
  --bg-brand-primary: var(--color-blue-600);
  --text-neutral-primary: var(--color-gray-950);

  /* Spacing */
  --spacing-sm: 16px;
  --spacing-xl: 32px;

  /* Radius */
  --border-radius-xs: 20px;
  --border-radius-pill: 999px;

  /* Typography */
  --title-lg-size: 48px;
  --body-lg-line-height: 1.5;

  /* Motion */
  --motion-duration-normal: 240ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

Zero CSS Overrides

Designed for premium digital products, ensuring complete visual integrity without the need for manual `style` or `className` overrides.

Developer Handoff

Code that writes itself

Production-ready components that match design 1:1. What you design in Figma is exactly what developers build in React.

Night city
Midnight Dispatch
Contrast stays crisp on expressive surfaces.

2.4k

Mountain lake
Alpine Escape
Light, air, and open landscapes.

1.2k

UserProfile.tsx
const LIGHT_PREVIEW_IMAGE =
  "https://images.unsplash.com/photo-1768808520785-a4ce8c12c335?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
const DARK_PREVIEW_IMAGE =
  "https://images.unsplash.com/photo-1511300636408-a63a89df3482?q=80&w=3270&auto=format&fit=crop";

export function OverlayCards() {
  return (
    <Flex gap="md" wrap="wrap">
      <Card variant="overlay" w={300} h={400}>
        <CardImage
          position="fill"
          src={DARK_PREVIEW_IMAGE}
          alt="Night city"
        />
        <Box style={{ position: "absolute", top: 8, right: 8, zIndex: 2 }}>
          <IconButton
            variant="tertiary"
            size="small"
            icon={<MoreVerticalOutline />}
            aria-label="More"
          />
        </Box>
        <div style={{ flex: 1 }} />
        <CardHeader
          title="Midnight Dispatch"
          subtitle="Contrast stays crisp on expressive surfaces."
        />
        <CardFooter justify="between">
          <HStack gap="sm">
            <HStack gap="4xs" align="center">
              <PersonalOutline size={24} />
              <Text variant="title-md">2.4k</Text>
            </HStack>
          </HStack>
          <Button size="small" leadingIcon={<AddOutline />}>
            Follow
          </Button>
        </CardFooter>
      </Card>

      <Card variant="overlay" w={300} h={400}>
        <CardImage
          position="fill"
          src={LIGHT_PREVIEW_IMAGE}
          alt="Mountain lake"
        />
        <Box style={{ position: "absolute", top: 8, right: 8, zIndex: 2 }}>
          <IconButton
            variant="tertiary"
            size="small"
            icon={<MoreVerticalOutline />}
            aria-label="More"
          />
        </Box>
        <div style={{ flex: 1 }} />
        <CardHeader
          title="Alpine Escape"
          subtitle="Light, air, and open landscapes."
        />
        <CardFooter justify="between">
          <HStack gap="sm">
            <HStack gap="4xs" align="center">
              <PersonalOutline size={24} />
              <Text variant="title-md">1.2k</Text>
            </HStack>
          </HStack>
          <Button size="small" leadingIcon={<AddOutline />}>
            Follow
          </Button>
        </CardFooter>
      </Card>
    </Flex>
  );
}

Production-Ready Templates

Don't start from scratch. Use our meticulously crafted dashboard templates to ship your next app in hours, not weeks.

Dashboard Style 1
Classic top-nav dashboard layout with wide data tables and metric cards.
Dashboard
Dashboard Style 5
Modern sidebar navigation with deep hierarchy and clean content areas.
Dashboard
Modern Login
Polished sign-in screen with strong hierarchy and clear action flow.
Auth
Modern Register
Signup flow with balanced form layout and conversion-friendly structure.
Auth
Terms of Service
Comprehensive legal layout with readable hierarchy for platform terms and policies.
Legal
Modern Pricing
Tiers, feature lists, and annual billing toggle with conversion-focused copy.
Marketing
Contact Us
Support and sales contact page with structured reach-out options and form entry.
Support
Components

Everything you need to build fast

Over 70+ meticulously crafted components designed to work together perfectly.

Filters3
Status: 1
Surface
Priority
DesignNew
Motion
Tokens
Accessibility
Enterprise

Interactive Actions

Buttons, badges, and controls that respond beautifully with built-in micro-interactions and glowing states.

Alex
S
Jordan
T
+2

Identity Systems

Robust avatar and profile components that automatically handle initials, images, and grouping logic.

Token rollout

75%

Processing...

2 tasks remaining

Auto retry enabled

Feedback & Loading

Communicate system status clearly with smooth progress bars and delightful loading spinners.

Enable daily notifications

Power Forms

Accessible form inputs with built-in validation states, perfect alignment, and smooth transitions.

Build faster, design better

Join thousands of developers and designers building the future of web applications with the Photonix Design System.