Packages
moon
2.79.4
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/vision_page.ex
defmodule MoonWeb.Pages.VisionPage do
@moduledoc false
use MoonWeb, :live_view
alias MoonWeb.Components.Page
alias MoonWeb.Components.VisionCard
data(breadcrumbs, :any,
default: [
%{
to: "/vision",
name: "Vision"
}
]
)
def render(assigns) do
~F"""
<Page theme_name={@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<h1 class="relative z-10 text-moon-72 font-semibold max-w-2xl text-bulma">
Build the best products faster
</h1>
<div class="relative z-10 flex flex-col gap-6 max-w-2xl">
<h6 class="text-moon-16 uppercase text-trunks">M I S S I O N</h6>
<p class="text-moon-18 text-bulma">
Create a tool that will reduce the time spent on routine and provide an
opportunity for inspiration and innovation
</p>
</div>
<div class="relative z-10 flex flex-col gap-16 text-bulma">
<VisionCard
header_image="/moon/assets/images/facing/vision/vision_front_card_header_text_1.png"
alt_header_image="Efficiency, not consistency"
subtext="Consistency is a result of efficiency, not the other way around. When the system is intuitive and empowering to use, consistency becomes an automatic by-product of adoption."
inner_card_text="A design system isn't a project. It's a product serving products."
name="Nathan Curtis"
company="EightShapes"
user_image="/moon/assets/images/facing/vision/testimonial_1.png"
heading="Efficiency"
sub_heading="A Design System ensures maximum returns on time spent on code and design, with minimal wasted energy, in order to achieve the same results."
supporting_text_items={[
~c"It improves the approach, minimising time spent creating products from scratch so it can be better spent solving problems.",
~c"It improves code through iteration, which is cheaper than writing quality code from scratch on demand.",
~c"It eliminates the need to repeatedly communicate design decisions that are documented and implemented.",
~c"It frees teams up from maintaining their own code, which is often duplicated."
]}
/>
<VisionCard
header_image="/moon/assets/images/facing/vision/vision_front_card_header_text_2.png"
alt_header_image="Dynamic capability + stability = agility"
subtext="Agility needs two things. One is a dynamic capability, the ability to move fast—speed, nimbleness, responsiveness. And agility requires stability, a stable foundation—a platform, if you will—of things that don't change."
inner_card_text="The more decisions you put off, and the longer you delay them, the more expensive they become."
name="Craig Villamor"
company="Google Maps"
user_image="/moon/assets/images/facing/vision/testimonial_2.png"
heading="Agility"
sub_heading="A Design System facilitates a product's agility by preventing stagnation on topics already discussed, agreed upon, documented and implemented."
supporting_text_items={[
~c"It shares the design and coding workload evenly between all team members.",
"It allows us to create prototypes, experiments and launch MVPs in less time. This makes sure elements like consistency and accessibility aren't ignored in the initial product in order to meet launch times."
]}
/>
<VisionCard
header_image="/moon/assets/images/facing/vision/vision_front_card_header_text_3.png"
alt_header_image="Quality over quantity"
subtext="Focus on the best solutions, quantity become as consolidation of Agility and Efficiency"
inner_card_text="Styles come and go. Good design is a language, not a style."
name="Massimo Vignelli"
company="Italian Designer"
user_image="/moon/assets/images/facing/vision/testimonial_3.png"
heading="Quality"
sub_heading="A Design System provides a systematic approach to managing code quality and design decisions."
supporting_text_items={[
~c"Being in constant evolution through iterations means the quality of each component continues to improve over time, particularly in comparison to new components.",
~c"The fact it is a modular, closed and versioned system reduces the risk of losses to both code and design.",
"It's easily isolated in order to assess its quality and measure its external integration."
]}
/>
</div>
<img
class="hidden xl:block fixed -top-56 -end-56 w-[650px] 2xl:-top-72 2xl:-end-72 2xl:w-[892px]"
src="/moon/assets/images/facing/moon.webp"
alt="Moon"
/>
</Page>
"""
end
end