Lighthouse Design System

yongmin ruucm

Lighthouse Design System

Lighthouse Design System

Lighthouse is Harbor School’s open-source design system for its integrated design & development workflow.


Lighthouse Design System provides a documentation site for more details.

Theme Switcher

Theme Switcher component is used to defining themes for targeted Framer canvas. Drop it to a specific page of Framer, and it applies with theme tokens to nearby components.

Theme Switcher gives a Light/Dark theme. If you want to use a custom theme, change the theme property to “Custom,” and upload the .json format file to Theme Switcher to get the components’ custom appearance.

Custom Theme could be made using the Theme Generator to make a custom theme of the system.

Overriding Component Properties

You can override all properties of components. The list of properties could be found on the documentation site.

Lighthouse Design System provides components overview gallery using Framer Web. It collects all components available in the system. View or Duplicate it depends on your purpose.


Tweet @ruucm

Issues Here

Latest Release

1.221.0 - 07/27/2021

  • Add object property controls to the HeaderNavigation component.
  • Support HTML strings on the HeaderNavigation component.

1.215.0 - 07/26/2021

  • Support HTML strings on typography components.

1.200.0 - 07/06/2021

  • Fix Toast Component’s transitions.

1.197.0 - 06/28/2021

  • Add Toast Component.

1.193.0 - 06/28/2021

  • Support overrides of the Button component on Property Controls.

1.185.0 - 06/18/2021

  • Add track, color properties to the ProgressBar component.

1.183.0 - 05/07/2021

  • Update readme.

1.182.0 - 05/07/2021

  • Fix graphics on framer canvas.

1.181.0 - 05/07/2021

  • Add Release notes.

Previous Releases

1.180.0 - 05/07/2021

  • Support Feather icons as the Button component’s startEnhancer & endEnhancer properties.

1.79.0 - 05/05/2021

  • Fix typography component’s margins.