{"id":28429841,"url":"https://github.com/appsilon/ui-styleguide","last_synced_at":"2026-02-06T21:02:45.081Z","repository":{"id":48415252,"uuid":"124087999","full_name":"Appsilon/ui-styleguide","owner":"Appsilon","description":"Styleguide for Apps, reports and charts","archived":false,"fork":false,"pushed_at":"2023-12-15T05:23:40.000Z","size":12977,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-30T11:55:25.741Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Appsilon.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-03-06T14:12:18.000Z","updated_at":"2018-03-09T12:10:32.000Z","dependencies_parsed_at":"2023-12-15T06:42:49.095Z","dependency_job_id":null,"html_url":"https://github.com/Appsilon/ui-styleguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Appsilon/ui-styleguide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Appsilon%2Fui-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Appsilon%2Fui-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Appsilon%2Fui-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Appsilon%2Fui-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Appsilon","download_url":"https://codeload.github.com/Appsilon/ui-styleguide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Appsilon%2Fui-styleguide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29175829,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T20:14:21.878Z","status":"ssl_error","status_checked_at":"2026-02-06T20:14:21.443Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-05T13:39:16.053Z","updated_at":"2026-02-06T21:02:45.057Z","avatar_url":"https://github.com/Appsilon.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"---\noutput: rmarkdown::github_document\n---\n\n\n```{r, echo = FALSE, message=FALSE}\nlibrary(ggplot2)\nlibrary(hrbrthemes)\nlibrary(dplyr)\n```\n\n# UI Style Guide\n\nThe goal of this document is to create beautiful and coherent style guide for Shiny apps, R markdown report and charts made by Appsilon.\n\nMinimum plan is to have:\n* color palettss\n* functions styling ggplots and plotly\n\nNice to have:\n* ggplot theme\n\n## What we need?\n\nColor palletss - 2 color paletss: 1 continuous data, 2 categorical data\nCharts theme - ggplot and plotly\n\n### Theme\n\nSince we use Maven Pro as your font, the Maven Pro theme was added to hrbrthemes(). You can download the package with the theme from [Appsilon hrbrthemes fork](https://github.com/Appsilon/hrbrthemes):\n\n`devtools::install_github(\"Appsilon\\hrbrthemes\")`\n\nand access theme `theme_ipsum_mp()`\n\n### Maven Pro\n\n```{r fig.retina=2}\nggplot(mtcars, aes(mpg, wt)) +\n  geom_point() +\n  labs(x = \"Fuel effiiency (mpg)\", y = \"Weight (tons)\",\n       title = \"Seminal ggplot2 scatterplot example\",\n       subtitle = \"A plot that is only useful for demonstration purposes\",\n       caption = \"Brought to you by the letter 'g'\") + \n  theme_ipsum_mp()\n```\n\n### Continous Palettes\n\n#### Appsilon viridis\n\n```{r echo = FALSE, fig.height=0.5}\npar(mar=c(0,0,0,0))\nappsilon_viridis \u003c- colorRampPalette(c(\"#15354a\",  \"#0099F9\", \"#fcd73d\"))\nplot(rep(1, 50), col = (appsilon_viridis(50)), pch = 15, cex = 10, axes = 0, ann=FALSE, ylim = c(0,1), main = \"a\")\n```\n\n#### Appsilon cividis\n\n```{r echo = FALSE, fig.height=0.5}\npar(mar=c(0,0,0,0))\nappsilon_cividis \u003c- colorRampPalette(c('#15354A','#163A52','#173E5A','#184362','#19476A','#194C72','#1A517A','#1A5683','#1A5B8C','#1A6094','#1A659D','#1A6AA6','#196FAF','#1874B8','#1779C1','#157ECA','#1384D3','#1089DD','#0C8EE6','#0694EF','#0099F9','#419CF1','#5C9EE9','#6FA1E0','#7EA4D8','#8BA7D0','#97A9C7','#A2ACBF','#ABAFB7','#B4B3AE','#BCB6A5','#C4B99D','#CBBC94','#D2BF8B','#D9C382','#DFC678','#E5C96E','#EBCD63','#F1D058','#F7D44B','#FCD73D'))\nplot(rep(1,50), col = (appsilon_cividis(50)), pch = 15, cex = 10, axes = 0, ann=FALSE, ylim = c(0,1))\n```\n\n#### Appsilon plasma\n\n```{r echo = FALSE, fig.height=0.5}\npar(mar=c(0,0,0,0))\nappsilon_plasma \u003c- colorRampPalette(c('#1424C6','#2E26C3','#3E27C0','#4A29BD','#542BBA','#5D2DB7','#6530B4','#6D32B1','#7334AE','#7A37AB','#8039A8','#863CA5','#8B3EA2','#91419F','#96449C','#9B4699','#9F4996','#A44C93','#A84E90','#AD518D','#B15489','#B55786','#B95A83','#BD5D80','#C1607D','#C56379','#C96676','#CD6873','#D16B6F','#D46E6C','#D87168','#DB7465','#DF7761','#E27A5D','#E67E59','#E98155','#ED8451','#F0874D','#F38A48','#F78D43','#FA903E'))\nplot(rep(1,50), col = (appsilon_plasma(50)), pch = 15, cex = 10, axes = 0, ann=FALSE, ylim = c(0.99,1))\n```\n\n#### Plot examples\n\nGoal: check how viridis examples are represented using propose continuous scale.\n\n```{r fig.retina=2, echo = FALSE}\n## Scatter plot example\ndat \u003c- data.frame(x = rnorm(1000), y = rnorm(1000), z = sample(-20:20, 1000, TRUE))\nggplot(dat, aes(x, y, colour = z)) + geom_point() + theme_ipsum_mp() -\u003e scatter_default\n\nscatter_default +\n  scale_colour_gradientn(colours = appsilon_viridis(100))\n\nscatter_default +\n  scale_colour_gradientn(colours = appsilon_cividis(100))\n\nscatter_default +\n  scale_colour_gradientn(colours = appsilon_plasma(100))\n\n## Hex example\nggplot(data.frame(x = rnorm(10000), y = rnorm(10000)), aes(x = x, y = y)) +\n  geom_hex() + coord_fixed() +\n  theme_ipsum_mp() -\u003e default_hex\n\ndefault_hex +\n  scale_fill_gradientn(colours = appsilon_viridis(100))\n\ndefault_hex +\n  scale_fill_gradientn(colours = appsilon_cividis(100))\n  \ndefault_hex +\n  scale_fill_gradientn(colours = appsilon_plasma(100))\n```\n\n```{r fig.retina=2, echo = FALSE}\nunemp \u003c- read.csv(\"http://datasets.flowingdata.com/unemployment09.csv\",\n                  header = FALSE, stringsAsFactors = FALSE)\nnames(unemp) \u003c- c(\"id\", \"state_fips\", \"county_fips\", \"name\", \"year\",\n                  \"?\", \"?\", \"?\", \"rate\")\nunemp$county \u003c- tolower(gsub(\" County, [A-Z]{2}\", \"\", unemp$name))\nunemp$county \u003c- gsub(\"^(.*) parish, ..$\",\"\\\\1\", unemp$county)\nunemp$state \u003c- gsub(\"^.*([A-Z]{2}).*$\", \"\\\\1\", unemp$name)\n\ncounty_df \u003c- map_data(\"county\", projection = \"albers\", parameters = c(39, 45))\n\nnames(county_df) \u003c- c(\"long\", \"lat\", \"group\", \"order\", \"state_name\", \"county\")\ncounty_df$state \u003c- state.abb[match(county_df$state_name, tolower(state.name))]\ncounty_df$state_name \u003c- NULL\n\nstate_df \u003c- map_data(\"state\", projection = \"albers\", parameters = c(39, 45))\n\nchoropleth \u003c- merge(county_df, unemp, by = c(\"state\", \"county\"))\nchoropleth \u003c- choropleth[order(choropleth$order), ]\n\nggplot(choropleth, aes(long, lat, group = group)) +\n  geom_polygon(aes(fill = rate), colour = alpha(\"white\", 1 / 2), size = 0.2) +\n  geom_polygon(data = state_df, colour = \"white\", fill = NA) +\n  coord_fixed() +\n  theme_minimal() +\n  ggtitle(\"US unemployment rate by county\") +\n  theme_ipsum_mp() +\n  theme(axis.line = element_blank(), axis.text = element_blank(),\n        axis.ticks = element_blank(), axis.title = element_blank()) -\u003e map_default\n\nmap_default +\n  scale_fill_gradientn(colours = appsilon_viridis(100))\n\nmap_default +\n  scale_fill_gradientn(colours = appsilon_cividis(100))\n  \nmap_default +\n  scale_fill_gradientn(colours = appsilon_plasma(100))\n```\n\n\n### Categorical\n\n```{r, fig.retina=2, echo = FALSE}\n\nggplot(mpg, aes(class)) +\n  geom_bar(aes(fill = factor(trans))) +\n  theme_ipsum_mp() +\n  scale_fill_manual(values = c(appsilon_cividis(5), appsilon_plasma(5)), limits = unique(mpg$trans))\n\ndf2 \u003c- data.frame(week = c(1:10, 1:10),\n                  value = c(c(4,5,6,3,5,7,9,6,3,4), c(10, 18, 12, 7, 12, 9, 9, 7, 14, 16)),\n                  label = rep(c(\"label1\", \"label2\"), each = 10))\n\ncolors_cividis \u003c- appsilon_viridis(2)\nggplot(data = df2, aes(x = week, y = value, group = label, colour = label)) +\n  geom_line(linetype = \"dashed\", size = 1.2)+\n  geom_point(size = 3) +\n  theme_ipsum_mp() -\u003e base_line\n\nbase_line +\n  scale_colour_manual(values = colors_cividis)\n\nbase_line +\n  scale_colour_manual(values = appsilon_plasma(2))\n```\n\n\n## What we considered?\n\n* Coherent with Appsilon branding\n* Print friendly\n* Robust to colorblindness\n* Pretty\n\n## What we chose?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappsilon%2Fui-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappsilon%2Fui-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappsilon%2Fui-styleguide/lists"}