3squaredcircles/panora repository overview

Visit https://docs.3squaredcircles.com⁠ for a deep dive into configuration.

Feedback welcomed at https://www.linkedin.com/company/3-squared-circles/⁠

⁠3SC Panora

Your Automated Design-to-Code Pipeline.

3SC Panora is a design token automation tool that connects directly to your team's design platform (like Figma, Sketch, or Adobe XD), extracts design decisions as structured data, and transforms them into production-ready code for any target platform (Android, iOS, or Web).

Panora eliminates the manual, error-prone process of translating design specifications into code. It creates a single source of truth for your UI, ensuring brand consistency, accelerating development, and enabling seamless updates from design to production.

⁠A Note on the Name

"Panora" is derived from panorama, reflecting the tool's ability to provide a complete, unified view of your entire design system and apply it across all your digital products.

---

⁠For the Designer

As a designer, you want to ensure your vision is implemented with pixel-perfect accuracy. Panora makes your design system the single source of truth for the development team.

Panora bridges the gap between your design tool and the final product:

• "How can I be sure the developers are using the exact hex code for our primary brand color?"
• "What if I need to update our standard button padding? How can I push that change to all our apps without manual hand-offs?"
• "How do we stop tiny inconsistencies from creeping into our products over time?"

⁠Key Business Values:

• Enforce Brand Consistency: By automating the flow of design tokens, Panora ensures that every button, color, and font style in every application is perfectly aligned with your design system.
• Accelerate Design Updates: Update a color or font in your design tool, and Panora's automated pipeline will propagate that change into the codebase, ready for the next build.
• Single Source of Truth: Your design platform becomes the definitive source of truth for your UI. What you see in Figma is what you get in the app.

---

⁠For the Engineer

As a developer, you want to focus on building features, not manually transcribing style guides. Panora provides ready-to-use, type-safe design tokens directly in your native code format.

Panora is the build tool for your design system.

⁠Key Technical Values:

• Automate UI Boilerplate: Stop hardcoding hex values and font sizes. Panora generates native code (Colors.kt, _variables.scss, etc.) that you can import and use directly.
• Type-Safe and Discoverable: Generated tokens are strongly typed, making them easy to discover with autocompletion and preventing typos.
• Multi-Platform Support: Define your design system once and use Panora to generate themes and styles for Android (Jetpack Compose), iOS (SwiftUI), and Web (CSS, Tailwind, etc.).
• GitOps Workflow: Panora commits the generated tokens back to your repository, creating a version-controlled, auditable history of your design system's evolution.

---

⁠For the Platform Engineer (DevOps, SRE)

As an operator, you need tools that are secure, automatable, and consistent. Panora is a containerized, self-hosted application designed for safe and seamless integration into any CI/CD pipeline.

⁠Execution Modes:

• execute The primary CI mode. It connects to the design platform, extracts tokens, generates platform-specific code, and commits the results back to the repository.
• serve-docs: Starts a local web server to serve this documentation.

⁠Produced Artifacts

Verifying Image Signatures All published images are signed with Cosign. To verify:

Install cosign: https://docs.sigstore.dev/cosign/system_config/installation/⁠ Download our public key: curl -O https://www.3squaredsquaredcircles.com/keys/3squaredcircles.pub⁠ Verify: cosign verify --key 3squaredcircles.pub 3squaredcircles/panora:latest