Skip to content

Integrate design tokens from @policyengine/design-system #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
policyengine wants to merge 1 commit into from
Closed

Integrate design tokens from @policyengine/design-system #14

policyengine wants to merge 1 commit into from

Conversation

@policyengine
Copy link

@policyengine policyengine bot commented Dec 18, 2025

Summary

Integrates the design system tokens from @policyengine/design-system (v0.1.0) into the API documentation site. This aligns the docs styling with PolicyEngine's design system used in policyengine-app-v2.

Changes

Design Token Integration

  • Added @policyengine/design-system package (published 19 hours ago)
  • Migrated all color tokens to use the design system's teal-based palette
  • Brand colors now use teal-500 (#319795) as primary instead of custom green (#2c6e49)
  • Semantic colors updated to match design system (success, error, warning, info)
  • Added comprehensive typography tokens from design system
  • Added spacing scale tokens
  • Expanded font imports to include Roboto and Public Sans from design system

Color Mapping

  • Primary brand: #2c6e49 → #319795 (teal-500) - slightly more vibrant teal
  • Success: #16a34a → #22C55E - brighter green
  • Error: #dc2626 → #EF4444 - slightly adjusted red
  • Warning: #d97706 → #FEC601 - more vibrant yellow
  • Info: #2563eb → #1890FF - adjusted blue

Typography

  • Maintained Inter as primary font
  • Added Roboto, Public Sans, and Roboto Serif from design system
  • Added font size scale (xs through 4xl)
  • Added spacing scale (xs through 4xl)

Testing

✅ Build successful - all 21 pages generated correctly
✅ Backward compatibility maintained - existing components work with new tokens
✅ Method badges updated to use design system semantic colors

Visual Impact

The changes result in a slightly more vibrant color palette that better aligns with PolicyEngine's brand identity. The main brand color shifts from a darker forest green to a teal, which is more modern and matches the app-v2 design system.

Recommendations for Design System Improvements

Based on this integration, here are suggestions for the design system repo:

  1. Documentation surfaces: The design system could add specific tokens for documentation/content surfaces (current site uses a light background that's not explicitly in the palette)

  2. Code block theming: Consider adding explicit code block color tokens beyond just backgrounds

  3. Method/Status badges: Could add pre-defined badge color combinations for common HTTP methods

  4. Border radius: The design system has border radius tokens but the docs don't currently use them - could be good to document best practices

  5. Shadow tokens: No shadow/elevation tokens in the current design system - might be useful for cards/elevated surfaces

Closes #12

🤖 Generated with Claude Code

@PolicyEngine-Bot @claude
Integrate @policyengine/design-system tokens into docs
bb796f3 
- Added @policyengine/design-system package (v0.1.0)
- Migrated all color tokens to use design system palette
- Updated brand colors to use teal-based design system colors
- Added comprehensive typography tokens (fonts, sizes)
- Added spacing scale from design system
- Updated semantic colors (success, error, warning, info)
- Expanded font imports to include Roboto and Public Sans
- Method badges now use design system colors
- Maintains backward compatibility with existing component styles

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

4 similar comments
@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine policyengine bot mentioned this pull request Dec 18, 2025
Closed
@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

22 similar comments
@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

29 similar comments
@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

@policyengine
Copy link
Author

policyengine bot commented Dec 18, 2025

Sorry @PolicyEngine[bot], only members of the PolicyEngine/core-developers team can invoke Claude Code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Use the design tokens in policyengine-app-v2

4 participants

@nwoodruff-co @nikhilwoodruff @PolicyEngine-Bot